환경 조성

윈도우 10 입니다

 

 

1. Windows update
- XSL(Window Subsystem for Linux)기능 추가 업데이트


2. Chrome + VSC(Visual Studio Code) 설치
- Chrome이 웹사이트 테스트하기 좋고 최신 API와 개발자 도구를 제공해주는 장점
- VSC 설치시 추가 작업 선택 부분에서 전부 활성화 시켜준다

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

4 powershell(관리자권한)실행 - 윈도우에서 프로그램 설치하는 방법
- Chocolatey 사이트에서 Python 찾아서 PowerShell(관리자)로 설치
- $ choco install python -> 복붙
(강의에서는 Python 3.8.3이지만 최신버전으로도 무관함)

5 $ wsl --install - 2023.02.14 기준 wsl --install 만으로 wsl1 - Ubuntu - wsl2까지 자동 설치된다.
- 우분투를 실행하고 아이디와 비번 등록을 해준다.

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

7 VSC 실행 후 Remote - WSL(지금은 WSL로만 적혀있다) 플러그인을 설치
- WSL을 설치하면 리눅스 기능으로 코딩이 가능해진다.

8 settings.json에서 defaultProfile을 wsl로 수정해주면 윈도우 터미널 시작시 wsl로 시작한다.
- 각각의 Profile에는 고유 ID(guid)가 적혀있다.
- 각각의 Profile의 이름은 변경이 가능하다.

