[개발스터디] week1: Next.js / ESLint / TypeScript

21-06-08 Week 1

목표

오늘은 개발환경 세팅하는 것이 주된 목표였고, 추가로 몇 가지 기본 개념들에 대해서도 공부하였다.

 

Web Curriculum

• js
• ES6, ES7, ES8, ...
• babel
• react
  • component lifecycle
  • hooks
  • global state management ( redux, mobx, ... )
• webpack
• SCSS
• Next.js with vercel
• client side rendering vs server side rendering
• authentication
  • cookie & session vs jwt
• http call
  • http headers, http status
  • REST API server
  • GraphQL server (with apollo client)
• cloud ( firebase )
  • auth
  • firestore
  • storage
  • analytics
  • fcm
• cloud ( AWS amplify )
  • cognito
  • app sync with dynamodb
  • S3
  • pinpoint

---

1. Next.js

Next.js는 Vercel에서 만든 오픈 소스 React 프런트 엔드 개발 웹 프레임 워크로, 서버 측 렌더링 및 React 기반 웹 애플리케이션 용 정적 웹 사이트 생성과 같은 기능을 활성화합니다.
- 위키백과 -

Next.js는 React의 서버 측 렌더링을 하는 SSR(Server Side Rendering)을 쉽게 구현하도록 도와주는 프레임워크이다. React에는 크롤링 문제가 있었는데 이를 해결한 것이 Next.js라고 한다.

과거 웹사이트들은 대부분 SSR로 동작되었기 때문에 페이지가 여러 개로 구성된 Multi Page Form 방식을 사용했었다. 하지만 스마트폰의 등장하면서 예전 웹들은 모바일에 최적화 되어있지 않아 사용에 불편함이 생겼다. 그래서 사용자들을 위해 모바일 앱과 같은 형태의 웹페이지가 필요하게 되었다. 

이러한 문제를 해결하기 위해 React, Angular, Vue 등 여러 라이브러리 프레임워크가 등장하였고, 동시에 CSR(Client Side Rendering)이 가능한 SPA(Single Page Application)도 등장하게 되었다. SPA는 기존의 웹페이지와 다르게 한 개의 페이지 내에서 여러 동작이 이루어지는 방식이다. 이는 모바일 앱과 비슷한 형태로 이루어져 있어서 Header 영역은 고정되어 있고 Main 영역의 상태만 변경된다.

 

설치

Next.js는 window, mac, Linux에서 모두 동작한다. Next.js를 사용하려면 Node.js만 설치하면 된다.

 

1.1 SSR와 CSR의 차이점, React의 단점

React은 SSR이고 Next.js는 CSR이다. 렌더링 방식을 살펴보자.

React 렌더링 방식은 다음과 같다. 먼저 render() 함수가 실행되고, 그 다음에 ComponentDidMount() 함수를 통해서 데이터를 가져와서 다시 한 번 렌더링된다. 반면 Next.js는 getInitialProps() 함수를 통해서 데이터를 먼저 가져온 후 한 번에 렌더링을 한다.

이처럼 SSR은 한 번에 렌더링이 되기 때문에 초기 로딩 속도는 빠르다. 하지만 페이지를 요청할 때마다 중복되는 파일을 내려받게 되기 때문에 페이지를 이동할 때에는 CSR보다 느리다. 하지만 CSR은 초기 로딩 속도는 느리지만, 첫 페이지를 로딩할 때 모든 파일을 내려받기 때문에 페이지를 이동할 때마다 해당 페이지에서 필요한 데이터만 불러서 사용하면 된다.

	SSR	CSR
Web Framework	React	Next.js
초기 로딩 속도	빠르다	느리다
페이지 이동 시	느리다	빠르다
렌더링 과정	render() - 렌더링(1) ➡ componentDidMount() - 데이터를 가져옴 ➡ render() - 렌더링(2)	getInitialProps() - 데이터를 가져옴 ➡ render() - 렌더링
파일 내려받기	페이지를 요청할 때마다 필요한 파일을 내려받는다. (중복된 파일을 내려받게 된다)	초기에 모든 파일을 내려받는다. (중복된 파일을 내려받지 않는다)

또한 React는 크롤링 문제가 있다. Postman을 통해 네이버 접속하면 내려받은 파일의 모든 내용들을 살펴볼 수 있다. 하지만 React로 만든 페이지에 접속 시 받은 파일들을 읽어보면 전체 데이터가 아닌 일부 데이터만 볼 수 있다. 개발자로서 크롤링이 중요하다고 하는데 React는 다음과 같이 크롤링에 문제가 있었고 이러한 문제를 해결하기 위해 나온 것이 Next.js라 한다. (스터디에서 두루뭉실하게 이해한 바로는 이렇다(...). 좀더 공부하다가 완전히 이해가 되면 내용을 수정하여 더 추가할 예정이다.)

 

1.2 Next.js 프로젝트 생성하기

다음 명령어를 통해 Nextjs의 프로젝트를 생성할 수 있다.

