Next.js
1.Next.js 기본 설명, 사용법
Next.js 는 리액트의 프레임워크이다. 리액트는 기본적으로 SPA이며, CSR (Client Side Rendering) 방식으로 브라우저를 렌더링한다.CSR vs SSR 정리글순수 리액트로도 SSR을 구현할 수는 있지만 난이도가 어렵고 번거롭다. 하지만 Next.
2.Next.js Data Fetching 정리
Next.js에서 데이터를 받아올때 총 4가지의 방식을 사용한다. CSR(Client Side Rendering)SSR(Server Side Rendering)SSG(Static Site Generation)ISR(Incremental Static Regeneratio
3.Next.js 13 공식문서 Routing : Fundamentals
Next.js는 layout, nested routing, loading states, error handling 등등 많은 지원을 하는 리액트 서버 컴포넌트의 위에 빌트된 라우터를 기반으로 새로운 파일 시스템을 소개한다. 이 페이지는 새로운 라우팅 모델에 대한 기능적
4.Next.js 13 라우팅
layout.jsx 에서는 해당 페이지의 레이아웃을 구성할 수 있는데, 여기서 저 {children} 안에 들어가는 내용들이 page.jsx 안의 내용들로 들어가고, 저 nav 태그 안에 있는건 라우팅이 되어도 바뀌지 않는다. Next.js 에서는 파일 구조로 라우팅을
5.Next.js 13 params, searchParams 객체 사용
만약 category/food 나 category/sports 주소로 입력해서 저 food 와 sports 값을 받아오려면 어떻게 해야할까 ?props로 params 를 전달해주면 된다. 여기서 만약에 폴더명을 slug가 아니라 id로 폴더명을 변경시킨다면, 콘솔창에서
6.Next.js 13 Routing : Defining Routes
app 경로 안에 있는 폴더들은, 라우트들을 정의하기 위해 사용된다.각각 폴더들은 URL segment로 맵핑하는 route segment를 나타낸다. 중첩 라우트들을 만들기 위해, 각각의 폴더 안에 중첩 시킬 수 있다.page.js 파일은 공개적으로 접근 가능한 라우
7.Next.js Routing : Pages and Layouts
page는 라우트에 대한 유니크한 UI이다. 너는 page.js 파일로부터 컴포넌트를 추출함으로써 페이지들을 정의할 수 있다. 중첩 폴더들을 라우트들과 공개적으로 접근 가능한 라우트를 만들기 위한 page.js파일을 정의하기 위해 사용해라. 알아두면 좋을점 : 페이지는
8.Next.js 13 Routing : Linking and Navigating
Next.js 는 클라이언트쪽의 navigation과 함께 서버중심의 라우팅을 사용한다. 이것은 동시 렌더링과 즉시 상태값을 로딩하는것을 지원한다. 이것은 navigation은 클라이언트쪽의 상태값을 유지하며, 값비싼 리렌더를 피하고, 중단 가능하며, 경합상태 ( 두가
9.Next.js 13 Routing : Loading UI
Next.js 13은 React Suspense 와 함께하는 의미있는 로딩 UI를 만들 수 있도록 loading.js라는 새로운 파일 협약을 소개한다.너는 이 약속과 함께, route segment의 컨텐츠가 서버로부터 로드 되는동안 즉시 loading 상태를 보여줄
10.Next.js 13 Rendering : Fundamentals
너가 쓴 코드들이 user interface들로 변환된다.React 18과 Next.js 13 은 너의 어플리케이션을 렌더하기 위한 새로운 방법을 제시한다. 이 페이지는 렌더링 환경, 전략,런타임들 사이에서 의 차이점을 이해하도록 하고 그리고 그들 안에서 어떻게 선택해
11.Next.js 13 Rendering : Server and Client Components
서버 컴포넌트들과 클라이언트 컴포넌트들은 개발자들이 전통적인 서버렌더링의 향상된 퍼포먼스와 클라이언트 앱의 부유한 상호작용성을 결합하는 서버와 클라이언트를 엮는 어플리케이션을 빌드하도록 한다.이 페이지는 서버, 클라이언트 컴포넌트들의 차이점과 그들을 Next.js 어플
12.Next.js 13 Rendering : Static and Dyanmic Rendering
Next.js 에서는 라우트는 정적이나 동적으로 렌더링 될 수 있다. 동적인 라우트에서, 컴포넌트들은 빌드 생성시에 렌더링 된다. 이 동작의 결과물은 후속 요청들에서 재사용되고 캐시된다.동적 라우트에서는, 컴포넌트들은 요청시에 서버에서 렌더링된다.정적 렌더링은 모든 작
13.Next.js 13 use 사용해보기
use Hook을 사용하면 좀 더 깔끔하게 data fetching을 할 수 있다.
14.Next.js 13 Data Fetching : Fundamentals
Next.js 13은 너의 어플리케이션에서 새로운 데이터 요청 방식을 소개한다. API는 웹 플랫폼과 리액트와 일치하도록 간단화 되어어왔다. 이 페이지는 너의 데이터 생명주기를 관리하는데 너에게 도움을 주기 위해 여러 패턴들과 기초 컨셉들을 다룰 예정이다.알아두면 좋은
15.Next.js 13 Data Fetching : Fetching
알아두면 좋은 점 :이것은 리액트 팀에 의해 개발된 새로운 데이터 요청 모델이다. 우리는 클라이언트 컴포넌트들에서 사용되는 use hook과 서버컴포넌트들에서 사용하는 async/await 을 소개하는 리액트 팀의 글을 읽어 볼 것을 추천한다.너가 이것을 사용할때 아직
16.Next.js 13 Data Fetching : Caching
Next.js 에서는 요청별, segment 레벨 별 2가지의 캐싱 방법이 있다.Segment-level 캐싱은 너가 라우트 segment들에서 사용되는 데이터들을 재검증하고 캐싱하도록 허락한다.이 매커니즘은 경로의 다른 segments들이 라우트의 캐시 생애를 조종할
17.Next.js 13 Data Fetching : Revalidating
Next.js 는 너가 너의 전체 사이트를 재빌드 할 필요 없이 특정한 정적인 경로들을 업데이트 할 수 있도록 한다. 재검증(ISR이라고 불리우는)은 수백만개의 페이지를 관리하는 동안에 정적인 장점들을 유지할 수 있도록 한다.환경에서는 : 특정한 시간 간격으로 데이터들
18.Next.js typescript JSX.IntrinsicElements' 형식에 'eventItem' 속성이 없습니다 오류
왜인지는 모르겠으나 Next.js 에서는 컴포넌트를 대문자로 안적어도 되나? 라는 생각이 들어서 컴포넌트들도 소문자로 적어줬었다.추측해보자면 src/app 경로 안에 있는 page나 head 나 layout 들이 다 소문자여서 그랬던것 같다.. 이 파일들은 컴포넌트가
19.Next.js 13 배경이미지 사용해서 꽉채우기
width 와 height를 설정하는것 대신에, fill 속성은 이미지가 부모요소를 다 채우도록 한다. 기본적으로, 이미지요소는 position : "absolute"로 자동으로 할당될 것이다. 부모 요소는 반드시 relative나 fixed나 absolute를 할당
20.[번역] React Server vs Client Component in Next.js 13
원 글 링크Next.js 에서, 너는 리액트 서버 컴포넌트와 클라이언트 컴포넌트를 사용할 수 있다. app 경로에서 기본적으로 모든 컴포넌트들은 서버 컴포넌트이다. 이 게시글에서, 우리는 리액트 서버 컴포넌트와 클라이언트 컴포넌트를 깊게 알아볼 예정이다. 첫번째로, 각
21.Next.js 13 서버 컴포넌트 => 클라이언트 컴포넌트로 props 보내기
서버 컴포넌트에서 클라이언트 컴포넌트로 props로 간단한 콘솔창을 띄우는 함수를 보내려했는데, 이러한 에러가 나왔다. page.tsx 자체를 "use client"로 설정해주면 문제가 해결되긴 했지만, Next.js 의 대표적인 장점 중 하나가 SSR 방식 인데..
22.[번역] Next.js 에서 비쥬얼들을 활용한 Data fetching 기술들 (CSR, SSR, ISR, SSG)
원글 링크Next.js 는 유명한 JS의 프레임워크이고 상당히 강력하다.Next.js는 API들을 쉽게 만들어 내는데에 좋은 기술력을 가지고 있고 이해하기 쉽기 때문에 내가 좋아하는 프레임워크들중에 하나이다. Next.js는 리액트의 배포 프레임워크가 되었으며 당연하다
23.Next.js 13 404 page 만들기
404 page를 만들기 위해서는 notFound 라는 함수와 not-found.tsx 파일이 필요하다.해당 id에 맞는 페이지를 찾을 수 없을시에, 만들어준 not-found.tsx 파일이 띄어진다.
24.Next.js13 에서 audio 파일 사용하기
Next.js 13에서 오디오 파일을 사용하려는 와중에 "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
25.Next.js 13 Audio is not defined 에러 해결
Next.js13 에서 버튼을 누르면 wav 파일이 재생되는 기능을 구현해보았다.작동은 잘 됐지만, 터미널 창에서 Audio is not defined 라는 에러가 발생했다.이 이유는, 클라이언트 컴포넌트라고 할지라도 처음에 렌더링 될때는 SSR 방식을 이용해서 렌더링
26.Next.js 13 StrictMode 해제
- next.config.js 에서 reactStrictMode: false, 추가
27.Next.js 13 module not found 오류
Next.js 13에서 unsplash api 를 사용하는 도중에 api를 호출하니까 모듈을 찾을 수 없다는 오류가 나왔다. UNSPLASH_ACCESS_KEY의 타입을 지정을 안해주어서 나는 에러였다.next-env.d.ts 파일에서 따로 인터페이스를 지정해주니 해결
28.컴포넌트 재사용성 높이기
둘이 다른 데이터를 사용하지만, 각 페이지를 구성하는 UI는 같았기때문에 props로 보내는 데이터가 다르더라도 저 PostList 컴포넌트를 재사용하고 싶었다. 하지만 몇몇 프로퍼티 말고는 다른 프로퍼티들이 있어서 props를 직접 정의해서 보내주면 안되고 저 Pos
29.react-oauth/google로 구글 OAuth 로그인 구현
GoogleLogin 컴포넌트 자체를 불러오면 이 화면이 뜨고 로그인을 할수 있는 창이 뜬다. 여기서 clientId 는 google 클라우드 API 에서 발급받은 clientId 이다. 저기서 저 credential 값이 무엇인지 궁금했는데, 해당 회원정보를 담고 있
30.Next.js 13에서 서버 컴포넌트와 클라이언트 컴포넌트 fetch 요청
Node.js 쪽에서, 로그인이 되어있지 않은 상태에서 http://localhost:3000/write 페이지로 접근하려고 할때, 에러메세지를 띄어주고 싶었다. 여기서는 정상적으로 정상적으로 요청 됐다는 200코드가 계속 나왔다. 여기선 서버쪽에서 설정한 4
31.Next.js 13 local font 적용하기
Next.js 13 에서 local 경로를 이용할 경우에, next/font/google 이 아닌 next/font/local만 사용 가능하다. 공식 문서 참조(https://beta.nextjs.org/docs/optimizing/fonts또한 src 경로에
32.Next.js 13 기본 골격
- globals.css - layout.tsx - Card.tsx 컴포넌트 - Card.module.css 코드
33.Next.js 13 fetch no-store 속성
Next.js 13에서 fetch 를 통해 백엔드로부터 데이터를 받아올때, db가 업데이트가 됐는데도 불구하고 전의 데이터가 리턴되는 현상이 나타났다. 데이터가 총 9개인데도 불구하고, 처음에 저장된 1개만 나타났다공식 홈페이지를 읽어보니, 모든 요청마다 동적인 데이터
34.Next.js 13 params 타입
35.Next.js 13 react-markdown, syntax-highlighter 사용하기
"use client" 선언을 안해주어서 계속 에러가 떠서 애먹었는데.. 깃허브 이슈를 보니 패키지 자체의 문제인듯하다.일단은 클라이언트 컴포넌트로 선언해서 사용해주어야한다.
36.Next.js13, Express nodemailer 사용
useState는 요청이 들어올때마다 리렌더링이 일어나는게 아니라, 효율성을 위해 여러번의 요청을 한번에 업데이트하는 batch update가 일어난다. 또한 비동기적으로 일어난다.form 내용 같은 경우는 굳이 계속 업데이트 해줄 필요 없이 마지막에 post 요청이
37.Next.js 13 다크모드 구현
- 1. 레이아웃 짜기 2. globals.css 에서 변수 설정 - 헤더컴포넌트에서 클릭시 변화하게 하기
38.Next.js 13 vitest 환경 구축
vitest 깃허브 링크정상적으로 잘 작동 된다!
39.Next.js 13 다크 모드 구현시 Warning: Extra attributes from the server: data-theme,style at body at html at RedirectErrorBoundary 에러
추후 더 나은 방법을 찾아야 할 부분Next.js 에서 다크모드를 구현하다가 이러한 에러를 만났다. 구글링을 해보니 서버쪽에서 렌더링하는 컨텐츠와 클라이언트쪽에서 렌더링하는 컨텐츠가 서로 불일치 할때 나는 에러라고 한다. 보통 다크모드를 구현 한후 새로고침을 했을때
40.Next.js 13 createPortal 로 모달 구현
1. layout.tsx 에서 포탈 div 만들어주기 2. 해당 모달을 띄어줄 컴포넌트 만들기 > 1. useState를 통해서 초깃값을 false로 만들어 준후, 로그인 버튼을 누르면 loginModal 상태값이 true가 되면서 createPortal이 작동된다
41.Next.js 13 RTK 사용하기
use client 를 사용해서 layout.tsx 에서도 불러올수 있도록 한다.
42.Next.js 13 multiple layout 적용하기
프로젝트를 만드는 와중에, register 페이지만 아예 다른 레이아웃을 보여주고 그 외의 모든 페이지엔 공통된 레이아웃을 적용시키고 싶었다. 기본적으로 Next.js 13 app router 에서는 nested layout 구조이기때문에, 각 페이지마다 layout
43.Next.js 와 Express로 이메일 인증 로그인 구현하기
프로젝트를 만들어보며 velog 같이 이메일로만으로도 로그인과 회원가입 둘 다 할 수 있도록 하고 싶었다. - 직접 이메일을 입력했을때 (회원가입) 사용자가 이메일을 입력한다. DB에 저장되어있지 않은 회원이라면 회원가입 인증 메일을 보낸다. 해당 메일에는 code
44.Next.js 13 로그인 상태 깜빡임 문제
Next.js 13 App 디렉토리에서, 로그인 관련 정보를 페이지 컴포넌트에서 fetch 해온 후에, 그 정보를 Header로 보내주는데, 로그인 표시 컴포넌트가 먼저 등장 한 후에 회원 정보가 나타나는 문제가 발생했다. - 회원 정보 받아오는 페이지 컴포넌트 -
45.이미지 Drag and Drop 구현해보기
프로젝트 진행중에, 이미지를 업로드할때 드래그 앤 드랍을 이용해서 이미지 업로드 하는 기능을 구현하고 싶었다. 드래그 앤 드랍을 구현하려면 drag 관련 이벤트 속성을 알아두는 것이 필요하다.onDragEnter드래그하는 항목이 특정 요소의 경계를 처음 들어갈 때 한
46.Next.js 13 Full page 구현해보기
원래 컨텐츠들을 객체로 관리해서 map 함수를 통해 뿌려주면 되지만, 컨텐츠들의 내용들이 다 달라서 일단 각각 컨텐츠 컴포넌트들을 만들어주었다. 비슷한 형식이라면 객체로 묶어줘서 map 함수로 뿌려주는것이 낫다.
47.Next.js 13 Express 포트원 결제 기능 구현하기
1 . 포트원 사이트에서 회원가입 https://portone.io/korea/ko 2 . 포트원 사이트 내에서 PG 정보 설정하기 3.
48.이미지 색상추출 vibrant.js 사용하기
49.Next.js DOMPurify로 XSS 공격 막기
SSR 내에서 다크모드 적용 후 페이지를 새로고침을 했을때, 깜빡이는 현상을 방지하기 위해서 'dangerouslySetInnerHTML' 를 사용했었다. 이번에 eslint 룰 적용 후에 똑같이 다크모드를 적용하려하니 경고창이 나왔다. 이슈 링크 JSDOM
50.Next.js 14 jest + rtl 환경 구축
- 프로젝트 초기 설치시 - 프로젝트 초기 설치후 테스트 라이브러리만 따로 설치시 - jest.config.js - jest.setup.ts - package.json 정상적으로 실행 된다!
51. Next.js App router route group을 이용한 multiple layout 적용
만약 Next.js App router에서 메인페이지에는 헤더 컴포넌트가 등장하도록 하고싶고, 특정페이지에서는 헤더 컴포넌트가 등장하지 않도록 하고싶다면 어떻게 해야할까 ?각각의 페이지마다 다르게 레이아웃을 적용할수 있도록 해주는것이 Next.js 에서 route gr