[React] 리액트 개발환경 만들기 (etc. VSCode 개발환경 설정)

FrontEnd/React

[React] 리액트 개발환경 만들기 (etc. VSCode 개발환경 설정)

일락。 2024. 11. 8. 10:40

scoop 설치하기

macOS나 Linux는 웹 개발에 필요한 도구들을 brew나 apt라는 프로그램으로 쉽게 설치할 수 있다. 윈도우는 이러한 프로그램을 제공하지 않아 필요한 도구를 일일이 받아야 하는 번거로움이 존재한다. 해당 번거로움을 덜기 위해 scoop를 설치한다.

scoop란 brew나 apt와 같은 방식으로 명령 줄에서 프로그램을 쉽게 설치할 수 있다. 우선 설치 전 PowerShell을 통해 환경변수 설정 및 윈도우 실행규칙을 변경하는 명령을 수행해 줘야한다.

// scoop로 설치할 프로그램의 위치를 지정
PS C:\Users\home> $env:SCOOP='C:\Scoop'
PS C:\Users\home> [Environment]::SetEnvironmentVariable('Scoop',$env:SCOOP,'User')

// 윈도우 실행 규칙을 변경
PS C:\Users\home> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

// 정상적으로 적용되었는지 확인 및 scoop 설치
PS C:\Users\home> Get-ExecutionPolicy -Scope CurrentUser
RemoteSigned
PS C:\Users\home> iwr -useb get.scoop.sh | iex
Initializing...
Downloading...
Extracting...
Creating shim...
Adding C:\Scoop\shims to your path.
Scoop was installed successfully!
Type 'scoop help' for instructions.
PS C:\Users\home>

scoop를 통해 git과 aria2를 추가적으로 설치한다.

PS C:\Users\home> scoop install git aria2
Installing '7zip' (24.08) [64bit] from 'main' bucket
7z2408-x64.msi (1.9 MB) [=================================================================================] 100%
Checking hash of 7z2408-x64.msi ... ok.
Extracting 7z2408-x64.msi ... done.
Linking C:\Scoop\apps\7zip\current => C:\Scoop\apps\7zip\24.08
Creating shim for '7z'.
Creating shim for '7zFM'.
Making C:\Scoop\shims\7zfm.exe a GUI binary.
Creating shim for '7zG'.
Making C:\Scoop\shims\7zg.exe a GUI binary.
Creating shortcut for 7-Zip (7zFM.exe)
Persisting Codecs
Persisting Formats
Running post_install script...done.
'7zip' (24.08) was installed successfully!
Notes
-----
Add 7-Zip as a context menu option by running: "C:\Scoop\apps\7zip\current\install-context.reg"
Installing 'git' (2.47.0.2) [64bit] from 'main' bucket
PortableGit-2.47.0.2-64-bit.7z.exe (59.2 MB) [============================================================] 100%
Checking hash of PortableGit-2.47.0.2-64-bit.7z.exe ... ok.
Extracting PortableGit-2.47.0.2-64-bit.7z.exe ... done.
Linking C:\Scoop\apps\git\current => C:\Scoop\apps\git\2.47.0.2
Creating shim for 'sh'.
Creating shim for 'bash'.
Creating shim for 'git'.
Creating shim for 'gitk'.
Making C:\Scoop\shims\gitk.exe a GUI binary.
Creating shim for 'git-gui'.
Making C:\Scoop\shims\git-gui.exe a GUI binary.
Creating shim for 'scalar'.
Creating shim for 'tig'.
Creating shim for 'git-bash'.
Making C:\Scoop\shims\git-bash.exe a GUI binary.
Creating shortcut for Git Bash (git-bash.exe)
Creating shortcut for Git GUI (git-gui.exe)
Running post_install script...done.
'git' (2.47.0.2) was installed successfully!
Notes
-----
Set Git Credential Manager Core by running: "git config --global credential.helper manager"

To add context menu entries, run 'C:\Scoop\apps\git\current\install-context.reg'

