[리액트-신입]1일차 - 개발환경설정- I편( ver 22.07.01)

<웹개발자>

1. 웹 개발자란? 

HTTP프로토콜을 커뮤니케이션의 매개체로 사용하는 WWW(World Wide Web)기반의 소프트웨어 프로그래머(엔지니어)

구현하여 동작하는 대상이  Web인 경우 웹 개발자, App( 모바일 어플)인 경우 앱 개발자로 구분하기도 하며, 

최근에는 웹과 앱 두영역을 포괄한 사용자 접점의 SW 개발자라는 의미로  Front-End 개발자로 표현되어 주로 사용됨

 

2. 개발환경 스펙 

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

3. 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 - Auto Rename Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag -Auto close tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag -indent rainbow https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow - HTML CSS Support https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css&ssr=false#overview -path intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense - IntelliCode https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode - IntelliSense for CSS class names in HTML https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion - CSS Peek  https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek - markdownlint  https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint - npm Intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense  - vscode-styled-components (선택) https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components 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  - Tabnine AI Autocomplet for Javascript. Python, TypeScript... https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode