[C/F TIL] 10일차 - Linux / Git 기초

mu-eng·2023년 4월 24일

TIL git linux 코드스테이츠

TIL (in boost camp)

목록 보기

10/53

Code States
Front-end boost camp
Today
I
Learned

🐳 바람이 시원한 4월 24일 10일차 수업 시작~

🐳 Command-Line Interface 개요

입력 소스(Input) : 컴퓨터에 새로운 명령을 전달하는 모든 소스, 마우스 또는 키보드 등을 사용
출력 소스(Ourput) : 입력 소스 또는 작성된 프로그램에 의해 모니터에 화면을 나타내거나, 음악을 재생할 시 소리를 스피커로 전달하여 사용자가 인식할 수 있도록 하는 일
I/O(Input/Output) : "아이오", 컴퓨터를 조작하기 위한 입력과 출력
리눅스(Linux)의 터미널은 키보드의 입력 + 모니터의 출력 만으로 모든 작업이 가능
-- 아마존 웹 서비스의 클라우트 컴퓨팅처럼, 대량의 서버 컴퓨터를 설치해야 하는 서비스에서 유리
프롬프트(Prompt) : CLI의 명령줄 대기모드, 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 공간

🐳 CLI 명령어

pwd : 현재 위치 확인하기
mkdir : 새로운 폴더 생성하기
ls : 특정 폴더에 포함된 파일이나 폴더 확인하기
-- ls -a : "all"이라는 뜻으로 숨어있는 폴더나 파일을 포함한 모든 항목을 터미널에 출력
-- ls -l : 폴더나 파일의 포맷을 전부 표현하라
-- ls -al/ ls -la 명령어의 기능적인 차이는 없다.
open . : 현재 위치를 GUI로 실행하는 명령어 (macOS)
cd : 폴더에 진입하기
touch : 파일 생성하기
cat : 파일의 내용을 터미널에 출력하기
rm : 폴더나 파일을 삭제할 때 사용
mv : 폴더나 파일의 이름을 변경, 또는 폴더나 파일의 위치 옮기기
-- mv bye.txt bye/ : bye.txt를 폴더 bye로 옮김
컴퓨터가 파일을 옮기거나 복사하는 방법 : 파일의 내용을 잠시 저장한다 - 도착 폴더에 앞서 저장한 내용으로 새로운 파일을 생성한다.
cp : 폴더나 파일을 복사할 때 사용
-h / --help : 각 명령어에 포함된 옵션 확인

🐳 관리자 권한과 경로

사용자 !== 관리자
절대 경로 : pwd로 확인할 수 있음
상대 경로 : 현재 위치로부터 상대적인 위치를 나타냄
-- '.' : 현재 위치한 폴더
-- '..' : 상위 폴더
-- '/' : 폴더 내부를 나타냄
-- './' : "현재 폴더 아래의" 라는 뜻
관리자(root) 권한 : 일반 사룡자의 권한으로는 어떤 폴더나 파일도 생성, 변경, 삭제할 수 없음
sudo : 관리자 권한을 획득하는 명령어

🐳 nano 에디터

우리가 vs code 프로그램을 사용하여 코드를 쓰고 지우고 수정하는 것 처럼, 터미널 내에서 불러온 파일을 쓰고 지우고 수정할 수 있는 텍스트 에디터... 라고 나는 이해했다!

🐳 패키지와 패키지 매니저 설치

맥의 경우, 터미널에 'xcode-select --install' 입력하여 설치
-- 이미 설치되어 있을 수도 있음
homebrew 사이트 install Homebrew 항목 내용을 복사하여 터미널에 붙여넣기하여 다운로드
비밀번호 입력하여 설치
Press RETURN/ENTER to continue or any other key to abort 가 나올 경우 리턴 또는 엔터키 입력
Next steps : 가 나오면 your PATH in (블라블라~~) 부분에서 블라블라부분 복사 붙혀넣기 이후 brew help라는 명령어 입력해보면 설치 완료여부가 뜸

