Next.js 시작하기

- 프론트엔드 개발자란?

프론트엔드 개발자는 백엔드 API에서 가져온 데이터의 출력, 입력을 통한

비즈니스 로직 구성과 사용자와 대화하는 사용자 인터페이스 부분을 작업하는 개발자를 말한다.

 

- 프론트엔드 개발에 입문이란?

1. HTML / JS / CSS에 대한 기본적인 이해

2. React 혹은 Vue 혹은 다른 프론트엔드 라이브러리에 대해 이해

3. 구글 / stackoverflow / mdn(Mozila Developer Network) 등에서 필요한 지식을 찾고 적용

 

- Next.js란?

The React Framework for Production

 

Next.js는 Vercel에서 관리하고 있다.

 

React.js는 라이브러리를 표방.

 

- 프레임워크 vs 라이브러리

1. 프레임워크는 기반구조 vs 라이브러리는 개발 편의 도구들

2. 제어 주도권 프레임워크가 가짐 vs 제어 주도권 사용자가 가짐

3. 프레임워크는 기계(like 굴삭기) vs 라이브러리는 공구(like 펜치니퍼)

4. 프레임워크 자유도 상대적으로 작음 vs 라이브러리 자유도 상대적으로 큼

 

- 프레임워크의 장점

1. 개인이 해야 할 고민들을 프레임워크 개발자가 미리 하고 반영

2. 특정 디자인 패턴이나 동작과 기능들을 위한 정의와 방식을 정리해둠

3. 여러 개발자가 함께 협업할 때 기준점이 됨.

 

- Why Next.js : 프론트엔드 개발자들이 가진 고민에 대한 적절한 해결책을 제공

1. 규모가 있는 서비스 구조 설계를 어떻게 할 것인가/

2. 개발환경 / 코드분할 / 파일 기반 구조

3. SEO(검색 엔진 최적화)

4. 프론트엔드에 필요한 간단한 API 구성

5. 손쉬운 배포 시스템 Vercel

 

- Next.js의 대체재는 없나?

1. Next.js는 대표적인 React 프레임워크로서 자리를 공고히 하고 있음.

Vercel의 비전 : We enable developers to build and publish wonderful things -> https://vercel.com/about 

About Us | Vercel

대체재로는 Gatsby / Remix 등이 있음.

 

- Next.js 프로젝트 띄워보기

npx create-next-app nextjs-blog --use-npm --example

"https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

 

- Next.js 소개 및 환경 설정

1. Next.js 란? : 프론트엔드 프레임워크

2. 프레임워크란? : 기계 / 미리 정의되어 있음

3. 사용할 툴들 : Node / Yarn / Git / VSCode

4. Next.js 프로젝트 : 초간단 실행해보기

 

- Next.js로 만든 사례 둘러보기

Wappalyzer 크롬 익스텐션 : 웹페이지가 어떤 기술을 활용했는지 확인할 수 있는 도구

https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg 

Wappalyzer - Technology profiler

 

Next.js Showcases

https://nextjs.org/showcase 

Showcase | Next.js by Vercel - The React Framework

 

__next가 써있으면 Next.js로 프로그램을 만든 것을 추측할 수 있다.

 

Examples

 

Next.js Examples

https://nextjs.org/examples 

Find your Next.js templates – Vercel

 

(지난 시간에 잠깐 언급했던 VSCode Extension)

- React Snippets

- ESLint

- Prettier

- Bracket Pair

 

- Next.js로 만든 사례 둘러보기

1. Wappalyzer : 웹 페이지에 활용된 기술 확인

2. Showcases : Commerce / News / Entertainment...

3. Examples : Blog / Commerce / Typescript / CMS

4. VSCode Extensions : Snippets / ESlint / Prettier / Bracket