배포를 위한 Git Flow와 git action을 활용해서, 릴리즈 노트 및 tag 자동 생성 방법에 대해서 다뤄보겠습니다! 사이드 프로젝트에서는 첫 배포를 진행해봤는데욥 작업하면서, git flow와 자동화 관련해서 이것저것 찾아보다 보니 헷갈리긴 했는데 막상 방법을 정하고 적용하니 쉽더라고요 스스로 복기하고 이 편리함을 공유하기 위해 작성해 봅니다. Git Flow 우선 저희 프로젝트는 이렇게 4가지의 브랜치로 구분 짓고요. main 배포 브랜치 dev 개발 통합 브랜치 release dev의 배포될 release 브랜치 feature 기능 별 개발 브랜치 Flow는 다음과 같습니다 1. feature 브랜치에서 작업 2. feature → dev PR 생성 3. Sqash and Merge로 병합..

Next 13에서 카카오 로그인을 수행하는 과정을 포스팅해보려합니다. 개발환경은 다음과 같습니다. Next 13, react-query, Strapi (CMS) Next api route 에서 카카오 로그인을 처리하고 User에 대한 접근은 strapi의 API를 통해 수행하였습니다. Routing: Route Handlers | Next.js Using App Router Features available in /app nextjs.org REST API | Strapi Documentation Interact with your Content-Types using the REST API endpoints Strapi generates for you. docs.strapi.io 로그인 로직은 크게 1. ..

많은 사이트에서 글을 작성하고나 편집할 때, 페이지 이동시 알림 창을 띄우는 UI를 많이 봤습니다. 해당 기능을 개발하면서 생각보다 골치 아팠고 처음 알게 된 처리방법을 찾아 포스팅을 해보려 합니다- 구현 요구사항에 따른 처리 프로세스는 크게 세 가지가 있어요. Link 컴포넌트를 통한 이동 막기 새로고침 이동 막기 뒤로 가기 막기 하나 씩 살펴보겠습니다- Link를 통한 이동 막기 next/router 자체에서 라우팅 이벤트를 제공하고 있어요. next/router | Next.js Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook. nextjs...

React-query 란 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 편리하게 제공해주는 라이브러리로 알려진 react-query에 관해 간단하게 공부해보았습니다. 기존 상태 관리 라이브러리 redux 및 RTK를 사용해오면서 비동기 로직을 처리 부분에서 클라이언트 데이터와 서버 데이터가 뒤섞이고 어느 순간 방대한 로직이 되어버려 로직 파악이 힘들어지고 state 관리가 힘들어지는 상황을 몇 번 직면하였습니다. 이에 대한 해결 방안으로 react-query가 사용된다고 하네요. react-query의 최대 강점이 서버, 클라이언트 데이터를 분리해주는 것으로 이해했습니다. 이외에도 react-qeury의 장점으로는 아래와 같이 있습니다. 캐싱 자동 refreshing get을 한 데이터에 대해 up..

Next js의 렌더링 과정을 공부해보면서 간단하게 정리해보았습니다. SSR과 CSR의 수행 방식을 간단히 살펴보고, Next에서 제공하는 함수들에 대해 알아보겠습니다. Next의 렌더링을 살펴보기 전에 렌더링 과정에서 수행되는 Hydration에 대해 먼저 알아보려 합니다. Hydration이란 무엇인가? Hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링 된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 뜻합니다. Next.js Server에서는 Pre-Rendering 된 웹 페이지를 클라이언트에게 보내고 나서, 바로 리액트가 번들링 된 자바스크립트 코드들을 클라이언트에게 전송하는데 이 과정을 Hydra..