전체 글204 5월 3주차 TIL (자판기 구현 2주차 회고) 5.16 (월) 회고 PR 리뷰 받은것을 보면서 리팩토링을 진행하고 컴포넌트를 분리하였다. 5.17 (화) 회고 코드스쿼드 오프라인 공간에가서 구현하였다. 사실 사람 보러 갔다. 그런데 확실히 같은 공간에 있으니 들려오는 얘기를 들으면서 그것에 대하여 물어보고 왜 그러한 개념을 도입하였는지 얘기를 나눌 수 있었다. 요즘 관심은 useReducer를 왜 도입하여야하는지 였는데 도트에게 왜 도입했는지 물어보고 도트 코드도 잠시 들여다 보았다. 너무 더워서 쉬는시간에 카페에서 음료를 사서 놀이터에서 다른 팀원들과 대화를 나누다가 useReducer에 대하여 얘기를 나누면서 왜 도입하여야 하는지 생각을 정리할 수 있었다. 이런 저런 얘기를 나누었지만 useReducer가 기억에 남는것은 확실히 그것이 궁금했나보.. 2022. 5. 16. 다른 repository의 커밋을 현재 repository에 합치기 react 프로젝트를 하다가 boilerplate만들어둔것을 합치고자 하였습니다. 하지만 바로 fetch, merge를 하는 경우 두 repository의 히스토리가 다르기 때문에 오류가 발생합니다. git remote add boilerplate https://github.com/HongJungKim-dev/js-build-env-boilerplate.git git fetch boilerplate --no-tags git merge --allow-unrelated-histories boilerplate/main 이와 같이 원격주소를 추가해주고 해당 레포의 히스토리가 다르더라도 merge할 수 있도록 명령하면 문제 없이 merge할 수 있습니다. 2022. 5. 10. 5월 2주차 TIL(자판기 구현 1주차 회고) 5.09 (월) 회고 지난주 미션을 npm으로 배포하였는데 배포하고 install해서 사용해보면서 발견한 작은 오류를 고치고 props를 넘겨주지 않으면 default 값을 정하여 그것이 예시로 출력되도록 개선하였다. npm으로 배포하는게 내가 구현한것을 모으는 컬렉션 같아서 재미있고 다음에도 사용할 수 있게 만들었다는것이 뿌듯하다. 5.10 (화) 회고 webpack으로 설정하면서 사소한 오류들로 시간이 많이 걸렸다. webpack도 더 공부해야겠다. 5.11 (수) 회고 작은 컴포넌트에 집중하여서 컴포넌트에 어떤 props를 주어야하는지 고민하고 싶어서 탑다운 방식이 아니라 바텀업 방식으로 진행을 시도하여 버튼 먼저 하였다. 스크린샷에 나온것처럼 ui테스팅을 할때에 App에서 해당 코드를 작성해서 실.. 2022. 5. 9. 5월 1주차 TIL 이번주 목표 : 코딩테스트 꾸준히 풀기, carousel을 개선하여 오픈소스 기여해보기 월요일 코테를 풀고 토익을 풀었다. 자기소개서 및 프로젝트를 구경하였다. 화요일 코테를 풀고 토익을 풀었다. 자기소개서 및 프로젝트를 구경하였다. 수요일 기존의 carousel을 어떻게 개선해야 다른 사람이 오픈소스에서 가져와서 그대로 사용할 수 있을지 고민이 되었다. 그래서 기존 프로젝트 내에서 우선 개선하고자 하였다. 그렇다보니 기존 프로젝트와 관련된 props, 함수들이 얽혀서 오히려 헷갈렸다. 그래서 새로운 프로젝트에서 간단한 임시데이터를 사용하여 carousel만을 다루어 보았다. 목요일 기존의 carousel은 특정 px로 내부 li의 이미지 크기를 정하였는데 이것을 범용적으로 사용할 수 없다고 생각하였다... 2022. 5. 2. React 음식 정보 렌더 컴포넌트를 재활용하도록 만들 수 있을까? 처음 설계는 빨간색, 초록색 박스처럼 각각의 컴포넌트를 만들고자 하였습니다. (같은 색은 동일한 컴포넌트 입니다) 하지만 이 박스들도 재활용할 수 있도록 만들 수 있다고 생각하여 다음과 같이 하나의 컴포넌트로 만드는 대신에 공통되는 외의것인 카테고리 타이틀, 탭은 주입받을 수 있도록 하였습니다. const MainCard = ({ mainCardData }) => { return ( ); }; const SubCard = ({ mainCardData }) => { return ( ); }; 카테고리 타이틀, 탭의 컴포넌트 자체를 위와 같이 CardContainer에 주입하였습니다. 그리고 아래와 같이 CardContainer에서 children으로 태그들을 받도록.. 2022. 4. 24. 리액트 app 설계 컴포넌트 계층 구조로 그려서 나누기 state사용없이 정적인 UI, 규모가 크지 않다면 하향식 최소한의 state 찾기 부모로 부터 props로 전달 받는 경우 시간이 지나도 변하지 않는 경우 컴포넌트 내 다른 state나 props로 구할 수 있는 경우 state가 아닌 경우 state가 어디에 있어야 할지 찾기 state 기반으로 렌더링하는 모든 컴포넌트를 찾아서 가장 최상위의 컴포넌트에 위치 역방향 데이터 흐름 추가하기 상위 컴포넌트의 state를 업데이트하는 코드를 담은 콜백함수를 하위 컴포넌트로 전달하여 하위 컴포넌트의 state가 변화해야하는 위치에서 호출 참고 : https://ko.reactjs.org/docs/thinking-in-react.html 2022. 4. 19. 이전 1 2 3 4 ··· 34 다음