9 oh my zsh 설치하기 (https://github.com/ohmyzsh/ohmyzsh/wiki)
- Ubuntu에서 $ sudo apt install zsh 설치 (sudo는 관리자 권한을 가리키며 설치시 무조건 붙여준다.)
- $ sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" - 설치가 완료되면 Ubuntu에 설정한 ID만 뜬다.
* ~표시로 뜨는 경우
- 터미널 -> 설정 -> WSL (or Ubuntu) -> 명령줄 -> C:\WINDOWS\system32\wsl.exe로 바꾸고, 시작 디렉토리를 %USERPROFILE%로 변경

10 터미널 테마 변경
- 템플릿 사이트 (https://terminalsplash.com/)에서 코드를 복사해 settings.json의 schemes에 붙인다.
- 'Powerlevel10k'는 zsh를 위한 테마 (https://github.com/romkatv/powerlevel10k#oh-my-zsh)
- $ sudo git clone --depth=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에서 defaults에서 "fontFace": "MesloLGS NF" 를 붙여준다.
- VSC 설정에 들어가서 integrated를 치고 Font Family 설정에 MesloLGS NF를 붙여준다.
- 수정 후 폰트 깨짐이 수정됬는지 확인 후 질문에 답해가면 된다.
- Powerlevel10k 환경 설정을 바꿔주고 싶을 경우 터미널에 $ p10k configure 를 입력하면 된다.

12 VSC의 터미널 설정을 Ubuntu로 바꿔주기
- VSC 설정에 들어가서 integrated terminal를 쳐서
- Terminal › Integrated › Default Profile: Windows 여기서 null을 Ubuntu로 변경해준다. (2023.02.14 기준)

13 터미널의 ls Colors 바꾸기
- code ~/.zshrc 마지막에 아래 문구를 넣어서 글자 색 바꾸기
- $ LS_COLORS="ow=01;36;40" && export LS_COLORS

14 터미널에서 작업하는 경우 2가지 방식이 있다.
- 코드를 윈도우에 둘 것 인지 리눅스 경로에 둘 것 인지 결정
- 윈도우에 두면 파일이 날아갈 걱정이 없다.

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 = python 2 버전 확인 (미설치된 경우도 있으나 일단 스킵, 파이썬 2에서만 사용되는 것이 많이 있다는 것만 알아둔다.)
*지우지 마세요.
- $ python3 = python 3 버전 확인
- 버전 확인 후 빠져나올 때는 $ exit() 명령어를 쳐준다.

18 python 설치 방법
- deadsnakes는 팀명 혹은 프로젝트 명이며 기본적으로, Ubuntu를 위한 파이썬을 제공해준다.
(https://launchpad.net/~deadsnakes/+archive/ubuntu/ppa)
- 먼저 apt-get에 새로운 PPA를 추가
[deadsnakes의 개인 패키지 저장소 (personal package archive, PPA)를 추가]
- $ sudo add-apt-repository ppa:deadsnakes/ppa = apt에 새로운 데이터베이스 PPA 추가 명령어
- $ sudo apt update = apt의 패키지 데이터베이스를 업데이트
- $ sudo apt-get install python3.8 = python3.8 설치 명령어
- $ python3.8를 입력하면 3.8 버전이 설치된걸 확인할 수 있다.
($ python3을 입력했을때 3.8버전이 아닌 다른 버전이 나오는 경우는 다른 버전이 디폴트 값으로 설정되어있어서 그렇다.)
- 디폴트 값을 변경하고 싶은 경우 code ~/ .zshrc 에서 맨 끝에다가 코드($ alias python=python3.8)를 추가한다.
- 디폴트 값을 $ alias python=nothing으로 입력해 놓으면 파이썬을 사용할 수 없다.

19 VSC에 prettier-Code formatter Ubuntu용으로 설치
- VSC extensions에 가서 prettier-Code formatter -> install in WSL: Ubuntu
(코딩을 Ubuntu에서 하는 중이어서 Ubuntu용으로 따로 설치를 해야한다.)
- 설치 후 VSC를 reload해준다.
- VSC 설정에 들어가서 (remote 탭에서) "Editor: Format on Save"를 체크해서 활성화
*editor : format on save를 체크해도 prettier 적용안되는 경우
- Editor.Default Formatter가 null로 되어있는지 확인하고 null -> pretier-code formatter로 변경

- code new_file.js를 열어서 const hello = 'hello!' 를 입력하고 저장할 때 prettier 플러그인이 작동하는지 테스트해보자
-> 제대로 작동되면 자동으로 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 something = something 폴더 생성
- $ touch something/else.js = something 폴더 안에 else.js 파일 생성
- $ mv something/else.js something/whatever.js = something 폴던 안에 else.js를 whatever.js로 변경
- $ rm something/whatever.js = something 폴더 안에 whatever.js 파일 삭제
- $ rm -rf something = something 폴더 삭제
- $ rm -rf new_project = new_project 폴더 삭제

21 Git CLI 설치 (github.com에 가지 않고도 깃헙과 소통이 가능)
- Git이 설치안되어있을 경우 터미널에 $ sudo apt-get install git 으로 설치
- linux_arm64.deb(Debian) 파일 다운로드 (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 환경설정 하는 법
- $ git config --global user.name "Name"
- $ git config --global user.email "Email"
- $ gh repo view
*Notice: authentication required
- Github 승인과정이 필요 (Github 사이트에서 로그인 후 승인과정을 거친다.)
- $ gh auth login = 설치한 gh에 초기 인증하는 명령어
- 승인 과정을 거친 후 다시 $ gh repo view를 실행했을 때 "failed ro run git not a git repository" 경고문이 뜰 겨우
- 터미널의 경로에 git repository(저장소)가 없는 경우 뜨는 메세지이다.
- $ git init = 새로운 git repository를 생성 (.git 라는 숨김 폴더가 하나 생긴다./기존 .git 폴더가 있으면 초기화 시켜주는 명령어)
- no git remotes found = 등록된 git 저장소 없을 때 뜹니다.
- $ git remote add 별명 https://github.com/(소유자 이름)/(저장소 이름) = 터미널로 컨트롤할 저장소 추가
(ex. $ git remote add test https://github.com/user/new_project)
- $ gh repo view = 내가 저장해놓은 Github repository(저장소) 상세 보기

23 NVM을 사용해 서로 다른 node.js 버전을 관리하는 법
- NVM(Node Version Manager)은 다수의 node.js 버전을 관리하는 bash 스크립트
(https://github.com/nvm-sh/nvm#install--update-script)
- $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
- 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(Long-term support = 장기적 지원, 4년간 지원)인 버전을 최대한 사용한다.
- $ node -v = 현재 사용중인 node.js 버전을 확인
- $ nvm install --lts=argon(lts버전이름) = lts가 붙은 버전에는 명칭이 붙어있는데 그 명칭을 사용한 설치 명령어
- $ nvm install v10.21.0 = install 뒤에 버전을 입력해 설치하는 명령어
- $ node -v = 새로 설치한 node.js 버전을 확인
- $ nvm use v12.18.2 = 기존에 설치되어 있던 v12.18.2 버전으로 변경하는 명령어
*N/A: version "v12.18.2 -> N/A" is not yet installed
- nvm으로 설치하지 않았던 기존 node.js 버전은 인식을 못해서 새로 설치를 해주어야한다.

- $ nvm ls-remote --lts = lts 버전만 불러온다.
- $ nvm install --lts=erbium = 인식을 못했던 버전을 새로 설치
- $ nvm ls = 설치된 node.js 버전을 확인 할 수 있다.


터미널 명령어
ls(List) - 디렉토리의 목록을 보여준다.
cd(change directory) - 현재 디렉토리에서 빠져나올때 사용
(cd .. : 상위 디렉토리로 이동)
touch - 새로운 파일 생성
code - VSC에서 파일 열기
mv(move) - 파일 또는 폴더를 이동하거나 이름 변경
mkdir(make directory) - 폴더 생성
rm(remove) - 파일 삭제
rm -rf(remove folder) - 폴더 삭제