창 개발 설정(WSL, ZSH, NVM…)

(요약)

14-4 node -v (현재 버전 확인)
14-3 nvm ls-remote –lts(nvm의 최신 lts 버전 확인)
14-2 .zshrc에 추가
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” # 이것은 nvm을 로드합니다.
14-1 nvm 설치
컬 -오- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | 세게 때리다
13-5 gh 인증 로그인 “권한 얻기”
13-4 git config –global user.name “이름”
13-4 git config –global user.email “이메일”
13-3 다운로드 폴더에서 sudo apt-install ./gh_1.1.0_linux_amd64.deb
13-2 gh_1.1.0_linux_amd64.deb 다운로드
13-1 git 설치 sudo apt-get install git
12-2 npm init, mkdir, mv, rm, rm-rf 등 배우기
12-1 prettier(우분투에 설치됨) 및 설정의 원격 우분투 옵션
저장 시 포맷
11-4 ~/.zshrc 하단에 alias 설정 alias python=python3.8
11-3 파이썬 설치 sudo apt-get install python 3.8
11-2 업데이트 목록 sudo apt-get update
11-1 ppa 패키지 저장소 설치 sudo add-apt-repository ppa:deadsnakes/ppa
10-2 sudo apt-get 설치 -y nodejs
10-1 APT 업데이트
컬 -sL https://deb.nodesource.com/setup_12.x | sudo -E bash-
sudo apt-get 설치 -y nodejs
9-2 ~/.zshrc 끝에 넣어 텍스트 색상 변경
LS_COLORS=”ow=01;36;40″ && LS_COLORS 내보내기
9-1 VSC 설정-터미널 통합 쉘 창 settings.json에
c:\\windows\\system32\\wsl.exe를 입력합니다.
8-5 VSC 설정 -터미널 글꼴 패밀리 8-4 “fontFace”: “MesloLGS NF” ★ 메슬로우가 아닙니다. 자막이 잘못되었습니다.
8-3 ~/.zshrc에서 ZSH_THEME=”powerlevel10k/powerlevel10k” 설정
8-2 powerlevel10k 설치
8-1 폰트 설치는 페이지 상단 링크를 참고하세요.
7-4 오 마이 zsh 설치
7-3 zsh 설치(ubuntu의 관리자 계정)
7-2 기본 프로필 우분투로 변경
7-1 powershell-settings 실행 후 vsc에서 확장(remote-wsl)
6-1 우분투를 기본으로 사용하기 위한 설정
wsl –set-version 우분투-18.04 2
5-2 ★ 우분투 설정에서 오류가 발생하면 1.4 설명을 참조하세요.
5-2 우분투 설치(윈도우 스토어에서 우분투 18.04 lts)
5-1 WSL 설치
4-2 powershell : 초코 파이썬 설치
4-1 Chocolatey powershell 실행(관리자 권한) – 아래 문장 실행(주석 1-2 참조)
3. Git , VSC(Prettier , ESLint, 머티리얼 테마(+아이콘))
2. 크롬 + 비주얼 스튜디오 코드(VSC)
1. 윈도우 2004 업데이트

(세부 사항)

1. Windows 2004 업데이트(2020년 기준)
– XSL(Windows Subsystem for Linux) 기능 추가 및 업데이트
– 2023.02.14 기준 업데이트 불필요

2. 크롬 + VSC(Visual Studio Code) 설치
– 크롬의 장점은 웹사이트 테스트에 적합하고 최신 API와 개발자 도구를 제공한다는 것입니다.
– VSC 설치 시 추가 작업 선택 항목에서 모두 활성화

3. Git , VSC(Pyhton, Prettier-Code formatter, ESLint, Material Theme(+icon)) 설치

4 powershell 실행(관리자 권한) – Windows에서 프로그램을 설치하는 방법
– Chocolatey 사이트에서 Python을 찾아 PowerShell(관리자)로 설치
– $choco python 설치 -> 복붙
(강의에서는 파이썬 3.8.3인데 최신버전도 부적절)

