✏️기록하는 즐거움
article thumbnail

 

🏷️ 오늘 읽은 범위: Ep.16 ~ Ep.21

 


 

💡 책에서 기억하고 싶은 내용을 써보세요.


EP.16

[🏷️96p-100p]

인터넷 익스플로러

  • v3.0 - CSS 최초 지원
  • v5.0 - Ajax 최초 지원
  • 최신 기술을 가장 빨리 지원했었다.

 

HTML을 이해하는 웹

  • HTML이란, 웹 사이트에 들어갈 텍스트, 그림 등을 표현하는 규약이다.
  • HTML 표준안에 따라 태그를 사용해서 웹 브라우저를 개발하게 되는데, 이렇게 개발한 웹 브라우저의 핵심 프로그램을 브라우저 엔진 또는 렌더링 엔진이라고 한다.
  • 엔진의 성능이 웹 브라우저의 성능을 결정한다. 즉, 엔진이 최신 표준안, 최신 기술을 지원한다면 최신 웹 브라우저가 되는 것과 같다.

 

인터넷 익스플로러의 서비스 종료

  • 시장 점유율이 95%(2003년)인 것에 비해 새 버전이 나오기까지의 시간이 길어지고, 그 사이 수 많은 보안 취약점이 발견되면서 다른 브라우저들에 비해 뒤쳐지고 말았다.
  • 인터넷 익스플로러 지원이 중단되고, 크롬 브라우저의 엔진인 블링크를 사용한 마이크로소프트 엣지라는 새로운 웹 브라우저를 발표했다.

EP.17

[🏷️101p-106p]

내가 만든 쿠키~🍪

쿠키란, 어떤 웹 사이트에 방문했을 때 브라우저를 통해 방문자의 컴퓨터에 보관되는 기록물이다.

 

HTTP에서 우리와 서버는 연결되어 있지 않다.(stateless)

서버는 주소에 해당하는 데이터를 우리에게 보내 주고, 데이터를 다 보내면 연결 상태를 끊고 우리의 정보를 잊어버린다.

웹 사이트에 로그인하고 웹 브라우저를 끈 다음, 다시 웹 사이트를 방문하면 로그인이 유지되는 경우가 있다.
마치 서버가 우리를 기억하는 것처럼!

 

이 때 쿠키는 서버에서 발행해주는 영수증의 역할을 한다.

접속한 사용자의 정보와 사용자를 신뢰한다는 내용의 영수증이 컴퓨터 어딘가에 저장되고, 웹 사이트에 다시 접속했을 때 이 영수증이 서버에 보내지게 되면서 서버의 기억을 되살린다.

 

쿠키 사용 규칙

  1. 도메인 1개에만 한정한다.
  2. ex. 페이스북에서 생성된 쿠키는 넷플릭스에 보낼 수 없다.
  3. 쿠키는 자동으로 보낸다.
  4. 쿠키는 컴퓨터에 자동으로 저장된다.

 

도메인과 상관없는 쿠키 - 쿠키를 공유하자

예를 들어, 네이버 블로그에는 페이스북 관련 링크나 버튼이 없기 때문에 페이스북이 쿠키를 얻을 순 없다.

하지만 페이스북의 좋아요 버튼을 누르게 된다면??!

페이스북과 관련이 있는 버튼을 누르게 되면서 페이스북은 해당 블로그에서 쿠키를 얻을 수 있다.

EP.18

[🏷️111p-114p]

프런트엔드, 백엔드는 웹 개발에만 한정되어 있지 않다.

포지션 장점 단점
프론트엔드 결과물을 바로 볼 수 있다. - 기술 변화 속도가 빨라서 적응하기 힘들다.
- 기술 선택지가 한정적이다. (HTML, CSS, JavaScript 등)
백엔드 - 기술 변화가 크지 않아 개발이 안정적이다.
- 기술 선택지가 다양하다. (자바, 루비, 장고, 파이썬, 프라스크 등등)
사용자와 거리가 멀어서 흥미가 떨어질 수 있다.

EP.19

[🏷️115p-118p]

서버는 그냥 컴퓨터다

  • 외부적 - 항상 인터넷에 연결되어 있는 저장소와 메모리 크기가 매우 큰 컴퓨터
  • 내부적 - 사용자가 요청했을 때 네트워크에 연결된 컴퓨터가 실행하는 코드. 즉, 사용자가 웹 사이트 주소를 입력하기를 기다렸다가 해당 주소가 입력되면 그에 맞는 웹 페이지를 꺼내서 보여주는 코드이다.

EP.20

[🏷️119p-122p]

풀스택은 프런트엔드, 백엔드, 데브옵스다.

프런트엔드, 백엔드 개발을 다 마친 후, 올릴 서버를 고르고, 설정하고 서버에 소프트웨어도 설치하고, 데이터베이스 설정을 하는 등 이 모든 것을 데브옵스라 하고 프런트엔드, 백엔드, 데브옵스를 다 할 수 있는 사람을 풀스택 개발자라고 한다.

 

EP.21

[🏷️123p-127p]

있기는 하지만 우리 곁에는 없는 서버, 서버리스

서버리스란 서버 없음이 아니라 우리가 직접 관리하지 않는 서버를 의미한다.

 

서버리스가 없던 시절에는 실제 회사마다 서버를 직접 구매해서 전원을 꽂고 수동으로 관리했다. 아마존이 등장하고 EC2라는 서비스를 선보이면서 서버를 탄력적으로(elastic) 운영할 수 있게 되었다.

 

최신 서버를 각종 사고 없이 안전하게 제공, 관리해주는 서비스이지만 하드웨어를 제공, 관리해 줄 뿐이고 서버의 소프트웨어 관리는 여전히 직접 해야한다.

 

서버리스, 서버 제공부터 서버의 소프트웨어 관리 그리고 더!?

  1. 서버를 위한 소프트웨어(백엔드 코드)를 작은 함수 단위로 쪼개서 서비스(서버)에 올린다.
  2. 이 함수들은 항상 깨어있지 않고, 함수가 필요할 때 서버에 요청을 해서 요청한 작업을 수행한다.
  3. 서비스의 서버는 항상 응답할 준비를 하고 있는건 아니지만 모든 응답에 반응할 수 있다.

이처럼 무언가를 수행할때만 서비스에 돈을 지불하면 된다.

 

서버리스의 단점

  1. 콜드 스타트 (cold start)
    • 함수는 매번 깨어있지 않기 때문에 24시간 온라인을 제공하는 서버보다 응답 시간이 조금 더 필요하다. 따라서 때로는 함수 일부를 잠들지 않게도 한다.
  2. 서버 제공자에게 지나치게 의존한다.
    • 함수의 형태가 서비스에 딱 맞아떨어지는 형태라서 현재 서버리스 서비스에서 다른 회사의 서버리스 서비스로 옮기기가 쉽지 않다.

 

서버리스는 언제?

사이드 프로젝트 or 프로토타입을 최대한 빠르게 출시하고 싶을 때

서버를 준비하는 설정 작업이 적은 편이기 때문에 서버를 빠르고 쉽게 구축하고 코드에 집중해서 서비스를 출시할 수 있게 된다. 서버 관리, 설정에서 시간을 아끼고 싶다면 서버리스 프레임워크 사이트를 이용해보는 것도 좋다.

ex) serverless.com, AWS 람다, 구글 클라우드 펑션(Google Cloud Functions), 아펙스(Apex), 테라폼(Terraform)

🤔 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요.


내가 만든 쿠키가 아니라 서버가 만든 쿠키였다니..!!!

쿠키를 사용한다는 것이 항상 어렵게만 느껴졌는데 서버에서 발행해주는 영수증이라고 생각하니까 이해하기 쉬웠다.

 

