[2025-08-24] vscode로 프로젝트 초기 설정 가이드

vscode로 프로젝트 초기 설정 가이드

안녕하세요. 클스 입니다.

우리가 서비스를 개발할때, front-end, back-end, batch 등 여러 하위 시스템들로 구성하는 경우가 많습니다.

이때 project 폴더를 만들고 하위에 폴더를 구성합니다.

full-stack을 혼자 다해야 하는 개발자는 vscode를 3개를 실행해서 편집하는 경우가 대부분입니다.

테미널도 3개를 띄워서 쓰는 경우가 있습니다. 이를 간단하게 해결하는 방법입니다.

1. 개요

솔루션, 서비스를 개발할때 project folder를 생성하고, 하위에 여러 기능들을 추가한다.
api, batch, user web, admin web, monitoring web...

이때 vscode의 workspace를 열면 자동으로 터미널까지 셋팅하게 할 수 있다.

이 부분 수정

2. 환경 설정(workspace)

• project folder 생성
  

  $ mkdir myproject
  $ cd myproject
  $ mkdir .vscode
  $ code .
  

• .vscode 폴더에서 tasks.json 작성
  

  {
    "version": "1.0.0",
    "tasks": [
      {
        "label": "admin-web",
        "type": "shell",
        "command": "${env:SHELL}",                   // macOS/Linux용
        "windows": { "command": "powershell.exe" },  // Windows용
        "options": {
          "cwd": "${workspaceFolder}/nginx-proxy" 
        },
        "presentation": {
          "panel": "dedicated",
          "group": "MyService",          // 한 터미널에서 분할하려면 같은 group 이름 지정
          "reveal": "always",
          "showReuseMessage": false
        },
        "problemMatcher": [],
        "runOptions": { "runOn": "folderOpen" }
      },
      {
        "label": "web-user",
        "type": "shell",
        "command": "${env:SHELL}",
        "windows": { "command": "powershell.exe" },
        "options": {
          "cwd": "${workspaceFolder}/web-user/trunk" 
        },
        "presentation": {
          "panel": "dedicated",
          "group": "MyService",
          "reveal": "always",
          "showReuseMessage": false
        },
        "problemMatcher": [],
        "runOptions": { "runOn": "folderOpen" }
      },
      {
        "label": "user-web-api",
        "type": "shell",
        "command": "${env:SHELL}",
        "windows": { "command": "powershell.exe" },
        "options": {
          "cwd": "${workspaceFolder}/web-user-api/trunk" 
        },
        "presentation": {
          "panel": "dedicated",
          "group": "MyService",
          "reveal": "always",
          "showReuseMessage": false
        },
        "problemMatcher": [],
        "runOptions": { "runOn": "folderOpen" }
      }
    ]
  }
  

• 하위 프로젝트 폴더를 생성하고 workspace로 저장한다.
  

  {
    "folders": [
      {
        "path": ".",
        "name": "MyService",
        "editor.tabSize": 2,
      }
    ],
    "settings": {
      "files.exclude": {
        "**/.git": true,
        "**/.venv": true,
        "**/.nvmrc": true,
        "**/.quasar": true,
        "**/.files": true,
        "**/node_modules": true,
        "**/.DS_Store": true,
        "**/__pycache__": true
      }
    }
  }
  

• tasks.json 파일 변경시 적용

1. 편집기 재실행 (간단하지만 확실한 방법)
   창 전체 Reload : 단축키: Ctrl+Shift+P → “Developer: Reload Window” 실행
   VS Code 창이 재시작되며 모든 설정(tasks.json 포함)이 새로 로드됩니다.

2. 워크스페이스 재열기
   메뉴: File > Close Folder 한 뒤 다시 Open Folder
   폴더 열기 시 runOn: "folderOpen" 옵션이 있는 태스크가 자동으로 실행됩니다.

• svn ignore 설정하기
  

  # .svnignore 파일 생성
  .git
  .venv
  .nvmrc
  .quasar
  .files
  node_modules
  .DS_Store
  __pycache__
  

• 커밋하기
  

  # 1) .svnignore 파일을 svn:ignore 속성으로 설정
  svn propset svn:ignore -F .svnignore .
  
  # 2) 변경 사항 커밋
  svn commit -m "Add svn:ignore based on VSCode files.exclude" 

• code로 workspace 열기
• workspace를 프로젝트 폴더에 생성했다면 myservice.code-workspace 파일이 있다.
• $ code myservice.code-workspace 로 열면 필요한 Terminal이 한번에 열리게 된다.

3. 친절한 README.md 파일

• project 폴더에 README.md : 개발자가 빠르게 개발, 빌드환경을 설정할 수 있도록 상세하게 적는다.
  하위 여러개의 프로젝트가 있으므로 전체를 기술한다. 그리고 각 프로젝트 폴더별 README.md를 생성하고 자세하게 필요한 내용을 가이드 한다. 전체 실행 방법, 테스트 계정등을 포함하면 좋다.
• 신입 팀원이 들어와도 개발 환경 구축 부터 빠르게 할 수 있게 된다.

# web-user

## quasar 초기 설정
```bash
pnpm setup --global ===> .zshrc에 pnpm path 를 추가
pnpm add -g @quasar/cli
pnpm add -D vite@^6.0.0 => 프로젝트는 이 버전을 쓰네
```

## 모듈 설치
```bash
pnpm install --frozen-lockfile
```

## 로컬 구동
```bash
./start.sh
# or
nvm use
pnpm start:local-pwa
```

## 빌드
```bash
# 개발
pnpm build:dev-pwa

# 운영
pnpm build:prd-pwa
```

## Tips
```bash
# config 임시파일 삭제
pnpm quasar clean --qconf
```