To create file-associations for .git* and .sh files, run 'C:\Scoop\apps\git\current\install-file-associations.reg'
Installing 'aria2' (1.37.0-1) [64bit] from 'main' bucket
aria2-1.37.0-win-64bit-build1.zip (2.4 MB) [==============================================================] 100%
Checking hash of aria2-1.37.0-win-64bit-build1.zip ... ok.
Extracting aria2-1.37.0-win-64bit-build1.zip ... done.
Linking C:\Scoop\apps\aria2\current => C:\Scoop\apps\aria2\1.37.0-1
Creating shim for 'aria2c'.
'aria2' (1.37.0-1) was installed successfully!
PS C:\Users\home>

Node.js 설치하기

Node.js란 "V8 Java script 엔진으로 빌드 된 Javascript 런타임(특정 언어가 구동된느 환경을 의미)"이다. Javascript는 클라이언트(브라우저)에서만 동작하는 프로그래밍 언어로, 프론트 앤드 분야에서만 사용되었다. 하지만 Node.js는 클라이언트에서 독립해 Javascript를 통해 서버를 구현하였다.

PS C:\Users\home> scoop install nodejs-lts
WARN  Scoop uses 'aria2c' for multi-connection downloads.
WARN  Should it cause issues, run 'scoop config aria2-enabled false' to disable it.
WARN  To disable this warning, run 'scoop config aria2-warning-enabled false'.
Installing 'nodejs-lts' (22.11.0) [64bit] from 'main' bucket
Starting download with aria2 ...
Download: 11/08 05:44:47 [ERROR] CUID#11 - Download aborted. URI=https://nodejs.org/dist/v22.11.0/node-v22.11.0-win-Download: Exception: [AbstractCommand.cc:351] errorCode=8 URI=https://nodejs.org/dist/v22.11.0/node-v22.11.0-win-x64Download:   -> [HttpResponse.cc:81] errorCode=8 Invalid range header. Request: 6291456-11534335/21299714, Response: Download: 11/08 05:44:47 [ERROR] CUID#10 - Download aborted. URI=https://nodejs.org/dist/v22.11.0/node-v22.11.0-win-Download: Exception: [AbstractCommand.cc:351] errorCode=8 URI=https://nodejs.org/dist/v22.11.0/node-v22.11.0-win-x64Download:   -> [HttpResponse.cc:81] errorCode=8 Invalid range header. Request: 11534336-16777215/21299714, Response:Download: 11/08 05:44:47 [ERROR] CUID#12 - Download aborted. URI=https://nodejs.org/dist/v22.11.0/node-v22.11.0-win-Download: Exception: [AbstractCommand.cc:351] errorCode=8 URI=https://nodejs.org/dist/v22.11.0/node-v22.11.0-win-x64Download:   -> [HttpResponse.cc:81] errorCode=8 Invalid range header. Request: 16777216-21299713/21299714, Response:Download: Download Results:
Download: gid   |stat|avg speed  |path/URI
Download: ======+====+===========+=======================================================
Download: cd64d2|OK  |    12MiB/s|C:/Scoop/cache/nodejs-lts#22.11.0#2a2e3ab.7z
Download: Status Legend:
Download: (OK):download completed.
Checking hash of node-v22.11.0-win-x64.7z ... ok.
Extracting node-v22.11.0-win-x64.7z ... done.
Linking C:\Scoop\apps\nodejs-lts\current => C:\Scoop\apps\nodejs-lts\22.11.0
Adding C:\Scoop\apps\nodejs-lts\current\bin to your path.
Adding C:\Scoop\apps\nodejs-lts\current to your path.
Persisting bin
Persisting cache
Running post_install script...done.
'nodejs-lts' (22.11.0) was installed successfully!
PS C:\Users\home>

VSCode 설치하기

비주얼 스튜디오 코드는 마이크로소프트에서 제공하는 오픈소스 코드 편집기이다.

