Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

React, Next

이전 글 보기 [Next] Next.js13 Next Auth로 구글 로그인 구현하기 (1) Next.js에서 Next Auth 라이브러리를 사용해서 구글, 카카오, 라인 등 로그인 기능을 쉽게 구현할 수 있다. 1. 설치 터미널에 아래 명령어 입력해서 라이브러리 설치하기 npm install next-auth 2. API Route 추 jisilver-k.tistory.com 1. SessionProvider Next.js 13에선 _app.js대신 layout.js 또는 tsx파일에 컴포넌트를 최상위 레벨에 감싸야한다. 근데 직접 감싸는것보다 SSR 컴포넌트를 분리해서 따로 컴포넌트를 만들어서 감싸주거나 최상단에 'use client' 코드를 넣어하는데 컴포넌트를 따로 만들어서 한 번 더 감싸주기 위..

2023. 9. 2.

React, Next

Next.js에서 Next Auth 라이브러리를 사용해서 구글, 카카오, 라인 등 로그인 기능을 쉽게 구현할 수 있다. 1. 설치 터미널에 아래 명령어 입력해서 라이브러리 설치하기 npm install next-auth 2. API Route 추가 사용 방법 Next.js13은 pages에서 app 디렉토리로 바뀌었기 때문에 app 디렉토리에 api/auth/[...nextauth] 폴더를 생성하고 그 안에 route.ts 또는 js파일을 만든다. ([...] 대괄호로 감싸는 이유는 유연하게 동적 경로를 만들기 위해서) import NextAuth from "next-auth" const handler = NextAuth({ ... }) export { handler as GET, handler as P..

2023. 9. 1.

React, Next

Next.js에서 아래 코드를 사용해서 이미지를 컴포넌트로 대체하면, 이미지를 로딩하고 표시하는 과정에서 성능을 향상시킬 수 있다. Image 컴포넌트를 사용해서 SEO 최적화 하려면 width, height값을 꼭 입력해줘야한다. (alt 값은 필수) width와 height 대신 props로 fill을 넣으면 이미지 크기를 몰라도 부모요소를 100% 채우도록 할지 여부를 true false로 지정한다. import Image from 'next/image' 1. Next Image 장점 이미지 최적화: 이미지가 webp 형식으로 변환되어 자동으로 최적화해서 다양한 화면 크기와 해상도에 맞게 제공하며 페이지 로딩 속도를 향상시킨다. Lazy Loading: 페이지 초기 로딩 시 필요한 이미지만 로드, ..

2023. 8. 25.

React, Next

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Next.js로 작업 중 useState()를 사용하니까 위 에러가 났다. Next.js 13에선 컴포넌트가 서버에서 렌더링하는 Server Component가 기본적으로 사용된다. 13으로 올라가면서 app 디렉토리에 있는 모든 컴포넌트가 서버 컴포넌트로 동작한다. 공식 문서에서 Server Component와 Client Component를 언제 사용하는지 알려주는데 데이터를 가져오..

2023. 8. 22.

React, Next

공식 문서 1. Routes Group 중첩된 폴더들을 그룹화해서 폴더 구조는 유지하고 URL 경로에는 포함되지 않게 하는 기능을 제공한다. 사용방법은 폴더명을 괄호로 묶어서 (forderName) 이런식으로 폴더를 생성하면 된다. 위처럼 설정하면 상위 폴더인 marketing과 shop 폴더가 URL에서 생략되고 그 아래 /about /blog /accout 가 URL에 표시되며 실제는 (marketing)/about/page.js, (marketing)/blog/page.js 이렇게 동작하게 된다. 2. Dynamic Routes 정확한 segment를 알 수 없을 때 동적 데이터로부터 라우트를 생성할 수 있으며 생성방법은 폴더 생성할 때 대괄호로 묶어서 [fornerName] 폴더 이름을 넣으면 된..

2023. 8. 20.

React, Next

공식문서 1. 라우팅이란? 라우팅(Routing)은 요청한 URL 경로에 따라 어떤 내용을 보여줄지, 경로에 맞는 콘텐츠를 보여주기 위해 라우팅을 사용한다. 리액트에서 라우팅을 하려면 React Router 라이브러리를 이용해서 관리해야했지만, Next에선 app폴더 안에 또 다른 폴더를 생성하면 그 폴더의 이름 기반으로 자동으로 라우팅 처리를 해준다. 예를 들어 위 처럼 app 폴더 안에 blog, dashboard 폴더가 있고 dashboard 폴더 안에 setting 폴더가 있다고 할 때 라우팅 경로는 아래처럼 /dashboard/setting생성이 된다. 도메인 다음에 오는 Path(경로)는 '/'로 시작해서 서브 디렉토리나 파일 경로를 나타내고 Segment는 경로를 조각으로 나타낸 것, '/'..

2023. 8. 18.