WSL을 2021년에 사용하여 Windows에서 웹 개발을 시작하는 방법

이 설명서에서는 완벽한 Windows 웹 개발 설정을 설치하는 방법에 대해 설명합니다.여기에는 Linux를 사용하는 Windows 서브시스템, Windows 터미널, 노드 버전 관리자 및 몇 가지 팁이 포함됩니다.
이 주제에 대한 정보를 마음대로 보십시오my video. 원하시면 보십시오my website.

WSL 설치

수동 설치

관리자 권한이 있는 Powershell에서 다음 명령을 사용하여 Linux용 Windows 서브시스템을 활성화합니다.

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

Windows의 최신 버전을 사용하는 경우 WSL의 버전 2를 설치할 수 있어야 합니다. 그러면 많은 성능 향상을 가져올 수 있습니다.이렇게 하려면 다른 Windows 기능을 사용해야 합니다.

dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

지금 컴퓨터를 다시 켜고 완성한 후에 돌아오세요.
다음에 설치해야 합니다latest Linux kernal package.다운로드가 완료되면 설치합니다.
마지막으로 admin Powershell에서 이 명령을 다시 실행하고 기본 WSL 버전을 버전 2로 설정합니다.

wsl --set-default-version 2

그런 다음 Microsoft Application 스토어에서 선택한 WSL 릴리스를 설치할 수 있습니다.나는 Ubuntu 20.04 LTS를 사용하는데 Microsoft Store에서 찾을 수 있다.설치 후 애플리케이션 이니시에이터에서 이 릴리스를 실행하면 다른 파일이 설치되고 사용자 이름과 암호가 설정됩니다.
이제 Windows에 Linux가 설치되었습니다.🎉

간이 모드(출시 예정)

Windows Insider 버전(OS build20262 이상)을 실행 중이면 관리자 권한으로 CMD를 열고 wsl.exe --install를 입력할 수 있어야 합니다.정상적인 Windows 버전을 실행하고 있을 가능성이 높기 때문에, 나처럼 수동으로 설치해야 한다.나는 Windows의 정상적인 운행을 기대하고 있다.새 설치 명령은 다음과 같습니다.

WSL Windows 기능 활성화

최신 Linux 커널 다운로드 및 설치

WSL 버전 2를 기본 버전으로 설정

Linux 릴리스 다운로드(기본값 Ubuntu) 및 설치

다른 릴리스를 설치하려면 wsl --list --online 사용 가능한 릴리스를 확인하고 이 명령을 사용하여 릴리스를 지정하십시오wsl --install -d <Distribution Name>.

이제 Windows에 Linux가 설치되었습니다.🎉

VS 코드

Download VS Code 설치

WSL 확장

WSL에서 작업하려면 for VS 코드Remote - WSL extension를 설치해야 합니다.WSL을 설치한 후 VS 코드를 열면 프롬프트가 나타날 수 있습니다.설치 후 실행code FOLDER을 통해 터미널에서 작업공간을 열 수 있습니다.VS 코드의 모든 통합 터미널에도 WSL 릴리스가 사용됩니다.

Windows 터미널

Windows 터미널 애플리케이션을 사용하여 보다 간편하게 명령행 탐색을 수행할 수 있습니다.
Microsoft Store를 열고 Windows 터미널을 검색합니다.응용 프로그램을 설치하고 엽니다.
Windows 터미널을 열 때 Ubuntu를 기본값으로 설정하려면 설정(Ctrl-Komma)을 열고 구성 파일 목록에서 Ubuntu를 찾습니다.VS 코드를 사용하여 설정을 편집하는 것이 좋습니다.

{
    "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
    "hidden": false,
    "name": "Ubuntu-20.04",
    "source": "Windows.Terminal.Wsl"
}

guid를 복사해서 파일 맨 위에 있는 기본 프로필로 붙여넣습니다.

"defaultProfile": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",

테마 및 글꼴

필요한 경우 Windows 터미널의 글꼴과 색상 테마를 조정할 수 있습니다.나는 전력선 기호를 지원하는 Cascadia 코드 글꼴을 어디서나 사용합니다.이것은 zsh 테마를 사용할 때 매우 편리하다.글꼴here을 다운로드할 수 있습니다.TTF 폴더에서 파일을 추출하고 네 개의 글꼴 파일을 설치합니다.그런 다음 Windows 터미널 설정에서 글꼴 시리즈를 변경할 수 있습니다.전력선 표지 기호가 있는 테마를 사용하지 않으려면 사용자 정의 글꼴이 필요하지 않다는 것이다.

"profiles": {
    "defaults": {
      // Put settings here that you want to apply to all profiles.
      "fontFace": "Cascadia Code PL"
    },
        ...
}

나는 거의 모든 곳에서 사용한다Dracula theme.필요한 경우 다음 설정에 색상표를 추가할 수 있습니다.

