프라이D
프라이Develog(❁´◡`❁)
프라이D
전체 방문자
오늘
어제
  • ALL (378)
    • TDD, Cleancode with JavaScr.. (5)
    • 프로젝트 (32)
      • work (3)
      • 직접 만드는 기술 블로그 (2)
      • 데일리 옥션 (19)
      • 모락모락 (8)
    • Computer Science (1)
    • Algorithm & 자료구조 (94)
      • 알고리즘 w.JavaScript (53)
      • 자료구조 (5)
      • (인프런) 자바스크립트 알고리즘 문제풀이 (34)
    • JavaScript (45)
      • JavaScript (41)
      • 모던 자바스크립트 Deep Dive (4)
    • WEB (13)
    • 회고 (12)
    • TIL (109)
    • WIL (7)
    • Stacks (20)
      • React.js (6)
      • Next.js (1)
      • Redux (3)
      • Node.js (2)
      • GIT (2)
      • SAP (1)
    • 15일 메이킹 프로젝트 (15)
    • 이전 기록 (14)
    • ETC. (5)
    • ---------------2021 (6)
      • 내일배움단-웹개발 5주 (2)
      • 정보처리기사 (4)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • 비트마스크
  • nomadcoder
  • nomadcoders
  • 투포인터알고리즘
  • 모던자바스크립트딥다이브
  • 국비지원
  • 스파르타코딩클럽
  • 내일배움카드
  • 코드스테이츠
  • 자바스크립트알고리즘
  • 알고리즘
  • 자바스크립트비트마스크
  • 자바스크립트
  • MySQL
  • Til
  • vanilaJS
  • 코딩프로젝트
  • JavaScript
  • 내일배움단
  • 2023 인프콘 후기

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
프라이D

프라이Develog(❁´◡`❁)

[Day 10] 리눅스, nvm, npm, Git
TIL

[Day 10] 리눅스, nvm, npm, Git

2022. 7. 6. 20:58

터미널을 사용하다..!

오늘은 리눅스 CLI 명령어를 사용한 기본적인 조작방법 및 Node.js 런타임에 대한 기본 지식을 학습했다. mac OS 혹은 ubuntu를 사용해서 학습해야 하는데, 나는 윈도우11 유저이고 우분투 듀얼부팅이 싫어서 wsl2를 설치하여 진행했다. wsl2 세팅은 여기과 여기 를 참조했다.

어려웠던 부분은 우분투에서 gui 앱을 실행하기 위해서 X11이라는 것을 활성화 시켜야 한다는 오류가 있었다. 구글링을 통해 VcXsrv라는 것을 받아 세팅을 진행했고 (참고링크 : WSL2 GUI 사용하기), 우분투에서 nautilus(윈도우의 파일탐색기처럼 파일을 볼 수 있는 파일 관리자) 를 실행시킬 수 있었다. 

 

wsl2를 사용하면서 윈도우 터미널 미리보기 라는 앱을 설치하여 사용중이다. MS의 wsl2 설치 공식문서에 보니 이 앱을 사용할 것을 권장하고 있었다. 터미널에서 설정을 통해 배경 색상과 폰트 효과를 줄 수 있는데, 폰트에 빈티지한 효과를 주었더니 예뻐서 기분이 좋다. 

상단 아래쪽 화살표를 클릭하거나, 우클릭 후 설정을 눌러 프로필 > 모양으로 들어감.

오늘 배운 것

CLI 

  • Command Line Interface : 명령어 인터페이스
  • 명령어 텍스트를 이용해 컴퓨터와 상호작용 할 수 있는 방식이다. 아주 많은 수의 서버컴퓨터를 제어하고 서버에 요청을 보낼 때 GUI(Graphic User Interface)를 위한 개별 I/O 소스 없이 커맨드로 조작할 수 있기 때문에 편리하다.
  • 또 GUI 보다 가벼운 인터페이스이기 때문에 적은 리소스로 안정적인 작업을 할 수 있다.