PS C:\Users\home> scoop bucket add extras
Checking repo... OK
The extras bucket was added successfully.
PS C:\Users\home> scoop install vscode
WARN  Scoop uses 'aria2c' for multi-connection downloads.
WARN  Should it cause issues, run 'scoop config aria2-enabled false' to disable it.
WARN  To disable this warning, run 'scoop config aria2-warning-enabled false'.
Installing 'vscode' (1.95.1) [64bit] from 'extras' bucket
Starting download with aria2 ...
Download: Download Results:
Download: gid   |stat|avg speed  |path/URI
Download: ======+====+===========+=======================================================
Download: 015def|OK  |    11MiB/s|C:/Scoop/cache/vscode#1.95.1#5e8f240.7z
Download: Status Legend:
Download: (OK):download completed.
Checking hash of dl.7z ... ok.
Extracting dl.7z ... done.
Linking C:\Scoop\apps\vscode\current => C:\Scoop\apps\vscode\1.95.1
Creating shortcut for Visual Studio Code (code.exe)
Adding C:\Scoop\apps\vscode\current\bin to your path.
Persisting data
Running post_install script...INFO  [Portable Mode] Copying extensions...
INFO  [Portable Mode] Copying user data...
INFO  Adjusting path in extensions file...
done.
'vscode' (1.95.1) was installed successfully!
Notes
-----
Add Visual Studio Code as a context menu option by running:
'reg import "C:\Scoop\apps\vscode\current\install-context.reg"'
For file associations, run:
'reg import "C:\Scoop\apps\vscode\current\install-associations.reg"'
PS C:\Users\home>
PS C:\Users\home> cd 'C:\Scoop\apps\vscode\current\'
PS C:\Scoop\apps\vscode\current> ./install-context.reg

touch 프로그램 설치하기

touch는 MacOS나 Linux에서 간단한 명령으로 파일이나 디렉터리를 만들어 주는 유틸리티이다. 윈도우의 경우 제공되지 않으므로 설치한다.

PS C:\> scoop install touch
WARN  Scoop uses 'aria2c' for multi-connection downloads.
WARN  Should it cause issues, run 'scoop config aria2-enabled false' to disable it.
WARN  To disable this warning, run 'scoop config aria2-warning-enabled false'.
Installing 'touch' (0.2018.07.25) [64bit] from 'main' bucket
Starting download with aria2 ...
Download: Download Results:
Download: gid   |stat|avg speed  |path/URI
Download: ======+====+===========+=======================================================
Download: 4aa125|OK  |   319KiB/s|C:/Scoop/cache/touch#0.2018.07.25#c204b7c.ps1
Download: Status Legend:
Download: (OK):download completed.
Checking hash of touch.ps1 ... ok.
Linking C:\Scoop\apps\touch\current => C:\Scoop\apps\touch\0.2018.07.25
Creating shim for 'touch'.
'touch' (0.2018.07.25) was installed successfully!
PS C:\>

크롬 브라우저 설치하기

웹표준과 브라우저 점유율이 높은 크롬 클라이언트를 설치한다.

PS C:\> scoop install googlechrome
WARN  Scoop uses 'aria2c' for multi-connection downloads.
WARN  Should it cause issues, run 'scoop config aria2-enabled false' to disable it.
WARN  To disable this warning, run 'scoop config aria2-warning-enabled false'.
Installing 'googlechrome' (130.0.6723.117) [64bit] from 'extras' bucket
Starting download with aria2 ...
Download: Download Results:
Download: gid   |stat|avg speed  |path/URI
Download: ======+====+===========+=======================================================
Download: dd1766|OK  |    10MiB/s|C:/Scoop/cache/googlechrome#130.0.6723.117#5391eae.7z
Download: Status Legend:
Download: (OK):download completed.
Checking hash of 130.0.6723.117_chrome_installer.exe ... ok.
Extracting 130.0.6723.117_chrome_installer.exe ... done.
Running installer script...done.
Linking C:\Scoop\apps\googlechrome\current => C:\Scoop\apps\googlechrome\130.0.6723.117
Creating shim for 'chrome'.
Making C:\Scoop\shims\chrome.exe a GUI binary.
Creating shortcut for Google Chrome (chrome.exe)
Persisting User Data
Running post_install script...INFO  [Portable Mode]: Copying user data...
Copy-Item:
Line |
   3 |      Copy-Item "$env:LocalAppData\Google\Chrome\User Data\*" "$dir\Use …
     |      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     | The process cannot access the file 'C:\Users\home\AppData\Local\Google\Chrome\User Data\Default\Network\Cookies' because it is being used by another process.
