✅ TIL

오늘 배운 것을 키워드로 나열하자면,

CLI, brew, node, nvm, npm, nano, git 정도가 되겠다.

하나씩 차근차근 개념 정리를 하겠다.

---

⚙️ CLI

GUI : Graphic User Interface
CLI : Command-Line Interface (Terminal)

CLI는 대량의 컴퓨터가 있는 환경에서 유리하다.

GUI는 I/O 소스(키보드, 마우스, 모니터)가 필요한데, 이를 수많은 컴퓨터에 일일이 부착하기 힘들다.

CLI를 이용해 서버 컴퓨터로 접속을 요청하면, 서버 컴퓨터는 요청한 컴퓨터의 출력소스(모니터)를 이용
-> 서버 컴퓨터로 직접 찾아갈 필요없이, 자신의 모니터로 서버 컴퓨터와 소통

대표적으로 아마존 웹 서비스(AWS, Amazon Web Service) 의 클라우드 컴퓨팅처럼,
대량의 서버 컴퓨터를 설치해야 하는 서비스가 예시이다.

AWS는 4천 평이 넘는 규모의 데이터 센터를 29개 이상 가지고 있고, 계속해서 확장하고 있습니다.
하나의 데이터 센터에는 최소 5만 개 이상의 서버 컴퓨터가 설치됩니다.

대부분의 서버 컴퓨터는 무료로 이용할 수 있는 Linux 운영체제를 사용한다.

Linux CLI Commands

prompt : 터미널에서 편집하는 한 줄의 공간
pwd: print working directory - 현재 위치 확인하기
mkdir: make directory - 새로운 폴더 생성하기
ls: list - 특정 폴더에 포함된 파일이나 폴더 확인하기

• -l: 포맷까지 출력
• a: 숨겨져 있는 파일/폴더까지 출력

open(macOS): open current folder with finder
cd: change directory - 폴더에 진입하기
touch: create new file - 파일 생성하기
cat: display contents of a file - 파일의 내용을 터미널에 출력하기
rm, rf: remove, recursive - 폴더나 파일 삭제하기
mv: move - 폴더나 파일의 이름을 변경, 또는 폴더나 파일의 위치 옮기기
cp: copy - 폴더나 파일을 복사하기
sudo: 관리자 권한 획득
whoami: 현재 로그인된 사용자 확인
clear: clear CLI window
exit: exit CLI window
code: open in VScode
nano: edit on nano editor - 가장 사용하기 쉬운 에디터

절대경로: /Users/[username]/helloWorld/hello/ - 루트폴더부터 현재 위치까지의 경로

상대경로: 현재 위치를 곳을 기준으로 한 그곳의 경로

/: 루트폴더 (절대경로의 시작)
.: 현재 위치한 폴더 (상대경로의 시작)
..: 상위 폴더
./: 현재 폴더 아래의 (폴더)
../: 현재 폴더 위의 (폴더)
~/: 루트폴더로부터 사용자 폴더(username)까지의 경로

⚙️ Package, Package Manager

리눅스 운영체제의 "Package"는:

• 프로그램 파일
• 프로그램 설치 파일
• 프로그램 설치 설명서
• 프로그램에 대한 정보를 담은 파일

을 담고 있는 것을 의미한다.

Package Manager - 앱스토어 같은 역할

모든 패키지의 저장소 위치를 저장하고 있다. (각 패키지의 저장소를 일일이 찾아갈 필요가 없다)

설치된 모든 패키지 관리(설치, 삭제, 변경, 업데이트 등)

⚙️ brew (macOS 패키지 매니저)

brew update - brew 자체 업데이트
berw outdated - 업데이트 필요한 파일 조회
brew upgrade 프로그램이름 - 프로그램 업그레이드(업데이트)
brew search 검색어 - 프로그램 검색
brew info 프로그램이름 - 프로그램 정보 확인
brew install 프로그램이름 - 프로그램 설치
brew uninstall 프로그램이름 - 프로그램 삭제
brew list - 설치된 프로그램 보기

// 터미널에서

1. xcode-select --install // 설치 전 Xcode Command Line Tools 먼저 설치

2. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" // brew 설치
	
2-1. PATH 지정 (Next Steps로 표기됨)
>> echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/"사용자 이름"/.zprofile 
>> eval "$(/opt/homebrew/bin/brew shellenv)"

