어떤 에러? 프로젝트를 진행하며 내려준 props를 뿌려주다가 input 관련 에러가 발생했다. Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 원인 파악 위의 콘솔들을 보니 페이지 진입 시에는 괜찮은데, 새로고침 했을 때 uid를 가져오는 시간이 있어 userDat..

Today, What I learned? UI를 먼저 작업하면서 input 태그 중 체크박스와 라디오버튼을 커스텀해야겠다 생각이 들었는데, 기본적으로 잡혀있는 UI를 날리면서 어떻게 디자인대로 구현할 것인지에 대한 삽질 시간이 좀 길었다. 결론적으로 커스텀에 성공했고 어떻게 해놓았는지 기록해보려 한다!.. 우리 프로젝트는 이모션을 쓰고 있지만 Styled-components 형식과 동일하게 사용 중이라는 점.. input type='radio' 완성된 모습은 이렇다. 어떻게 커스텀을 할 것이냐? 라벨의 htmlFor와 인풋의 name이 동일할 경우 라벨을 누르기만 해도 인풋이 동작된다는 점을 이용할 것이다. {career.map((career) => ( {career.name} ))} 여기서 중요한 것은..

Today, What I learned? 우리 프로젝트의 패키지 관리 시스템 Yarn Berry에 대해서 정리해 본다. Yarn Berry는 현재 토스 프론트엔드팀에서도 사용 중인 패키지 매니저!.. Yarn Berry ? 가장 범용적으로 사용되고 있는 npm의 경우 아래와 같은 문제점이 있다. 비효율적인 의존성 검색 (모든 패키지를 node_modules 내부에서 탐색함) 환경에 따라 다른 동작 (어떤 node_modules를 포함하고 있느냐에 불러올 수 있는 의존성이 다르다.) 크고 복잡한 node_modules 구조 등등.. Yarn Berry는 이런 문제들을 Plug'n'Play라는 전략을 통해 해결한다. 관련해서는 토스 기술블로그에 정리가 아주 잘 되어있다!.. https://toss.tech/..

Today, What I learned? 팀 프로젝트를 진행하며 각자 기술 스택을 하나씩 맡아서 어떤 스택을 선택하면 좋을지 고민해 보는 글을 작성해 보기로 했다. 나는 스타일링과 관련하여 Emotion, Styled-Component, SCSS를 비교해 보았는데 좀 다듬어서 올려본다. 🥊 Emotion vs Styled-components 📍 기능 비교 전반적으로 두 라이브러리의 기능은 거의 비슷하다고 볼 수 있다. 참고: https://github.com/jsjoeio/styled-components-vs-emotion GitHub - jsjoeio/styled-components-vs-emotion: a short doc comparing the popular CSS-in-JS libraries s..

2월 첫째 주를 보내며 프로젝트도 끝나고 next.js를 살짝 공부해 보는 한 주를 보냈다. 그리고 2월이 되었는데..... (왜 벌써) 정말 눈 깜짝할 새 한달이 가는 것 같다 ^^.. 이제 최종 프로젝트만이 남았다 ㅠㅠ 👀 Fact 프로젝트를 잘 마무리했다. 우리 프로젝트의 상세페이지 링크 문제점 실마리를 찾았다. 코드리뷰를 바탕으로 리팩토링했다. next.js를 살짝 공부했다. 타입스크립트로 리팩토링 했던 투두리스트를 recoil로 리팩토링 했다. 챌린지팀 회의를 했다. 🙂 Feeling 프로젝트가 잘 마무리되어 다행이다!.. 상세페이지 관련해서 튜터님을 찾아간 보람이 있었다! 시간 넉넉할 때 꼭 리팩토링 해봐야지 지난 네이티브 프로젝트 때 우리 팀은 코드리뷰가 없었는데 이번에 받아서 좋았음! ne..

