S1 Unit 8. Linux/Git 기초

나현·2022년 9월 1일
Section_1과제코드스테이츠프론트엔드학습일지
0

학습일지

목록 보기
10/53
post-thumbnail

💡 이번에 배운 내용

  • Section1.
    웹 프론트엔드 개발의 기초지식을 기반으로 스스로 단순한 Web App을 만들 수 있다.
  • Unit8. Linux/Git 기초 : 개발자에게 필요한 CLI, 터미널, 패키지 매니저 등에 대해 배우고 git에 대해 실습해 본다.

느낀점

오늘은 개발자에게 필수인 터미널 사용법과 패키지 사용, node 등에 대해 배웠다. 매우 중요한 내용을 하루에 몰아서 배운 느낌이다. 유난히 정리할 내용도 많았다. 시간이 모자랄 정도로 공부량도 많았고 실습할 내용도 많았다.
내용 공부를 어느 정도 진행한 뒤에는 모듈을 설치하고 모듈을 이용해 간단한 기능을 만들고 테스트해보는 실습을 했다.
이 모든 과정을 터미널에서 npm, node.js 를 통하여 수행해야 했는데 페어와 여러 시행착오를 거친 뒤에 4분을 남기고 과제를 완료할 수 있었다.
저작권과 여러 이유로 과제를 공개할 수는 없지만 과제를 통해 다음을 배울 수 있었다.

  • CLI 명령어를 사용해 원하는 디렉토리에 접근하고 정보를 확인한다.
  • 터미널에서 git에 로그인하고 레포지토리에 접근할 수 있다.
  • 터미널에서 npm을 설치하고 'npm run <스크립트>' 명령어를 통해 필요한 작업을 수행한다.
  • nano 편집기를 사용해 터미널에서 javascript 파일을 작성하고 생성, 수정, 저장할 수 있다.
  • 'npm run <스크립트>' 명령어를 사용해 터미널에서 파일을 테스트하고 과제를 제출할 수 있다.

시간도 걸리고 우왕좌왕 했지만 정말로 재밌었다! 어려운 걸 해낸 느낌이라서 더 뿌듯한걸까? 배울수록 개발이 재밌어서 다행이라는 생각이 든다.
오늘도 흡족한 마음으로 하루를 마무리하며 눈을 감을 수 있다 ☺️

키워드

CLI, 터미널, 패키지, 패키지 매니저, nano, nvm, node.js, brew, package.json, 버전 관리, 버전 관리 시스템, git

학습내용

Ch1. CLI(Command-Line Interface)

컴퓨터를 조작하기 위해서는 입력(input)과 출력(output)이 필요하다. 키보드와 마우스 등을 통해 사용자가 명령을 입력하면 컴퓨터는 그 명령에 맞게 출력한다. 이 입출력을 I/O(Input/Output)라고 한다.
GUI(Graphic User Interface)이 등장하기 전에는 CLI를 이용해 텍스트로 컴퓨터와 소통했다.
대부분의 서버 컴퓨터에는 무료 운영체제인 Linux를 사용하므로 Linux환경에서의 CLI를 학습해야 한다.
(내 컴퓨터는 mac OS이기 때문에 mac 위주로 작성하였다.)

1) 터미널

(mac OS에서는 terminal 프로그램을 이용한다.)
터미널은 CLI로 텍스트로 된 I/O명령을 수행한다. 터미널을 사용하기 위해서 기본적인 명령어를 알아야 한다.
터미널을 사용하면 한줄씩 명령어를 입력할 수 있는데 이 한줄을 프롬프트(prompt)라고 한다. 프롬프트에 명령어를 입력한 후 enter를 눌러 명령어를 실행한다.

2) 기본 명령어

만약 폴더나 파일 명에 띄어쓰기가 있을 경우 백슬래시()를 이용해 표현할 것
ex. hey\ guys

경로

  • . : 현재 디렉토리. 상대 경로
  • .. : 한 단계 상위 디렉토리. 상대 경로
  • ~ : Users/[username]. 사용자 폴더의 경로(Path). 루트 폴더(/)로부터 사용자 폴더(username)까지의 경로를 축약되었다는 의미다.(mac OS)
  • / : 최상위 루트폴더로 이동

