February 14, 2023

230214(화)

🎄 성장일지 3.1

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가? 성장하고 있는 것이 살아 있는 것이다. 생명의 유일한 증거는 성장이다!

🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성 ❄️ 정해진 템플릿에 맞춰서 (3.0) 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성 (3.1) 230102부터 시작되는 학습에 관한 내용 추가

🔑 오늘의 키워드

캐시 정책

브라우저가 어떻게 캐시를 관리할지 정하는 것
기본적으로 네트워크 상에서 무언가를 요청하고 응답받는 것은 느리고 큰 비용이 든다.
때문에, 모든 브라우저는 한번 응답받은 적이 있는 데이터에 대해 저장해두고 이후 동일 한 데이터 호출 시 요청하지 않고 캐시에서 가져온다.
이런 캐시의 수명(유지시간)을 결정하는 다양한 방법들이 존재한다.

HTTP

HyperText Transform Protocol; 즉, HTML을 교환하기 위한 규칙(표준)
웹 초창기에는 간단한 HTML만을 전달했지만, 이제는 사실상 바이트로 표현되는 모든 데이터(html, css, js, 이미지 등등)을 전달할 수 있다.
버전은 0.9 - 1.0 - 1.1 - 2.0 - 3.0 순서로 발전했으며, 사실상 1.1 버전이 제일 중요하다.(기본적인 스펙들이 많이 갖춰졌다.)
이후 2.0, 3.0은 성능 개선에 초점이 맞춰져있다.(물론 3.0은 TCP가 아닌 UDP 위에서 동작한다는 차별점이 존재한다.)

HTTPS

Hypertext Transfer Protocol Secure; 즉, HTTP + 강한 보안이라고 생각하면 된다.

❔ HTTP에서 HTTPS로 S가 붙는 과정(ssl 인증서 발급의 일련 과정)

인터넷 상에서 웹 브라우저(Client)와 웹 서버(Server)간에 데이터를 안전하게 주고 받기 위해서는 서로 암호화하여 통신을 해야한다.
SSL(Secure Socket Layer)은 웹 브라우저와 서버간 암호화 통신을 위한 프로토콜이며, SSL인증서는 SSL 기반하에서 브라우저와 서버가 암호화 통신을 가능하게 하는 인증서(제3의 신뢰기간이 인증한)를 의미한다.

SSL인증서의 3가지 기능

정보 유출 방지: 표준 암호화 기법을 통해 전송자의 정보를 안전하게 전송
기업 실체성 확인: 예를 들어, 쿠팡에 주문을 할 때 쿠팡이라는 기업의 실체성(사업자 등록과 같은)을 확인 후에 쿠팡에 SSL 인증서를 발급
위조사이트 방지: 사이트의 진위 여부를 판단

암호화

브라우저가 메시지를 암호화하여 서버에 전송하면, 서버는 암호화키(비밀키)로 암호화된 메시지를 해독(복호화)하는 과정이 이뤄진다.

대칭키 암호화: 메시지를 암호화할 때 사용하는 비밀키와 메시지를 복호화할 때 사용하는 비밀키가 같은 경우

이 때, 그렇다면 같은 비밀키를 어떻게 브라우저와 서버가 전달할지에 대한 문제가 발생한다. USB 등의 저장장치로 전달하는 방법, 비밀키 자체를 암호화하여 전달하는 방법 등이 있는데 이는 현실적으로 해결책이 아니다. 해서 등장한 것이 비대칭키 암호화 혹은 공개키 암호화라고 불리는 방식이다.

비대칭키 암호화(공개키 암호화): 송신자와 수신자가 각각 2개의 키를 생성하는데, 하나는 개인키이고 나머지 하나는 공개키
- 공개키로 암호화하면 개인키로 복호화가 가능하고, 개인키로 암호화하면 공개키로 복호화가 가능하다.
- 즉, 브라우저가 서버의 공개키로 암호화를 하여 메시지를 보내고, 서버는 서버의 개인키로 복호화를 진행한다.
- 반대로 서버는 브라우저의 공개키로 암호화, 브라우저는 브라우저의 개인키로 복호화하여 더 안전한게 데이터를 주고받을 수 있다.

서버가 서버의 공개키(SSL 인증서) 송신
브라우저가 서버의 공개키를 검증(인증기관에 검증을 요청)

