[Day2] CS상식 / Git, GitHub 기초 / VSC 기본

💀TIL

• CS 상식 : URL / IP / PORT
• VSC 기본 : Cheat Sheet, Emmet
• Git 기초 : git pull, git add, git commit -m '', git push

---

🕘 CS 상식 - URL/IP/PORT

네이버에 접속할 때 생기는 일

내 화면에 네이버가 켜질 때까지

🌏 내 화면에 네이버가 켜질 때까지 - 브라우저 렌더링 과정

1. 주소창에 `www.naver.com`  입력한다.
2. DNS에서 naver.com 의 IP 주소를 가져와 서버에 전달한다.
3. 웹 브라우저에 표시된다.

 

1) URL : 웹 페이지를 찾기 위한 이름
2) IP : 웹 페이지의 주소 ex)105.209.222.141.
구별이 어렵기에 DNS를 통해 도메인 주소로 변환된다.

 

	DNS: 도메인 네임 서버 
    - 사람이 읽을 수 있는 도메인 이름을 머신이 읽을 수 있는 IP주소로 변환

 

3) PORT: IP 주소의 문
TCP/UDP의 포트 목록

TCP/UDP의 포트 목록 - 위키백과, 우리 모두의 백과사전

 

 

잘 알려진 포트 번호
80: HTTP 웹 페이지 전송 포트
443: HTTPS 보안 소켓 레이어(SSL) HTTP

---

🕚 VSC 기본

1) Emmet : 빠른 코딩을 위해 사용하는 플러그인

 

Emmet Cheat-Sheet

사용법 정리

h1{내용} :h1 태그와 내용 생성
<h1>내용</h1>

h1+p : h1태그와 p태그를 동시에 생성
<h1></h1>
<p></p>

h$*6 : h1~h6 태그를 순서대로 생성
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

p.one : 'one'이라는 class를 가진 p태그 생성
<p class="one"></p>

p#two : 'two'라는 id를 가진 p태그 생성
<p id="two"></p>

p.one#two : 'one''two' class와 id를 가진 p태그 생성
<p class="one" id="two"></p>

.one : 'one' 이라는 클래스를 가진 div 생성
<div class="one"></div>

lorem: 의미없는 글 생성
lorem*3 : lorem 3개 생성
lorem3 : 단어 3개로만 이뤄진 lorem 생성
->Lorem, ipsum dolor.

ul>li*3 : 순서가 없는 list, item이 3개
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

table>(tr>td*2)*3 : table data 2개를 가진 3개의 table row 생성

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

3) 단축키

 

• 다중 항목 선택 : Ctrl + Alt + 방향키↑ ↓ / Alt + Click
• 들여쓰기 : Ctrl + ]
• 내어쓰기 : Ctrl + [
• 코드 이동 : Alt + 방향키↑ ↓

 

---

🕜 Git, GitHub 기본

Git : 분산 버전 관리 시스템
GitHub : Git 기반의 웹 서비스

 

Git 기반의 웹 서비스는 GitHub 외에도 GitLab 등 다양하다.

 

1) 기초 Git 문법

 git pull 
 git add .
 git commit -m 'message'
 git push
 
 받아오고
 추가하고
 올리고
 보내기

 

1.1) add와 commit을 나눠놓은 이유

git commit -am 'hello world' 가능은 하지만 권장하지 않는다.
commit 단위가 '하나의 액션 결과물'
의미 없는 commit 단위는 좋지 않다.

 

 

1.2) git branch -M main 쓰는 이유

branch를 main으로 통일 시켜주는 작업이다.
Git은 master, GitHub는 main branch를 쓰기에
branch를 통일 시켜주기 위해 사용된다.

 

---

🙉 Review

• 1일 1 커밋하기
• 이력서 제출 시에는 README에 GitHub주소와 배포 url 첨부할 것