CLI (Command Line Interface, 명령줄 인터페이스)

 
 
 

📌 CLI (Command Line Interface, 명령줄 인터페이스)

: 디렉토리 생성 및 이동, 복사, 이름 변경, 삭제 등을 미리 약속된 명령어를 사용하여 실행하는 환경

• 운영체제는 기본적으로 CLI를 제공하며 Windows는 CMD(Command Prompt), Mac OS는 Terminal을 사용한다.
• Windows의 CMD와 Mac OS의 Terminal에서 지원하는 CLI 명령어가 다르다.

 

 

📍 GUI (Graphic User Interface, 그래픽 인터페이스)

: 그래픽을 통해 사용자와 컴퓨터가 상호작용하는 방식

🔺 경로

1. 루트 디렉토리 (Root Directory)
: 모든 파일과 폴더를 담고 있는 최상위 폴더

• Windows는 보통 C 드라이브를 의미

 
2. 홈 디렉토리 (Home Directory, Tilde(틸드))
: 현재 로그인 된 사용자의 홈 폴더 

• Windows는 C:/사용자(Users)/현재 사용자 계정을 의미

 
 
(1) 절대 경로
: 루트 디렉토리 ~ 목적 지점까지 거치는 모든 경로를 전부 작성한 것

• Windows 바탕 화면의 절대 경로: C:/Users/kyle/Desktop

 
(2) 상대 경로
: 현재 작업하고 있는 디렉토리를 기준으로 계산된 상대적 위치를 작성한 것

• ./ : 현재 작업 폴더
• ../ : 현재 작업 폴더의 부모 폴더

 
 

---

 
 

📌 CLI 주요 명령어

• code . : vscode 실행
• ctrl + c / Q : 벗어나기
• > : 기존 내용을 덮어씀
• >> : 기존 내용에 추가됨
• 문장 안에 공백이 있다면 따옴표('') or 쌍따옴표("")로 묶어야 한다.

 
 

0. 내가 누구인지 확인

whoami

1. 현재 작업 중인 폴더 확인

pwd

pwd : print working directory
- 현재 작업 중인 폴더의 절대 경로가 출력
 
 
 

2. 폴더 생성

`mkdir` : Make Directory
`mkdir 파일명`

mkdir Frontend
: 현재 폴더에 `Frontend` 폴더 생성

mkdir views js css assets
: 한 번에 폴더 4개 생성

mkdir learn-cli learn-cli/js learn-cli/styles
: learn-cli 폴더와 그 하위 폴더인 js, styles 폴더를 한 번에 생성

 
 
 

3. 디렉토리 이동

`cd` : change Directory
`cd 파일명`

• cd : 루트 디렉토리로 이동
• cd . : 현재 디렉토리 (생략 가능)
• cd .. : 상위 경로로 한 단계 이동
• cd ../.. : 상위 경로로 두 단계 이동
• cd ~/Desktop : 데스크탑 디렉토리로 바로 이동
• cd ../../home/learn-remote : 현재 위치 한 번에 변경

 
 

4. 디렉토리 및 파일 목록 출력

`ls` : 만들어진 리스트(폴더/파일) 확인 (List Segments)
`ls {옵션} 파일명`

- `ls ~/Frontend/assets` 
: `Frontend/assets` 폴더의 하위 폴더 목록 출력

- `ls -l 파일명` 
: 폴더 목록 + 사용 권한, 소유자, 그룹, 크기, 날짜 등 상세 정보를 함께 표시

- `ls -a 파일명` 
: 폴더 목록 + 숨겨진 항목을 포함하여 모든 내용을 출력

- `ls -al 파일명` 
: 폴더 목록 + 숨겨진 항목을 포함하여 사용 권한, 소유자, 그룹, 크기, 날짜 등 상세 정보를 함께 표시

5. 파일 생성

`touch` : 빈 파일을 생성할 경우

touch index.html

touch learn-cli/index.html learn-cli/images/logo.svg learn-cli/js/main.js learn-cli/styles/input.css
=> 각 폴더에 파일을 한 번에 생성

`echo` : 간단한 내용이 들어있는 파일을 생성할 경우

echo 'let me = "Frontend Developer"' > js/index.js
=> js 폴더안에  `let me = "Frontend Developer"` 라는 코드가 삽입된  `index.js`파일 생성

echo 'FE 개발자' > js/index.js
=> index.js 파일의 기존 코드가 덮어쓰기 됨

echo 'let me = "Frontend Developer"' >> js/index.js
=> 위의 'FE 개발자' 코드 아래에 추가됨

6. 파일 내용 확인하기

`cat` : 파일 내용 확인하기
`cat 폴더/파일명`

cat js/index.js
: `index.js`파일의 내용을 화면에 출력

cat index.js app.js
: `index.js`파일의 내용으로  `app.js`파일 내용 덮어쓰기

 
 
 

7. 폴더 & (비어있지 않은)디렉토리 삭제

`rm` : Remove 
`rm 제거할 파일/디렉토리`

`rm index.html` 
: `index.html` 파일 삭제

`rm -r 폴더` 
: 폴더 내부 하위 디렉토리까지 모두 삭제

`rm -rf 폴더` 
: 폴더 안의 하위 디렉토리까지 모두 삭제 (-r보다 더 강력함)

 
 
 

8. 빈 디렉토리 제거

`rmdir` : Remove Directory
`rmdir 제거할 디렉토리`

rmdir js
: `js` 폴더 삭제

 
 
 

9. 파일/디렉토리 이동 & 이름 변경

`mv` : Move
- 이미 존재하는 파일 & 디렉토리의 경우 이름 변경이 가능 ⭕
- 이동은 GUI가 편함

mv index.html views/index.html
: `index.html` 파일을 `views`폴더로 이동

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

 
 
 

10. 파일/디렉토리 복사

`cp` : Copy
`cp 복사할원본파일 새로복사할파일명`

cp index.html main.html
:`index.html`파일을 동일한 폴더에 복사한 후 파일명을 `main.html` 로 변경

cp index.html views/main.html
`index.html`파일을 `views` 폴더에 복사한 후 파일명을  `main.html` 로 변경

 
 
 

11. 지금까지 입력했던 CLI 명령어를 조회

`history`

history

 
 
 

---

 

참고
 

CLI