FE가 되고싶니? 나도✨

GUI 환경 : Microsoft Word, VS Code, Pycharm, 메모장 등 다양한 텍스트 에디터가 있다.
CLI 환경: Vim

Vim : ✅엄청나게 많은 기능과 단축키 ⛔모든걸 마우스 없이 키보드로 해결

$ mkdir ~/unix_practice
/* 유닉스 연습 디렉토리 생성 */
$ cd unix_practice
/* 유닉스 연습 디렉토리 이동 */
unix_practice $ vim
/* 아무 아규먼트 없이 실행하면 새로운 파일을 만들고, 파일 경로를 아규먼트로 주면 그 파일을 수정한다. */

여기서 글자를 작성하려고 키보드를 눌러봐도 글자는 작성되지 않는다. 지금은 입력모드가 아니기 때문에 텍스트를 입력할 수 없는데 Vim에는 네가지 모드가 있다.

사용자가 어떤 모드에 있는지에 따라 같은 키를 눌러도 다르게 해석된다. Vim을 처음 열면 일반모드로 실행되고, 다른 모드로 가려면 항상 일반모드를 거쳐야 한다.

텍스트 복사, 잘라내기

입력(insert)모드로 글자를 작성 해준 뒤, 다시 일반모드로 나와준다. 그리고 복사를 시작하고 싶은 부분으로 커서를 이동한다. 이제 비주얼 모드로 전환하면 되는데, 줄 단위로 복사를 하고 싶으면 대문자 V, 글자 단위로 복사하고 싶으면 소문자 v를 사용한다.

만약 대문자 V를 이용해 줄을 복사하고, 커서를 움직여서 복사하고 싶은 줄들을 선택한 뒤, y 키를 누르면 복사가 된다. 그리고 커서를 원하는 위치에 두고 p를 누르면 복사가 된다.

잘라내기는 잘라내고 싶은 부분에 커서를 두고 V나 v + 커서를 움직여 잘라내고 싶은만큼 선택하고, d를 누르면 잘라내기가 된다. 붙여넣기는 똑같이 p를 누르면 된다.

한 줄씩 잘라내거나 복사할때는 비주얼모드로 갈 필요 없이 커서를 원하는 위치에 두고 yy나 dd를 누르면 복사, 잘라내기가 가능하다. 여전히 붙여넣기는 p이다.

내용저장 및 Vim 종료

:(콜론)으로 명령모드에 들어왔다면 w와 q를 기억해주면 된다. w는 파일을 저장할 때 쓰이고, q는 Vim을 종료할 때 쓰인다.

만약 : w를 했는데 error가 난다면 이름을 만들어서 저장해주면 된다.

unix_practice $ ls
hello_world.txt reports

Vim을 유닉스 연습 디렉토리 안에서 실행했기 때문에 유닉스 연습 디렉토리에 파일이 저장됐다.

unix_practice $ vim hello_world.txt
/* 아무 아규먼트 없이 실행하면 새로운 파일을 만들고, 파일 경로를 아규먼트로 주면 그 파일을 수정한다. */

vim 후에 아규먼트를 주면 그 파일로 들어가 수정이 가능하고, 수정을 완료 한 뒤에는 :wq로 저장 후 Vim을 종료할 수 있다.

혹시 파일을 수정했는데 저장하지 않고 나가려고 한다면 이런식으로 에러가 뜨는데, 만약 저장을 안하고 Vim을 나가고 싶은 경우엔 !를 사용하면된다. :q! 그러면 변경사항이 저장되지 않고 Vim은 종료된다.

단축키 정리