Today, What I learned? 코드리뷰 피드백 중 하나였던 상대경로를 절대경로로 변경해 보기 도전 과정을 기록해 본다.. 👀 타입스크립트에 CRA로 만들어진 패키지다보니 변경해 보기가 또 여간 쉬운 일이 아니었다!.. 첫 시도 처음엔 tsconfig.json에 baseUrl과 paths를 추가해주었다. 하지만 CRA로 생성된 타입스크립트 프로젝트인지라 단순히 tsconfig.json에 몇몇 설정을 추가해 주는 것으로 끝나지 않았다. { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } ... } } 왜냐!.. CRA는 기본적으로 간결한 디렉터리 구조를 위해 웹팩 설정이 들어있는 파일들을 숨겨놓고 있다. 이 파일들을 커스텀 하..

Today, What I learned? 타입스크립트와 리덕스 툴킷으로 리팩토링 했던 투두리스트를 리코일로 한번 더 !.. 리팩토링해보았다. (익혀보기에 투두리스트만한 것이 없다..) 리코일에 대해 간략하게 정리해보고 리팩토링 과정을 기록한다. Recoil 리코일은 facebook에서 출시한 리액트를 위한 상태관리 라이브러리다. 많이들 사용하는 리덕스보다 보일러 플레이트가 적고, 액션, 리듀서, 디스패치.. 와 같이 알아야 할 기본 개념이 많은 리덕스에 비해 상대적으로 쉽게 익힐 수 있다. 또 사용방법이 useState 훅을 사용하는 것과 비슷하기 때문에 쉽게 사용할 수 있는 듯하다. 리덕스에선 비동기 작업을 위해 Redux-thunk나 Redux-saga 같은 미들웨어를 사용해야 하기 때문에 좀 더 어..

Today, What I learned? Next.js에서 SSG와 ISR 방식으로 페이지를 어떻게 생성하고 동적으로 라우팅 할 수 있을지 정리해 본다. CSR과 SSR의 개념은 그래도 들어봤지만, SSG와 ISR이라는 개념은 처음 접했다!.. 먼저 SSG와 ISR에 대해 정립해 두어야 확실한 이해를 할 수 있을 것 같다. SSG(Static Side Generation) SSG는 이름 그대로, 정적 페이지를 생성하는 것이다. 빌드하는 순간 서버에서 페이지를 렌더링 한다. 페이지 요청이 들어왔을 때 이미 렌더링 된 정적 페이지를 반환한다. 페이지에 구성된 데이터들이 변하지 않는 경우에 유용하다. 반대로, 페이지가 업데이트된다면 그때마다 다시 빌드가 필요하다는 점이 있다. getStaticProps()를 ..

Today, What I learned? 리액트 프레임워크인 Next.js에 대한 공부를 시작했다. Next.js가 어떤 이유로 도입되게 되었는지와 리액트 프로젝트 구조와 다른 점들에 대해 정리해 본다. Next.js 는 어쩌다가 탄생했을까? Next.js는 리액트를 기반으로 하는 서버사이드 렌더링 프레임워크(SSR)다. 기존 리액트는 클라이언트 사이드 렌더링(CSR)인데, CSR은 SPA를 바탕으로 새로고침 없이 웹페이지를 이용할 수 있는 유저의 편의성이 개선되었지만 자바스크립트 번들 사이즈가 커져서 초기 로딩속도가 증가되었다는 단점이 있었다. 이를 개선하기 위해 현재 페이지에서 필요한 자바스크립트 파일만을 로딩하는 코드분할(Code Split, Lazy-loading)을 적용하기 시작했다. 하지만!...

프로젝트를 마치며 좋은 팀원들 덕에 진행 기간 동안 꽤 즐겁게 작업했던 프로젝트 바운스가 오늘 발표를 끝으로 마무리되었다. 우리가 할 수 있는 범위 안에서 만족스러운 퀄리티의 프로젝트를 완성한 것 같다. 우리 프로젝트 레포지토리는 이쪽! https://github.com/kimwonjuun/no-sunday GitHub - kimwonjuun/no-sunday: I really want to rest on sunday. I really want to rest on sunday. Contribute to kimwonjuun/no-sunday development by creating an account on GitHub. github.com 이번 프로젝트도 좋았던 부분과 피드백을 바탕으로 개인적으로 아쉬웠..