$ npx create-next-app [프로젝트명]

기본적으로 생성되는 구조는 다음과 같다.

또한 다음 명령어를 통해 서버를 실행할 수 있다. localhost:3000에 접속해보면 아래 그림과 같이 뜬다. 페이지에 띄우는 화면은 pages/index.js이다.

$ npm run dev

 

1.3 Next.js의 pages 폴더

Next.js는 pages 폴더 내에 있는 파일이나 폴더를 계층구조로 접근할 수 있다.

예로 들어서 pages 폴더 내에 about.js 파일을 생성하였을 때, localhost:3000/about에 접속하면 해당 파일에 접근하여 about 페이지가 뜬다. pages 폴더 내에 hello 폴더를 생성하고 그 안에 world.js 파일을 생성하였다면, localhost:3000/pages/hello에 접속하여 접근할 수 있다.

 

 

2. npm

npm은 Node Package Manager의 약어로, Node.js 설치 시 자동으로 함께 설치가 완료되므로 따로 설치할 필요가 없다.

npmjs.com 사이트를 통해 사람들이 만들어 놓은 모듈들을 살펴볼 수 있다. 하지만 이러한 third-party module들은 사용시에 주의해야 한다. 왜냐하면 버그가 있을 경우에도 업데이트가 진행이 더디기 때문에 안정성이 보장되어 있지 않다. 따라서 큰 기업에서 공식적으로 지원하는 모듈들만 사용하자. 이들은 버그 발생 시 대응력이 뛰어나고 업데이트 진행이 잦다.

 

 

3. ESLint

3.1 Lint

오래된 스웨터의 보푸라기 같은 것을 린트(Lint)라고 부른다. 코드에도 이러한 보푸라기 같은 것이 있다. 예로 들어서 들여쓰기를 맞추지 않은 경우나 선언한 변수를 사용하지 않는 경우와 같이 말이다.

이러한 보푸라기들을 제거하는, 코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 부른다. 린트는 코드의 가독성을 높일 뿐만 아니라 동적 언어의 특성인 런타임 버그를 예방할 수 있다. 또한 많은 사람들과 함께 코딩을 하는 경우에 코드의 모양을 일관성있게 작성하도록 돕는다.

 

3.2 ESLint란?

ESLint는 ECMAScript 코드에서 문제점을 검사하며 더 좋은 코드로 정정해주는 린트 도구 중 하나이다. 과거에 JSLint, JSHint를 사용했다면 최근에는 이 ESLint를 많이 사용하는 편이라 한다.

 

3.3 ESLint 설정하기

다음 명령어를 작성하여 ESLint를 자세하게 설정할 수 있다.

$ npx eslint --init

1. How would you like to use ESLint?

➡ To check syntax, find problems, and enforce code style

: 코드 스타일을 맞추기 위해선 이 선택지를 선택하면 된다.

2. What type of modules does your project use?

➡ JavaScript modules (import/export)

3. Which framework does your project use?

➡ React

4. Does your project use TypeScript?

➡ No

5. Where does your code run?

➡ Browser

6. How would you like to define a style for your project?

➡ Use a popular style guide

7. Which style guide do you want to follow?

➡ Airbnb

에어비앤비의 코딩 스타일을 가장 많이 사용한다고 한다. 이는 .estlintc 파일의 'extends'에 'airbnb'로 적혀진다.

8. What format do you want your config file to be in?

➡ JavaScript

 

 

4. TypeScript

4.1 TypeScript란?

우선 JavaScript는 약타입언어이다. 강타입언어란 type도 함께 지정해주는 언어를 말한다. 강타입언어 중 하나가 TypeScript이다.

 

4.2 TypeScript 해제하기

앞에서 ESLint 설정할 때 TypeScript는 사용하지 않는 방향을 설정했고, 앞으로도 TypeScript는 사용하지 않을 예정이다. 따라서 vscode의 setting에서 typescript와 관련된 설정은 모두 해제한다.

1. vscode setting ➡ typescript 검색 ➡ typescript와 관련된 모든 기능들 해제하기 (체크 해제)

이렇게 하면 .eslintrc와 index.js에 엄청난 빨간색 에러줄이 발생하게 된다.

2. 오류에 커서를 대고 'Quick fix' > 맨 아래 fix all~ 를 클릭한다.

그러면 .eslintrc에 발생한 에러는 모두 사라지게 된다.

3. index.js의 맨 윗줄에 Import React from 'react'; 를 작성한다.

4. .eslintrc.js > rules 에서 아래 코드를 추가한다.

  rules: {
    'react/jsx-filename-extension': 0,
  },

해당 오류의 발생 원인은 현재 Airbnb에서 사용하는 스타일로 작성해야 하기 때문에 발생하는 것이다. 굳이 에어비앤비의 스타일을 사용하지 않을 것이라 룰을 따르지 않겠다고 위의 코드와 같이 작성해주는 것이라 한다.

 

 

---

참고 자료

Next.js 제대로 알고 쓰자

 

프론트엔드 개발환경의 이해: 린트