• 텍스트 입력: 입력 모드(i) → 텍스트 입력
• 텍스트 한 줄 복사: 일반 모드 → 복사하고 싶은 줄에 커서 위치 → yy
• 텍스트 한 줄 잘라내기: 일반 모드 → 잘라내고 싶은 줄에 커서 위치 → dd
• 특정 영역 복사: 비주얼 모드(V는 줄 단위, v는 글자 단위) → 복사하고 싶은 영역 커서로 설정 → y
• 특정 영역 잘라내기: 비주얼 모드(V는 줄 단위, v는 글자 단위) → 잘라내고 싶은 영역 커서로 설정 → d
• 텍스트 붙여넣기: 일반 모드 → 붙여넣고 싶은 위치에 커서 위치 → p
• 파일 저장: 명령 모드(:) → w + enter
• 파일 저장 + vim 종료: 명령 모드(:) → wq + enter
• vim 종료 (내용 저장되지 않음): 명령 모드(:) → q! + enter

mkdir (make directory)

mkdir이라는 커맨드를 사용해서 아규먼트로 새로 만들 디렉토리 경로를 주면 디렉토리를 생성할 수 있다. 절대경로와 상대경로 모두 사용 가능하다.

$ mkdir ~/unix_practice
$ mkdir unix_practice

홈 디렉토리 안에 unix_practice라는 디렉토리를 만들라는 커맨드이다.

$ mkdir Jul Aug Sep

이어 붙여 작성해서 여러 파일을 만들 수도 있다.

touch (touch file)

파일에 손을 대서 파일의 마지막 접근 시간이나 수정 시간을 업데이트 하는 커맨드이지만 파일이 없으면 파일을 생성하기 때문에 파일을 생성할 때도 쓰이는 커맨드이다.

sep $ touch finances.txt performance.txt

spe 파일 안에 finances와 performance 텍스트 파일을 총 2개 생성했다는 의미이다. 만약 여기서 Jul이라는 파일로 이동해서 추가로 파일을 만들어준다고 하면

sep $ touch Jul/finances.txt Jul/performance.txt

..으로 부모디렉토리에 올라가서 Jul 디렉토리로 이동할수도 있지만 이렇게 작성하면 Jul 디렉토리에 바로 파일을 만들어 줄 수있다.

/bin

bin은 binary(바이너리)의 약자로, 컴퓨터가 실행할 수 있는 프로그램을 말한다. 커맨드를 입력하면 어떤 동작이 일어나는데 커맨드도 결국 어떤 프로그램입니다. 커맨드를 입력하면 커맨드에 해당하는 프로그램이 실행되는 것. 그리고 그 프로그램들의 일부는 바로 이 /bin 디렉토리 안에 있다.

$ ls -l /bin

/bin 디렉토리의 내용을 살펴보면, ls 같은 파일들이 보이는데, ls 커맨드를 입력하면 /bin 안에 있는 ls 프로그램이 실행되는 것이다.

/sbin

sbin은 bin과 비슷한데, 관리자 전용 프로그램들이 있다.

/etc

etc에는 컴퓨터 설정 파일들이 있는데, 각종 프로그램의 설정 파일, 관리자 권한 설정 파일 같은 것들이 있다.

/home 또는 /Users

/home(리눅스) 또는 /Users(맥 OS) 디렉토리에는 사용자들의 홈 디렉토리가 있다. 사용자의 홈 디렉토리는 사용자의 모든 파일을 저장해 놓는 곳이다.

/usr

usr은 사용자(user)에게 필요한 파일들을 저장하고 있다. /usr 안에도 각종 binary(프로그램 파일)를 저장하고 있는 bin 디렉토리가 있는데, /bin에는 컴퓨터가 시작하거나 자신을 수리하기 위해서 꼭 필요한 커맨드들이 있고, /usr/bin에는 컴퓨터가 필요하기보다는 사용자가 필요한 커맨드들이 있다. 그리고 /usr 안에는 local이라는 디렉토리가 있는데, 여기에는 사용자가 직접 설치한 프로그램과 관련된 파일들이 있다.

디렉토리 : 유닉스 운영체제에서는 폴더를 디렉토리라고 부른다. 디렉토리라는 용어에 익숙해지도록 하자.

유닉스 디렉토리 구조

• 최상위 파일 안에는 여러 디렉토리와 파일이 존재한다.
• 디렉토리 안에 디렉토리가 있을 때 안에있는 디렉토리를 하위 또는 자식 디렉토리라고 한다.
• 바깥에 있는 디렉토리를 상위 또는 부모 디렉토리라고 한다.

