다시 프론트 틀잡기 # 1 RE: next.js 9으로 다시 시작
Prologue
맨땅에서 무언가 만들어보자! 블로그 만들기는 예전부터 계속 하던 프로젝트인데 벌써 2번의 블로그를 만들었다가 맘에 안들어서 갈아 엎은 경험이 있다! 이번에는 예전보다 '낫게' 블로그를 만들어보자.
다시 처음으로...
이전에 블로그 프론트 틀잡기라는 내용으로 첫번째 글을 썼는데,
리액트 개발을 한지 좀 돼서 next9 이전버전을 기준으로 쓰고 있었다.
그런데 next9의 업데이트 사항을 보자마자 next9로 업데이트해야 한다는 것을 느꼈다.
이전에 했던 과정은 next9에서는 전혀 필요가 없다.
왜냐하면 아래와 같은 기능이 있기 때문이다.
1. 타입스크립트 기본 지원
2. 동적라우팅 기본 지원
얼마나 아름다운가, 이젠 전혀 그런 귀찮은 세팅들을 할 필요가 없다.
자세한 내용은 : next9 패치노트
next9은 example로 시작하겠다.
yarn create next-app --example with-typescript with-typescript-app 명령어로 프로젝트를 생성한다.
자동 세팅된 내용 분석해보기
위와 같이 자동 세팅이 되었다.
디렉토리 구조를 보면 components, interfaces, pages, utils 등의 디렉토리가 있고, pages 내부에는 api/users가 있다.
next9을 기준으로 기본적인 설정은 다 해주고 있다.
그렇다면 여기에 빠진 몇몇가지 패키지를 추가해보자.
Linter 설치하기
Linter는 코딩을 하며 (억지로) 코딩스타일을 지키게 만든다. 때로는 매우 귀찮은 존재이지만, 퀄리티 있는 코드를 위해서는 필수적이다.
설치 명령어
개발 의존성에 속하게 하기 위해 tslint와 tslint-config-airbnb, tslint-react-hooks를 -D 옵션으로 설치한다.
airbnb 스타일 설정으로 코딩하고, react hooks를 사용할 것이기 때문에 hooks에 대한 tslint도 설치해준다.
yarn add tslint tslint-config-airbnb tslint-react-hooks -Dtslint.json 파일 생성하기
yarn tslint --init이렇게 하면 아래와 같이 기본 포맷에 거의 비어있는 tslint.config 파일이 생성된다.
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {},
"rulesDirectory": []
}이 내용을 아래와 같이 수정해준다.
{
"defaultSeverity": "error",
"extends": ["tslint-config-airbnb", "tslint-react-hooks"],
"jsRules": {},
"rules": { "react-hooks-nesting": true },
"rulesDirectory": []
}
그리고 package.json을 열어서 아래와 같이 tslint를 추가해준다.
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"type-check": "tsc",
"tslint": "tslint -p . -c tslint.json"
}이렇게 하면 yarn tslint 명령어로 파일에 에러가 있는지 검사할 수 있다.
tslint 지우고 eslint 설치하기
몰랐는데, tslint 패키지 자체가 deprecated 되어버렸다! 이런 젠장!
아래 명령어로 eslint를 깔아주자
yarn add eslint @typescript-eslint/eslint-plugin @typescript-eslint/eslint-plugin-tslint @typescript-eslint/parser -D또 .eslintrc 파일을 생성하고
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"modules": true
}
},
"plugins": ["@typescript-eslint"],
"extends": ["plugin:@typescript-eslint/eslint-recommended"]
}위와 같은 내용을 입력해준다.
package.json에서 scripts 부분도 살짝 수정해준다.
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"type-check": "tsc",
"eslint": "eslint ."
},Prettier도 설치하기
prettier는 lint 때문에 일어나는 자잘한 포맷에러를 자동으로 잡아줄 수 있다.
yarn add prettier -D그리고 package.json으로 가서 prettier 설정을 좀 추가해준다.
"prettier": {
"singleQuote": true,
"trailingComma": "es5", // 마지막에 컴마 붙이기
"printWidth": 100, // 100자가 넘으면 자동 줄넘김
"arrowParens": "avoid" // 괄호 생략이 가능할 때, 생략하기
}사실 위 부분은 입맛대로 하면 된다.
Husky 설치하기
매번 린팅 툴을 수동으로 실행시키는 것은 효율적이지도 않고 까먹기도 쉽기 때문에 husky라는 패키지를 이용해보자.
yarn add husky -D그리고 package.json에 가서 다음 내용을 추가하면 된다.
"husky": {
"hooks": {
"pre-commit": "yarn eslint"
}
},이렇게 해놓으면, 우리가 깃 커밋을 할 때 eslint가 자동으로 실행되어 코드를 검증해준다.
Babel을 이용하여 Import Path Alias 설정하기
Import를 더욱 쉽게하기 위해서 Import Path Alias를 설정하자.
이 설정을 하게 되면 대략 아래와 같은 효과를 얻을 수 있다.
// Before
import App from '../components/App/App';
// After
import App from '@components/App/App';이렇게 해두면, 나중에 import되는 경로를 복사하거나 파일을 옮길 때 경로 때문에 생기는 문제들에 대해 더욱 잘 대비할 수 있다.
yarn add babel-plugin-module-resolver -D그리고 프로젝트 최상위에 .babelrc 파일을 생성하고 아래와 같은 내용을 적어준다.
{
"presets": [["next/babel"]],
"plugins": [
[
"module-resolver",
{
"root": ["./"],
"alias": {
"@components": "./components"
}
}
]
]
}그리고 .tsconfig.json 파일에는 다음과 같은 내용을 추가해준다.
"compilerOptions":{
...,
"baseUrl": "./",
"paths": {
"@components/*": ["./components/*"]
}
}테스팅을 위해 Jest와 Enzyme 설치하기
Jest는 자바스크립트 테스팅 프레임웍이고, Enzyme은 리액트를 위한 자바스크립트 테스팅 유틸리티로 리액트 컴포넌트의 출력을 더욱 알기 쉽게 해준다. 두가지 툴 모두를 이용하면 코드가 올바르게 동작하는지 테스트하기 더 쉽다.
yarn add --save-dev jest enzyme enzyme-adapter-react-16 babel-jest @types/jest @types/enzyme이렇게 필요한 패키지들을 설치하고
package.json파일의 script부분에 다음과 같은 내용을 추가한다.
"scripts": {
...,
"test": "jest"
}pages 디렉토리 밑 /__tests__/index.test.tsx 파일을 생성하고 내용은 아래와 같이 적어준다.
import React from 'react';
import { mount } from 'enzyme';
import Index from '../index';
describe('index page', () => {
it('should have IndexPage component', () => {
const subject = mount(<Index />);
expect(subject.find('IndexPage')).toHaveLength(1);
});
});이렇게 작성하면 Index.tsx 파일 내부에 있는 IndexPage라는 컴포넌트의 배열을 테스트하게 되는데, 그 길이가 1개이면 통과다.
yarn test를 실행해보면 다음과 같은 결과를 얻을 수 있다.
jest-watch-typeahead 설치하기
yarn add --save-dev jest-watch-typeahead이 패키지는 내가 원하는 테스트를 필터링 할 때 좋다.
(추가) 선택사항 enzyme-to-json
나는 스냅샷 테스팅을 선호하지 않아서 이 패키지는 깔지 않았다.
스냅샷 테스팅을 할 사람은 반드시 깔아야 하니 참고.
스냅샷 테스팅을 하지 않는 이유 : https://velog.io/@k7120792/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%EB%83%85%EC%83%B7-%ED%85%8C%EC%8A%A4%ED%8C%85%EC%9D%98-%EB%8B%A8%EC%A0%90%EB%93%A4-o8jypesqnr
여기까지 간신히 대충 기초설정이 끝난 것 같다.
참고자료
https://velog.io/@k7120792/%EB%B2%88%EC%97%AD-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%EB%83%85%EC%83%B7-%ED%85%8C%EC%8A%A4%ED%8C%85%EC%9D%98-%EB%8B%A8%EC%A0%90%EB%93%A4-o8jypesqnr
https://dev.to/oahehc/how-to-config-react-project-with-next-js-typescript-tslint-and-jest-11l0?utm_source=notify_mailer&utm_medium=email&utm_campaign=new_reply_email