5 $ wsl –install – 2023.02.14 기준 wsl –install은 자동으로 wsl1 – Ubuntu – wsl2를 설치합니다.
– 우분투를 실행하여 아이디와 비밀번호를 등록합니다.

6 윈도우 터미널(관리자)의 설정에서 Json 파일 열기 – VSC가 실행됩니다.
– Json 파일을 메모장이나 워드패드로 여는 경우
(Windows 설정 -> 앱 -> 기본 앱 -> 파일 형식별 기본 앱 선택 -> Json 확장자 연결 앱을 VSC로 변경)

7 VSC 실행 후 원격 – WSL(현재 WSL로 작성됨) 플러그인 설치
– WSL을 설치하면 Linux 기능으로 코딩할 수 있습니다.

8 settings.json에서 defaultProfile을 wsl로 수정하면 Windows 터미널 시작 시 wsl로 시작됩니다.
– 각 프로필에는 고유한 ID(guid)가 기록되어 있습니다.
– 각 프로필의 이름은 변경할 수 있습니다.

9 oh my zsh 설치(https://github.com/ohmyzsh/ohmyzsh/wiki)
– 우분투에 $ sudo apt install zsh 설치 (sudo는 관리자 권한을 가리키며 설치시 무조건 붙임)
– $ sh -c “$(컬 -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)” – 설치가 완료되면 우분투에서 설정한 아이디만 표시됩니다.
* ~로 나타나는 경우
– 터미널 -> 설정 -> WSL(또는 Ubuntu) -> 명령줄 -> C:\WINDOWS\system32\wsl.exe로 변경하고 시작 디렉터리를 %USERPROFILE%로 변경합니다.

10 터미널 테마 변경
– 템플릿 사이트(https://terminalsplash.com/에서 코드를 복사하여 settings.json의 체계에 붙여넣습니다.
– ‘Powerlevel10k’는 zsh의 테마입니다(https://github.com/romkatv/powerlevel10k#oh-my-zsh)
– $ sudo git 클론 –깊이=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k 설치
– Powerlevel10k 테마 설치 후 ~/.zshrc를 수정해야 합니다.
– 터미널에 code ~/.zshrc를 입력하면 VSC가 켜집니다.
– ZSH_THEME=”powerlevel10k/powerlevel10k”로 수정합니다.

11 테마 변경 후 글꼴 깨짐
– MesloLGS NF 폰트 설치 (https://github.com/romkatv/dotfiles-public/tree/master/.local/share/fonts/NerdFonts)
– settings.json의 기본값에 “fontFace”: “MesloLGS NF”를 붙여넣습니다.
– VSC 설정을 입력하고 통합을 누르고 MesloLGS NF를 글꼴 패밀리 설정에 연결합니다.
– 수정 후 깨진글꼴이 수정되었는지 확인 후 질문에 답해주세요.
– Powerlevel10k 환경 설정을 변경하려면 터미널에 $p10k configure를 입력합니다.

12 VSC의 터미널 설정을 Ubuntu로 변경
– VSC 설정으로 이동하여 통합 터미널을 누르십시오.
– 터미널 › 통합 › 기본 프로필: Windows 여기에서 null을 Ubuntu로 변경합니다. (2023.02.14 기준)

13 터미널 ls 색상 변경
– 코드 끝에 다음 문구를 넣어 텍스트 색상 변경 ~/.zshrc
– $ LS_COLORS=”ow=01;36;40″ && LS_COLORS 내보내기

14 터미널에서 작업하는 방법에는 두 가지가 있습니다.
– 코드를 Windows 또는 Linux 경로에 둘지 결정
– 윈도우에 깔아두면 파일 유실 걱정이 없습니다.

15 apt-get = Ubuntu 기본 패키지 설치 프로그램
– $ sudo apt-get upgrade = 패키지 업그레이드
(apt-get upgrade는 apt-get이 찾을 수 있는 프로그램의 데이터베이스를 업데이트하는 명령어입니다.)
(apt-get install로 설치할 수 없는 프로그램은 패키지 데이터베이스가 없는 경우입니다.)

16 Nodejs 설치(https://github.com/nodesource/distributions/blob/master/README.md)
– node.js 16 설치 (강의는 v12 입니다. 강의 후반부에 설치된 nvm에서 충돌이 발생하면 기존에 설치된 nodejs를 삭제하시면 됩니다.)
– node.js 16 데이터베이스 가져오기 -> $ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash
– $ sudo apt-get install -y nodejs = node.js 설치 명령
– $ node -v Nodejs 버전 확인 명령어

17 체크 파이톤
– $ python = python 2 버전 확인 (설치가 되어 있지 않은 경우도 있지만 일단 건너뛰고, Python 2에서만 사용하는 것이 많다는 것만 알아두세요.)
*지우지 마세요.
– $ python3 = 파이썬 3 버전 확인
– 버전 확인 후 종료 시 $ exit() 명령어를 입력합니다.

18 파이썬 설치 방법
– deadsnakes는 팀 이름 또는 프로젝트 이름이며 기본적으로 Ubuntu용 Python을 제공합니다.
(https://launchpad.net/~deadsnakes/+archive/ubuntu/ppa)
– 먼저 새 PPA를 apt-get에 추가합니다.
(deadsnakes의 개인 패키지 아카이브(PPA) 추가)
– $ sudo add-apt-repository ppa:deadsnakes/ppa = 새 데이터베이스 PPA를 apt에 추가하는 명령
– $ sudo apt update = apt의 패키지 데이터베이스 업데이트
– $ sudo apt-get install python3.8 = python3.8 설치 명령
– $ python3.8을 입력하면 3.8 버전이 설치된 것을 확인할 수 있습니다.
($ python3 입력 시 3.8이 아닌 버전을 입력하면 다른 버전이 기본값으로 설정되어 있기 때문입니다.)
– 기본값을 변경하려면 ~/ .zshrc 코드 맨 끝에 코드($ alias python=python3.8)를 추가합니다.
– 기본값을 $ alias python=nothing으로 입력하면 Python을 사용할 수 없습니다.

19 VSC에서 Ubuntu용 더 예쁜 코드 포맷터 설치
– VSC 확장 prettier-Code formatter로 이동 -> WSL에 설치: Ubuntu
(저는 우분투에서 코딩을 하기 때문에 우분투용으로 따로 설치해야 합니다.)
– 설치 후 VSC를 다시 로드합니다.
– VSC 설정(원격 탭)으로 이동하여 “Editor: Format on Save”를 선택하여 활성화합니다.
*에디터: 저장 시 포맷을 체크했는데도 prettier가 적용되지 않는 경우
– Editor.Default Formatter가 null로 설정되어 있는지 확인하고 null로 변경 -> pretier-code formatter

– 오픈 코드 new_file.js const hello = ‘hello!’ 입력하고 저장할 때 더 예쁜 플러그인이 작동하는지 테스트해 봅시다.
-> 제대로 작동하면 자동으로 const hello – “hello!”로 수정됩니다. 저장되었습니다.

20 터미널 명령 학습
– $ mkdir new_project = new_project라는 폴더를 만듭니다.
– $code new_project = VSC로 new_project 실행
– VSC 터미널에서 new_project 경로에 있음을 확인할 수 있습니다.
– VSC 터미널에서 $ npm i express –save = npm으로 express를 설치할 수 있습니다.
– $ touch index.js = index.js 파일 생성
– $ mv index.js new_index.js = index.js를 new_index.js로 이름 바꾸기
– $ mkdir 뭔가 = 뭔가 폴더 만들기
– $ touch something/else.js = something 폴더에 else.js 파일 생성
– $ mv something/else.js something/whatever.js = something 폴더에서 else.js를 anything.js로 변경
– $ rm something/whatever.js = something 폴더에 있는 anything.js 파일 삭제
– $ rm -rf something = 무언가 폴더 삭제
– $ rm -rf new_project=new_project 폴더 삭제

21 Git CLI 설치 (github.com에 들어가지 않아도 Github와 통신 가능)
– Git이 설치되어 있지 않다면 터미널에서 $ sudo apt-get install git으로 설치한다.
– linux_arm64.deb(데비안) 파일 다운로드(https://github.com/cli/cli/releases/tag/v2.23.0)
– 터미널에서 파일이 있는 경로로 이동 후 $sudo apt install ./gh_2.23.0_linux_amd64.deb 로 설치
(apt-get 없이 무언가를 설치하는 한 가지 방법)
– $gh를 치고 문구가 뜨면 정상작동

22 힘내 구성
– $ git config –global user.name “이름”
– $ git config –global user.email “이메일”
– $ gh 레포 보기
*주의: 인증 필요
– Github 승인 절차 필요 (Github 사이트 로그인 후 승인 절차 진행)
– $ gh auth login = 설치된 gh에 대한 초기 인증을 위한 명령
– 승인 절차를 거친 후 다시 $ gh repo view를 실행하면 “failed ro run git not a git repository”라는 경고 메시지가 나타납니다.
– 터미널 경로에 git 저장소가 없을 때 나타나는 메시지입니다.
– $ git init = 새로운 git 저장소 생성(.git이라는 숨겨진 폴더가 생성됨./기존 .git 폴더를 초기화하는 명령어)
– no git remotes found = 등록된 git 저장소가 없을 때 나타납니다.
– $ git 원격 추가 별칭 https://github.com/ (소유자 name)/(repository name) = 터미널에서 제어할 저장소 추가
(ex. $ git 원격 추가 테스트 https://github.com/user/new_project)
– $ gh repo view = 내 Github 저장소 상세 보기

23 NVM을 사용하여 다른 node.js 버전을 관리하는 방법
– NVM(Node Version Manager)은 여러 node.js 버전을 관리하는 bash 스크립트입니다.
(https://github.com/nvm-sh/nvm#install–update-script)
– $ 컬 -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | 세게 때리다
– NVM 설치 후 터미널 재시작
– 터미널에 $ nvm을 입력하면 zsh: command not found: nvm이 나오는데 이는 zsh가 nvm을 인식하지 못하기 때문입니다.
– $ code ~/.zshrc 파일을 열고 마지막에 다음 코드를 추가합니다.
– $ 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”
– 터미널에 $ nvm을 입력하여 작동하는지 확인합니다.
– $ nvm ls-remote = 사용 가능한 모든 node.js 버전을 검색합니다.
– 가급적 LTS(장기지원 = 장기지원, 4년 지원) 버전을 사용하세요.
– $ node -v = 사용 중인 node.js 버전 확인
– $ nvm install –lts=argon(lts 버전 이름) = lts가 있는 버전에는 이름이 있고 그 이름을 사용하는 설치 명령
– $ nvm install v10.21.0 = 설치 후 버전을 입력하여 설치하라는 명령
– $ node -v = 새로 설치된 node.js 버전 확인
– $ nvm use v12.18.2 = 이전에 설치된 v12.18.2 버전으로 변경하는 명령어
*N/A: 버전 “v12.18.2 -> N/A”가 아직 설치되지 않았습니다.
– nvm으로 설치되지 않은 기존 node.js 버전은 인식이 되지 않아 신규 설치가 필요합니다.

– $ nvm ls-remote –lts = lts 버전만 로드됩니다.
– $ nvm install –lts=erbium = 인식할 수 없는 버전의 신규 설치
– $ nvm ls = 설치된 node.js 버전을 확인할 수 있습니다.

터미널 명령
ls(List) – 디렉토리 목록을 표시합니다.
cd (디렉토리 변경) – 현재 디렉토리에서 빠져나올 때 사용
(cd .. : 상위 디렉토리로 이동)
터치 – 새 파일 만들기
VSC에서 파일 열기
mv (이동) – 파일 또는 폴더 이동 또는 이름 바꾸기
mkdir(make directory) – 폴더 생성
rm(제거) – 파일 삭제
rm -rf(폴더 제거) – 폴더 삭제