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

프로젝트를 마치며 좋은 팀원들 덕에 진행 기간 동안 꽤 즐겁게 작업했던 프로젝트 바운스가 오늘 발표를 끝으로 마무리되었다. 우리가 할 수 있는 범위 안에서 만족스러운 퀄리티의 프로젝트를 완성한 것 같다. 우리 프로젝트 레포지토리는 이쪽! 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 이번 프로젝트도 좋았던 부분과 피드백을 바탕으로 개인적으로 아쉬웠..

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

Today, What I learned? 팀원 분의 SOS로!.. 리덕스로 구현되어 있던 API 불러오는 로직을 redux-toolkit과 redux-thunk로 리팩토링 하는 과정을 같이 고민하게 되었다. 고민의 시간이 길었던 이유는 우리 프로젝트는 타입스크립트로 구성된 프로젝트였기 때문이다!.. 타입스크립트에서의 createAsyncThunk API를 가져오는 과정에서, 필요한 선택적 매개변수가 3개나 되었기 때문에 좀 더 어려웠던 것 같다. 아래는 완성된 로직이다. payload에 해당하는 부분을 구조분해할당으로 가져와서 사용하고 있다. export const getSearchVideos = createAsyncThunk( 'getSearchVideos', async ({ channelId, ord..

Today, What I learned? 파이어베이스로 소셜로그인 기능을 추가하던 중 구글과 깃허브는 쉽게 되었지만, 애플은 애플 개발자에 등록이 되어있어야 하고.. 카카오는 카카오 인증 후 파이어베이스로 보내서 파이어베이스의 토큰을 받아올 수 있도록 해야 하고.. (시간이 좀 더 여유로울 때 도전해보고 싶음) 트위터를 추가해 보자! 싶어서 트위터를 추가하는 과정을 기록해 본다. 파이어베이스 인증 부분에 트위터 추가 먼저 파이어베이스 로그인 제공업체에서 트위터를 사용설정으로 추가해 주기. 아래 파이어베이스 공식 문서에 따라 하나하나 해가면 되는데, 일단 사용할 웹(혹은 앱)을 트위터 개발자 애플리케이션에 등록해주어야 한다. https://firebase.google.com/docs/auth/web/twi..