일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 후기
- useEffect
- 라우팅
- 동기
- S3
- 항해99
- Redux
- route
- 스파르타코딩클럽
- updater
- 접근 제한 라우팅
- CI/CD
- Preview
- imagePreview
- 비동기
- 개발
- Github Actions
- routing
- 미리보기
- rendering
- 배포
- 7기
- react
- qwe
- setstate
- 브라우저 렌더링
- socket.io
- previousState
- 채팅방
- FileReader
- Today
- Total
목록2022/05 (34)
삐옹
증상 잘 작동하던 추가하기 버튼이, 버킷리스트의 이행여부를 체크할 수 있도록 Redux의 initialState에 completed 키값을 추가해준 뒤부터 버튼을 누르면빈 태그만 반환하기 시작 해결방법 click이벤트 발생한 태그 확인 click이벤트 함수 : useRef로 접근한 value값이 문제일까 싶어 콘솔을 찍어보았더니 current객체에 value가 잘 받아와진다. bucket.js(Redux파일) 내 createBucket 함수 : value값도 잘 넘어오고 action객체를 생성하는 코드에도 이상은 없다. 여기까지 문제가 없었다는건 분명 reducer에서 문제가 난거라고 확신했다. reducer 안에서 type이 create인 객체 [X] action 타입이 "bucket/CREATE"가 ..
배운것 React React Redux의 흐름 리덕스와 컴포넌트 연결 *useDispatch(수정해줘) ,useSelector(갖다쓸게) - action을 부른다 *??? - reducer *새로운 상태값 만들어 반환 - store *reducer (+ options)들을 combine 하여 createStore - 컴포넌트에서 데이터 사용 useRef useRef를 쓰는 이유는 관리하는 변수 값이 바뀐다고해서 컴포넌트가 리렌더링되지 않기 때문입니다. 고유한 값을 설정해야할 떄 유용합니다(이를테면 id 값을 설정 할 때).리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 ..
배운 것 리액트에서 state를 다루는 법에 관하여 배웠다. 배열, ref 이것저것 배울것도 어려운것도 참 많다ㅠ 리액트 리덕스를 배우고 있다. 아쉬운 것 저번 주엔 체력적으로 많이 지쳐있다고 느꼈다. 이번 주말에 잘 쉬고 와서 다행히 많이 회복이 되었지만 앞으로는 평소에 체력 비축에 좀더 신경써야 할듯 싶다. 너무 늦게 자고 일찍 일어나는 이런 생활이 당장은 이득이 된다고 생각할 수 있지만, 조금만 멀리 생각해보면 오히려 해가 된다. 이제 겨우 4주차다. 주어진 시간에 '집중' 과 '꾸준히'를 항상 마음에 새기고 계속하자. 🌝 집중력 부분에서 아쉬운게 많은 주차였다. 키워드 DOM(Document Object Model) 프로그래밍 언어가 HTML, XML같은 문서를 조작하여 상호작용하기 위한 API입..
배운 것 React 언제 컴포넌트를 만드는게 좋은 것인가? html을 반복해야할 때, 큰 페이지들, 자주 변경되는 것들 객체타입 state 변경 시 꼭 복사본을 만들어 변경한다. 그렇지않으면 리액트가 새로 들어올 변수 감지하지 못 하기 때문이다(원본에 사본을 넣어줄 때 두 개의 참조값이 달라야 리액트는 변경을 감지 할 수 있다). 이것을 객체의 불변성을 지킨다 라고 한다. 객체의 불변성을 지켜야 하는 이유는 2가지가 있다. 앞서말한 것 처럼 원본데이터의 불변성을 지켜주어야만 리액트 컴포넌트에서 변경을 감지 할 수 있다. 그럼으로써 리렌더링이 진행된다. 두 번째는 컴포넌트 업데이트 성능 최적화라고 한다. whatever. [name] : value -> name 값을 가진 키 값: value 사용 예)하나..
Object는 알다가도 모를 놈이다. 복사한다고 했는데, 원본 바뀐다고 얘도 똑같이 바뀌면 어쩌자는거지. 에 대한 해결법이다. 상황 user1에 있는 데이터를 user2에 복사한 뒤 user1에 수정이 일어났을 때 무슨 일이 일어날까. (user1의 데이터 타입이 *원시형일때와 **객체형 일 때 두가지 상황으로 나눠 설명합니다.) *원시형(primitive type) String Boolean null undefined symbol (ES6에서 추가됨) **객체형(object/reference type) object 원시 타입 데이터 복사 user1에 "mike"를 넣고, user2에 user1을 복사 해줍니다. let user1 = "mike"; let user2 = user; console.log(u..
배운 것 주특기 입문 주차의 개인과제가 마감날이었다. 아쉽게도 마지막 기능을 남겨놓고 미완성인 채로 배포를 하고 제출을 했다. 리액트로 일주일 간의 평점을 남기는 프로젝트 만들기였다. 처음 과제 가이드라인을 봤을 땐 생각보다 금방 끝나겠거니 생각했지만, 역시나 예상을 빗겨갔다. 리액 기본 강의들에서 배웠던 내용들은 리액트의 아주 기본적인 부분이었는데, 이걸 또 살짝쿵 활용하자니 쉬운 일이 아니었다. 나름 혼자 해보겠다고 코드를 짜다보니 아주 사방팔방 지저분하다. 이거 리팩토링 해보아야겠다. 개발자는 망가뜨린 장난감(?) 수 만큼 성장한다는 글을 보았다. 개인과제 때 무엇을 가장 배웠냐고 물어본다면 나는 기본기의 중요성이라고 말할 것이다. state, props, setState, useState, use..
주의 이 글을 함수형 컴포넌트 + react hook API를 기반으로 작성했습니다. HOOK class형 컴포넌트로 작성하지 않고 state와 다른 react기능들을 사용할 수 있게 해주는 기능. State : 상태값이 저장된 변수 useState : state 변수와 state 변수를 변경하는 함수를 반환 Side effect(effect) : 화면이 렌더링 된 이후에 처리되어야 하는 부수적인 것들. 예) API 호출 : 요청 즉시 1차 렌더링 함으로써 UX 측면에서 좋다 종류 정리가 필요한 것 정리가 필요하지 않은 것(network request, DOM 수동조작, 로깅 등) useEffect useEffect의 기본 형태입니다. useEffect(() => { // 여기에 렌더링 이후 실행할 ef..
이번엔 안 떨릴 줄 알았는데 오산이었다. 생각보다 많이 들으러 와주신걸 보고 심장이 너무너무 빨리 뛰기 시작했다. 심호흡을 했지만 발표를 하던 내 목소리는 분명 떨고 있었을 것 같다. 이번에 여유있게 준비를 하고있었는데 시간이 가까워지니 뭔가 조바심이 들어 처음했던 실수를 반복해버렸다. 내 머릿속에 내용을 제대로 넣지 못한 점. 어떻게 말할지, 자료를 어떻게 만들지 중요한게 아니고, 내 머릿속에서 제대로 이해하고 있어야한다. 3차 때는 내용들의 flow를 머릿속에서 구조화시키는 연습을 해보자. 내일은 리액트 과제 마무리 달려 문제 자체가 이해가 안가는 알고리즘 문제를 만났다. 그런 문제는 애초에 지문을 이해 못했기 때문에 문제의 접근방식을 생각해보는건 쓸모가 없다. 문제를 빠르게 정확하게 파악하는게 최우..
1주차 REST Api 발표에 이어서 2주차 프로세스와 스레드를 신청하게 되었다. 나는 컴퓨터 사양을 전혀 볼 줄 모르는 컴퓨터까막눈이다. 아 램다익선.. 인텔이랑 m1, 코어에 뭐 숫자가 붙어있고, 램이 몇이다 어쩌구저쩌구. 뼛 속까지 문돌이인 내게는 너무나 생소히게 느껴지는 용어들이라. 대체 뭘 나타내는걸지 궁금증을 항상 갖고있었는데..(그렇다고 찾아본 적은 없다) 그런 부분에 있어 이 주제가 조금은 도움이 되지 않을까 싶어 프로세스와 스레드를 맡아 준비하게 되었다. 목차 용어정리 프로세스 프로세스 상태(작업 흐름) 프로세스 구조 멀티 프로세스 스레드 스레드 구조 멀티 프로세스 vs 멀티 스레드 멀티코어 멀티스레딩 요약정리 용어 정리 프로그램 : 실행되기 전의 실행파일. 어떤 작업을 위해 운영체제 위..
BrowserRouter : 웹 브라우저가 가지고 있는 주소 관련 정보를 props로 넘겨준다. 최상위 컴포넌트에서 감싸준다.() 리액트 개인 과제를 진행하면서 오늘 날짜로부터 일주일 간의 요일을 매일 갱신해주는 코드를 짰다. 고민하다가 도저히 답이 안나와서 같은 조의 윤영님께 도움을 받아 로직을 짤 수 있었다. 문제는 알고리즘이 이해가 가지 않는다는 것.. 애당초 접근방법조차 생각이 나지 않았는데 이런 코드를 짜는 사람들이 너무 대단하게 느껴졌다. 나도 알고리즘 잘 하고싶다. 우리 조 조원들을 대상으로 리액트 팀 과제 발표를 했다. 아무래도 항해톡1차 때 마주했던 인원에 비하면 매우 적은 인원을 대상(3명)으로 하는 발표였기에 편한 마음으로 발표를 했다. 팀원분들이 내 발표를 재밌게 봐주시고 도움이 된..