책에 개념을 이해하기 쉽게 설명을 해줘서 책을 읽을 때마다 개발 호기심을 더 자극하는 것 같다.

커뮤니티에서 어떤 말을 하는 것인지 이해할 수 없었던 적이 많았는데 이제는 몇가지 정도 아는체 할 수 있게 되었다!

 

얼른 내가 만들고 싶은 웹에 읽은 개념들을 적용해보고 싶다✨

 

🔍 궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.


Ajax (Asynchronous JavaScript and XML)
웹 사이트에서 내용을 업데이트 할 때 새로 고침 과정 없이 업데이트한 내용을 볼 수 있게 해주는 기술.
브라우저 엔진과 렌더링 엔진

브라우저 엔진은 주된 모든 웹 브라우저의 핵심이 되는 소프트웨어 구성 요소이다. 렌더링 엔진 또는 레이아웃 엔진이란 내용 정보인 HTML, XML과 서식정보인 CSS, XML 등을 읽어들여 사람이 읽을 수 있는 문서로 표시하는, 웹 브라우저의 핵심기능을 담당하는 소프트웨어이다. '코드'를 호출시에만 읽고 해석을 한다는 점에서 인터프리터라고도 볼 수 있다.

보통 브라우저 엔진은 렌더링 엔진을 의미하지만 최근 검색 엔진, 자바스크립트 엔진 등 여러 엔진이 추가로 사용되어 파악할 필요가 있다.

그 외에 자바스크립트에도 에크마스크립트(ECMAScript)라는 표준안이 있고, 이를 웹 브라우저에서 실행할 수 있게 해주는 프로그램이 존재한다.
크롬 브라우저의 자바스크립트 엔진은 v8이고, v8 엔진은 Node.js Dino와 같이 자바스크립트를 해석해야하는 곳에도 쓰인다.

ex)

브라우저 이름 엔진 이름
파이어폭스 게코(gecko)
사파리 웹킷(webkit)
크롬 블링크(blink, 웹킷의 다른 버전)

 

HTTP (HyperText Transfer Protocol)
인터넷에서 사용자와 서버가 정보를 주고받기 위한 프로토콜(규칙).
데브옵스 (DevOps, development + operaions)
소프트웨어 개발자와 정보 기술 전문가 사이에 소통, 협업, 통합을 강조하는 개발 환경이나 문화
EC2
아마존 엘라스틱 컴퓨트 클라우드(Amazon Elastic Compute Cloud)로, 서버를 아마존이 대신 운영해 준다는 목적으로 나온 서비스이다.

 

👣 또 다른 북틸 읽으러 가기

1. @MWT

각 에피소드마다 생각을 작성해주신 점이 인상깊었다. 에피소드를 다시 상기시키기에 좋았다.

 

[IT 5분 잡학사전]마당02. 코딩별 안내서-웹 기술 편 (에피소드 11~15)

http://www.yes24.com/Product/Goods/113463430 IT 5분 잡학사전 - YES24 www.yes24.com 오늘 TIL 3줄 요약 라이브러리, 프레임워크, API, 도메인의 개념 어떤 기술이던, 기본이 바탕이 되어야 앞으로의 변화에 유연하게

nwyteach.tistory.com

2. @oulico

책의 내용을 한번 더 정리하면서 책의 내용만이 아닌 새로운 시각으로도 책을 볼 수 있다는 것을 알았다.

지식을 얻기 위해 책을 읽고 있었는데 에피소드가 넘어갈 때마다 이 에피소드에서 생각해볼 수 있는 것은 무엇인지 고민해봐야 겠다!

 

IT 5분 잡학사전 e11~e15

2023.01.17오늘 읽은 범위: 에피소드 11 - 에피소드 15어느 직종이든 어느 학문이든 공통적이겠지만, 협업에 있어서 용어의 정립이 그 무엇보다 중요하다는 생각이 든다. 그런 의미에서 항상 헷갈렸

velog.io

 

profile

✏️기록하는 즐거움

@nor_coding

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!