Next.js
1.Next.js_01_Next.js란?
웹 브라우저 상에서 html을 만들어낸다.클라이언트 사이드 렌더링(CSR)초기로딩이 느림검색 엔진에 제공할 수 있는 정보가 적다. 이런 단점 극복을 위해서 프리렌더링(Pre-rendering)프리렌더링(Pre-rendering)미리 렌더링해서 보내줄 html을 저장해놓
2.Next.js_02_프로젝트 시작하기
준비1\. 크롬 브라우저2\. vscode3\. node.js설치터미널에서 package.json 파일에 들어가서 scripts에 명령어를 확인한다. 1\. dev라는 명령어 사용하기(개발 서버를 켜는 명령어)npm run dev2\. index.js파일에 들어가기사용
3.Next.js_03_css적용하기
1\. styles라는 폴더를 만들고 그 안에 Home_modules.css라는 파일을 만들었다. 2\. index.js에서 default import해준다.styles 객체 안에는 css파일에서 정의한 클래스 이름이 프로퍼티로 들어가있다.이런 식으로 리액트 컴포넌트
4.Next.js_04_페이지 나누기
어떤 주소에 어떤 페이지를 보여줄지 정하는 것파일의 결로가 주소에 매칭되는 라우팅 방식프로젝트를 처음 생성하면 pages라는 폴더가 있는데 이것은 Next.js에서 정해놓은 것이기 때문에 반드시 pages여야한다이 안에 자바스크립트 페이지를 만들면 그것이 곧 페이지이다
5.Next.js_05_Link
a태그 말고 Link를 활용하면 Fast3G에서화면이 깜박거리지 않고 현재 화면에서 기다렸다가 넘어간다. Link컴포넌트를 사용하면 페이지 전체를 불러오는 것이 아니라필요한 데이터만 불러오기때문에 이동속도도 빠르고 넘어가는 동작도 유연하다. 외부 링크로 이동하게 할 때
6.Next.js_06_useRouter 쿼리 사용하기
사이트주소에서 원하는 값을 가져오기useRouter Hook을 import하고 router객체를 만든 다음에 router.query라는 객체에서 id값을 가지고 온다. 여기서 id는 파일 이름에 있는 id이다. 페이지 경로가 달라질때마다 화면의 내용도 달라진다. (여기
7.Next.js_07_ useRouter:페이지 이동하기
홈페이지에서 검색어를 입력하면 search 페이지로 쿼리 스트링과 함께 이동하도록 하기1\. components폴더에 SearchForm.js파일을 만든다. State를 하나 만들고 input태그에서 입력하는 값을 반영하도록 하였다. form 태그에서 검색 버튼을 누르
8.Next.js_08_API 연동하기
1\. lib라는 폴더를 만들고 axios라는 파일을 만든다. 여기에 axios 인스턴스를 만들어준다.인스턴스를 실행할 때는 baseurl을 일일이 써 줄 필요없이 경로만 작성하면된다.2\. 상품 상세 페이지로 와서 router로 받아온 id값을 사용해서 리퀘스트를 보
9.Next.js_09_리다이렉트
Next.js에서는 폴더의 이름을 바꾸어주면 그것이 곧 주소가 된다.그런데 옛날 주소로 즐겨찾기 해둔 사람이 있을 수 있다. 이전에 사용했던 products을 items로 바꿔서 이동시켜주면 되는데이럴 때 리다이렉트를 사용한다.1\. next.config.js파일을 수
10.Next.js_10_404페이지
이상한 주소로 들어가보면 Next.js에서 기본 제공하는 404 페이지가 나오게된다. 이것을 원하는 디자인으로 바꿀 수 있다. pages라는 폴더에 404.js파일을 만들었다. 안내 메시지를 적고 css스타일도 적용해준다.
11.Next.js_11_app과 document
지금 페이지에는 Header라는 컴포넌트와 Container라는 컴포넌트가 모든 페이지에 공통적으로 적용되어 있다. 이 공통된 컴포넌트를 지워주겠다. (index.js, search.js, setting.js 등등)1\. 공통된 부분을 \_app.js에다가 추가할 것이
12.Next.js_12_Context
1\. ThemeContext.js파일을 만들어 리액트 Context를 만든다.이 Context는 light또는 dark라는 문자열을 가지는 ThemeContext이다. 여기에 테마값이 바뀔 때마다 body태그의 class를 바꿔서 배경색을 바꿀 것이다.2\. body
13.Next.js_13_API라우팅(이해X)
Next.js에서는 페이지를 만드는 것처럼 간단하게 백엔드 API를 만들 수 있다. 사실상 작은 Node.js 서버를 구현할 수 있다. 우선 /pages 폴더 아래에 /api라는 폴더를 만들고여기다가 특별한 형태의 자바스크립트 파일을 추가하면 된다. 이렇게 defaul
14.Next.js_14_Image컴포넌트
public 폴더안에 있는 파일은 /하고 파일 경로르 적으면 접근할 수 있다.만약 public폴더안에 images라는 폴더를 만들고 이 안에 이미지 파일을 넣으면test.js라는 페이지를 만들고 간단한 img태그로 만들어 준 후 /test로 들어가서 테스트해본다 Nex
15.Next.js_15_Head컴포넌트
웹 브라우저의 tab 설정하기Next.js가 제공하는 Head컴포넌트를 추가하고 title태그에 작성하면된다. search.js에도 추가해준다.페이지에 아이콘 넣기아이콘 이미지를 public 폴더에 넣은 후에 아이콘은 모든 페이지에 공통으로 적용할 것이기때문에 \_ap
16.Next.js_16_구글 폰트 적용해보기
예를 들어서 Noto Sans KR이라는 폰트를 적용해보자.\_app.js 파일에서 적용할 것이다.@next/font/google이라는 패키지에서 Noto_Sans_KR을 임포트하고 아래처럼 객체를 만든다.weight 프로퍼티에는 사용할 폰트 굵기를 적었다. 굵기 40
17.Next.js_17_배포하기
기존 리액트에서는 JSX 문법으로 코드를 작성하는데JSX는 웹 브라우저에서 그대로 실행할 수 없기때문에트랜스파일(Transpile)과정을 거쳐서 JS파일로 바꾸어웹 브라우저가 실행시킬 수 있게 바꾸는 과정이 필요하다그래서 Next.js도 빌드과정이 필요하다. 빌드 리액
18.Next.js_18_프리렌더링
프론트엔드 개발에서 렌더링이란...: 리액트 같은 것으로 html을 만드는 것프리렌더링은웹브라우저가 페이지를 로딩하기 전에 하는 렌더링클라이언트 사이드 렌더링서버에서 html을 불러오고 자바스크립트를 불러오고리액트가 실행되면서 화면이 보인다.프리렌더링은처음에 브라우저가
19.Next.js_19_정적 생성이란
정적 생성은 빌드할 때 html을 미리 만들어놓는 것getStaticProps라는 함수를 만들고이것을 export한다. Next.js에서 사용하는 특이한 문법인데함수 이름과 export는 정해진 약속이기때문에반드시 이름은 getStaticProps로 해야한다. 밑에 있
20.Next.js_20_서버사이드 렌더링
search.js파일을 보면검색어가 쿼리 스트링으로 되어있어서이것을 기준으로 검색된 상품 목록을 가져오게 된다. 이 페이지를 정적생성으로 만든다고 하자.getStaticProps함수를 만들고 관련된 코드를 전부 옮긴다. 리액트 훅은 다 지운다. products라는 데이
21.Next.js_21_클라이언트에서 데이터 주고 받기
상품 상세 페이지에서 데이터를 추가할 수 있는 입력폼을 추가하겠다. 데이터를 주고 받는 시나리오.formValue라는 State를 만들었고handleChange와 InputChange함수에서 input을 수정할 때마다State값을 바꾸고handleSubmit이라는 함수
22.Next.js_22_프리렌더링 총 정리
웹 브라우저가 페이지를 로딩하기 이전에 렌더링정적 생성(Static Generation)서버사이드 렌더링(Server-side Rendering)Next.js에서는 기본적으로 모든 페이지를 정적 생성프로젝트를 빌드하는 시점에 미리 HTML을 렌더링정적 생성할 때 필요한