오늘의 핵심
- URL, IP, PORT의 개념
- emmet 문법
- VSC 단축키
- GitHub 명령어
▶ 웹의 도식화
'www.daum.net'을 주소창에 입력한다면?↓
(클라이언트 - 공유기 - 라우터를 거쳐)
DNS 서버가 'www.daum.net'에 매칭되는 IP 주소를 알아낸다.
(도메인 주소만으로는 어디로 가야할지 알 수 없다)
↓
서버에서 데이터를 받는다.
↓
웹 브라우저에 표시한다.
▶ URL / IP / PORT
(설명할 수 있을 만큼 개념을 확실히!)
URL(Uniform Resource Locator):
건물의 이름에 비유할 수 있음. 주소가 없으면 찾아갈 수 없다.
네크워크 상에서 자원이 어디 있는지를 알려주기 위한 규약. 쉽게 말해 웹 페이지를 찾기 위한 주소를 말한다. 웹 사이트 주소 뿐만 아니라 이미지, 비디오 등 컴퓨터 네트워크 상의 자원을 모두 나타낼 수 있다.
IP(Internet Protocol address):
건물의 주소에 비유할 수 있음. IP가 있어야 목적지에 도달한다.
컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신하기 위해 사용하는 특수한 번호이다.
PORT :
건물의 문에 비유할 수 있음. 도메인이 같아도 PORT에 따라 보여지는 페이지가 완전히 다르다.
80 → Hypertext Transfer Protocol (HTTP)
443 → Secure HTTP (HTTPS)
▶ 에밋(Emmet) 문법
일종의 코드 스니펫(재사용 가능한 소스코드나 텍스트의 작은 부분을 일컫는 프로그래밍 용어. 빠르게 코딩할 수 있다는 장점이 있다). 모든 개발 환경에서 공통으로 지원한다. 더 많은 문법은 이곳을 참고.
!
a
h1
h1{hello world}
h1+p
h*6
p#hello // p태그의 아이디는 hello
p.hello // p태그의 클래스는 hello
table>(tr>td*6)*4 // tr은4개 td는6개
ul>li.item$*5
ul>li*5
p#hello1.hello2 // 아이디와 클래스 함께
lorem*3 // 로렘 3문장
lorem3 // 로렘 3단어
.one // div id 작성
#one // div class 작성
alt + 상하키 // 줄 위치 바꿈
▶ VSC 단축키
모든 단축키 확인 : Ctrl + K + S
Settings : Ctrl + ,
Sidebar : Ctrl + B
Terminal : Ctrl + Shift + ` (백틱, 틸트, 템플릿리터럴)
Command palette : Ctrl + Shift + P
동시 수정 : Ctrl + Alt + 방향키(상, 하) / Alt + Click / Alt + Shift + Drag
문장 양끝으로 가기 : Home / End
코드 최상단·최하단 : Ctrl + Home / Ctrl + End
원하는 범위 복사 : Ctrl + Shift + 방향키(상, 하)
주석 : 문장 드래그 + Ctrl + /
들여쓰기 / 내어쓰기 : Ctrl + [, Ctrl + ] / tab, shift + tab
한 줄 삭제 : Shift + Del
파일 생성 : Ctrl + N
▶ GitHub 명령어
▷ 본래 GitHub의 기본 branch명은 master였으나 현재는 main으로 변경되었다. 2020년 6월, Black Lives Matter 운동의 일환으로 master-slave라는 인종차별적인 용어가 main-secondary라는 중립어로 대체된 결과라고 한다. (관련 기사)
▷ GitHub 페이지에서 키보드의 .을 누르면 dev 페이지로 넘어가 별도의 IDE 실행 없이도 코드 수정이 가능하다.
▷ ID, PW처럼 중요한 보안요소까지 GitHub에 업로드되지 않도록 주의해야 한다. .gitignore을 사용해 무시할 파일로 추가하면 이와 같은 상황을 막을 수 있다. (관련 블로그)
$ pull : GitHub 파일을 로컬에 내려받기. 개인 프로젝트에서는 필요 없는 과정.
(로컬에서 파일 수정)
$ git add . : 데스크톱에서 변경한 파일을 모두(.) 업로드한다. (비행기를 기다리는 승객의 대기상태)
$ git commit -m '메시지' : 변경 내용에 대한 '메시지'를 등록한다. (도착한 비행기에 승객 탑승)
$ git push : GitHub에 업로드. _(비행기 이륙)
--
상위 폴더로 가야할 때는 ' cd .. '를 입력하자._
생각 더하기
+ VS Code의 터미널, GitBash에서는 리눅스 명령어가 쓰인다. 그만큼 편리한 듯.
+ 브라우저 렌더링(리페인트, 리플로우)에 대해서도 알아놓자. 지금은 기본기를 탄탄히. 차후 학습에서!
+ 단축키, 에밋이 손에 익어야 빠르게 코딩하기가 좋다.
+ 처음부터 높은 곳을 바라보면 압박감이 있다. 차근차근 올라가자.
+ 코딩 테스트를 열심히 준비하자!
+ 프로젝트에 참여했다면 자신이 어떤 점을 기여했는지, 까지 서술하자.
+ Git도 많이 사용되지만 SourceTree도 많이 사용된다.
+ div를 사용하면 개발 속도가 빨라진다. 하지만 웹 접근성을 준수한다면 div 사용은 최소한으로 하자.
+ 나라는 인격체는 코드와 다르다. 내 코드가 비판을 받아도 상처받지 말자. (조언을 통해 발전하면 된다!)
+ GitHub 관리가 중요하다. 마크다운 언어 공부. 1일 1커밋. 잔디를 열심히 심자.
+ 공부하는 모습을 많은 사람들에게 보여주자. 동기 부여가 된다.