root 최상위 디렉토리

루트 디렉토리는 유닉스 파일 시스템의 최상위 디렉토리로, 모든 파일과 디렉토리의 시작점이다. /로 표시되며, 시스템의 모든 파일과 디렉토리가 이 안에 위치한다

HOME 디렉토리

홈 디렉토리는 각 사용자의 개인 파일과 설정을 저장하는 디렉토리이다. /home 아래에 각 사용자의 이름으로 된 디렉토리가 생성되며, 사용자의 개인 파일이 여기에 저장된다. 사용자의 개인 파일들은 사용자 홈 디렉토리 안에 있고 컴퓨터에 설치된 프로그램이나 컴퓨터에 일반적으로 필요한 파일들은 홈 디렉토리 바깥에 존재한다.

사용자의 홈 디렉토리

개인컴퓨터엔 사용자가 하나일 테니지만 공유 컴퓨터엔 사용자 계정이 여러개 있을 수도 있다. 사용자마다 홈 디렉토리가 주어진다. 홈 디렉토리에는 각종문서나 바탕화면 파일, 다운로드 파일 등이 있다. ~로 표시한다. 특정 사용자의 home 디렉토리 까지의 경로를 줄여서 쓴 것이다.

파일 경로

/usr/bin 를 하나씩 풀어서 해석해보자면 / =root(최상위 폴더)의, usr/ = use폴더의, bin/ = bin폴더 라는 뜻이다.

taeho라는 사용자로 로그인 되어 있다면 home 디렉토리는 /home/taeho 라고 쓸 수 있고, 줄여서 ~로 표기할 수 있다. 만약 태호가 아닌 다른 사용자의 홈 디렉토리라도 ~로 표기되지만 문자열로 표기한다면 /home/codeit 이라고 할 수 있다. 그리고 줄여서 쓴 디렉토리 뒤에도 붙여서 사용할 수 있다. 

/home/taeho = ~
~/Documents = /home/taeho/Documents
~/Document/Projects = /home/taeho/Documents/Projects

절대경로

• 디렉토리가 위치한 곳을 나타내는 가장 디테일하고 정확한 주소
• 현재 위치해 있는 곳과 상관없이 늘 같은 의미 가짐

상대경로

• 디렉토리가 위치한 곳을 현재 위치(워킹 디렉토리)를 기준으로 설명하는 것
• 현재 위치에 따라 동일한 표현도 다른 의미로 사용 가능
• 본인의 위치 : . 
• 부모의 위치(한 단계 위) : ..
• 홈 : ~

$ cd ./Documents/Projects/Javascript

사실 상대경로를 사용할 때 앞에 ./는 안써줘도 된다.
경로가 /(루트)로 시작하지 않으면 자동으로 상대 경로로 인식하기 때문이다.

$ cd Documents/Projects/Javascript

$ cd Documents/Projects/Javascript 
에 위치해 있는데 Projects 안에 HTML 디렉토리로 이동하고 싶다면

$ cd ../HTML
혹은
$ cd ..
$ cd HTML

이렇게 이동할 수 있다.

$ cd Documents/Projects/Javascript
에서 Document의 형제 디렉토리인 Pictures 디렉토리로 이동하고 싶다면

$ cd ../../../Pictures
이렇게 이동해도 되지만 이럴땐 절대경로를 적는게 좀 더 쉽고 직관적이다.
$ cd ~/Pictures
홈에서 Pictures로 이동한다는 뜻이다.

+여담

만약 파일 / 디렉토리 이름에 공백이 있으면 어떻게 해야할까?

$ cd hello world
$ ls hello world

hello world가 두개의 아규먼트로 인식되기 때문에 실행했을때 오류가 난다. 이럴 때 해결방법은

1. '작은 따옴표' 사용

2. "큰 따옴표" 사용

3. \ 역슬래시 사용

$ cd 'hello world'
$ cd "hello world"
$ cd hello\ world