명령어

  • pwd : print working directory. 현재 위치 확인
  • mkdir : make directory. 새 폴더 생성
  • cd : change directory. cd 뒤의 디렉토리로 들어가기
  • ls : list. 현재 위치에 포함된 폴더.디렉토리 리스트
    • ls -a : all. 숨어있는 파일,폴더 모두 표시
    • ls -l : 포맷까지 모두 표시 (포맷 ex.drwx------)
  • touch : 뒤에 입력한 파일 생성 (ex. touch wow.txt)
  • cat : 뒤에 입력한 파일 내용 보기
  • rm : remove. 파일 삭제(휴지통X)
    • rm -rf : recursive force. 폴더.디렉토리 삭제
  • mv : move. 옮기거나 이름을 바꾼다.
    • mv '파일' '폴더' : 폴더 안으로 파일을 옮긴다.
    • mv '파일' '파일' : 앞의 파일이 뒤의 파일로 이름이 바뀐다.
  • cp '원본 파일명' '복사할 파일명' : copy. 파일 복사
    • cp -rf '원본 폴더명' '복사할 폴더명' : 폴더 복사
  • whoami : 현재 사용자명 확인
  • sudo : (일시적으로) 관리자 권한 획득. 계정 비밀번호 필요
  • open . : (mac OS) 현재 위치 GUI로 열기

루트 폴더는 '/'로 표시되며 리눅스 환경에서는 관리자가 아닌 일반 사용자에게 루트 폴더 권한을 부여하지 않는다. 만약 관리자 영역을 함부로 변경할 경우 운영체제에 영향이 생겨 다시 설치해야할 수 있으니 주의한다.
또한 ls -l을 입력하면 해당 파일의 소유자가 나오는데 관리자일 경우 root가 표시된다.
프로그램을 설치, 변경, 삭제하기 위해서는 관리자 권한이 필요하다.

3) 텍스트 에디터 nano

텍스트 파일을 편집해야하는 경우 사용하며 대부분의 리눅스 환경에는 nano가 설치되어 있다.
nano 또는 nano '파일명' 으로 nano를 실행한다.
nano를 실행하면 하단에 Ctrl과 조합하여 사용하는 단축키가 표시된다.
저장은 Writout, 열기는 Read file 로 표시되어 있다.

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

리눅스에서 패키지는 여러 파일을 하나의 파일로 모아 압축한 파일을 의미한다.
말그대로 포장한 것이다.
패키지 매니저는 복잡한 패키지 설치, 변경, 삭제 등을 편리하게 해주는 도구다.

패키지의 구성

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

Mac OS의 패키지 - brew

터미널에서 아래와 같은 순서로 설치한다.
1) xcode-select 설치: 터미널에 xcode-select --install 입력
2) Homebrew 설치: Homebrew사이트에서 터미널에 들어갈 내용을 복사하여 붙여넣기 한다.
3) 비밀번호 입력: 컴퓨터 시작시 입력하는 비밀번호를 입력한다.

  • 설치 도중 강제 종료는 Ctrl + C 이다.
  • Installation successful! 터미널에 뜨면 설치완료
    4) 터미널에 설치 후 Next step 내용 확인
    '~ PATH 경로:' 뒤의 내용을 복사하여 PATH 뒤의 경로로 가서 실행한다.
    실행 후 안내하는 명령어를 입력하면 완료

brew 명령어

  • brew 업데이트: brew update
  • 업데이트 필요 파일 조회: brew outdated
  • 프로그램 설치: brew install 프로그램 이름
  • 프로그램 삭제: brew uninstall 프로그램 이름
  • 프로그램 업데이트: brew upgrade 프로그램 이름
  • 설치된 프로그램 보기: brew list
  • 프로그램 검색: brew search 검색어
  • 프로그램 정보 확인: brew info 프로그램 이름

Ch3. Node.js

Node.js는 javascript 런타임(runtime) 중 하나로 웹 브라우저가 아닌 곳(터미널 등)에서도 javascript를 실행할 수 있는 프로그램이다.
런타임이란 프로그래밍 언어가 실행되는 환경을 뜻한다. 예를 들면 웹 브라우저는 javascript의 주요 런타임이다.
node.js를 사용하면 서버를 구축하는 등 웹 브라우저를 사용하지 않고도 넓게 javascript를 사용할 수 있다.

1) NVM 설치

NVM(Node Version Manager)은 패키지 매니저처럼 node.js의 버전을 관리해준다. 따라서 node.js를 설치하기 위해 nvm을 먼저 설치해야 한다.
터미널에 wget을 사용해 최신버전의 nvm을 설치한다. (wget은 url만 있으면 쉽게 설치하는 프로그램으로 brew를 이용해 파일명 wget만 알면 쉽게 설치할 수 있다.) 최신버전의 install URL은 nvm 공식문서에서 확인할 수 있으며 'wget -q0- [url] | bash' 형식으로 되어있다.
설치하면 터미널을 새로 시작하라고 뜬다.
설치가 완료되면 nvm이 설치된 곳에서 nvm --version 로 버전을 확인할 수 있다.

2) nvm 사용법

nvm은 위에서 설명했듯이 node.js의 버전 관리가 용이하다.
때문에 여러 버전을 삭제업이 설치할 수 있고, 골라서 사용이 가능하다.
방법은 아래와 같이 매우 간단히 터미널에서 설치할 수 있다.

nvm install 12.17.1 #특정 버전 설치
nvm use 12.17.1 #특정 버전 사용
nvm ls #설치된 버전 확인

3) node.js 설치

nvm install --lts
이 한줄로 터미널에서 간단하게 설치하고 node -v 로 버전을 확인할 수 있다.

4) mac OS 에서의 설치 확인

만약에 nvm과 node의 버전이 제대로 확인되지 않거나 실행되지 않는다면 아래 출처대로 해보면 좋다. 저자께 참 감사드린다!!
문제 해결 방법 출처: palette.log - zsh: command not found: nvm 오류해결법

4) node.js 사용해보기

CLI명령어를 사용하여 원하는 곳에 JS파일을 저장하고, 터미널 어디서든지
node '파일명'
으로 파일을 실행해보면 javascript가 실행되는 것을 알 수 있다.
JS파일을 터미널로 작성할 때는 위의 nano를 사용해서 작성하고 저장하면 된다.

5) npm과 package.json

npm(Node package Manager)로 node.js의 모듈을 쉽게 설치해주는 패키지 매니저이다. 모듈이란 프로그램을 실행하기 위한 만들어진 코드를 뜻한다.
package.json은 프로그램 사용시 필요한 이런 모듈들을 모아놓은 파일로 프로젝트 전반에 필요한 내용이 모여있다. 다만 어떤 파일이 필요한지만 적혀있을 뿐 그 자체로 내용이 담겨있지는 않다.

  • npm install
    npm으로 package.json를 이용해서 필요한 모듈을 다운로드하고 설치해야 그 때 모듈이 다운로드 된다. npm이 설치되어 있고 package.json이 있으면
    터미널에서 npm install 이 한 줄로 node_modules라는 폴더가 생성되며 이 안에 모듈들이 설치된다.
npm install --save-dev

--save-dev는 옵션으로 npm으로 설치시 모듈이 자동으로 devDependencies에 추가된다.

  • devDependencies
    해당 프로젝트를 개발하는 과정에서 필요한 모듈들이 무엇인지 적혀있으며 이 모듈들은 실제 프로젝트 동작시에 직접적인 영향은 주지 않는다.
    ex) 테스트 모듈, 코드 모양 정리 모듈 등등
//그저 예시입니다.
{
  "devDependencies": {
    "@mochajs/json-file-reporter": "^1.2.x",
    "chai": "^x.1.0",
    "mocha": "^7.x.0",
    "sinon": "^x.0.2"
  }
}
  • dependencies
    해당 프로젝트를 실행하는 데 반드시 필요한 모듈들이 적여있으며, devDependencies와는 달리 프로젝트 동작시 직접적인 영향을 끼친다.
//그저 예시입니다.
{
  "dependencies": {
    "react": "^1x.x.0",
    "react-dom": "^1x.x.0"
    "range": "^0.0.x"
  }
}

아래와 같이 쉽게 설치할 수 있으며

npm install react
npm install --save react

--save는 옵션으로 모듈을 자동으로 dependencies에 추가해준다.

  • script
    CLI에서 사용가능한 명령들의 모음이다.
    터미널에서 npm run '스크립트명'으로 사용하면 해당 스크립트 이름의 값이 실행된다.
//그저 예시입니다.
  "scripts": {
    "start": "node script.js",
    "test": "mocha myFunction.test.js --sort",
    "lint": "eslint"
  }
//start : node.js로 해당 파일 실행 -> npm run start
//test : test 실행 -> npm run test
//lint : 코드 검사 -> npm run lint

Ch4. Git

git은 대표적인 버전 관리 시스템이다.

버전 관리란?

프로젝트 결과물(소스 코드 등)을 각 버전별로 저장하는 것을 말한다. 만약 이전 버전으로 돌아가야 하거나 어떤 점이 추가, 변경, 삭제 되었는지 알아보기 위해서 각 버전이 있으면 용이하다. 이 버전 관리를 쉽게 해주는 시스템을 버전 관리 시스템이라고 한다.

버전 관리 시스템 git

git은 코드를 효율적으로 관리할 수 있는 '분산형 버전 관리 시스템'이다.

  • 스냅샷: 특정 시점에 생성된 버전의 백업, 복사본
  • 커밋(commit): 스냅샷을 만드는 작업

github

git repository를 관리할 수 있는 클라우드 기반 서비스로 컴퓨터에서 git으로 관리하는 프로젝트를 올려둘 수 있다. 여러 사람이 공유하고 접근할 수 있으며 이를 활용해 여러 오픈 소스들이 존재한다.
오픈 소스의 경우 여러 사람이 코드를 수정하거나 추가할 수 있는데 이를 기여(contribute)라고 한다.

Repository

버전 관리를 위해 git으로 관리되는 디렉토리를 git repository라고 한다.
크게 local repository와 remote repository로 나뉜다.

  • local repository
    개인 컴퓨터의 로컬 저장소를 의미한다.
  • remote repository
    온라인 상의 원격 저장소를 의미한다.

Git의 기본 개념

  • fork
    다른 사람의 remote repository에 있는 프로젝트(소스 코드)를 개인의 remote repository로 가져오는 작업을 의미한다.
  • clone
    remote repository에 있는 프로젝트(소스 코드)를 local repository로 가져오는 작업을 의미한다.
  • push
    local repository에서 작업한 프로젝트(소스 코드)를 remote repository로 업로드하는 작업을 의미한다.
  • pull
    remote repository의 변경사항을 local repository로 가져오는 작업을 의미한다.
  • pull request
    gitHub에서 push 후 해당 프로젝트의 변경사항에 대한 반영 여부를 요청하는 작업을 의미한다.

git 최초 설정하기

아래 사이트를 따라 터미널로 git 최초 설정을 할 수 있다.
참고: Git 최초 설정

질문해보기

1. drwxr-xr-x 랑 -rw-r--r-- 이건 뭘까?
디렉토리, 파일과 그 권한을 나타낸다.
맨 앞 자리 한 자리는 파일 및 디렉토리의 종류를 나타내고,
(d는 디렉토리, -는 파일)
그 뒤는 세자리씩 각각 소유자, 그룹 사용자, 그 외 사용자에 대한 권한을 나타낸다.
각 권한의 의미는 다음과 같다.

문자의미숫자의미
rread4읽기 권한
wwrite2쓰기 권한
xexecute1실행 권한

정리하자면

  • drwxr-xr-x : 디렉토리,
    소유자에게 읽기,쓰기,실행 권한,
    그룹 사용자에게 읽기,쓰기 권한,
    그 외 사용자에게 읽기,쓰기 권한 있음

  • -rw-r--r-- : 파일,
    소유자에게 읽기,쓰기 권한,
    그룹 사용자에게 읽기 권한,
    그 외 사용자에게 읽기 권한 있음

리눅스 CLI 권한 참고:
https://bamdule.tistory.com/169
https://flatlifer.com/30
https://velog.io/@wmc1415/%EB%A6%AC%EB%88%85%EC%8A%A4-%EA%B6%8C%ED%95%9Cpermisson-%EC%84%A4%EC%A0%95chmodchown1

profile
나현
프론트엔드 개발자 NH입니다. 시리즈로 보시면 더 쉽게 여러 글들을 볼 수 있습니다!
이전 포스트

S1 Unit 7. 간단한 웹앱 만들기

다음 포스트

S1 Unit 9. Javascript 배열, 객체

0개의 댓글