🐳 node.js

NVM : Node Version Manager, 간단한 명령어로 Node.js를 설치하고 다양한 Node.js version을 손쉽게 옮겨 다닐 수 있다. 즉, 다양한 Node.js version을 설치하고 관리할 수 있는 프로그램
nvm 설치 : 하단 명령어 터미널에 입력

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

command 'wget' not found 메세지와 함게 설치가 진행되지 않는 경우, 패키지 매니저를 이용해 wget 설치
nvm 설치를 마쳤다면, 터미널을 닫고 새로 열기
nvm --version <- 명령어 입력 후 버전이 잘 나오면 NVM 설치 완료!
Node.js 가 개발되기 이전에는 크롬, 사파리, 파이어폭스 등 웹 브라우저가 JavaScript의 주된 런타임이었으나, Node.js의 등장 이후 웹 브라우저가 아닌 곳에서도 JavaScript 실행 가능!
nvm으로 Node.js의 버전을 관리하면, Node.js를 설치하고 version을 바꾸는 일이 편리하다!
npm : Node Package Manager, 일종의 앱스토어. 필요한 모듈을 다운로드할 수 있는 모듈들이 모여있는 모듈 스토어
-- macOS의 패키지 매니저가 brew이듯, 리눅스의 패키지 매니저가 apt 이듯, node.js 생태계의 패키지 매니저는 npm이다!
-- 프로젝트 전반에 관한 정보가 들어있는 npm 모듈을 활용하기 위해 해당 모듈에 대한 정보를 담은 파일
-- 이러한 남이 만들어 놓은 모듈을 node.js 에서는 npm 모듈이라는 이름으로 부르며, 이에 대한 정보를 담아둔 곳이 바로 package.json 이다.
package.json : 이 프로그램을 실행시키기 위해 필요한 모듈들이 무엇인지, 프로그램을 실행시키는 방법, 프로그램을 테스트하는 방법 등이 명시되어 있다.
-- 다른 사람과 함께 개발하고 사용하는 프로그램(프로젝트)에 대해 정보를 주기 위해 사용
-- 프로그램을 실행시키기 위한 실제 모듈은 따로 node-modules라는 폴더에 저장되며 package.json에는 어떤 모듈인지만 적혀있다.
우리가 흔히 하는 npm install은 package.json에 있는 dependency(의존성 모듈)를 바탕으로 설치
-- dependency에 등록되어 있지 않다면? : 코드에서는 해당 모듈을 쓰고 있지만 npm install로는 설치되지 않는다! => 협업이 어려워짐

🐳 짝수 생성기 만들기 (페어 프로젝트)

오늘도 유능한 내 페어님과 페어 프로젝트를 시작했다. 사실 위 내용은 요약정리를 해 놓았을 뿐 내가 100퍼센트 이해하고 있는 상태는 아님... 하지만 페어님의 도움 하에 프로젝트를 완성했고, 벨로그 작성하며 스스로 머릿속에 개념을 정리한다!
1. 일단 코트에서 제공해준 과제 파일을 다운로드 한다.
1. 터미널에서 제공해준 과제 파일로 드간다.

cd Downloads
cd fe-sprint-cli-practice-main

1. node index.js 명령어를 입력해 노드에서 인덱스.js파일을 연다. 그러면 오류가 뜬다. 모듈을 찾을 수 없대요.

Error: Cannot find module 'range'

1. 앞서 모듈 스토어라고 표시했든 npm을 사용하여 모듈을 설치한다.

npm install range

1. node로 index.js 파일을 열어주면 다음과 같이 뜬다.
1. 텍스트 에디터 nano를 활용해 index.js파일을 열어본다. 다음과 같이 나오는데... get~~~ 파일을 js로 열어봐야할 것 같다.

const getListMultiplesOfTwo = require('./getListMultiplesOfTwo');

