Today, What I learned? 마이페이지 구현 중!.. 마이페이지 접속 시 가져오는 유저 정보를 렌더링 해주는 과정에서 기술 스택 데이터를 핸들링하던 중에 막히고 말았다. 개발 기술스택은 잘 나오고 있지만 포지션과 상관 없이 기획, 디자인 부분이 중복되어 나타났기 때문..😨😨😨 (NOOOOOooo...) 위 사진에서는 잘렸지만 디자인, 프론트엔드가 선택되어 있는 상태였다. 원하는 대로 되려면 유저의 선택된 포지션에 따라서 구분될 필요가 있고, 유저가 기획이나 디자인 둘 중 하나를 선택했다면 해당 포지션의 스택이 활성화되도록 해야 한다!.. 기존 코드는 다음과 같았다. {skills.map((skill: string) \=> { const isChecked \= checkedSkills?.inc..

어떤 에러? 프로젝트를 진행하며 내려준 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..

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)을 적용하기 시작했다. 하지만!...

Today, What I learned? 이번 프로젝트에서 검색기능을 구현했던 과정을 기록한다. 완성한 기능은 이렇다. 이미지가 너무 작지만!.. 한글, 영어 대문자, 소문자가 모두 검색이 가능하도록 구현했다. 검색기능을 구현하기 앞서서, 이번 프로젝트의 검색 기능은 앞서했던 프로젝트와는 조금 다른 성격의 검색 기능을 구현해 보기로 했다. 우리 프로젝트는 저 때 20명 정도의 아티스트 목록을 가지고 있었고, (며칠 사이 조금 더 늘었음) 어떤 단어와 일치하는 결과를 찾아내기 보다는, 해당 아티스트의 유튜브 목록 페이지로 바로 넘어가는 게 더 좋지 않을까? 싶어서 그렇게 해보기로!.. 검색창 외부 클릭 감지 이번에는 아이콘을 클릭했을 때 검색창이 나오는 UI를 구현해 보았다. 헤더 안의 다른 영역을 클릭하..