터미널 / 프롬프트 / 쉘

  • 터미널 : 쉽게 말해 명령어를 입력받고 출력하는 곳, 콘솔이라고도 한다.
  • 프롬프트 : 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 공간
  • 쉘(Shell) : CLI의 명령을 해석하는 인터프리터(해석기), 쉽게 말해 터미널로 실행되는 프로그램(소프트웨어)

리눅스 기본 명령어

  • pwd : 현재 위치 확인
  • mkdir <folder_name> : 폴더 생성
  • ls : list의 약자로, 특정 디렉토리에 포함된 파일/ 하위 디렉토리 출력
    • ls -l : 폴더,파일의 포맷 출력 -- 포맷이 d로 시작 : folder / 포맷이 -로 시작 : file
    • ls -a : 숨은 폴더 or 파일 모두 출력
    • ls -al or ls -la : 순서는 기능에 영향을 미치지 않는다. 
  • cd <folder_name> : 해당 폴더로 이동 // 파일로는 이동할 수 없다!!!
  • touch <file_name> : file 생성
  • cat <file_name> : file 내용 출력 -- 원격 접속 상태에서 파일의 모든 내용을 출력하는 것은 비효율적임을 유의할 것!
  • rm <file_name> : 단일 파일 삭제 
    • rm -rf  <folder_name>: 폴더 삭제 (-rf -- r: recursive, f: force)
  • mv : move 폴더, 파일의 위치 및 이름 변경
    • mv <file_name_1> <file_name_2> : file_1을 file_2의 이름으로 변경
    • mv <folder_name_1> <folder_name_2> : folder_1을 folder_2의 이름으로 변경
    • mv <file_name> <folder_name> : file을 folder로 이동
  • cp : 복사
    • cp <file_name_1> <file_name_2> : file1을 복사하여 file2를 만든다
    • cp <file_name> dir/ : dir로 file을 복사한다. file이름을 여러개 작성할 경우 한꺼번에 복사할 수 있다.
  • nano <file_name> : file을 nano 에디터에서 실행

절대경로 / 상대경로

  • 절대 경로 : 쉽게 말하면 최상위 디렉토리인  / 루트 폴더로 부터 어떤 폴더를 거쳐 파일명에 이르는 전체 경로이다.
  • 상대 경로 : 현재 폴더의 위치를 기준으로 ./ 은 현재 디렉토리 ../ 은 상위 디렉토리를 의미한다. 
  • 추가로 경로 좌측 ~/ 표시는 루트 폴더로 부터 사용자 폴더까지의 경로를 축약한 형태이다.

관리자 권한 / sudo 

  • 시스템 파일의 무분별한 변경, 삭제 및 악성코드, 충돌 오류를 방지하기 위하여 사용자 권한과 관리자 권한으로 나뉘게 되었다. 관리자 권한으로 사용자 계정으로는 접근할 수 없는 영역(운영체제에 영향을 줄 수 있는 영역)에 접근할 수 있다. 
  • Linux 관리자의 특징은 일반 사용자에게 관리자 권한(루트 권한)을 완전하게 넘기지 않는다는 점이다.
  • 현재 로그인 된 사용자에게 제한된 권한이 주어지고, 새로운 프로그램의 설치, 변경, 삭제 시 즉, 관리자 권한이 필요할 때 sudo 명령어를 입력해 관리자 권한을 획득할 수 있다.
  • 사용자 폴더의 상위 폴더, 루트 폴더 / 에서는 파일 및 폴더를 생성할 수 없는데, sudo를 붙여 관리자 권한으로 실행하면  생성 가능하고, 이 때 권한의 소유자는 root 이다.

sudo mkdir test 는 권한을 획득해 생성이 된 모습을 확인할 수 있다.