***파일이나 디렉토리 이름에는 애초에 공백을 사용하지 않는게 바람직하다.

이유? 공백이 들어가게 되면 커맨드를 입력할 때 쉽게 실수할 수 있고, 커맨드가 제대로 작동하도록 따로 신경을 써줘야 하기 때문이다. 공백 대신 _ 같은 기호를 사용하자.

✔️ 터미널 이용 팁 (키보드)!

• ⬆️ : 이전에 작성한 커맨드 입력
• 커서 이동 :

• (1) Ctrl + A : 가장 앞 부분 커서 이동
• (2) Ctrl + E : 가장 뒷 부분 커서 이동
• (3) Alt + ⬅️ / ➡️ : 단어 단위로 커서 이동

• Ctrl + C : 실행하고 있는 작업취소 or 커맨드 입력중엔 취소 or 커맨드 실행되는 중에 누르면 작업취소
• clear 커맨드 : clera을 누른 뒤 엔터 누르면 화면 깨끗해진다. 이전에 작성했던 커맨드 히스토리는 남아있다.
• Tab(탭) : 지금 작성하고 있는 커맨드나 아규먼트를 자동완성 시켜준다.

🔊명령어

1. date : 현재 시간

2. cal (calendar 달력)

3. man (manual, 매뉴얼) : man 띄우고 검색해볼 커맨드를 아규먼트로 주면 된다.

• ⬆️, ⬇️ : 한 줄씩 위아래로
• space, f (forward) : 페이지 단위로 아래로 내린다.
•  b (backward) : 페이지 단위로 올라간다.
• q : 메뉴얼 페이지 나가기

• NAME : 커맨드 이름, 커맨드의 역할 설명
• SYNOPSIS : 사용할 수 있는 옵션과 아규먼트를 정리

• [대괄호]로 감싸져 있다는건 필수가 아니고 옵셔널하다는 의미이다. (해당 옵션과 아규먼트를 써도 되고, 안써도 된다.)
• 꼭 줘야 하는 아규먼트 들은 [대괄호]로 감싸져 있지 않다.
• -(대시)가 붙은건 옵션이고 아닌것들은 아규먼트이다.
• [[대괄호1] 대괄호2] : 대괄호1과 대괄호2 라는 아규먼트를 줘도 되는데 아규먼트를 하나만 입력하면 그건 대괄호1이 아닌 대괄호 2에 대한 아규먼트로 인식된다. 아규먼트를 줄 때 대괄호 1은 옵셔널하기 때문이다.

• DESCRIPTION : 일반적인 설명(윗줄) + 각 옵션에 대한 설명 (아랫줄) + 커맨드에 대한 자세한 설명, 유의사항 등
• SEE ALSO : 해당 커맨드와 비슷한 커맨드들
• HITSTORY, AUTHORS, BUGS : 참고할만한 정보들

4. pwd (Print Working Directory) : 현재 위치해 있는 디렉토리(working directory)를 출력(print)

5. cd (Change Directory) : 다른 디렉토리로 이동

$ cd : 홈 디렉토리로 이동
$ cd ~ : 홈 디렉토리로 이동

$ cd .. : 현재 위치의 상위 디렉토리로 이동

$ cd /Users/username/Documents : 특정 디렉토리로 이동

6. ls (List) : 디렉토리 안에 무엇이 있는지 알려준다. 

$ ls : 현재 디렉토리의 목록

$ ls -l : 자세한 정보를 추가하여 목록을 보여준다. Long format

$ ls -a : 숨겨진 파일을 포함해서 목록을 보여준다. ALL

$ ls -al : 숨겨진 파일 + 자세한 정보

$ ls /Users/username/Documents : 지정된 디렉토리의 목록을 보여준다.

시멘틱 태그(sementic tag)

• <div> 태그의 기능과 마찬가지로 블록속성(block element)이며 사이트의 구조(레이아웃, layout)을 설계하기 위한 태그.
• HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그.

시멘틱 태그(sementic tag)의 종류

• <header> : 머리글, 제목
• <nav> : navigation, 네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현.
• <aside>：좌측과 우측 사이드 위치의 공간을 의미, 본문 외의 부수적인 내용을 주로 표현.
• <section> : 주제별, 카테고리 별로 구분하는 용도로 태그를 사용. 같은 테마를 가진 여러개의 콘텐츠를 그룹화한다.
• <article> : 기사, 블로그 등 텍스트 위주의 페이지를 구성할 때 주로 사용
• <footer> : 바닥글, 꼬리말, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그
• <address> : 콘텐츠 작성자나 사이트 소유자의 정보 등을 부가적으로 담는 태그
• ＜main> : 문서 <body>의 중심 주제, 주요 내용 혹은 응용 프로그램의 중심 기능과 직접 관련되거나 확장되는 콘텐츠를 나타낸다.
• <figure> : 이미지, 다이어그램, 사진 등 독립적인 콘텐츠 정의 시 사용
• <hgroup> 제목과 관련된 부제목을 묶는 태그
• <details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타낸다.
• <figcaption> <figure> 요소의 설명 캔션(caption) 정의
• <mark> 현재 맥락에 관련이 깊거나 중요한 부분 강조
• <time> 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현
• <summary> details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힌다.

시멘틱 태그(sementic tag)의 장점

⑴ SEO 최적화에 유리(Search Engine Optimization) : 검색엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색결과의 노출에 유리할 수 있게 해준다.

⑵ 웹 접근성에 효율적 : 스크린 리더기(시각장애인을 위한 웹서핑 프로그램)와 같은 환경에서는 웹 접근성과 사용성을 향상 시켜준다.

⑶ 유지보수의 용이성 : 많은 div 사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능, 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이하다.

"Cascading"이라는 용어는 여러 분야에서 사용되지만, 일반적으로 "연속적으로 일어나는" 또는 "연쇄적인" 의미이다.

알아볼 cascading은 스타일 시트 언어, CSS(Cascading Style Sheet)에 들어가는 cascading이다.

여기서 Cascading이란 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 것을 의미한다. 즉, 웹 문서의 요소에 스타일을 적용할 때 우선순위를 두고 적용된다는 의미이다.

그 우선순위엔 결정하는데엔 판단기준이 있다.

1. 중요도
2. 명시도
3. 코드의 순서
4. 상속

중요도 importance

중요도는 스타일이 선언된 사람(위치)에 따라서 우선순위를 메기는 것이다. 작성자(author), 사용자(user), 사용자 도구(user agent, 브라우저가 대표적)가 작성한 세 종류로 나뉘는데

1. 작성자(author) 스타일 시트
2. 사용자(user) 스타일 시트
3. 사용자도구(user agent) 스타일 시트

순서로 작성자 스타일시트가 제일 우선순위가 높다.

1. !important : 최우선 순위로 적용되는 스타일, 명시도와 무관하지만, 명시도에 직접 영향을 미치고 다른 선언보다 우선한다.
2. 인라인 스타일 : 특정 태그 안에 'style' 속성을 이용해 부여된 스타일, 
   인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기 때문에 가장 높은 명시도를 갖는다.

**!important 는 가능한 사용하지 말자. (스타일 디버깅을 어렵게 한다)
**인라인 스타일 정의도 가능한 사용하지 말자. (스타일 디버깅을 어렵게 한다)

명시도 specificity

만약 중요도가 같을 경우 스타일은 적용범위의 영향을 받게 된다. 스타일의 적용범위가 좁을수록 우선순위는 높다.

1. 인라인 스타일 : HTML요소의 style 속성을 통해 직접 지정된 스타일. 가장 높은 명시도를 갖는다.
2. ID 선택자: #id 형식으로 정의된 선택자는 문서 내에서 한 번만 사용할 수 있으므로 비교적 좁은 범위를 가지게 된다.
3. 클래스 선택자, 속성 선택자, 가상(pseudo)클래스 선택자 : .class 형식으로 정의된 선택자는 ID 선택자보다 낮은 명시도를 갖는다.
4. 태그 선택자, 가상((psuedo)) 요소: div, p 등과 같은 태그 선택자로 문서 내 모든 태그를 가리키기 때문에 범위가 제일 넓고, 가장 낮은 명시도를 갖는다.

명시도는 점수화해서 계산을 할 수 있는데, 각 선택자 유형에 따라 점수로 계산된다.

인라인 스타일: 1,0,0,0
ID 선택자: 0,1,0,0
클래스 선택자: 0,0,1,0
태그 선택자: 0,0,0,1

명시도는 id 개수, class 개수, tag 개수로 결정되며, (id 개수, class 개수, tag 개수) 형태로 표시되는데, 앞에 있는 숫자가 클수록 명시도 점수가 높고 cascading 우선순위가 높다.

코드의 순서

같은 명시도를 가진 여러 스타일 규칙이 있을 경우, 나중에 선언된 스타일이 우선 적용된다. 즉, CSS 파일 내에서 아래쪽에 위치한 스타일이 위쪽에 위치한 스타일보다 우선적으로 적용된다.

상속

상속은 부모 요소의 특정 CSS 속성이 자식 요소에 전달되는 것이다. 조상 태그들에서 스타일이 모두 계산된 상태에서 우선순위를 따지는데, 가까운 조상에게 물려받은 속성일수록 우선순위가 높다. 

부모 요소에 설정된 글꼴이나 텍스트 색상은 자식 요소에 자동으로 적용되는데 모든 CSS 속성이 상속되는 것은 아니고, 일부 속성만 상속된다.

상속되는 속성

• 폰트 관련 속성: font-family, font-size, font-style, font-weight, line-height
• 텍스트 관련 속성: color, text-align, text-indent, text-transform
• 리스트 스타일: list-style, list-style-type, list-style-position

상속되지 않는 속성

• margin, padding, border, width, height 등

커맨드에서는 아규먼트를 줄 수도 있고 옵션을 줄 수도 있다.

Argument(인자) : 어느 대상에 대해 커맨드를 실행할지 정해주는 것

Option(옵션) : 커맨드가 실행되는 방식을 바꾸는 것. -(대시)와 특정 알파벳을 입력하면 된고 동시에 여러 옵션을 사용할 땐 붙여서 사용하면 된다.

cal -j 2024

cal :커맨드
-j :옵션
2024 :아규먼트

cal 커맨드를 j(날짜 대신 1월1일을 기준으로 몇번째 날인지 보여주는 옵션)라는 옵션을 써서 2024년도에 대해 실행한 것이다.

• 옵션은 커맨드를 어떻게 실행할지 정하는 것 
• 아규먼트는 커맨드의 대상 이라고 생각하면 쉽다.

터미널 : 인풋을 받고 아웃풋을 출력해주는 프로그램을 뜻한다. 보통생각하는 커맨드를 입력하는 '검은 화면'을 터미널이라고 할 수 있다.

shell : 커맨드를 해석해 주는 프로그램. 컴퓨터는 date같은 단어를 이해하지 못한다. 그래서 이런 커맨드를 컴퓨터가 이해할 수 있는 형태로 바꿔줘야 하는데 이것이 shell의 역할이다. shell이 date같은 커맨드를 컴퓨터가 이해할 수 있는 형태로 바꿔 전달해 주면,  컴퓨터가 실제로 커맨드를 '실행'하고 결과를 되돌려 주는 것이다.

shell은 여러 종류가 있고 종류에 따라 커맨드를 작성하는 방식이나 제공하는 인터페이스가 조금은 다를 수 있지만 대부분의 경우 아주 비슷하거나 똑같이 작동하기 때문에 크게 상관은 없다.

bash : shell의 한 종류로  Bourne agin shell이라고 부른다. 가장 보편적이고 많은 유닉스 운영 체제에서 기본 shell로 사용된다.

아무튼, shell과 터미널은 엄밀히 말하면 서로 다르지만, 커맨드를 입력하는 '검은 화면'을 그냥 shell이라고 부르는 경우도 많다.