220830 TIL

📖 기초 네트워크 지식

• IP(Internet Protocol) 란? - 주소

인터넷에서 사용하는 주소체계로 각각의 장치들을 식별하기 위한 주소이다.

우리가 흔히 사용하는 장치들은 대부분 IPv4 형식이며 3개의 숫자가 4개씩 나누어져있다.

그리고 IP가 저장되어 있는 곳이 DNS(Domain Name System)라고 한다.

 

• Domain과 *URL 이란? - 주소의 이름

컴퓨터로 네이버를 찾으려면 원래대로라면 우린 223.130.195.95 이런 숫자를 외워야 한다.

그런데 그것은 쉬운 일이 아니다.

이처럼 도메인은 장치를 식별하기 위한 주소로, IP를 사람이 쉽게 기억하기 위해

www.naver.com 처럼 한글이나 영어와 같은 문자로 만든 인터넷 주소이다.

* URL(Uniform Resource Locator)은: 도메인 + 경로(path)

 

• port 란? - 문

21, 22, 23, 80, 443... 형태로,

컴퓨터 안에 설치된 서버에 접속하는 주소이다.

 

 

 

 

📖 http 와 https 의 차이

• HTTP(HyperText Transfer Protocol)

서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜이다.
웹서핑을 할 때, 서버에서 자신의 브라우저로 데이터를 전송해주는 용도로 가장 많이 사용한다.
인터넷 초기에 가장 많이 사용되었던 프로토콜이다.

 

• HTTPS(HyperText Transfer Protocol Secure)

사용자가 사이트에 제공하는 정보를 암호화 하는 SSL 인증서를 사용함으로써, 데이터 전송 시, 누군가 중간에 가로채더라도 데이터의 정보가 암호화 되어, HTTP의 보안 문제를 해결한다. 안전한 사이트라고 인식이 되면, 사용자들이 증가하기 때문에 SEO(검색 엔진 최적화)의 면에서도 좋다.

 

HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하며
HTTP 서버가 80번 포트에서 요청을 기다리고 있으며, 클라이언트는 80번 포트로 요청을 보내게 된다.

 

 

 

 

📖 markup 과 markdown 은 무엇인가?

• markup

<h1>대제목</h1>
<ul>
  <li>목록1</li>
  <li>목록2</li>
</ul>

태그를 이용하여 문서나 데이터의 구조를 명기하는 언어 중 하나로, 우리가 알고있는 HTML이 여기에 속한다. 확장자는 파일명.html 이다.

 

 

• markdown

#  h1요소와 같은 대제목1
## h2요소와 같은 대제목2

* 목록
  - 하위목록
  - 하위목록

텍스트 기반의 마크업 언어로 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용해 간단한 구조의 문법을 사용해서 웹에서도 빠르게 컨텐츠를 작성할 수 있다. 대표적으로 우리가 알고있는 마크다운으로는 깃헙의 Repository에 대한 정보를 기록하는 README.md와 Notion이 있으며, 티스토리 또한 마크다운 작성을 지원하고 있다. 확장자는 파일명.md 이다.

 

 

 

 

📖 HTML 둘러보기

• HTML과 HTML Living Standard

'HTML 문법 등을 규정한 표준' 이라는 의미로 우리가 현재 사용하고 있는 HTML5가 HTML Living Standard 라고한다.

 

• meta 태그를 사용하는 이유는?

head 태그 안에 들어가는 메타 태그는 사이트에 대한 정보들이 들어간다.

메타 태그에 적힌 정보는 사람의 눈에 보이지 않지만, 구글과 네이버에서 사이트를 수집하는 크롤러와 같은 기계들이 읽는다.

그리고 메타 태그의 속성과 속성값을 통해 검색 엔진에 상위권으로 노출 된다.

 

 

• UTF-8(8-bit Unicode Transformation Format)

<meta charset=”UTF-8”>

유니코드 형식으로, 전 세계 모든 문자를 표현할 수 있게 한다.

 

 

• name="viewport" content="width=device-width, initial-scale=1.0"

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport 관련의 메타 태그를 작성해주지 않으면, 웹에서는 html 파일이 잘 보일 수 있겠으나, 스마트폰이나 태블릿에서는 컨텐츠의 비율이 제대로 보여지지 않을 수 잇다.

 

 

• name="description" content="멋쟁이사자처럼"

<meta name="description" content="멋쟁이사자처럼">

브라우저가 "멋쟁이사자처럼"를 검색 결과의 콘텐츠 요약에 활용할 가능성이 높아진다. 검색 엔진 활성화에 도움이 된다.

 

 

 

 

📖 웹 접근성

보다 나은 웹 접근성에 준하기 위해서 다양한 방법이 존재한다.

• 콘텐츠에 대체 텍스트 포함
• 의미 있는 링크 사용
• tab 키의 이동범위를 연관성 있게 움직일 수 있도록 태그 배치하기
• 사용자 경험 향상

 

 

 

 

📖 <section> 요소와 <article> 요소의 차이점

• section 요소

<section></section>

부분, 구역, 영역을 그룹별로 나누는 의미에서 section태그와 div 태그와 거의 똑같은 기능을 한다.

하지만 section 태그가 div태그보다 조금 더 시멘틱한 이유가 있다.
div는 다른 의미 없이 단순히 블럭 요소를 위해 감싼다면, section 태그는 문단의 흐름에 영향이 있고, 논리적으로 관계가 있는 요소나 문서들을 주제별로 그룹화한다.

 

 

• article 요소

<article></article>

문서 내에서 그룹화 하여 분리하는 역할로, 단독으로 사용이 가능하다.

공지사항, FAQ, 고객센터 같은 게시판 영역에 사용하면 좋다.

 

 

 

 

📖 GitHub 잔디 관리

• 항상 GitHub를 사용하다보면 나의 허접한 코드들이 신경쓰여서 자주 지우곤 했는데, 그러면 잔디가 사라진다.
• 아직 실력이 부족해도 좋으니 잔디는 꾸준히 심는게 좋다고 하셨다. 나중에 코드 리팩토링을 하면 된다.
• 회사에 나의 GitHub를 볼 땐, Pinned에서 잘 짜여진 코드와 같이 자신있는 부분만 공개로 해도 좋다.
• GitHub에 파일 업로드 하는 방법은 VSC에서 바로 커밋&푸쉬 하거나 터미널을 이용하는 방법 뿐인줄 알았었다.
  작업할 repository → Add file → Upload file → 업로드할 파일 드래그앤드롭