Node.js 란

  • 자바스크립트가 실행될 수 있는 자바스크립트 런타임 환경. 자바스크립트로 서버를 구축하고 서버에서 자바스크립트가 작동하도록 하는 환경이다.
  • Node.js의 등장으로 이전까지 브라우저에 의존했던 자바스크립트로 서버까지 구축할 수 있게되면서, 범용성이 확장되는 계기가 되었다.
  • Node.js를 nvm을 이용해 간편하게 설치할 수 있다. 

nvm

  • node version manager 
  • 장점 1. 컴퓨터에 다양한 버전의 node.js 를 설치할 수 있다. 이를 통해 버전 호환 문제를 해결할 수 있다.
  • 장점 2. 가상 환경에서 다양한 버전의 node.js 를 한번에 관리할 수 있고, 최신 버전으로의 업데이트도 간편하다. 
  • 장점 3. nvm use 커맨드로 버전을 간편하게 스위칭 할 수 있다. 
  • nvm 설치하기
# nvm을 받기 위해 wget 울 설치한다.
# wget 은 크롤링으로 서버에서 소프트웨어를 간편하게 받을 수 있게 하는 소프트웨어이다.
sudo apt update
sudo apt install wget

# wget으로 nvm을 설치한다.
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# 설치완료 후 터미널을 다시 열어 아래와 같이 버전을 확인한다.
nvm --version
  • Node.js 설치하기
# lts 버전 설치
nvm install --lts
# 특정 버전 설치
nvm install 12.18.3

# node 버전 확인
node -v

# 특정 버전 사용
nvm use 버전 넘버

# node.js 환경에서 js파일 실행
node <file_name>.js

npm과 package.json

  • node package manager
  • node.js로 만들어진 모듈을 관리할 수 있는 툴이고, npm install <package name> 으로 원하는 모듈을 설치할 수 있다. 
  • 프로젝트별로 사용하는 모듈이 다를 수 있는데, 이 때 이 프로젝트(패키지)에 대한 정보를 담고있는 것이 package.json 이다.
  • package.json 파일만 있으면 필요한 모듈을 npm install 명령어로 전체 설치할 수 있어서 간편하다. 이렇게 다운로드된 패키지는 node_modules 라는 폴더에 저장된다.
  • npm 사용 방법 : 작업을 진행할 디렉토리로 이동해 npm init -- npm을 쓸 수 있는 초기 환경 셋팅 및 package.json 을 생성한다.

 

  • package.json의 내용은 크게 두 가지로 나눌 수 있다.
    • 프로젝트의 정보 : name, version, scripts 영역
      • scripts: CLI에서 사용 가능한 명령, npm script 라고 한다. 실행시 npm run <script name> 을 입력한다.
    • 패키지 버전 정보 : dependencies 또는 devDependencies
      • dependencies : 실제 프로젝트를 실행시키는 것과 관련있는 패키지 (ex React)
      • devDependencies : 로컬 개발 및 테스트에 필요한 패키지 (npm install <package name> --save-dev 옵션과 함께 설치시 devDependencies로 추가된다.)

오늘 진행한 코드스테이츠 과제의 package.json

1. name, version 등 정보 확인
2. scripts영역 (예시로 npm run start 명령어를 입력시 node index.js 가 실행되도록 명시되어있다.) 3.devDependencies 영역 -- 실제 동작보다 테스트에 더 초점이 맞춰진 패키지들
4. dependencies 영역 -- 실제 실행과 관련있는 패키지

Git