3. brew install wget // wget 설치

4. wget -O goodjob.txt https://bit.ly/37sJqCo //goodjob.txt 라는 다운로드된 파일 확인

5. brew install neofetch
   neofetch // neofetch 실행해보기

⚙️ Node.js

Runtime: 프로그래밍 언어가 구동되는 환경
JavaScript Runtime - 브라우저, node.js 등

Node.js라는 새로운 JavaScript 런타임이 등장하게 되면서,
웹 브라우저에서만 작동했던 자바스크립트 코드를 터미널에서도 실행이 가능하게 됐다.

JavaScript를 통해 웹 페이지를 구성하는 것을 넘어 서버를 구축하는 등 활용폭이 크게 확장되었습니다.

node helloWorld.js // js파일을 node환경에서 실행한다.

nvm

nvm(Node Version Manager)은 node.js의 다양한 버전을 관리하는 프로그램이다.

nvm을 사용하는 이유:

개발을 하다 보면 다양한 버전에 대응해야 하기 때문에 테스트를 위해 기존 버전을 삭제하고 다른 버전을 설치하는 과정 필요 없이, nvm을 사용해 간단한 명령어로 node version 을 손쉽게 옮겨다닐 수 있다.

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash // nvm 설치
nvm --version // nvm 버전 확인으로 nvm 설치 여부 확인

nvm install --lts //Node.js 설치
node -v //Node 버전 확인으로 nvm 설치 여부 확인

nvm ls // nvm을 통해 설치한 Node.js version 확인
nvm install 12.18.3 // 원하는 버전을 설치
nvm use 버전 넘버 // 원하는 버전으로 전환

npm & package.json

npm이란?

npm 은 node.js 의 앱스토어이다.
npm (node package manager) 를 이용하여 남이 만들어놓은 모듈(node 에서는 "npm 모듈") 을 이용한다.

package.json

모듈의 대한 정보를 담은 파일

package.json 을 이용해 모든 모듈을 직접 전달하는 것이 아니라 필요한 모듈을 적어주고 npm을 통해 다운로드 받게 함으로써 모듈의 크기를 줄일 수 있다.

scripts - CLI 에서 사용 가능한 명령어
dependencies - 프로그램 구동에 필요한 모듈
devDependencies - 프로그램 개발에 필요한 모듈

npm init //package.js 생성하기

ls
cat package.json // 내용 확인 가능

⚙️ Git

Git을 사용 이유 - 버전 관리

1. 파일이 변경되면 변경 이력을 저장할 수 있다.
2. 이전 버전으로 돌아갈 수 있다.
3. 어떤 변경 사항이 발생했는지 알아보기 쉽다.
4. 협업하기에 좋다.
5. 백업용

Git repository

Git으로 관리되는 폴더를 Git repository 라고 한다.

Git repository: Remote Repository & Local Repository

개인 작업: Local Repository
작업한 코드를 공유하기 위해 업로드: Remote Repository

다른 사람이 Remote Repository에 올려놓은 소스 코드를 내 Local Repository로 가지고 올 수도 있다.

오픈 소스인 React 프로젝트에 contribute을 하기 위해서는
먼저 React 원격 저장소를내 원격 저장소로 가지고 오는 작업이 필요하다.

그 과정을 Fork 라고 한다.

Fork 를 하고나면 나의 Remote Repository에 React 코드를 옮겨온 상태이다.
이 코드를 수정하기 위해서는 내 컴퓨터로 가져오는 작업이 또 필요하다.

그 과정을 Clone 이라고 한다.

Remote Repository에 있는 코드를 Clone 해서 내 컴퓨터로 가지고 올 수 있다.

내 컴퓨터에서 React 소스코드 변경 작업을 했다면,
변경된 내용을 commit을 통해 저장해 준 뒤, Remote Repository에 반대로 올려주는 작업이 필요하다.

이 과정을 Push 라고 한다.

Local Repository에 기록해 놓은 commit을 Remote Repository로 업로드할 수 있다.

이렇게 Push를 완료하고 나면 GitHub에는 Pull request라는 기능이 있어서,
내가 제안한 코드 변경사항에 대해 반영 여부를 요청할 수 있다.

