[NodeJs-신입]1일차 - 개발환경설정- I편( ver 22.09.01)

<웹개발자>

 

1. 개발환경 스펙 

구분	툴
OS	윈도우 10이상
IDE	Visual Studio Code
개발언어	JavaScript TypeScript (팀  개발능력 성숙도 향상 이후 진행 )
형상관리	github 서비스 이용 또는 사내 NAS에 gitlab stand-alone 설치하여 운영
협업	Teams 추) Office 365가입시 기본 제공하는 "팀즈" 추천
일정관리	Redmine

2. OS 환경 구성 - Windows 기준

1) WSL 설치  및 Version 2로 설정

WSL 설치

# Enable the Windows Subsystem for Linux $ dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart #  Enable Virtual Machine feature $ dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart # Download the Linux kernel update package : wsl_update_x64.msi #  Set WSL 2 as your default version $ wsl --set-default-version 2 # Install your Linux distribution of choice https://apps.microsoft.com/store/search?publisher=Canonical%20Group%20Limited [추천]→ ubuntu 20.04.4 lts   → 20044

[설치본 삭제] wsl --unregister <distro name>.

Set up a WSL development environment https://docs.microsoft.com/en-us/windows/wsl/setup/environment

[참고] Run Linux GUI apps on the Windows Subsystem for Linux https://docs.microsoft.com/windows/wsl/tutorials/gui-apps

버전 확인  - "CMD"

$ wsl -l -v

WSL Version 2로 설정

# wsl --set-default-version 2

[참고] https://docs.microsoft.com/en-us/windows/wsl/basic-commands

wsl 사용자 root 활성화 시키기  - 차후 개발시 편의성을 위해서

1) wsl 콘솔창 실행 - root 패스워드 설정 $ sudo passwd root  2) powershell 콘솔 창  ps c:\> ubuntu config --default-user root

Windwos (호스트 OS)에서 WSL의 경로에 접근하기  https://docs.microsoft.com/ko-kr/windows/wsl/filesystems

탐색시 ( 윈도우키 + E )의 주소창에서 아래를 입력함 \\wsl$ 에서 설치한 리눅스를 선택해서 접근함  Tips) 바로가기로 해 두면 접근시 편리함

2) Windows Terminal 설치

Windows 앱 스토어에서 윈도우 터미널을 설치함

https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701?hl=ko-kr&gl=KR 

추가) 기본으로 설치한 "ubuntu"를 설정해 줌

관리자 모드 실행

[참고]

Windows Subsystem for Linux Documentation https://docs.microsoft.com/en-us/windows/wsl/  Windows Subsystem for Linux Documentation https://github.com/MicrosoftDocs/WSL/blob/main/WSL/index.md Windows Terminal Repo https://github.com/Microsoft/Terminal/

3) Docker  설치 및 설정

Docker Desktop
https://www.docker.com/products/docker-desktop/

주의

docekr 설정에서 엔진을 WSL로 설정함

[참고] https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-containers

4) IDE 설치 및 설정 

- IDE ( Itegrated Development Environment )

구분	설명
IDE	Visual Studio Code : https://code.visualstudio.com/  중요) 설치후 "code ." 명령을 통해서 VSC가 위치에 상관없이 실행되는지 확인  즉, 경로 설정이 정상적으로 되어 있는지 확인
Extensions	1. 필수  -gitlens  https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens -githistory https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory - git graph https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph - GitHub Pull Requests and Issues (선택) https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github -eslint  https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint -prettier https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode - ES7+ React/Redux/React-Native snippets https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets - Rest Client https://marketplace.visualstudio.com/items?itemName=humao.rest-client - code run  https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner -  Docker  https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker - Remote - WSL https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl 2. 편의성 -vim (선택) https://marketplace.visualstudio.com/items?itemName=vscodevim.vim -path intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense - IntelliCode https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode - markdownlint  https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint - npm Intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense - Error Lens https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens 3. icon- 기호 선택 - vscode-icons https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons - Material Icon Theme https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme 4. Database SQL Manager - 상황에 따라서 선택 - PostgreSQL https://marketplace.visualstudio.com/items?itemName=humao.rest-client - SQLTools https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools - SQL Server(mssql)  https://marketplace.visualstudio.com/items?itemName=ms-mssql.mssql - Oracle  https://marketplace.visualstudio.com/items?itemName=ms-mssql.mssql 5. 기타  - 상황에 따라서 선택 - quokka https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode - IntelliJ IDEA Keybindings https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings