시작하며...이번 프로젝트에서 직접 사용자들의 피드백을 받는 베타 테스트를 진행하기로 했다. 유저들의 피드백을 구글폼이나 디스코드로 받으려고 했는데 일단 접근성이 낮고 유저 입장에서는 귀찮을 거 같다는 우려가 있었다. 좀 더 간편한 방법으로 유저들이 피드백을 줄 수 있는 방법이 없을까? 하고 여러 사이트를 돌아다니면서 본 결과 "채널톡" 을 운영하는 것을 보게 되었다. 그래서 "채널톡" 을 프로젝트에 구현하게 되었고 이를 적용한 방법에 대해 글을 작성하게 되었다. 채널톡 적용하기공식문서채널톡 공식문서에 적용하는 방법이 자세히 적혀있다.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 등 객체에 접근할 수 없다. 그래서 로컬 스토리지 같은 경우 브라우저에서 ..

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

시작하며...나는 Framer Motion 중독자다... 애니메이션을 통해 사용자의 경험성을 늘릴 수 있고 라이브러리를 사용하여 간편하게 애니메이션을 구현할 수 있기 때문이다. Framer Motion 짱!! 🙌 그런데 Next.js 에서 화면 전환 애니메이션을 적용하면서 React 와는 조금 달라 글을 작성하게 되었다. 이전에 Framer Motion 에 관한 내용을 쓴 적이 있다. https://jjang-j.tistory.com/95 [React] Framer motion 애니메이션 적용 - 버튼, 모달, 스크롤, 화면전환시작하기 앞서...이번에 프로젝트를 하면서 framer motion 을 활용하여 버튼, 모달, 스크롤, 화면 전환 애니메이션을 적용하였다.그래서 사용 방법에 대해 자세하게 정리하..

시작하며...현재 프로젝트의 상태 관리 라이브러리로 Zustand 를 사용하기로 했다.사용하기 간편한 상태 관리 라이브러리 중에서 꾸준히 업데이트되면서 다운로드 수가 많은 Zustand 를 선택하게 되었다.  내용이 좀 빈약하지만 블로그에 간단하게 Zustand 를 사용하는 방법에 대해 글을 작성했었다.https://jjang-j.tistory.com/57 [React] Zustand 상태 관리 라이브러리 사용 방법시작하며...React 에서 다른 컴포넌트로 데이터를 전달하기 위해 props 를 사용한다.그러나 React 의 상태인 state 는 자식 컴포넌트한테만 전달할 수 있어 만약 컴포넌트가 많고 잘 분리되어 있을 경jjang-j.tistory.com persist 사용하게 된 이유아래 코드와 같이..

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) package.json 생성하기create-next-app 없이 next.js 프로젝트를 만들기 위해 먼저 package.json 을 만들어야 한다.먼저 npm init 를 입력해서 package.json 을 생성한다. react, react-dom, next 설치그 다음으로 Next.js 프로젝트를 실행하는데 필요한 핵심 라이브러리인 react, react-dom, next 를 설치한다. devDependencies 에 필요한 패키지 설치typescript 와, 타입스크립트 타입 지원에 필요한 @types/react, @types/react-dom, @types/node 그리고 ESLint 에 필요한 eslint, eslin..

React 에서의 SVG그동안 React 에서 SVG 를 사용할 때 컴포넌트로 만들어서 사용하였다.컴포넌트로 만들고 해당 SVG 의 width, height, 색상을 직접 조절할 수 있게 아래 코드처럼 만들어 사용하였다.그런데 svg 를 jsx 컴포넌트로 만드는 과정은 매우 귀찮고 번거롭다 🥲 반면 Next.js 에서는 SVG 를 다루는 과정이 React 보다 너무 쉽고 간편하다! Next.js 에서의 SVGNext.js 에서 SVG 를 컴포넌트로 사용하려면 아래 단계를 거쳐야 한다. @svgr/webpack 설치SVG 를 컴포넌트로 변환시켜 주는 플러그인 패키지인 @svgr/webpack 를 다운로드한다.npm install @svgr/webpack 웹팩 설정 추가next.config.js 에 웹팩..

React 의 한계리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering)을 앱의 첫 로딩시간이 길고, SEO 가 좋지 않다는 단점이 있다. 그래서 웹 사이트를 요청할 때 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 html을 가져와 script를 로딩한다. 이로 인해 앱의 첫 로드 시간이 오래 걸려 사용자 경험을 해치게 된다. Next.js 란?Next.js 는 React의 프레임워크로 React 애플리케이션을 더 쉽게 만들고 배포할 수 있는 다양한 기능을 제공한다. 예를 들어 리액트는 라우팅하기 위해 react router 나 tanstack router 등 여러 도구 중 하나를 선택할 수 있지만, 넥스트는 내장된 기술을 사용한다. Next...