"profiles": {
            ...
},
"schemes": [
    {
      "name": "Dracula",
      "cursorColor": "#F8F8F2",
      "selectionBackground": "#44475A",
      "background": "#282A36",
      "foreground": "#F8F8F2",
      "black": "#21222C",
      "blue": "#BD93F9",
      "cyan": "#8BE9FD",
      "green": "#50FA7B",
      "purple": "#FF79C6",
      "red": "#FF5555",
      "white": "#F8F8F2",
      "yellow": "#F1FA8C",
      "brightBlack": "#6272A4",
      "brightBlue": "#D6ACFF",
      "brightCyan": "#A4FFFF",
      "brightGreen": "#69FF94",
      "brightPurple": "#FF92DF",
      "brightRed": "#FF6E6E",
      "brightWhite": "#FFFFFF",
      "brightYellow": "#FFFFA5"
    }
],

현재, 당신은 앞의 글꼴처럼 배색 방안을 적용할 수 있습니다.

"profiles": {
    "defaults": {
      // Put settings here that you want to apply to all profiles.
            "colorScheme": "Dracula",
      "fontFace": "Cascadia Code PL"
    },
        ...
}

VS 코드 글꼴 및 테마

이 단계는 완전히 선택할 수 있지만, 앞에서 언급한 주제 선택을 사용한다면, 나도 VS 코드에서 그것을 어떻게 사용하는지 보여주고 싶다.
VS 코드 설정에서 Cascadia Code 를 글꼴 시리즈로 사용하고 (PL 없이) 필요에 따라 글꼴 하이픈을 사용합니다. (마음에 들어요.)그런 다음 Terminal>Integrated:Font 시리즈를 Cascadia Code PL로 설정하여 통합 터미널의 전원 코드 표시자를 표시합니다.마지막으로 확장자에서 'Dracula Official' 을 검색하면 터미널과 일치하는 색 테마를 설치할 수 있습니다.

Zsh와 제 Zsh를 설치합니다.

Zshell과oh my zsh framework는 명령줄을 더욱 간단하고 아름답게 만들 수 있습니다.많은 테마와 플러그인을 선택할 수 있지만, 테마를 쉽게 전환할 수 있도록 주로 사용합니다.
oh my zsh를 사용하려면 먼저 Z 셸을 설치하고 기본 셸로 설정해야 합니다.

sudo apt install zsh

zsh --version를 사용하여 설치를 확인할 수 있습니다.
oh my zsh를 설치하려면 다음 명령을 실행합니다.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

기본 셸을 변경하시겠습니까?약속해.
이것은 모든 것의 시작이 될 거야, 나의 zsh.테마를 편집하거나 플러그인을 추가할 수 있지만 기본 설정은 좋습니다.나는 지금 '불가지론자' 주제를 실행하고 있다.기본 설정이 다른 디렉토리에 배치되므로 ~/.zshrc 디렉토리에 있는지 다시 확인합니다.

노드 버전 관리자

과거에 Node를 사용했던 모든 사람들은 서로 다른 Node 버전이 때때로 사람을 고통스럽게 할 수 있다는 것을 알고 있었다.Node Version Manager를 통해 노드 버전 사이를 쉽게 전환할 수 있습니다.
다음 명령만 실행하면 됩니다.

curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh) | bash

다음 위치에 추가합니다.

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

터미널을 다시 시작하거나 ~ nvm의 설치 상황을 ~/.zshrc로 검사합니다.만일 모든 것이 정상적이라면 source ~/.zshrc 최신 버전을 설치할 수 있습니다.다른 버전으로 전환하려면 nvm -v를 실행하고 nvm install node를 실행하면 됩니다. 이 버전은 12와 같은 숫자가 됩니다.
npm 대신 nvm install version를 더 좋아하신다면 nvm use version를 사용해서 실을 설치할 수도 있습니다.

Git 및 구축 도구

우리가 어떤 물건을 설치할 때, 당신은 때때로 필요한 구축 도구를 설치하기 위해 npm install -g yarn을 실행할 수 있습니다.
필요하다면, 자신의 취향에 따라git를 설정할 수도 있다.예를 들어 create SSH keys for Github 또는 구성 구성:

git config --global user.email "[email protected]"
git config --global user.name "Your Name"

그렇지!🎉

이제 WSL 버전 2에서 실행되는 Linux 릴리스가 있어야 하며 2021년부터 웹 개발을 시작할 수 있는 기본 도구가 설치되어 있어야 합니다.만약 당신이 원한다면, Freecodecamp 같은 것을 보고, 당신이 원하는 것을 배우기 시작할 수 있습니다.이 설정은 당신이 필요로 하는 모든 것을 쉽게 설치하고 실행할 수 있을 것이다.Windows가 아닌 Ubuntu를 찾는 설치 안내서를 기억하십시오. 코드가 Ubuntu 내부에서 실행되기 때문입니다.감사합니다. 질문이나 조언이 있으면 언제든지 소셜 미디어로 연락 주세요.👋.