[관리]프로젝트 개발환경 설정 - gyunam-bark/nb02-how-do-i-look-team1 GitHub Wiki

최초 작성: 2025.06.03, 박규남
최종 수정: 2025.06.04, 박규남

NPM 버전

v22.15.0(LTS)

기본 설치 패키지

의존성(dependencies)

1. express
2. dotenv
3. cors
4. morgan
5. multer
6. @prisma/client
7. jsonwebtoken

개발 의존성(devDependencies)

1. prisma
2. eslint
3. eslint-config-prettier
4. eslint-plugon-prettier
5. prittier

package.json

module 방식

esm: ecma script module

"type":"module"

scripts

"scripts": {
  "dev": "nodemon index.js",
  "start": "node index.js"
},

.gitignore

node_modules/

vscode 확장 기능(extensions)

	prettier
	esLint

prettier 설정

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "trailingComma": "es5" 
}

format on save 설정

prettier 확장 기능을 설치하면, 기본 설정으로 vscode 의 format on save 옵션을 따라가도록 되어있다. 그래서 vscode 자체의 format on save 을 활성화 해주면 됩니다.

1. 좌측 톱니바퀴 아이콘 클릭

2. 설정(Settings) 클릭

3. search 에 format 검색

Format On Save 를 체크해주면 저장시 Format 이 적용됩니다.

테스트

before

console.log('hello')

after

console.log('hello');

console.log() 뒤에 ';' 가 자동으로 붙는다면 정상적으로 동작 중입니다.

문제해결

저장시 Format이 적용 안 된다면 확장기능(ESlint, Prettier) 을 사용 안 함 > 활성화 > 실행 해봅니다.

esLint

eslint.config.js

import js from '@eslint/js';
import globals from 'globals';
import { defineConfig } from 'eslint/config';
import prettierPlugin from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';

export default defineConfig([
  {
    extends: [js.configs.recommended, prettierConfig],
    plugins: {
      prettier: prettierPlugin,
    },
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: {
        ...globals.node,
      },
    },
    rules: {
      'prettier/prettier': 'error',
      'no-console': 'off',
      'no-unused-vars': [
        'warn',
        {
          argsIgnorePattern: '^_',
          varsIgnorePattern: '^_',
        },
      ],
    },
  },
]);

테스트

before

const hello = 1;

hello 에 빨간밑줄이 표시 되고, '사용 되지 않은 변수' 와 관련된 에러가 발생한다면 정상적으로 동작 중 입니다.