Copy-Item:
Line |
   3 |      Copy-Item "$env:LocalAppData\Google\Chrome\User Data\*" "$dir\Use …
     |      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     | The process cannot access the file 'C:\Users\home\AppData\Local\Google\Chrome\User Data\Default\Network\Cookies-journal' because it is being used by another process.
Copy-Item:
Line |
   3 |      Copy-Item "$env:LocalAppData\Google\Chrome\User Data\*" "$dir\Use …
     |      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     | The process cannot access the file 'C:\Users\home\AppData\Local\Google\Chrome\User Data\Default\Sessions\Session_13375485771706719' because it is being used by another process.
Copy-Item:
Line |
   3 |      Copy-Item "$env:LocalAppData\Google\Chrome\User Data\*" "$dir\Use …
     |      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     | The process cannot access the file 'C:\Users\home\AppData\Local\Google\Chrome\User Data\Default\Sessions\Tabs_13375482270818575' because it is being used by another process.
done.
'googlechrome' (130.0.6723.117) was installed successfully!
PS C:\>

VSCode 개발 환경 설정하기

프리티어 설치 및 설정하기

프리티어(Prittier)는 코드에서 띄어쓰기, 들여쓰기, 탭, 줄바꿈 등을 일정한 패턴으로 정리해주는 프로그램이다.

마켓 플레이스에서 설치 후 settings.json파일에 설정을 해줘야 정상적으로 동작한다.

Ctrl + shift + P를 눌러 "User Settings" 입력 후 [기본 설정: 사용자 설정 열기(JSON)]을 선택한다.

{
  "workbench.colorTheme": "Default Dark+",
  "editor.tabSize": 2,
  // 이부분부터가 prettier설정위치
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "security.workspace.trust.untrustedFiles": "open"
}

테일윈드 설치하기

컴포넌트 스타일링을 위해 테일윈드CSS(Tailwind) 프레임으쿼를 사용한다. 이 프로그램은 CSS 스타일링 코드를 작성하기 쉽게 도와준다.

헤드윈드 설치하기

헤드윈드(Headwind)는 테일윈드CSS 관련 코드를 이해하기 쉬운 순서로 재배치해 주는 프로그램이다.

포스트CSS 설치하기

VSCode는 테일윈드css의 @tailwind base;같은 css구문 입력 시 경고 메시지를 출력한다. @tailwind는 표준이 아니기 때문이며 불필요한 경고 메시지를 제거해 주는 프로그램이 포스트CSS(PostCSS) 프로그램이다.

VSCode에서 터미널을 통해 타입스크립트 컴파일러 설치

PS C:\Users\home> npm i -g typescript ts-node

added 20 packages in 3s
PS C:\Users\home> tsc -v
Version 5.6.3
PS C:\Users\home> ts-node -v
v10.9.2
PS C:\Users\home>

컴파일러 설치 후 설정파일의 내용을 일부 수정해줘야 ts가 정상적으로 실행된다.

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 16",

  "compilerOptions": {
    "lib": ["es2021"],
    "module": "Node16",
    "target": "es2021", -> "CommonJS"  // 이부분 변경필요.

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node"
  }
}

타입스크립트 프로그램 만들고 컴파일

PS C:\reactStd> mkdir ch01/ch01_4/src
    Directory: C:\reactStd\ch01\ch01_4
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----        2024-11-08  오전 6:13                src

PS C:\reactStd> touch .\ch01\ch01_4\src\index.ts
PS C:\reactStd> cd .\ch01\ch01_4\src
PS C:\reactStd\ch01\ch01_4\src> dir

    Directory: C:\reactStd\ch01\ch01_4\src

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a---        2024-11-08  오전 6:13              0 index.ts

PS C:\reactStd\ch01\ch01_4\src>

VSCode를 통해 index.ts를 편집한다.

console.log('Hello World')


// 하단의 주석을 사용 시 프리티어를 동작하지 않게 할 수 있다.
// 프리티어 무시 주석은 타입스크립트 컴파일러의 타입체크기능을 무력화한다.
// 개발이 끝난 소스에만 적용해야 함.
// prettier-ignore
console.log("Hello!!");

터미널을 통해 실행 결과를 확인할 수 있다.

PS C:\reactStd\ch01\ch01_4> ts-node src/index.ts
Hello World
PS C:\reactStd\ch01\ch01_4>