개요

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

설치

WSL 설치

아래 주소에 적혀있는 설명에 따라 BIOS에 들어가 CPU 가상화를 켜준다.

설정 설명 URL: https://askubuntu.com/questions/1264102/wsl-2-wont-run-ubuntu-error-0x80370102

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

설치 설명 URL: https://docs.microsoft.com/ko-kr/windows/wsl/setup/environment

버전 관리 매니저

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

git

1. git을 업데이트 해준다

$ sudo apt-get update
$ sudo apt-get install git

2. 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

github

github cli 설치

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

설치 설명 URL: https://github.com/cli/cli/blob/trunk/docs/install_linux.md
설정 URL: https://docs.github.com/en/github-cli/github-cli/quickstart

gpg키 등록

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

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

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

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

2. 아래 명령어를 사용해 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. 마지막으로 해당 공개키를 아래 페이지에서 등록해주면 끝
   • https://github.com/settings/keys

ssh 등록

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

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

$ cd ~/.ssh

ed25519 알고리즘으로 키 생성

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

엔터를 세번 친다.

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

$ gh auth login

터미널

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

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

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

windows terminal

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

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

윈도우즈 터미널을 WSL에 연결해놓기

설정 URL: https://wslhub.com/wsl-firststep/firststep/winterm/

관리자 권한으로 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"
            }
        },
...

python

python3

파이썬은 수많은 유틸 프로그램에 쓰이는 언어이다. 가능하면 깔도록 하자

shell

zsh

zsh는 대중적으로 사용되는 개발자용 쉘이다. oh-my-zsh등 미려한 기능이 많으니 가능하면 zsh를 추천한다

아래 주소에 들어가 설치방법을 그대로 따라한다

설치 URL: https://github.com/ohmyzsh/ohmyzsh/wiki/Installing-ZSH

oh-my-zsh

zsh를 매우 우아하게 꾸며주는 zsh 매니지먼트 프레임워크이다. 각종 편의를 위해서는 반드시 까는 걸 추천한다.

아래 주소에 들어가 설치방법을 그대로 따라한다

주의) 가능한한 가장 먼저 설치할 것

설치 URL: https://github.com/ohmyzsh/ohmyzsh

powerlevel10k

아래 주소에 들어가 설치방법을 그대로 따라한다

폰트 설치 URL: https://github.com/romkatv/powerlevel10k#meslo-nerd-font-patched-for-powerlevel10k
설치 URL: https://github.com/romkatv/powerlevel10k

zsh-syntax-highlighting

아래 주소에 들어가 설치방법을 그대로 따라한다

https://github.com/zsh-users/zsh-syntax-highlighting/blob/master/INSTALL.md

zsh-autosuggestions

아래 주소에 들어가 설치방법을 그대로 따라한다

https://github.com/zsh-users/zsh-autosuggestions/blob/master/INSTALL.md

autojump

아래 주소에 들어가 설치방법을 그대로 따라한다

https://github.com/wting/autojump#manual

node.js

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

nvm

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

아래 주소에 들어가 설치방법을 그대로 따라한다

설치 URL: https://github.com/nvm-sh/nvm#installing-and-updating

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",