프로젝트를 진행하다보면 해당 애플리케이션의 레이아웃이 존재하게 되는데, 모든 페이지마다 레이아웃을 적용하기엔 반복적인 코드가 들어가기 마련이다. 그래서 오늘은 프로젝트 레이아웃을 공통적으로 적용하는 방법에 대해서 정리하면서, Nextjs 문서에서 소개하는 per-page Layout을 이용하여 다수의 레이아웃을 사용할 수 있는 방법에 대해서도 소개하도록 하겠다. 들어가기 전 일단 공통 레이아웃을 작성하기 전에 Nextjs의 구조를 한 번 살펴보자. pages 폴더 내부에 존재하는 _app.tsx 파일은 서버에 요청이 들어가면 가장 먼저 실행되는 최상위 컴포넌트를 담당한다. 모든 페이지가 초기화 되기 전 해당 파일을 거쳐가기 때문에 애플리케이션의 전체적인 설정을 해줄 수 있는 공간이라고 표현해보겠다. 그렇..
협업을 하다보면 Pull Request와 Issue를 사용하게되는데, 처음 협업을 진행했을 때 깃헙 칸반보드를 활용해서 스프린트 방식으로 개발을 하면서 직접 칸반보드에 구현할 기능을 명시하고 issue 탭에서 연결시키고, pr을 올리면서 해당 이슈를 또 연결하고....😂 나중에 보면 칸반에 이슈 번호가 뒤죽박죽 섞여있는 것을 보면서 issue와 pr을 연결하고 자동으로 issue를 닫아주는 방법을 정리해야겠다 생각했었는데, 이번에 새로운 프로젝트가 일정에 잡혀있어서 같이 협업하는 개발자 분과 컨벤션을 정하는 와중에 포스팅을 써보려한다. issue 생성하기 가장 먼저 issue를 생성해보자. issue를 생성해야하는 해당 레포에 들어가서 issue 탭을 클릭하고 New issue 버튼을 클릭해 이슈를 생성..
Yarn-berry란? 기본적으로 가장 접근성이 좋고 많은 사람들에게 사용되는 패키지 매니저를 꼽자면, npm과 yarn을 꼽을 수 있다. 그 중 yarn의 개발자가 내놓은 새로운 패키지 매니저이다. 기존의 npm과 yarn을 사용하면서 높은 용량의 node_modules 폴더, 해당 node_modules의 디렉토리 구조를 만들기 위한 무수히 많은 입출력 작업등의 단점이 존재했다. yarn-berry는 node_modules를 생성하지 않고 Plug'n'Play(PnP)를 이용하여 효율적으로 패키지를 찾을 수 있고, 의존성을 압축파일로 관리하기 때문에 기존 node_modules에 비해 용량이 매우 적어 zero-install로 git을 통한 버전관리가 가능하다. 보일러 플레이트 만들기 NextJS C..
지난 포스팅에서 custom hook으로 구현한 React-query의 useMutation에 대한 제네릭 타입에 대해서 살짝 알아보았지만, useMutation에 대해 자세하게 알아보지는 않았기 때문에, 이번 포스팅에서는 낙관적 업데이트와 함께 useMutation의 옵션들과 쓰임에 대해서 조금 더 자세하게 알아보도록 하자. 낙관적 업데이트란? 일반적으로는 useMutation을 사용하여 서버 측에 API 요청을하고, API 요청이 정상적으로 진행되었다면, 응답으로 받은 서버 데이터를 통해 UI를 업데이트 한다. 이 때 낙관적 업데이트는 API 요청이 성공적이라는 것을 전제로 두고 UI를 업데이트 하게되고 사용자는 빠르게 업데이트 된 UI를 볼 수 있게 된다. API 요청이 정상적으로 이루어지지 않았을..
저번 포스팅에서는 React-query를 활용하여 custom hook을 만들어 사용하는 과정을 소개했다. 이번에 다뤄볼 내용은 React-query를 활용한 데이터 필터링이다. 아띠즈 프로젝트에서 해당 데이터 필터링 기능이 사용되는 컴포넌트가 몇개 있었지만, 그 중에서 검색된 작품들의 경매상태가 경매중인지 경매 완료인지 필터링하는 기능에서 React-query를 사용했던 부분에 대해 다뤄보려고 한다. React-query select 옵션 select 옵션을 사용하지 않고 데이터를 직접 가공하여 state로 관리하는 방법을 사용할 수 있겠지만, React-query에서 제공하는 select 옵션을 사용하면 클라이언트 단에서 필터링을 진행하지 않을 수 있다. select 옵션은 React-query를 통..
지난 포스팅에서도 이야기 했듯이 아띠즈 프로젝트를 진행하면서 사용된 API의 개수는 60개 이상이었기 때문에, 서버 데이터 관리가 필수적이었다. 많은 사용자들이 사용한다는 것을 가정하고, 데이터 캐싱 또한 필수적이었는데, React-query를 도입하면서 보다 간편하게 위에서 언급했던 사항들을 처리할 수 있었다. React-query에서 제공하는 useQuery, useMutation 등을 사용하는 것 또한 간편하지만, 여러 컴포넌트에서 데이터가 필요한 경우도 많았기에 재사용성을 고려하여 custom hook을 만들어 관리했다. 추가적으로 React-query에서 제공하는 제네릭을 사용하여 관리하는 데이터의 타입 또한 같이 다뤄보자. useQuery와 useMutation 훅에서 사용되는 제네릭 타입은 ..
이번에 새로 프로젝트를 하나 진행하면서 Axios의 모듈화가 프로젝트 전반에 큰 영향을 미친다는 것을 알게되었다. 프로젝트의 규모가 크기도 했고, 사용됐던 API의 개수가 60개 정도였기 때문에, Axios 사용에 있어서 모듈화는 필수였다. 비록 API의 개수가 적거나, 프로젝트의 규모가 작다고 해도, Axios의 모듈화는 앞으로 진행될 수도 있는 사이드 프로젝트나 개인 프로젝트에 있어서 필수적으로 도입해야겠다라고 생각했기 때문에, 다시 한 번 정리하면서, 이 글을 읽는 다른 개발자 분들에게도 도움이 됐으면 하는 바람이다. Axios란? Axios는 HTTP 비동기 통신을 위한 라이브러리이다. 쉽게 말해 프론트엔드와 백엔드 간의 원활한 통신을 위해 사용된다. 기존에 Axios를 사용했던 방법 Axios ..
