개요

윈도우 환경에서 React 개발자로서 필요한 개발환경 세팅을 처음부터 끝까지 알려주는 글

설치

윈도우 패키지 매니저

맥북을 써보신 분들이라면 brew의 편리함과 대단함을 익히 알 것이다. 윈도우에서도 brew와 비슷한 기능을 하는 유틸리티가 있다. 그중 가장 유명한 것은 chocolatey이다. 해당 프로그램을 깔면 이후 각종 프로그램 설치에 간간히 도움을 받을 수 있을 것이다.

chocolatey

아래 주소에 들어가 설치설명을 읽은 뒤 그대로 따라한다.

설치 설명 URL: https://chocolatey.org/install

버전 관리 매니저

git을 써야한다. 회사에서는 svn이나 마테리얼을 쓸지도 모르지만 그건 회사에서만 쓰고 집에서는 무조건 git을 쓰자. 그리고 하루 세번 리누스 토발즈 쪽으로 절하자

git

1. 관리자 권한으로 powershell을 실행시킨 뒤 아래 명령어를 입력. 이후 나오는 질문에는 모두 y 또는 a를 입력한다.

  $ choco install git

2. powershell을 껐다 킨 뒤 아래 명령어를 입력해 정상적으로 설치되었는지 확인한다.

  $ git --version

3. git config를 설정해준다

$ git config --global user.email sebride4988@gmail.com
$ git config --global user.name sebride4988
$ git config --global core.eol lf
$ git config --global core.autocrlf input

remote repository

github

github cli 설치

터미널을 실행시킨 뒤 아래 명령어를 입력한다.

$ choco install gh

ssh키 등록

깃허브에 ssh키를 사용해 항상 자동로그인을 하기 위해서는 약간의 수고가 필요하다.

터미널에 아래 명령어를 입력해 ~/.ssh로 이동

$ cd ~/.ssh

ed25519 알고리즘으로 키 생성

$ ssh-keygen -t ed25519 -C "your_email@example.com"

엔터를 세번 친다.

그 후 터미널을 껏다 킨 후에 아래 명령어를 입력한다.

$ gh auth login

gpg키 등록

깃허브에 gpg키를 등록해 항상 verified한 커밋을 생성하고 싶다면 아래의 설명을 따라하면 된다.

1. 터미널에 아래 명령어를 입력해 gpg 유틸리티를 설치한다

$ choco install gnupg

2. 이미 사용하고 있는 gpg가 있는지 확인한다

$ gpg --list-secret-keys --keyid-format=long

있다면 4번으로, 없다면 3번으로 가면 된다

3. 아래 명령어를 사용해 gpg키를 생성한다

$ gpg --full-generate-key

필자는 전부 기본값에 비밀번호 없음으로 생성했다.

4. 아래 명령어를 사용해 생성된 gpg키를 확인한다.

$ gpg --list-secret-keys --keyid-format=long

아래와 같은 화면이 나올텐데 그 화면 중에 3AA5C34371567BD2 에 해당하는 값이 여러분의 gpg key id이다.

sec 4096R/3AA5C34371567BD2 2016-03-10 [expires: 2017-03-10]
uid Hubot
ssb 4096R/42B317FD4BA89E7A 2016-03-10

5. 아래의 명령어를 입력해 공개키를 출력한다.

$ gpg --armor --export 3AA5C34371567BD2
# Prints the GPG key ID, in ASCII armor format

6. git 프로그램에도 해당 gpg key id를 전달

$ git config --global user.signingkey 3AA5C34371567BD2

7. git 프로그램에 gpg 프로그램 위치를 전달

$ git config --global gpg.program "c:/Program Files (x86)/GnuPG/bin/gpg.exe"

7. 마지막으로 해당 공개키를 아래 페이지에서 등록해주면 끝
   • https://github.com/settings/keys

브라우저

2021년 8월 데스크탑 환경에서의 브라우저 시장 점유율

윈도우에는 기본적으로 ie와 엣지가 깔려있다. 따라서 절대 다수가 쓰는 크롬은 반드시 설치 후 테스트가 필요한 브라우저이고, 추가적으로 사파리, 파이어폭스를 깔고 테스트한다면 데스크탑 환경에서 작동 신뢰성 95% 커버리지를 확보할 수 있다.

구글 크롬

아래 주소에 들어가 설치파일을 다운로드 후 설치한다.

• 설치 URL: https://www.google.com/intl/ko/chrome/

글꼴

개발자는 글꼴 또한 개발자에게 맞춰진 글꼴을 써야 한다. 이유는 아래와 같은데

1. 몇몇 혼동하기 쉬운 문자열을 정확히 구별해주는 글꼴을 써야 한다. lI|O0 등.
2. 가독성을 위해 고정폭으로 제작된 글꼴을 써야한다.
3. (Optional) 특수 심볼, 합자 기능 등을 지원하는 글꼴을 쓰면 좋다.

초심자에게 추천하는건 IDE or CodeEditor용으로는 Fira Code. 터미널용으로는 Meslo LG S를 추천한다. Fira Code는 합자 기능을 지원하기 때문에 코드 에디터 용으로 좋고, Meslo LG S는 윈도우에서도 특수 심볼이 깨지지 않아 터미널용으로 괜찮다.

Fira Code

터미널을 실행시킨 뒤 아래 명령어를 입력한다.

  $ choco install firacode

Meslo LG S

1. 아래의 파일들을 다운로드 한다
   • MesloLGS NF Regular.ttf
   • MesloLGS NF Bold.ttf
   • MesloLGS NF Italic.ttf
   • MesloLGS NF Bold Italic.ttf
     
