시작하며...이번 Codeit Resoucres 프로젝트에서 기술스택으로 React, AWS Amplify Gen2, NoSQL 데이터베이스인 DynamoDB를 사용하고 있다. 마주친 문제점처음에 데이터베이스에 데이터를 추가할 때, 데이터가 시간순이나 id값을 기준으로 자동 정렬될 것이라 예상했지만, 실제로 사용을 해보니 DynamoDB에서는 데이터가 특정 순서 없이 저장되는 것을 발견하게 되었다. 프로젝트 요구사항을 구현하기 위해서는 시간순, 이름순으로 정렬된 데이터를 보여줘야 했기 때문에, 이를 어떻게 해결할지 많은 고민을 하게 되었다. 해결 과정?!?!AWS Amplify Gen2 공식 문서와 GitHub 레퍼런스를 통해 전체 데이터를 정렬하는 방식을 찾아보았으나...DynamoDB에서는 기본적으로..

시작하며...지금까지 다양한 프로젝트를 진행하면서 클라이언트에서 상태 관리를 간편하게 하기 위해 라이브러리를 사용하였다.그중 Recoil, Zustand, Jotai 라이브러리를 사용해 보았고, 각기 다른 방식으로 상태 관리를 했다. 그래서 이번 글에서는 그동안 사용해 본 Recoil, Zustand, Jotai를 비교하고, 각 라이브러리를 어떤 상황에서 사용했고 느낀 장단점을 정리하게 되었다. 1. Recoil1-1. 사용 배경개발 동아리 DND 9기에서 진행한 NewPle 프로젝트에서 Recoil을 사용했다. Recoil을 선택한 이유는 단순했다.사실 React Query(TanStack Query)와 Recoil의 조합이 좋다는 이야기를 들어서 깊이 있는 이해 없이 그냥 선택하게 된 것이다.(당시 ..

시작하며...우주윗미 프로젝트에서 TanStack Query의 옵티미스틱 업데이트를 사용해서 게시물의 좋아요 기능을 구현하였다. 그런데 오늘 useState로 구현할 수 있을 거 같은데 굳이 TanStack Query를 사용한 이유를 질문받았다.....!(약간 당황하면서 대충 서버 상태를 반영해 준다고 답을 했다.) 그래서 이에 대해 다시 한 번 생각해 보면서 글로 정리하게 되었다. 왜 useState가 아닌 TanStack Query를 사용했는지!! (참고로 TanStack Query의 옵티미스틱 업데이트를 적용한 내용은 해당 블로그 글에서 확인할 수 있다.) [TanStack Query] 옵티미스틱 업데이트 사용하여 좋아요 구현시작하며...이번 프로젝트에서 게시물의 좋아요/취소 기능을 구현하는데, 백..

(제목에는 Next.js 붙였지만 딱히 Next.js 에 관한 내용없음) 시작하며...이번 프로젝트에서 베타 테스트를 진행하면서 사용자들의 의견을 받았다. 그중에서 게시판 페이지에 조회수 기능이 있었으면 좋겠다는 의견이 있었다. 그런데 백엔드 API 요청을 새로 못하는 상황이기 때문에, 고민을 하다가 Firebase 를 사용하기로 했다.(그리고 나도 조회수 기능 구현하면 좋을 것 같다는 생각이 있었음) 그리고 Firebase 를 선택한 이유는 작년 졸업작품에서 React Native + Firebase 로 어플리케이션을 만들면서 Firebase 의 다양한 기능을 사용해 봤고 익숙하기 때문에 러닝커브가 낮아 빠른 시간내에 구현할 수 있을 것 같기 때문이었다. 세팅하기Firebase 에서 FireStore ..

시작하며...이번 프로젝트에서 직접 사용자들의 피드백을 받는 베타 테스트를 진행하기로 했다. 유저들의 피드백을 구글폼이나 디스코드로 받으려고 했는데 일단 접근성이 낮고 유저 입장에서는 귀찮을 거 같다는 우려가 있었다. 좀 더 간편한 방법으로 유저들이 피드백을 줄 수 있는 방법이 없을까? 하고 여러 사이트를 돌아다니면서 본 결과 "채널톡" 을 운영하는 것을 보게 되었다. 그래서 "채널톡" 을 프로젝트에 구현하게 되었고 이를 적용한 방법에 대해 글을 작성하게 되었다. 채널톡 적용하기공식문서채널톡 공식문서에 적용하는 방법이 자세히 적혀있다.https://developers.channel.io/reference/web-quickstart-kr#single-page-application 시작하기이 문서에서는 Ja..

시작하며...이번 프로젝트에서 Next.js App Router 를 사용하면서 TanStack Query 를 사용하기로 했다. 그런데 Next.js 에서는 데이터 패칭을 할 땐 Server Sider Rendering 을 사용하는데 이걸 TanStack query 와 함께 사용하는 방법이 없을까? 하고 찾아보다가 공식문서에서 이에 관한 내용을 발견하였다. Advanced Server Rendering | TanStack Query React DocsWelcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.j..

시작하며...게시물 수정 페이지 같은 경우 해당 게시글을 작성한 사용자만 수정이 가능하다. 그래서 작성자에게만 수정 버튼이  렌더링 되지만 만약 그렇지 않은 사용자가 주소창을 통해 강제로 수정 페이지로 이동하였을 때, 해당 게시글의 작성자가 아니면 접근을 하지 못하게 막아야 된다. Next.js Server Side Rendering 에서 이를 구현하는 방법에 대해 알아볼 것이다. 구현 방식현재 로그인한 유저의 user id 와 게시물을 작성한 user id 를 비교해서, 다르면 not found 페이지로 이동시킨다. 로컬 스토리지서버 사이드 렌더링은 서버에서 페이지를 렌더링하며, 브라우저 API 인 document, window 등 객체에 접근할 수 없다. 그래서 로컬 스토리지 같은 경우 브라우저에서 ..

시작하며...Tailwind CSS 를 사용하면 기본적으로 rem 단위로 동작한다. 만약 조금 더 섬세하게 px 단위로 크기를 조절하고 싶은 경우에는 아래 코드처럼 사용하게 된다.  그런데 개발자 도구에 들어가서 보게 되면 어떤건 rem 단위, 어떤건 px 단위 이렇게 혼합되어 있는 것을 볼 수 있다.  그래서 이러한 문제를 해결하여 px 단위로 작성하되, 실제 적용되는 건 rem 단위인 pxr 를 사용해보려고 한다. pxr 단위사실 Tailwind 를 사용하면서 위에와 같은 문제를 겪고 있었고 해결을 하고 싶었다. 그런데 지금 멘토님께서 pxr 단위라는 것을 알려주셔서 위에 문제를 해결할 수 있을 거 같아 이번 프로젝트에 적용하게 되었다! 관련 아티클팀원분이 카카오페이지에서 Tailwind 에 pxr ..

시작하며...이번 프로젝트에서 Storybook 을 적용하게 되었다. 이전 프로젝트에서는 공통 컴포넌트를 테스트 페이지를 만들어서, 사용하는 방법과 예시를 다른 팀원들에게 보여줬는데이제 Storybook 을 사용하면 번거롭게 테스트 페이지를 만들 필요가 사라진다. 설치하기먼저 Storybook 을 설치한다.npx storybook@latest init그러면 Storybook 이 설치되면서 실행이 된다.  해당 프로젝트는 yarn 이라서 yarn stroybook 을 입력하면 스토리북이 실행이 된다.만약 npm 이라면 npm run stroybook 를 입력하면 된다. 스토리북 작성하기컴포넌트 주석달기버튼 컴포넌트에 대해 Storybook 을 작성하기 전에 해당 버튼 컴포넌트의 interface 에 주석을..

시작하며...메타태그와 오픈그래프를 적절하게 사용하면, 웹사이트에서 검색 엔진 최적화(SEO)를 향상시킬 수 있다. 그래서 검색 엔진에서의 노출도를 올릴 수 있다. 그래서 Next.js 에서 메타태그와, 오픈그래프를 컴포넌트로 만들어서 각각 페이지별로 다르게 설정하여 SEO 를 높이는 방법에 대해 알아볼 것이다.(참고로 Next.js Page Router) 메타태그 작성하기_document.tsx일단 공통으로 적용할 메타태그들은 _document.tsx 에서 Next.js 에서 기본적으로 제공해 주는 컴포넌트 안에 작성한다.파비콘 설정인코딩 UTF-8viewport - 브라우저 뷰포트author - 문서 작성자 정보keywords - 문서 키워드 (SEO 에 사용됨)import { Html, Head,..