분류 전체보기

[TIL] 프론트엔드, 백엔드 도메인이 다를 때 쿠키 설정

프로젝트에서 쿠키를 설정하면서 발생했던 문제 및 해결 방법을 기록한다.   1. 로컬 환경에서 서로 다른 도메인 간 쿠키 사용하기 - proxy 사용 도메인 - localhost, http://ec2-.xxx.com proxy를 사용하기 전에는 쿠키 도메인이 백엔드 도메인으로 세팅이 되어서 새로고침 시 쿠키가 삭제되고, 서버에서도 내가 보낸 쿠키를 읽을 수 없는 오류가 있었다. 로컬 환경에서는 proxy를 사용하여 동일한 도메인에서 요청한 것처럼 동작하게 할 수 있다.   proxy를 설정할 수 있는 setup 파일에서 proxy 설정을 추가한다.vite.config.jsimport react from '@vitejs/plugin-react-swc';import { defineConfig, loadEnv..

vite.config.js에서 환경 변수 사용하기

프로젝트에서 쿠키를 사용하게 되었는데, 로컬 환경에서는 프론트엔드와 백엔드의 도메인이 달라 proxy를 적용해 주어야 했다. proxy 서버 URL은 환경 변수에 저장했다. 그런데 vite.config.js에 proxy 값으로 환경 변수를 설정했는데 proxy가 동작하지 않았고, 확인해 보니 환경 변수 값이 undefined로 나왔다. env 값을 제대로 가져오지 못한 게 원인이었다. import.meta.env를 사용했을 때 'ImportMeta' 형식에 'env' 속성이 없습니다.ts(2339)라는 오류가 떠서 Node에서 하듯이 process.env를 사용했는데 오류는 없었지만 값을 가져오지 못했다. 찾아보니 Vite는 .env 파일을 기본적으로 로드하지 않는다고 한다.   참고로 Vite는 Vit..

[Next.js] Suspense를 이용한 Skeleton UI 적용하기

위와 같은 페이지에 리스트 데이터가 렌더링 되기 전까지 스켈레톤을 보여주려고 한다. Next.js에서도 React와 마찬가지로 Suspense를 사용하여 Skeleton UI를 적용할 수 있다.     Skeleton 컴포넌트 구현하기(app/components/Skeleton.tsx)import styles from '@/styles/skeleton.module.scss'interface SkeletonProps { w: number h: number radius?: number wUnit?: string style?: React.CSSProperties}export default function Skeleton({ w, h, wUnit = 'px', radius = 8, style,..

[Next.js] 서버 컴포넌트 try-catch에서 redirect가 안 된다

서버 컴포넌트에서 api 요청 결과에 따라 redirect 경로를 설정하는 코드가 있었는데 try-catch로 감싸줬더니 오류가 발생했다.   Error: NEXT_REDIRECT at getRedirectError (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:49:19) at redirect (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:60:11) at ...  Next.js 공식 문서에 따르면 redirect가 NEXT_REDIRECT 오류를 발생시켜 try-catch 블록 내에서 사용하면 에러에 잡..

[TypeScript/Jest] jest.setup.js를 설정했는데도 jest-dom 타입 오류가 뜨는 문제

설치한 라이브러리npm i -D jest ts-jest jest-environment-jsdom @testing-library/jest-dom @testing-library/react   이전에 작성한 jest 설정 코드(jest.setup.js)import '@testing-library/jest-dom'(jest.config.js)const nextJest = require('next/jest')const createJestConfig = nextJest({ dir: './',})const customJestConfig = { rootDir: '.', setupFilesAfterEnv: ['/jest.setup.js'], moduleNameMapper: { '^@/(.*)$': '/app..

[Next.js] SEO 최적화 & 구글/네이버에 사이트 등록하기

Next.js로 만든 프로젝트에서 SEO 최적화를 작업해 보고 구글과 네이버에 사이트를 등록해 보았다.  1. Metadata 설정하기Next.js 공식 문서를 참고하여 Metadata를 설정한다.검색 결과에 포함되지 않길 원하거나, 페이지 내 포함된 다른 링크가 검색 결과에 포함되지 않게 하려면해당 페이지 내 metadata.robots의 index, follow 옵션을 수정한다. 기본은 index, follow 모두 true이다. 필요에 따라 Caronical Tag 등을 추가한다.  - Open Graph 설정 Next.js에서는 Open Graph를 설정하지 않아도 기본적으로 title과 image를 설정해 준다. title의 경우 페이지의 title과 동일하게 설정되고 이미지는 페이지 내에 이미..

[Next.js] 서버 & 클라이언트 컴포넌트에서 토큰 관리하기

인증이 필요한 API 요청엔 헤더에 토큰을 담아서 보내야 한다. 그런데 기존 로컬 스토리지에 보관했던 토큰을 서버 컴포넌트에서는 사용할 수 없는 문제가 있었다. 서버 컴포넌트에서는 로컬 스토리지, 세션 스토리지와 같은 브라우저 저장소에 접근할 수 없기 때문이다. 서버 컴포넌트에서는 `cookies` 함수를 이용하여 쿠키에 접근할 수 있었다. (단, 쿠키의 get, has와 같은 메서드는 서버 컴포넌트에서 사용할 수 있지만 set 메서드는 오직 Server Action과 Route Handler에서만 사용할 수 있다. 이는 HTTP가 스트리밍이 시작한 후에는 쿠키를 설정할 수 없게 하기 때문이다.)  서버 컴포넌트와 클라이언트 컴포넌트 모두에서 토큰을 사용하려면 서버 컴포넌트에서는 쿠키에서, 클라이언트 컴..

Zustand 사용해 보기 (+ Redux와 비교)

Redux 외에도 사람들이 많이 사용하는 상태 관리 라이브러리를 사용해보고 싶어서 Zustand 공식 문서를 읽어보고 사용해 봤다. Recoil과 Zustand 중에 고민했는데 Recoil은 페이스북에서 손을 놓은 것인지... 마지막 업데이트로부터 시간이 많이 지나 여러 사람들이 다른 라이브러리로 마이그레이션 하는 것을 보고 Zustand를 선택했다.   'Zustand'는 독일어로 '상태'라는 뜻을 가진다. 공식 페이지에서는 Zustand를 작고, 빠르고, 확장 가능한 기본적인 상태 관리 솔루션이라고 소개하고 있다.  Zustand는 hooks를 기반으로 하는 사용하기 쉬운 API를 제공한다. 보일러플레이트 코드가 많지 않고 단순화된 Flux 원칙을 바탕으로 한다.   설치npm i zustand   ..