git은 버전 관리 시스템이다. 변경 이력을 저장할 수 있고, 특정 시점으로 되돌아 갈 수 있으며, 커밋 메시지를 통해 어떤 사항이 변경되었는지 쉽게 파악할 수 있다. 또한 로컬 repo(리포지토리/저장소)에서 원격 repo로 push 하여 백업을 만드는 효과를 얻을 수 있고, 이런 모든 장점으로 인해 협업에 유리하다.

  • fork : (원격) 다른 사람의 repo를 내 repo로 복사하여 가지고 오는 것.
  • clone : 내 (원격) repo 를 (로컬)로 clone 해 오는 것.
  • commit : (로컬) repo에서 변경사항을 저장하는 것
  • push : (로컬) commit 된 내용을 (원격) 내 repo 혹은 다른 사람의 repo에 올려주는 작업
  • pull request (pr) : 내가 push한 변경코드에 대한 반영 여부 요청
  • pull : (원격) repo의 변경사항을 (로컬) repo로 가져오는 작업
  • ubuntu git 환경설정
sudo apt install git # git 패키지 설치
git --version # 설치 확인

$ git config --global user.name "나의 사용자 이름"
$ git config --global user.email "내 이메일 주소"

$ git config --global core.editor nano # 커밋 메시지 기록시 기본 텍스트에디터 nano로 변경 

# Secure Shell -- CLI 환경에서 다른 PC 접속 요청시 사용하는 비대칭 키
ssh-keygen # SSH 키 생성 
cat ~/.ssh/id_rsa.pub # cat 내 공개키 출력 후 내용 복사

# 이후 브라우저에서 github 접속 > settings > SSH and GPG keys 탭에 들어가 복사한 SSH key를 입력
# 이후 repo의 code 탭에서 SSH 를 복사하여 CLI 에서 클론 명령어를 사용할 수 있다.
git clone git@github...<복사한 내용>

+ tree

tree 명령어로 디렉토리 구조를 한눈에 파악할 수 있다.

tree -L 1 // 1depth 까지만 표시
tree -L 2 // 2depth 까지만 표시

기본적으로 설치가 되어있지 않기 때문에, 아래 코드를 입력하여 설치해준다. 

$ sudo apt-get install tree

참고자료

https://www.44bits.io/ko/keyword/command-line-interface-cli-shell-and-terminal

 

커맨드라인 인터페이스, 셸, 터미널이란?

커맨드라인 인터페이스는 사용자가 텍스트로 명령어를 입력하고 다시 텍스트로 결과를 화면에 출력해주는 인터페이스를 가진 컴퓨팅 인터페이스를 의미합니다. 이 글에서는 커맨드라인 인터

www.44bits.io

https://hoya-kim.github.io/2021/09/14/package-json/

 

알고 쓰자 package.json

package.json이 하는 역할과 설정법에 대해 알아보자!

hoya-kim.github.io

https://araikuma.tistory.com/140

 

[Linux] 그밖에 - tree 디렉토리 구조 조회

tree란? 터미널에서 디렉토리 구조 조회를 용이하게 해준다. ls 명령어를 사용해서 디렉토리 내부를 확인할 수 있기는 하지만, 서브 디렉토리 내부에 포함된 파일을 확인하려면 다시 cd, ls 명령어

araikuma.tistory.com

https://velog.io/@skyepodium/package.json

 

package.json 알아보기

프론트엔드 개발하다가 잘 몰라가지고package.json은 프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보를 명시하는 파일입니다.프로젝트의 정보는 name, version 등의 메타데이터를 포함하고

velog.io

 

저작자표시 (새창열림)

'TIL' 카테고리의 다른 글

[Day 12] 객체  (0) 2022.07.09
[Day 11] 배열 + 2주차 까지의 소감  (0) 2022.07.07
[Day 9] 계산기 구현  (0) 2022.07.05
[Day 8] 계산기 목업 만들기 -2  (0) 2022.07.05
[Day 7] CSS Flex 활용 :: 계산기 Mock-up 제작  (0) 2022.07.01
    'TIL' 카테고리의 다른 글
    • [Day 12] 객체
    • [Day 11] 배열 + 2주차 까지의 소감
    • [Day 9] 계산기 구현
    • [Day 8] 계산기 목업 만들기 -2
    프라이D
    프라이D
    틀린내용 정정 및 개선사항은 언제든지 댓글 달아주세요 :D

    티스토리툴바