console.log('100 이하 2의 배수는 다음과 같습니다.');
console.log(getListMultiplesOfTwo(100));

1. get~~~ 파일을 js로 열어봐야할 것 같다.

const range = require('range'); // range 모듈을 불러옵니다

function getListMultiplesOfTwo(upTo) {
  // TODO
}

module.exports = getListMultiplesOfTwo;

1. cd 명령문을 활용해 range.js 파일을 연다. 다음과 같이 써있다. 내가 필요한건 range.js 파일 내부에 range()함수이다.

function range(a, b, step) {
  if (arguments.length === 1) {
      b = a;
      a = 0;
  }

  step = step || 1;

  var x, r = [];

  for (x = a; (b - x) * step > 0; x += step) {
    r.push(x);
  }

  return r;
}

1. 다시 get~~~ .js 파일로 간다.

const range = require('range'); // range 모듈을 불러옵니다

function getListMultiplesOfTwo(upTo) {
  // TODO
}

module.exports = getListMultiplesOfTwo;

▲ 이렇게 초기 셋팅 되어있는 get~~~ 어쩌고 함수를

const range = require('range'); // range 모듈을 불러옵니다

function getListMultiplesOfTwo(upTo) {
  return range.range(2, upTo + 1, 2);
}

module.exports = getListMultiplesOfTwo;

▲ 다음과 같이 코드 작성

1. nano 파일을 끄고 터미널에서 node index.js를 다시 실행해본다.
  
  -> 완성 !! (앗 요고 결과값 캡쳐가 잘못됨 맨 마지막이 100이어야 합니다. upTo가 아닌 upTo+1 로 설정해야함)
1. 하지만 코트에서 미리 던져준 테스트 프로그램을 돌려보면 빨간 글씨로 응 틀렸어 라고 알려준다.
1. 명령어로 package.json를 열어준다. 이 쪽 start부분에 아무것도 입력되지 않은 것을 발견함.
  
  ▲ "" 안쪽에 node index.js 명령어를 입력해준다.
1. 그리고 다시 npm run test 테스트를 돌려보면
  
  ▲ 진짜로 완성그.ㅋ

🐳 Git

버전 관리를 사용하는 이유? : 파일이 변경되면 이력을 저장할 수 있다. / 이전 버전으로 돌아갈 수 있다. / 어떤 변경 사항이 발생했는지 알아보기 쉽다. / 백업하기에 좋다.
분산형 버전 관리 시스템
소스 코드가 변경된 이력을 쉽게 확인 가능
특정 시점에 저장된 버전과 비교하거나 특정 시점으로 되돌아갈 수도 있다.
Git repository : git으로 관리되는 폴더, 내 폴더를 git의 관리 아래에 두어 버전 관리를 받게 함
Fork : 다른 사람이 올린 프로젝트에 contribute를 하기 위해 먼저 타인의 원격 저장소를 내 원격 저장소로 가지고 오는 작업
Clone : Fork로 가지고 온 코드가 있는 나의 Remote Repository에서 이 코드를 수정하기 위해 내 컴퓨터로 또 가져오는 작업
Push : 내 컴퓨터에서 소스코드 변경 작업을 완료한 내용을 commit을 통해 저장한 뒤 Remote Repository에 반대로 올려주는 작업
Pull request : Push 후, 내가 제안한 코드 변경사항에 대해 반영 여부를 요청
SSH and GPG key 설정하기 완료

🐳 10일차 수업을 마치며...

부캠 시작 전 찍먹해봤던 html, css, javascript 내용 외에 만나는 첫 학습 내용이었다. 몹시 생소하고 어렵게 느껴졌지만 페어님 덕에 오늘도 연명 성공;; 혼자였음 못했을지도 ㅠ;;;; 오늘은 방과후에 운동을 마치고 git 파트 학습을 완료할 예정.. 어렵다 어려엉~