[멋사 프론트엔드 부트캠프 14기] CLI

Shell

• 운영체제와 사용자 간 인터페이스 역할하는 프로그램
• 터미널에서 사용되는 shell은 주로 명령줄 인터페이스(CLI)를 제공하여, 사용자가 컴퓨터와 상호작용 할 수 있도록 해준다.

    + GUI는 그래픽으로 컴퓨터와 사용자 간 커뮤니케이션 하는 것이다.

 

| 주요 Shell의 특징과 차이점

1. Bash (Bourne Again Shell) 🌟
   • 가장 널리 사용되는 shell 중 하나 (ex. git bash)
2. Zsh (Z Shell) 🌟
   • Bash와 호환되면서 추가 기능 제공
   • 더 강력한 자동 완성 기능
   • macOS Catalina부터 기본 shell로 채택
3. Fish (Friendly Interactive SHell)
   • 사용자 친화적 인터페이스에 중점
   • 자동 제안, 웹 기반 설정 등 현대적 기능 제공
   • Bash나 Zsh에 비해 호환성 떨어짐
4. PowerShell
   • Microsoft에서 개발한 shell
   • Windows에서 주로 사용되나, 크로스 플랫폼 지원
   • Windows는 cmd나 power shell이 기본 shell이다.

---

| .zshrc / .bashrc

• rc: 'run commands' or 'runtime configuration'의 약자
• UNIX 초기 시절부터 사용된 개념으로, 프로그램이나 shell이 시작될 때 자동으로 실행할 명령어들을 담고 있는 설정 파일을 의미한다.

   + .이 앞에 붙어 있으면 hidden(숨김 파일이거나 숨김 폴더) 임.

 

●  주요 특징

1. 사용자의 홈 디렉터리나 프로젝트의 루트 디렉터리에 위치한다.
2. 해당 프로그램이 시작될 때 자동으로 로드된다.

●  주요 용도

1. 프로그램이나 셸의 설정을 저장
2. 환경 변수 설정
3. 별칭(alias) 정의
4. 시작 시 자동으로 실행될 스크립트나 명령어 지정

●  예시 rc 파일

• .zshrc: Zsh 셸의 설정 파일
• .prettierrc: Prettier 코드 포맷터의 설정 파일
• .vimrc: Vim 텍스트 에디터의 설정 파일

 

CLI (Command Line Interface) 란?

• 디렉터리 생성 및 이동, 복사, 이름 변경, 삭제 등을 미리 약속된 텍스트 기반 명령어로 컴퓨터 작업을 수행하는 작업이다.
• Windows는 CMD나 PowerShell, macOS나 Ubuntu는 Terminal을 사용한다.

 

| CLI 주요 명령어

- pwd

pwd # print working directory /현재 작업중인 폴더 절대경로 출력

 

- mkdir

mkdir 디렉터리명 # Make Directory / 폴더 생성

• ex) mkdir Frontend: 현재 폴더에 `Frontend`폴더 생성

 

- cd

cd 경로 #change Directory

• cd . - 현재 디렉토리 (생략 가능)
• cd .. - 상위 경로로 한 단계 이동
• cd ../.. - 상위 경로로 두 단계 이동
• cd ~/Desktop - 데스크탑 디렉토리로 바로 이동

 

- ls

ls -옵션 경로 # List Segments / 디렉토리 및 파일 목록 출력

• ls ~/Frontend/assets : `Frontend/assets` 폴더의 하위 폴더 목록 출력
• ls -l ~/Frontend/assets : 사용 권한, 소유자, 그룹, 크기, 날짜 등 상세 정보 함께 표시
• ls -a ~/Frontend/assets : 숨겨진 항목 포함하여 모든 내용 출력
• ls -al ~/Frontend/assets : 숨겨진 항목 포함하여 사용 권한, 소유자, 그룹, 크기, 날짜 등 상세 정보 함께 표시

 

- touch, echo

touch 파일명 # 빈 파일을 생성할 경우
echo '내용' > 파일명 # 간단한 내용이 들어있는 파일을 생성하거나 기존 파일의 내용 덮어씀
echo '내용' >> 파일명 # 지정한 파일의 끝에 내용 추가

• touch index.html : 내용이 없는 빈 `index.html`파일 생성
• echo 'let me = "Frontend Developer"' > js/index.js :  js 폴더 안에  `let me = "Frontend Developer"` 라는 코드 삽입된  `index.js`파일 생성

 

- cat

cat 파일명 # Concatenate / 파일 내용 확인

• cat js/index.js : `index.js`파일 내용 화면에 출력
• cat index.js app.js : `index.js`파일,  `app.js`파일 내용 모두 화면에 출력

 

- rm

rm 파일명 # Remove / 파일 삭제
rm -옵션 디렉토리명 # 비어있지 않은 디렉토리 삭제

• rm index.html :  `index.html`파일 삭제
• rm -r js : js폴더 내부 하위 디렉토리까지 모두 삭제
• rm -rf assets : `assets`폴더 안의 하위 디렉토리까지 모두 삭제하되, 경고를 나타내지 않음

• -r : recursive (재귀적) - 폴더 및 그 안의 내용 전체를 삭제할 때 사용
• -f : force (강제) - 경고 메시지 없이 묻지 않고 삭제

 

- rmdir

rmdir 디렉터리명 # Remove Directory / 디렉터리 제거

• rmdir js: `js` 폴더 삭제

 

- mv

mv 파일명 # Move / 파일, 디렉토리 이동 및 이미 존재하는 경우 이름 변경 가능
mv 디렉토리명

• mv index.html views/index.html : `index.html` 파일을 `views`폴더로 이동
• mv js/index.js js/app.js :`js` 폴더에 있는 `index.js` 파일명을 `app.js`로 변경

 

- cp

cp 파일명 # Copy / 파일, 디렉터리 복사
cp 디렉터리명 # 만약 디렉터리 하위에 파일이나 디렉터리 있으면 무조건 -r 옵션을 추가해야함

• cp index.html main.html : `index.html` 파일을 동일한 폴더에 복사한 후, 파일명을 `main.html` 로 변경
• cp index.html views/main.html : `index.html` 파일을 `views` 폴더에 복사한 후, 파일명을 `main.html` 로 변경
• 만약 상위에 있는 파일을 현재 파일에 카피하고자 하면, cp ../파일명 ./ 라고 하면 된다.

 

- 참고

• take 명령은 mkdir이랑 cd를 합친 것 / ex) mkdir learn-cli && cd learn-cli / take 명령을 사용하려면 take를 설치해야함.
• 지금까지 입력했던 명령어를 모두 조회하고 싶으면 history라고 입력하면 됨.
• 터미널에서 code . 이라고 입력하면 현재 있는 디렉터리가 루트가 되는 VSCode 창이 새로 열린다
• - 와 -- 의 차이
  • 약자로 쓸 때는 -를, fullname을 쓸 때는 --를 사용한다. (ex. -v, --version)
  • 하지만❗모든 명령어가 -v나 --version처럼 약속된 건 아니니까 더 많은 명령어에 대해 알고 싶으면 --help를 해보자!