Ch1. CLI (Command-Line Interface)

🔸 CLI : WSL 리눅스용 윈도우즈 하위 시스템의 약자.

📌 CLI 명령어

🔸 GUI(Graphical User Interface) :
🔸 I/O(Input/Output) : "아이오", 컴퓨터를 조작하기 위한 입력과 출력
터미널 = CLI

🔸Prompt (프롬프트) : 터미널 안에서 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 공간.

• pwd (print working directory) : 현재 작업 중인 폴더의 위치 확인. directory는 폴더.
• mkdir (make directory) : mkdir 폴더명. 새로운 폴더 생성하기. (폴더 또는 파일 이름에 공백(띄어쓰기)나 특수문자가 있으면. 백슬래시(\)를 이용해 적용.
• ls (list) : 특정 폴더에 포함된 파일이나 하위 폴더의 리스트 출력.
  • ls -l : 폴더나 파일의 포맷을 전부 표현하라는 의미.
    • drwxr-xr-x : 폴더를 나타냄. 진입가능.
    • -rw-r--r-- : 파일을 나타냄. 진입불가능.
  • ls -a : 'all'이라는 의미로 숨어있는 폴더나 파일을 포함한 모든 항목을 터미널에 출력.
  • ls -al 또는 ls -la : (옵션을 뜻하는 대시(dash, -) 뒤에 오는 옵션의 순서는 기능에 영향을 미치지 않음)
• explorer.exe . : 터미널의 현재 위치를 GUI의 탐색기로 열기
• cd (change directory) : cd 폴더명 프롬포트로 상호작용하는 폴도를 다른 폴더로 변경. cd 뒤에 경로를 입력하면 한번에 이동이 가능. (cd ~/hellpWorld/hello).
• touch : touch 파일명.확장자. 파일 만들기. (ex. touch code.txt 텍스트 파일 생성)
• cat : cat 파일명. 파일의 내용을 터미널에 출력하기. 파일명을 순서대로 입력하면 파일의 내용을 순서대로 보여줌.
  • cat을 통해 터미널에 출력하면, 파일의 모든 내용을 출력함. 원격 서버에 접속하는 일은 네트워크를 통해 이뤄지기 때문에, 원격으로 접속한 상태에서 큰 파일을 출력하는 일은 굉장히 비효율적.
• rm (remove) : 폴더나 파일 삭제.
  • rm 파일명 단일 파일삭제.
  • rm -r 폴더명 (recursive) : 폴더를 지울 때 사용
  • rm -f (force) : 질문을 받지 않고 지울 때 사용 rm -rf 폴더명
• mv (move) : [mv 폴더나_파일이름] [도착_폴더명] 폴더나 파일의 위치 옮기기. // 또는, 폴더나 파일의 이름을 변경. mv 현재_폴더나_파일이름 바뀔_이름

컴퓨터가 파일을 옮기는 방법
a. 파일의 내용을 잠시 저장.
b. 원래 위치의 파일을 삭제. (파일을 복사하는 경우 이 부분은 제외됨)
c. 도착 폴더에 a.에서 저장한 내용으로 새로운 파일을 생성.

• cp (copy) : cp [원본 파일 이름] [복사할 파일 이름] 파일 복사.
• CLI에서 .은 현재 하위폴더를 나타냄. ..은 현재 폴더 (.)를 기준으로, 앞에 .이 하나 더 붙으며, 이렇게 만들어진 ..은 현재 폴더보다 앞에 있는 폴더를 가리킴.
  • cp -rf [원본 폴더 이름] [복사할 폴더 이름] : 폴더 복사.

📌 관리자 권한과 경로

• 사용자 : 바탕화면에 진입하기 위해 로그인하는 계정.
• 관리자 : 사용자가 접근할 수 없는 영역에 접근할 수 있는 높은 권한을 가짐.
• MS(MicroSoft)사에서 개발한 운영체제인 윈도우의 초기 버전에는 사용자가 없이 항상 관리자 권한으로 프로그램을 설치, 변경, 삭제할 수 있었음.
• 이 때문에 개발에 대한 지식이 없는 일반 사용자가 정보를 탈취당하는 일이 발생함 (hacking). 공격자가 악성코드를 프로그램에 삽입하고 사용자가 이 프로그램을 설치할 경우 발생.

블루 스크린

• 둘 이상의 프로그램이 시스템(운영체제)의 설정 변경에 참여하는 과정에서, 기존의 설정에서만 동작하도록 만들어진 프로그램이 강제로 종료되는 일이 발생함.
• 이렇게 두 프로그램이 하나의 시스템(운영체제)을 놓고 다투는 과정을 프로그램 충돌(Conflict)이라고 함.
• 이로 인해 컴퓨터가 화면에 블루 스크린을 출력함.

🔸 이렇게 악성코드와 프로그램의 충돌로 인해 발생하는 문제를 배제하기 위해, MS사는 윈도우 Vista에 사용자 계정 컨트롤을 탑재함.
🔸 사용자 계정 컨트롤(UAC, User Account Control) : 시스템을 관리하는 관리자와, 일상적으로 PC를 사용하는 사용자를 구분. 사용자가 모르는 사이에 시스템 설정을 변경하는 악성코드가 실행될 때, 접근 권한을 막아 사용자를 보호.
관리자는 프로그램을 설치하거나 변경 또는 삭제하는 권한을 가지고 있고, 사용자는 프로그램을 실행할 수 있지만, 변경할 수 없도록 제한된 권한을 가짐.

절대 경로와 상대 경로

🔸 절대 경로 : 기준점(루트 폴더; /)으로부터의 절대적인 위치를 나타냄. 즉, 특정 폴더나 파일이 루트 폴더로부터 어떤 폴더로 진입하는 경우 만날 수 있는지 나타냄.
🔸 상대 경로 : 특정 폴더 또는 파일 위치를 현재 위치를 기준점으로 나타냄. 현재 위치한 폴더는 점(.)으로 표현하고, 상위 폴더는 두 개의 점(..)으로 표현.

관리자(root) 권한

💡 주의 ! 관리자 영역을 실수로 변경하면, 운영체제(Operating System)가 먹통이 될 수 있음. 운영체제가 망가지면, 운영체제를 재설치해야 할 수 있음 💡

🔸 루트 폴더(/)는 Linux의 관리자 영역으로, 일반 사용자의 권한으로는 어떤 폴더나 파일도 생성, 변경, 삭제할 수 없음.

루트폴더로 이동하여 명령어 mkdir을 이용해 폴더 test를 생성하면, "Read-only file system"이라는 에러가 뜸. 읽기 전용(Read-only)이라는 말은, 폴더나 파일을 생성, 변경 또는 삭제할 수 없다는 의미.

🔸 whoami : 현재 로그인된 사용자를 확인하는 명령어.

🔸 사용자 권한은 [username] 폴더 내에서만 자유롭게 사용할 수 있음. [username]에 맞게 폴더를 생성하여 해당 폴더 내에서 권한을 사용하도록 제한. 반면에 관리자 권한을 이용하면, 다른 사용자 폴더에도 영향을 끼칠 수 있음.

🔸 사용자 폴더의 경로(Path)는 ~/로 표시됨. 물결 기호(~)는 루트폴더(/)로부터 사용자 폴더(username)까지의 경로를 축약한 형태입니다.

🔸 사용자가 새로운 프로그램을 설치하거나 변경 또는 삭제할 때에는, 관리자 권한이 필요.
🔸 sudo : 사용자 환경에서, 관리자 권한을 획득하는 명령어.

• sudo를 통해 폴더를 생성할 경우 생성한 폴더의 소유자는 루트임.
• 명령어 ls -l을 통해 특정 폴더나 파일이 사용자 또는 관리자의 소유로 생성되었는지 확인할 수 있음.

📌 텍스트 에디터 nano

• CLI에서 환경에서 유명한 에디터는 vim(vi), emacs 등이 있음. 이들은 에디터 사용을 위해 학습을 따로 해야할 정도로 진입장벽이 높음. (vim의 아주 기본적인 사용법)
• 에디터 중 가장 사용하기 쉬운 에디터는 nano 에디터임.

nano

🔸 nano : nano 실행

파일을 nano 에디터를 이용해 연 화면.

• A : 파일 이름
• B : 파일 편집 화면
• C : 사용에 필요한 각종 단축키.
  • 화면에 표시된 ^X와 같은 내용은 ctrl+x 키 조합을 의미함

파일 열기

🔸 ^T : 화살표 키를 이용해 파일 및 디렉토리를 탐색한 후 불러옴.
🔸 nano [파일명 or .] : 파일 혹은 해당 폴더를 nano에서 염.

파일 편집 후 종료

🔸 파일에 변경사항이 존재하면, 종료 시 저장할지 물어봄.
🔸 ^X : Save modified buffer (ANSWERING "No" WILL DESTROY CHANGES) ? 라는 문구가 뜨며 Y와 N 키를 통해 저장 여부를 결정할 수 있음.

파일 저장

🔸 ^O : nano를 종료하지 않고 파일 저장.

---

CH2. 패키지와 패키지 매니저

📌 1. apt 명령어 이용하기

🔸 우분투는 기본적으로 apt라는 패키지 매니저가 내장되어 있음.
🔸 apt : 화면에 아래와 같은 메시지를 터미널에 출력.

🔸 apt update (관리자 권한 필요) : 패키지 목록 갱신.

• 패키지를 다운로드할 수 있는 여러 저장소의 최신 정보를 업데이트. 새로운 저장소를 추가하거나, 패키지를 설치하기 전, 최신 정보를 갱신함.
• 설치된 프로그램이 새로운 버전으로 변경되지 않음.

🔸 apt list -—upgradable : 업그레이드 가능한 패키지 목록을 출력.
🔸 apt upgrade (관리자 권한 필요) : 전체 패키지 업그레이드(버전 업)
🔸 apt --only-upgrade install 패키지 이름 (관리자 권한 필요) : 특정 패키지만 업그레이드(버전 업)
🔸 apt install 패키지 이름 (관리자 권한 필요) : 패키지 설치
🔸 apt list --installed : 설치된 패키지 보기
🔸 apt search 검색어 : 패키지 검색
🔸 apt show 패키지 이름 : 패키지 정보 확인
🔸 apt remove 패키지 이름(관리자 권한 필요) : 패키지 삭제

📌 2. 관리자 권한 사용하기

🔸 패키지 설치/삭제 등의 작업을 진행할 때 관리자 권한을 획득해야 함. 관리자가 아닌데, 설치 명령을 실행할 경우 다음과 같은 에러를 띄움.

🔸 따라서 명령어 앞에 sudo를 붙여 명령어를 입력해야함.

// wget이라는 패키지를 설치할 경우,
sudo apt install wget

🔸 이후, 관리자 암호 입력 후 설치를 계속할 수 있음.
🔸 ctrl + C : 작업을 취소하고, 터미널 사용자 입력을 다시 되찾아옴. (강제 종료)
🔸 ctrl + shift + c : 복사
🔸 ctrl + shift + v : 붙여넣기

Action Items

🔸 wget : URL을 통해 파일을 다운로드하는 프로그램.

---

CH3. Node.js

📌 nvm & node.js

🔸 Node.js : JavaScript 런타임(runtime) 중 하나.
🔸 nvm(Node Version Manager) : Node.js의 다양한 버전을 관리하는 프로그램. (⚠️ 윈도우 환경에서는 nvm을 사용할 수 없음)

1. nvm 설치

🔸 아래 명령어를 입력에 설치

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

🔸 만약 Command 'wget' not found 메시지와 함께 설치가 진행되지 않는 경우, Package Manager를 이용해 wget을 설치해야 함.

# Ubuntu
sudo apt update
sudo apt install wget

2. 설치 확인

🔸 설치 완료 후, 터미널을 다시 시작.
🔸 nvm --version : nvm 버전 확인.

3. Node.js 설치

🔸 nvm install --lts : LTS(Long-Term Support) 버전 Node.js 설치. (Node.js에서 LTS는 지원하는 기간이 길다는 의미)
🔸 node -v : Node.js 버전 확인

Node.js로 JavaScript파일 실행하기

# helloWorld.js라는 이름의 파일을 텍스트 에디터 nano로 염
nano helloWorld.js

// 아래의 내용을 파일에 입력.
function helloWorld () {
  console.log("Hello world!");
}

helloWorld();

• 위 코드를 입력 후 ^X를 눌러 편집을 종료
• 터미널 하단에 "Save modified buffer (ANSWERING "No" WILL DESTROY CHANGES) ?"라는 출력이 나타나면, y를 누르고 엔터키를 눌러 변경사항을 저장.

# helloWorld.js 파일을 node 환경에서 실행.
node helloWorld.js

🔸 node [파일명] : 파일을 node 환경에서 실행.

📌 nvm 사용법

• Node.js는 다양한 버전이 존재함.
• 예를 들어 node 12.18.3 버전에서 짠 코드가 잘 동작하는데, Node.js 14.15.5 버전에서는 에러가 생기는 경우가 있음.
• 과거에 작성한 코드가 정상적인지 확인하기 위해 Node.js 12.18.3 버전이 필요함.
• 이전(과거) 버전을 사용하는 방법 중, 가장 빠른 방법은 설치된 Node.js를 지우고 다시 설치하는 방법이 있음.
• 하지만 버전이 다른 경우마다 삭제 후 해당 버전을 설치해야 한다면, 실제 작업하는 환경에서 코드에 집중하지 못해 생산성이 떨어짐.
• 이러한 문제를 NVM이 해결해 줌.

🔸 nvm ls : nvm을 통해 설치한 Node.js version들이 나옴.
🔸 nvm install 12.18.3 : 특정 버전의 Node.js 설치. 이렇게 하면 이미 설치된 버전을 삭제하지 않고, 원하는 버전을 설치할 수 있음.
🔸 nvm use 버전 넘버 : 사용 중인 Node.js version을 다른 버전으로 변경하고 싶을 때 사용.

📌 npm & package.json

package.json 생성하기

🔸 npm init : 새로운 package.json 파일을 생성.

🔸 package.json 파일에 들어갈 정보를 차례대로 입력. 정보를 입력한 후 enter키를 누르면 다음 정보를 입력할 수 있음.
🔸 입력하지 않으면 기본값으로 생성됨. 소괄호에 들어있는 값이 기본값.
🔸 npm init -y : 위 과정을 모두 생략하면서 package.json을 생성.

npm과 package.json

🔸 하나의 프로그램은 다양한 모듈이 합쳐져서 만들어지는데, 개발을 할 때 모든 것을 다 만들어서 쓰지는 않음.
🔸 node.js에서 남이 만들어놓은 모듈을 npm 모듈이라고 부름.
🔸 node.js 환경에서 외부 라이브러리를 다운로드하기 위해 다양한 방법이 존재하지만, 그중 대표적인 것은 바로 npm.
🔸 npm(Node Package Manager) 은 일종의 앱스토어로 필요한 모듈을 다운로드할 수 있는, 모듈들이 모여있는 모듈 스토어. (Linux의 패키지 매니저는 apt, macOS의 패키지 매니저는 brew)

🔸 그리고 이에 대한 정보를 담아둔 곳이 package.json임. 즉, 프로젝트(패키지) 전반에 관한 정보가 들어있음.

• 이 프로그램을 실행시키기 위해 필요한 모듈들이 무엇인지
• 프로그램을 실행시키는 방법
• 프로그램을 테스트하는 방법

file: package.json

{
  "name": "modern-javascript-koans",        // 프로젝트에 관한 정보
  "version": "1.0.0",                      // 프로젝트에 관한 정보
  "description": "",                      // 프로젝트에 관한 정보
  "main": "index.js",
  "scripts": {                           // CLI에서 사용가능한 명령
    "test": "mocha modern-js-koans/*.js --sort",
    "report": "mocha modern-js-koans/*.js --sort --reporter @mochajs/json-file-reporter",
    "submit": "codestates-submission"
  },
  "keywords": [],
  "author": "codesatates",
  "dependencies": {                       // 개발과 관련된 dependency들
    "@codestates-cc/submission-npm": "^1.1.1"
  },
  "devDependencies": {
    "@mochajs/json-file-reporter": "^1.2.1",
    "chai": "^4.2.0",
    "mocha": "^8.2.0",
    "sinon": "^9.0.3"
  }
}

🔸 실제 모듈은 따로 node_modules이라는 디렉토리에 저장되어 있음.

package.json 에 적혀있는 내용

dependency (의존성 모듈)

🔸 개발이나 실행에 해당 모듈을 "의존"한다고 해서, "의존성(dependency)"이라고 부름.
🔸 devDependencies : 해당 프로젝트를 개발하는 환경에서 필요한 모듈들이 명시됨. 즉, 프로그램 실행과 관계없는 오로지 개발을 위해 필요한 모듈들. JSON 형식에서, 키에 적힌 것이 모듈 이름, 값이 버전.
🔸 dependencies : devDependencies와는 다르게, 이 프로젝트가 돌아가기 위해 반드시 필요한 모듈들이 무엇인지 명시됨.

🔸 npm install : package.json에서 필요하다고 하는 모듈을 다운로드함. 이후 node_modules 디렉토리가 생긴 걸 확인할 수 있음.

• --save-dev 옵션과 함께 설치하면, 자동으로 devDependencies에 추가됨.
• --save 옵션과 함께 설치하면, 자동으로 dependencies에 추가됨 (생략가능).

// 예를 들어, mocha라는 모듈을 devDependencies에 추가하면서 설치하고 싶으면,

npm insatll mocha --save-dev

• npm install은 package.json에 있는 dependency (의존성 모듈)를 바탕으로 설치.
• 만일 dependency 정보를 적지 않았다고 가정해보면, 코드에서는 해당 모듈을 쓰고 있지만, 무엇을 설치해야 이 프로그램이 작동되는지, 무엇을 설치해야 이 프로그램을 개발할 수 있을지 알 수 없음.

scripts 항목

🔸 CLI에서 사용가능한 명령 (npm script)
🔸 실행 방법 : npm run <스크립트 이름>

---

CH4. Git

🔸 개발자의 코드를 효율적으로 관리하기 위해서 개발된 ‘분산형 버전 관리 시스템’. 소스 코드 기록을 관리하고 추적할 수 있는 버전을 관리할 수 있음.
🔸 Github : Git Repository를 관리할 수 있는 클라우드 기반 서비스.
🔸 오픈 소스 (소스 코드가 공개된 소프트웨어) : 누구나 자유롭게 해당 기능을 추가하고 개선 가능. 이 작업을 기여하다(contribute)라고 함.

Git repository

🔸 Remote Repository : 원격 온라인 서버 상의 저장소 여러 사람이 함께 공유 가능.
🔸 Local Repository : 내 컴퓨터의 저장소, 내 개인 전용 저장소.

• 프로젝트에 contribute을 하기 위해서,

1. React 원격 저장소를 내 원격 저장소로 가지고 오는 작업 필요 (Fork)
2. 나의 Remote Repository에 React 코드를 옮겨온 상태. 이 코드를 수정하기 위해서는 내 컴퓨터로 가져오는 작업이 또 필요 (Clone).
3. 내 컴퓨터에서 React 소스코드 변경 작업을 완료.
4. 변경된 내용을 commit을 통해 저장해 준 뒤, Remote Repository에 반대로 올려주는 작업이 필요 (Push)
   +@. Remote Repository에서 변경 사항이 있을 때 Local Repository 로 가져오는 Pull 작업도 가능.

📌 Git 설치 (Ubuntu, WSL)

🔸 sudo apt install git : 패키지 git 설치
🔸 git --version을 통해 정상적으로 설치됐는지 확인.
🔸 WSL은 Git이 이미 설치되어 있음.

📌 환경설정 (Ubuntu, WSL)

🔸 Git을 설치하면 가장 먼저, 사용자 이름과 이메일 주소를 설정함.
🔸 설정에 기록된 사용자 이름과 메일 주소를 앞으로 진행할 Git 커밋 내역에 기록함.
🔸 git config --global user.name "나의 사용자 이름"
🔸 git config --global user.email "내 이메일 주소"

• --global 옵션으로 설정하면, 사용자 홈에 저장되므로 git을 설정할 때 처음에 단 한 번만 입력해도 됨. 나중에 github의 사용자 이름이나 이메일을 변경한다면 이 명령어를 다시 입력해야함.
• 만약 여러 프로젝트를 진행하고 있어서, 프로젝트마다 다른 사용자 이름과 이메일 주소를 사용하고 싶으면 --global 옵션을 빼고 명령을 실행할 수 있음.

Git에서 커밋 메시지를 기록할 때, 특히 merge commit 확인 메시지가 나올 때 텍스트 에디터가 열림. 기본값으로 텍스트 에디터 vi가 열리는데 vi에 익숙하지 않으면 nano로 변경하는 것이 좋음.
git config --global core.editor nano

🔸 Git 최초 설정

📌 SSH 키

🔸 ssh는 secure shell의 줄임말로, 보안이 강화된 shell 접속을 뜻함.
🔸 CLI 환경(터미널)에서 다른 PC에 접속하거나 요청할 때 사용하며, 비대칭키를 이용해 사용자를 인증함.

🔸 github에 ssh 공개키(비대칭키 중 하나)를 등록하는 방법
🔸 ssh를 이용해 git clone하는 방법
🔸 ssh키는 비대칭키로 구성됨.

🔸 ssh-keygen : ~/.ssh./ 경로에 id_rsa(Private Key; 개인키)와 id_rsa.pub(Public Key; 공개키)를 생성.

🔸 cat ~/.ssh/id_rsa.pub : 공개키 복사
🔸 Github에서 프로필 클릭 --> Settings --> SSH and GPG keys --> New SSH hey --> 사용자 임의로 title을 작성하고, 복사해둔 공개키를 key에 입력 --> add SSH key