------검증 완료 후-------
브라우저가 대칭키 생성
브라우저는 검증된 서버의 공개키로 대칭키를 암호화 및 송신
서버는 서버의 개인키로 대칭키를 복호화

------브라우저와 서버가 대칭키를 안전하게 교환-------
이제 브라우저는 대칭키로 메시지 암호화 및 전송
서버는 대칭키로 수신한 메시지를 복호화

WWW

World Wide Web의 약자. 흔히 web(웹)으로 부른다.
인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다.
인터넷과 비슷한 의미로 사용되지만, 정확히 하자면 웹은 인터넷의 여러 서비스들 중 하나에 해당한다..
하지만 현대에는 유사하게 사용해도 될 만큼 웹이 인터넷의 가장 큰 부분을 차지하고 있다.

URI

Uniform Resource Identifier의 약자. 즉, 통합된 자원 식별자(?) 정도의 느낌.
URI, URL(Locator), URN(Name)과 흔히 헷갈린다.
URI는 URL, URN을 포괄하는 더 넓은 개념이며 URL은 리소스가 있는 위치, URN은 리소스의 이름을 나타낸다.
그러나 사실상 URN만으로는 실제 리소스를 찾는 방법은 어렵고 보편화되지 않았다.(하나하나 맵핑을 해둬야하기에)
따라서 간단하게 URI = URL + URN = URL + 0 과 같은 느낌이라 생각해도 된다.

DOM

Document Object Model의 약자로 웹 페이지에 대한 인터페이스
단순하게 생각하면 HTML의 요소들이 객체 기반으로 표현되어 트리 형태로 저장되는 것이다.
이 때, DOM은 html이 아니고 또한 렌더 트리와는 다르다.
- html에 head, body가 없어도 브라우저는 알아서 교정하여 DOM에서는 head, body 객체가 생겨난다.
- 또한, JavaScript를 통해 동적으로 DOM이 수정될 때 DOM은 변하지만 실제 html이 변하지는 않는다.
- 렌더 트리는 DOM과 CSSOM이 합쳐져 형성된 것으로 만약 'display: none'이라는 속성이 있다면 DOM에는 있지만 렌더 트리에는 없다.

html

HyperText Markup Language의 약자로 어떤 페이지에서 다른 페이지로 이동할 수 있도록 하는 기능을 가진 문서를 의미한다.
사실상 http를 통해 클라이언트와 서버가 주고 받는 가장 기본적인 데이터이다.

Nodejs - https 모듈

node에서 제공하는 모듈로 간단한 서버를 만들 수도 있고 서버에 요청을 보낼 수도 있다.
서버에 데이터를 요청할 때는 아래와 같이 사용한다.
기본적으로 get method로 GET 요청을 보낼 수 있고, request method에서 첫 번째 파라미터인 options 객체에 요청 정보를 담아 GET 이외의 요청을 보낼 수도 있다.

https.get(url, (res) => {
  // ...
})

https.request(options, (res) => {
  // ...
})

cheerio

html 파싱을 위한 라이브러리 모듈
html 형태의 구조에서 원하는 태그, 속성(attribute)의 value들을 쉽게 가져올 수 있게 도와준다.

참고자료

📝 요약 및 하루 간단 회고

완벽하진 않지만, 특정 url의 정보들을 가져오고 해당 html 내에서 또다시 요청해야할 src들에 대한 정보도 가져오는 http 분석기 프로그램을 만들었다! 추가로 캐싱도 구현해보고 싶긴했는데... 일단 해야할 게 많으니 체크해두고 다음에 꼭 구현하려 한다. 현재는 간단하게 cache 클래스를 하나 만들고 배열 하나에 이전에 요청했던 url들을 담아서 체크하는 식으로 하면 될 것 같다. 또, 비동기로 일정 시간 뒤에 알아서 배열이 비워지도록 하여 캐시들이 지워지도록 하면 아주 어렵진 않게 구현될 것 같다!!! 오늘 하루도 정말 정말 열심히 수고했다!

오늘의 잘한 점

추가 제외하고 미션 구현 완성한 점
오늘도 정말 밥, 잠 빼고 프로그래밍만 한 나 자신
그 와중에 강의도 듣고 개념 정리도 하고 이렇게 일지도 적는 나 자신... 뿌듯하다.

오늘의 아쉬운 점

그나마 추가미션..?! 다음에 계획한대로 구현하자!

undefined