1. Node 설치 확인하기
node --version
2. 프로젝트 생성하기
mkdir back
yarn init-y
이 작업을 하고 나면 디렉터리에 pakage.json 파일이 생성됩니다.
3. Koa 웹 프레임워크 설치하기
yarn add koa
설치한 뒤 다시 한번 pakage.json을 열어 보면, koa가 dependencies에 추가되어 있을 것입니다.
4. ESLint와 Prettier 설정
두 기능을 VSC에서 사용하려면 VS 마켓플레이스에서 Prettier-Code formatter와 ESLint 확장 프로그램을 설치해둔 상태여야 합니다.
yarn add --dev eslint
yarn run eslint --init
Prettier 설정하기
디렉터리에 다음 파일을 만드세요.
.prettierrc
.prettierrc
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}
다음으로 Prettier에서 관리하는 코드 스타일은 ESLint에서 관리하지 않도록 eslint-config-prettier를 설치하여 적용하세요.
yarn add eslint-config-prettier
설치한 후 다음 설정 파일을 만들면 됩니다.
.eslintrc.json
{
"env": {
"commonjs": true,
"es2021": true,
"node": true
},
"extends": ["eslint:recommended", "prettier"],
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {}
}
5. 제대로 작동하는지 확인하기
src 디렉터리를 생성하고, 그 안에 index.js 파일을 만들고 아래와 같이 작성하세요
src/index.js
const hello = "hello";
const로 값을 선언하고 사용하지 않으면, ESLint 기본 설정은 이를 에러로 간주합니다.
사용되지 않은 const 값은 문법적으로 문제없지만, 더 나은 코드를 작성하도록 장려하기 위해 ESLint는 이를 오류로 취급합니다. 이러한 규칙을 끌 수도 있습니다. 오류 이름을 알아 두면 .eslintrc.json에서 해당 오류를 경고로 바꾸거나 비활성화 할 수 있습니다.
.eslintrc.json을 다음과 같이 한번 수정해보세요
.eslintrc.json
{
"env": {
"commonjs": true,
"es2021": true,
"node": true
},
"extends": ["eslint:recommended", "prettier"],
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
"no-unused-vars": "warn",
"no-console": "off"
}
}
ESLint 기본 설정에서는 console.log를 사용하는 것을 지양하고 있습니다. 그러나 Koa를 실습하면서 console.log를 사용할 것이므로 이 규칙을 비활성화한 것입니다.
'✏ 개발 기록 > 설치 및 환경 설정' 카테고리의 다른 글
[MongoDB] MongoDB 작업 환경 세팅하기 (0) | 2024.03.20 |
---|---|
[Next.js 개발도구] ESLint와 Prettier, 및 다른 플러그인 설치 (0) | 2023.07.18 |
[Next.js] 프로젝트 생성 후 pages 폴더가 없는 경우 (0) | 2023.07.17 |