fpzmfks 님의 블로그

오늘은 미완성이나마 Router 만들기 과제를 마쳤다. 그리고 useSyncExternalStore 사용하기 과제를 받았다... 과연 챌린지반인지 점점 과제가 어려워져서 개인과제를 진작 마치지 않았으면 어쩔 뻔 했는지 모르겠다. 오늘은 아티클을 읽으면서 과제를 하는데, 기존에 배운 것 중에도 아티클 내에도 없는 것으로 코드를 완성해야되어서 한참을 고민을 하다가 타임아웃을 받은 참이다.  어쩔 수 없는 일이니만큼 나중에 질문시간을 활용해서 답을 찾을 수 있으면 좋을 것이다. 다만 주요 목표인 Router 만들기 자체는 성공했기 때문에 오늘 이렇게 글을 쓸 수 있게 되었다.  아래가 가장 핵심적인 함수가 담긴 객체를 반환하는 Router 함수이다. fragment를 인자로 받아서 경로를 변경하는 naviga..

과제도 다 끝내고, 제출까지 했으니 오늘은 챌린지반 과제로 시간을 모두 보냈다. 이전에 하던 과제는 오전 중에 비교적 빠르게 완료할 수 있었는데, 오늘 새로 제시된 과제가 또 굉장히 어려워서(혹은 디버깅을 하지 못해서) 시간이 많이 지났다. 채 완료하지 못한 오늘의 과제는 내일 다루기로 하고, 이번에는 지난 번 과제인 'reducer 만들기'를 정리해볼까 한다.  먼저 리듀서의 형태부터 소개하도록 하겠다. 아래가 리듀서이다. state와 action을 인자로 가져와서action 객체의 type 값에 따라state를 변환하여 저장한다. export const initialState = [];export const todoReducer = (state, action) => { switch (action.t..

어제 context API를 이용한 리팩토링을 한 이후 오늘 오전까지 이어서 도전과제를 전부 달성했다. redux-toolkit, memoization, toaster을 사용하여 리팩토링, 불필요한 리렌더링 막기, alert 창 개선이다.  redux-toolkit 리팩토링은 이전에 context api로 리팩토링한 것들을 활용하면 되었기에 개선 그 자체는 크게 어렵지 않았고, memoaization을 처음 사용해봤는데, React.memo(컴포넌트)의 형식으로 코드를 조금만 수정해도 잘 작동을 하는 것을 확인할 수 있었다. toaster를 사용해서 alert 창을 개선하는 것도 간단했는데, 를 어디에 두어야하는지만 잘 알고 있으면 어렵지 않았다.  다만 문제는 오늘 튜터님이 내주신 챌린지반 과제로 re..

오늘은 이전에 props drilling 방식으로 만든 개인과제 결과물을 context API를 이용하여 리팩토링을 하여서 개인과제를 완성하였다.  context API를 사용한 결과 props를 사용하는 빈도가 크게 줄었고, 원하는 곳에서만 원하는 값을 불러올 수 있게 했다. 그리고 또 하나, 이전에는 특정한 위치에서만 작동하도록 작성한 추가/삭제 함수 또한 리팩토링 하여서 함수가 상위 컴포넌트로 올라와 있어도 작동할 수 있도록 하였다. 때문에 명시적으로 전달해야되는 값의 양이 줄어서 코드가 보다 깔끔해질 수 있었다.  아래는 삭제 함수 리팩토링이다. 추가 함수는 너무 길어서 생략했다. //기존 삭제 함수const deleteData = poke.filter((list) => { return !(..

오늘은 챌린지반 수업을 듣고 관련 과제를 하고, 다른 사람의 라이브코딩을 보면서 시간을 보냈다. 과제제출까지 일주일이 남았는데 60%를 끝냈기 때문에 보일 수 있는 여유였다. 특히 다른 사람의 코드를 보는 것이 재미있었는데, map을 돌릴 때 list에서 특정 값만 가지고 와서 물려주지 않고도 list 자체만으로도 컴포넌트를 구성하는 것이 인상적이었다.또 card에서 추가/삭제 버튼을 구성하는 방법 또한 흥미로웠는데, 상위 컴포넌트에서 해당 card 컴포넌트를 불러올 때 물려주는 값에 따라서(그 분은 true false로 props를 다르게 했다) 다른 버튼이 반환되도록 코드를 짠 것이다. 여태까지는 props를 물려줄 때 키와 값을 똑같이 하는 것만 해왔기 때문에 이렇게 키는 똑같이 하되 호출 지점에 ..

리액트를 배우러 온 만큼, 리액트를 더 잘 이해하기 위해 리액트 프로젝트 생성에 관한 강의를 들은 것을 정리하려고 한다. 먼저 내가 가장 먼저 리액트 프로젝트 생성에 대해 배운 것은 cra로 생성하는 방식이었다. 하지만 cra로 리액트 프로젝트를 생성하는 것은 시간이 오래 걸리기 때문에(+프로젝트 설정을 건드리기 힘들다) vite가 권장된다고 한다. 과연 vite는 프로젝트 생성 속도가 빨라서 여태껏 리액트를 다룰 때는 이 방법을 사용했다.// npm과 yarn이 설치되어 있어야 함yarn create vite [프로젝트 이름] --template reactcd [프로젝트 이름]yarn//-----여기까지가 프로젝트 기본 세팅----이후로 리액트 라이브러리// 스타일드 컴포넌트, 리덕스, 리덕스 툴킷, ..

오늘 바로 개인과제를 60% 완성했다. 이번 과제는 브런치를 따로 파서 같은 프로젝트를 2가지 버전으로 작성해야해서 그렇지, 오늘 2가지 버전 중 1가지 버전을 완성했으니 거의 완성했다고 보아도 될 것이다.  내가 먼저 완성한 버전은 props-drilling이 발생하는 버전이다. props-drilling이란 부모요소에서 선언된 데이터 등이 자식요소에서 사용되기 위해 props로 전달되는 과정이 불필요하고 번거로운 것을 나타낸다. 예를 들어 1-2-3-4-5의 순으로 부모요소에서 자식요소가 있을 때 1에 있는 값을 5로 전달하려면 중간의 2-3-4 또한 자신에게 불필요한 값을 부모로부터 전달받아야 한다. 이러한 불편한 구조를 개선하기 위해 useContext를 사용하는 것이 남은 과제이다.  오늘 한 ..

주말을 이용해서 지급받은 강의를 모두 보고, 오늘부터 개인과제를 시작하였다. 이번 개인과제는 포x몬 정보 ui를 만드는 것으로, 이번에 알게된 리액트 라이브러리들을 적극 활용하여 작성하여야 한다.  일단 오늘은 ui 배치와 state 저장까지 했다.  추가 버튼을 눌러서 console로 찍힌 값들을 저장하는 것까지는 되었는데, 이걸 헤드 쪽에 출력하려고 하면서 문제가 생겼다. const AddForm = ({ poke, setPoke }) => { const data = poke || null; const deleteData = poke.filter((list) => { !(list.id === data.id); }); console.log(data); if (data) { retur..

어제 오늘 참 많은 일이 있었다... 어제 지급한 강의를 오늘 11시까지 다 보라는 줄 알고 카페인을 드링킹하며 강의를 보다가 카페인의 힘으로 그만 밤새 잠들지 못했다. 평소 커피를 안 마시다보니 특히 강하게 약발이 든 모양이었다. 24시간을 넘어서 지금 막 한계에 다다른 참이다.  그래도 어찌저찌 강의의 2/3는 잘 이해한 것 같았다. 대부분은 내가 리액트 입문 강의를 듣고 궁금하게 생각했던 것이라 호기심에 더 잘 들을 수 있었던 것도 같다.  먼저 리액트에서 css를 적용하는 것과 관련된 라이브러리, styled-components이다. 이전에 의문으로 생각했던 것이, 리액트 입문 주차에서 튜터님이 제시해주신 방법 중 어떤 것도 개발자에게 있어서 썩 좋은 방법이라는 생각이 들지 않았던 것이다. 기껏 ..

오늘은 리액트 입문 메달리스트 개인과제 재제출 날이고, 동시에 리액트 챌린지반 수업일이다. 나는 전 날에 도전과제까지 다 마쳤기 때문에 개인과제 재제출을 할 것이 따로 보이지 않았는데, readme와 테이블 출력에 있어서 고칠 점이 있어서 반영하여 재제출을 했다.  먼저 readme를 살펴보자면, 이전에는 정말 간결하게 글로 컴포넌트의 구조를 설명했지만 매니저님이 제시해주신 모범사례를 참고해서 트리 형태로 컴포넌트의 구조를 그려보았다. 또 주요 기능과 서브 기능을 나누어 제시하고 컴포넌트의 어느 위치에서 작동하는지 표시했다. 아래가 개선한 readme이다.  App.jsx├─Header.jsx├─│ ├─MedalInput.jsx 추가 업데이트 삭제 또 이렇게 다른 사람의 코드를 살펴보니 아주 쉽게 테이블..