git // 터미널에서 git 설치
git config --global user.name "나의 사용자 이름"
git config --global user.email "내 이메일 주소" // 설정 값

SSH (Secure shell)

보안이 강화된 shell 접속을 뜻한다.

CLI 환경(터미널)에서 다른 PC에 접속하거나 요청할 때 사용하며, 비대칭키를 이용해 사용자를 인증합니다.

로컬 개발 환경에서 Git을 단독으로 사용한다면 SSH가 없어도 무방하지만,
안전하게 외부 Git 서버에서 코드를 Clone하거나 Push하려면 SSH 프로토콜을 사용한다.

따라서 github에 ssh 공개키(비대칭키 중 하나)를 등록하는 방법과 ssh를 이용해 git clone하는 방법을 다뤄보겠다.

ssh-keygen // SSH 키 생성

ssh-keygen 명령어는 경로 ~/.ssh./ 에 두 파일 id_rsa와 id_rsa.pub를 생성한다.

이 두 파일은 ssh 키 페어라고 하며,
id_rsa.pub는 누구에게나 공개해도 되는 공개키(Public Key)라고 한다.
id_rsa는 공개되면 안 되고 나만 보관해야 하는 키라고 하여, 개인키(Private Key) 또는 비밀키(Secret Key)라고 한다.

엔터를 몇 번 누르면, 다음과 같은 화면이 나오게 된다.

SSH 키 페어를 생성하였으므로, 생성된 키 페어 중 공개키를 복사하여 gitub에 등록한다.

cat ~/.ssh/id_rsa.pub // 공개키 복사

이제 다음과 같은 순으로 진행해준다.

Github 로그인 > settings > SSH and GPG keys > New SSH Key > key 안에 복사한 키 값 입력

성공했다면, repositories > codes > SSH 문자열 복사 > 터미널에서 git clone 복사한 문자열

과정을 끝마치고 ls로 확인하면 정상적으로 폴더가 clone 된 것을 확인할 수 있다!!

---

✅ ToDo

이번 과제는 (브라우저가 아닌) node.js 환경에서 JavaScript 프로그램을 실행한다.
코드스테이츠 과제 제출 시스템은 CLI 프로그램이면서, 동시에 npm 패키지입니다.

먼저 node index.js 를 실행하면 다음과 같은 에러 메세지가 나온다.

# '$' 표시는 프롬프트를 나타냅니다.
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'range'
Require stack:
- /Users/hongshik/Desktop/fe-sprint-cli-practice-main/getListMultiplesOfTwo.js
- /Users/hongshik/Desktop/fe-sprint-cli-practice-main/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/hongshik/Desktop/fe-sprint-cli-practice-main/getListMultiplesOfTwo.js:1:19)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/hongshik/Desktop/fe-sprint-cli-practice-main/getListMultiplesOfTwo.js',
    '/Users/hongshik/Desktop/fe-sprint-cli-practice-main/index.js'
  ]
}

자세히 에러 메세지를 살펴보면 Error: Cannot find module 'range' 라고 되어있는데
딱 봐도 range 모듈이 깔리지 않았다는 것을 알 수 있었다.

따라서 npm install range 를 이용하여 range 모듈을 깔아준다.

그럼 다음과 같이 설치가 되는 모습을 볼 수 있고,

다시 node index.js 시, 오늘의 과제인 미션을 볼 수 있었다.

이제 nano getListMultiplesOfTwo.js 로 파일 편집을 시작하자.

그리고 nano index.js 로 getListMultiplesOfTwo 를 불러온다 확인할 수 있었다.

element가 upTo 인 것이 포인트이다.

다행이게도 https://npm.runkit.com/range?t=1652067135454 를 참고할 수 있었다.

var range = require("range")
range.range(0, 100, 2);

원래대로면 이게 맞겠지만, index.js 는 upto를 인자로 하므로 이 코드가 맞겠다.

var range = require("range")
range.range(2, upTo+2, 2);

ctrl + x 을 누르고 y로 저장을 한 후, 창을 나와서 node index.js로 다시 들어가보자.

그럼 우리가 입력했던 function이 제대로 전달된 것을 확인할 수 있다.

npm run test 도 통과했으니, npm run submit 으로 제출하면 과제 Done.
추가로 npm run submit ls 로 이때까지 제출한 과제 리스트를 볼 수 있다.