시작하며...이번 프로젝트에서 상태 관리 라이브러리인 Zustand 를 사용하여 로그인 여부를 확인하고, 로그아웃을 구현하게 되어 해당 글을 작성하게 되었다. Zustand 스토어 작성일단 다음과 같은 플로우를 생각해 보았다.로그인 → 토큰 쿠키에 저장 → 로그인 여부 O쿠키에 토큰 있음 → 로그인 여부 O쿠키에 토큰 없음 → 로그인 여부 X로그아웃 → 쿠키에 토큰 만료 useAuthStore.tsx일단 상태와 메서드 5개를 만들었다.user - 로그인하면서 저장할 유저 정보 상태saveUser - 유저 정보 저장하는 메서드isLogin - 로그인 여부 나타내는 boolean 상태checkLogin - 로그인 여부 확인하는 메서드logout - 로그아웃 처리하는 메서드 saveUser 로 유저 정보와 로..

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

시작하며...이번 프로젝트에서 프로젝트 초기 세팅을 하게 되었는데 초기 세팅을 진행한 순서와 방법에 대해 글을 작성하려고 한다. 1. 템플릿 만들기가장 먼저 깃허브 이슈와 Pull Requset 템플릿을 만들었다.만드는 방법은 아래 링크에서 확인할 수 있다. https://jjang-j.tistory.com/79 [GitHub] 깃허브 이슈(issue) & PR(Pull Request) 템플릿 만들기☘️ 시작하기 앞서 깃허브로 협업을 하기 위해서 이슈와 PR 이 필요하다. ☘️ 이슈 템플릿 만들기 1. 레포지토리의 Settings 창에 들어온다. 이슈를 생성할 레포지토리의 오른쪽에 있는 Settings 를jjang-j.tistory.com 이슈 템플릿은 위에 있는 내용 그대로 사용하였고, PR 템플릿은 ..

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

(해당 게시글은 모던 리액트 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..