2. 다운받은 파일들을 전체 선택 후 우측 클릭, 모든 사용자용으로 설치한다
   

node.js

node.js는 서버에서 많이 쓰이는 자바스크립트 런타임이다. 해당 런타임을 설치해야 하는 이유는 React 커뮤니티가 해당 런타임을 기반으로 개발환경을 세팅하기 때문이다. 따라서 리액트 커뮤니티의 수많은 조언과 도움을 받기 위해서는 node.js를 설치해야만 한다.

nvm-windows

개발 프로젝트가 많고 복잡해짐에 따라 각 프로젝트마다 대응하는 node.js 버전이 달라지는 경우가 비일비재해진다. 이런 경우를 위해 각각의 프로젝트마다 맞는 버전의 node.js를 사용하기 위해 노드 버전 매니저를 깔야아만 한다.

아래 주소에 들어가 설치파일을 다운로드 후 설치한다.

설치 URL: https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7

IDE or CodeEditor

초심자의 경우는 VSCode를 추천한다. 이유는

1. 사용자가 가장 많음
2. 무료
3. 한글지원
4. 확장해서 쓰기 좋음

이기 때문이다.

숙련자의 경우는 이미 자기 취향의 IDE or CodeEditor가 있을테니 그걸 선택하시라.

VSCode

1. 아래 주소에 들어가 설치파일을 다운로드 후 설치한다.

설치 URL: https://code.visualstudio.com/download

2. vs code를 실행시킨 뒤 ctrl+shift+p를 입력한다

3. Preferences: open settings (JSON)을 입력, 선택한다

4. json 파일에 아래의 키값을 넣어준 뒤 저장한다

  "editor.fontFamily": "Fira Code, Consolas, monospace",
  "terminal.integrated.fontFamily": "MesloLGS NF, Consolas, monospace",

WSL

❗ 2021년 9월 기준으로 WSL에서는 headless-chrome이 제대로 동작하지 않는다. 따라서 react-snap, react-snapshot 등 headless-chrome 기반 라이브러리를 쓰지 못하므로 WSL 설치는 설명하지 않는다.

터미널

리액트 개발자는 윈도우에 기본적으로 깔려있는 cmd, 혹은 windows powershell로도 개발하는데는 문제가 없다. 약간의 개발 편의, 혹은 미관상의 이유로 변경할 뿐이니 따라서 해당 작업은 생략해도 된다.

추천하는 터미널은 windows terminal이다. 추천하는 이유는 두가지.

1. 멀티 탭으로 터미널을 관리할 수 있다
2. oh my posh를 쓸 수 있다.

windows terminal

1. 아래 주소에 들어가 설치한다.

설치 URL: https://www.microsoft.com/ko-kr/p/windows-terminal/9n0dx20hk701

2. 아래의 순서대로 관리자용 바로가기를 만든다

관리자 권한으로 windows terminal 바로가기

ms store에서 깐 앱들은 임의로 관리자 권한을 부여한 바로가기를 만들기 힘들다. 아래의 방법대로 만들자

1. 데스크탑에서 우클릭 -> 새로 만들기 -> 바로 가기 클릭
   

2. %LocalAppData%\Microsoft\WindowsApps\wt.exe 입력 후 다음 클릭
   

3. Windows Terminal 입력 후 마침 클릭
   

4.Windows Terminal 마우스 오른쪽 클릭 -> 속성

5. 바로가기 탭 - 고급 클릭
   

6. 관리자 권한으로 실행 체크 후 확인
   

7. 바로가기 탭 - 아이콘 변경 클릭
   

8. %systemroot%\system32\shell32.dll 입력 후 엔터, 터미널 아이콘을 선택 후 확인
   

9. 마지막으로 확인 누르면 끝
   

3. 관리자 권한으로 windows terminal 실행, Ctrl+,를 입력해 설정화면을 킨다
   

4. 작업 탭 -> Json 파일 열기 클릭
   

5. profiles.defaults.font.face에 MesloLGS NF를 입력한다

...
    "profiles":
    {
        "defaults":
        {
            "font":
            {
                "face": "MesloLGS NF"
            }
        },
...

6. 아래의 설명을 따라 oh my posh를 설치한다

oh my posh

1. 터미널에 아래의 명령어 입력

  $ Install-Module posh-git -Scope CurrentUser
  $ Install-Module oh-my-posh -Scope CurrentUser
  $ Import-Module posh-git
  $ Import-Module oh-my-posh
  $ Set-PoshPrompt -Theme aliens

2. 터미널이 아래와 같이 정상적으로 변경되었는지 확인
   

3. 터미널에 notepad $PROFILE 입력

4. 열린 노트패드 창에 Set-PoshPrompt -Theme aliens를 입력 후 저장
   

5. 터미널을 껐다 켜도 테마가 정상적으로 적용되는지 확인 후 종료.
   

그 외 추천할 만한 개발환경은?

종류	이름	설명
터미널	Starship: Cross-Shell Prompt	멀티 OS를 지원하며 꼭 필요한 정보를 미려하게 표시할 수 있다
유틸	PowerToys	키매핑, 빠른 실행 등을 윈도우에서 사용하는 가장 적절한 방법

참고자료

• 지나가던 개발자님의 조언
• always-run-windows-terminal-administrator
• how-to-integrate-cmder-properly-in-vs-code-april-2021
• 윈도우 choco install git
• windows oh my posh installation
• powerline 설정
• Adding a new SSH key to your GitHub account
  
• Generating a new GPG key - GitHub Docs

Special thanks to

• Mambo 님
• 손님 님