📌오늘 TIL 3줄 요약

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

• 프런트엔드 + 백엔드 + 데브옵스 = 풀스택

• 서버리스는 콜드 스타트와 지나친 의존성이 단점이지만 효율성이 매우 높아서 서버 관리, 설정에서 시간을 아끼고 싶다면 서버리스가 좋다.

📆TIL (Today I Learned) 날짜

2023.10.11

📖오늘 읽은 범위

ep16. 인터넷 익스플로러가 사라진 이유와 브라우저 엔진

ep17. 아, 쿠키가 먹는 게 아니라고요?

ep18. 프런트엔드, 백엔드?

ep19. 서버가 뭔지 아직도 모른다고?

ep20. 슈퍼 개발자만 할 수 있다, 풀스택?

ep21. 서버리스는 서버가 없다는 뜻?

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

(ep16)

• 인터넷 익스플로러가 사랑받았던 이유

: 최신 기술을 가장 빨리 지원해주는 힙한 프로그램이었다.

(CSS를 최초로 적용한 웹 브라우저이고 에이젝스 기술을 최초로 지원하기도 했다.)

Ajax(Asynchronous JavaScript and XML) ⇒ 웹 사이트에서 어떤 내용을 업데이트하면

새로고침으로 확인해야 하는데 그 과정 없이 업데이트한 내용을 볼 수 있게 해주는 기술이다.

• 브라우저 엔진

: 브라우저 엔진 ⇒ HCJ 표준안을 웹 브라우저에서 실행할 수 있게 해주는 프로그램(=렌더링 엔진)

(브라우저는 엔진이라는 것을 장착해서 HTML, CSS, JS를 이해할 수 있는 것)

브라우저 엔진의 성능이 웹 브라우저의 성능을 결정한다.

(엔진이 최신 표준안, 최신 기술을 지원한다면 최신 웹 브라우저가 되는 것)

• 인터넷 익스플로러가 사라진 이유

: 당시 시장 점유율이 95%였던 익스플로러, 점유율만 믿고 게으름을 피웠다.

새 버전이 나오기까지 오래 걸렸는데 보안 문제도 존재했다.

(5년 2개월만에 새 버전이 출시됐는데,

5년 2개월이란 기간동안 수많은 보안 취약점이 발견됐지만 보완하지 않았다.)

그 동안 다른 웹 브라우저는 발전했고 결국 익스플로러 지원은 중단되었다.

(ep17)

• HTTP 쿠키란?

: 어떤 웹 사이트에 방문했을 때 브라우저를 통해 여러분의 컴퓨터에 보관하는 기록물이다.

쿠키는 사용자 컴퓨터 어딘가에 저장되어 있다가 사이트에 재접속하면 그 쿠키를 서버로 전송해서

서버의 기억을 되살리는 역할을 한다.(사용자가 누구인지)

• HTTP 란?

: HTTP(HyperText Transfer Protocol) ⇒ 인터넷에서 정보를 주고받기 위한 프로토콜

(인터넷에서 사용자와 서버가 정보를 주고받기 위한 일종의 규칙)

HTTP에서는 사용자와 서버가 항상 연결되어 있지 않다.(stateless)

(브라우저에 주소를 치면 서버는 그 주소에 해당하는 데이터(HTML, CSS 즉, 우리가 보는 웹 사이트의 화면)를

사용자에게 보내 주고 데이터를 다 보내면 사용자와의 연결 상태를 끊어서 사용자가 누군지 모른다.)

서버는 가끔 사용자가 누군지 기억해야 할 때가 있다. 그래서 쿠키가 필요.

• 쿠키의 규칙

: 1) 쿠키는 도메인 1개에만 한정한다. /ex.페이스북 쿠키를 넷플릭스로 보낼 수 없다.

+ 도메인과 상관없는 쿠키도 있다.

(ex.블로그에 페이스북과 관련된 버튼이나 링크가 없으면 페이스북이 쿠키를 얻을 수 없지만,

페이스북의 좋아요 버튼이 추가된다면 페이스북은 블로그에서 쿠키를 얻을 수 있다.)

2) 쿠키는 자동으로 보낸다. /쿠키는 사용자가 원하든 원하지 않든 사용자 컴퓨터와 서버를 왔다 갔다 할 수 있다.

3) 쿠키는 컴퓨터에 자동으로 저장된다. /웹 사이트에 접속하면 그 순간 쏟아져 들어오는 것을 볼 수 있다.

(ep18)

• 프런트엔드, 백엔드 란?

: frontend(프런트엔드) ⇒ 모든 프로그램의 가장 앞(사용자가 사용하는 화면)

backend(백엔드) ⇒ 모든 프로그램의 가장 뒤(데이터베이스나 라우터 같은 것)

• 프런트엔드

: 힘든 점 ⇒ 기술의 변화 속도가 매우 빠르기 때문에 공부해야 할 내용이 너무너무 많다.

(어느정도 꾸준히 공부를 했음에도 마스터했다는 기분이 들지 않아서 힘들다.)

하지만 그만큼 관련 기술이 활발히 논의되는 곳이니 기회도 많다.

장점 ⇒ 작업한 것을 바로 볼 수 있다.

(HCJ로 웹 사이트를 만들면 결과물이 바로 보이니까 즐겁게 일할 수 있다.)

사용자와 거리가 가깝다.

(누군가에게 웹 사이트가 정말 멋지다는 말을 듣는다면 엄청 좋을 것이다.)

• 백엔드

: 장점 ⇒ 개발 환경이 프런트엔드에 비해 안정적이다.(기술이 빠르게 변하지 않는다.)

기술 선택지가 다양하다.(한편으론 프런트엔드의 단점이기도 하다.)

(프런트엔드는 HCJ를 무조건 배워야한다. 다른 선택지가 없다.

백엔드는 선택할 수 있는 옵션이 많다. 자바, 파이썬, 장고, 루비 등)

아쉬운 점 ⇒ 사용자와 거리가 멀다는 점

(누군가 웹 사이트의 DB 구조가 정말 멋지다! 엄청난 캐싱인데? 등

이러한 칭찬을 하기에는 어려울 것이다.)

(ep19)

• 서버

: 1) 서버는 그냥 컴퓨터다.

(server 번역은 봉사자, 서비스를 제공하는 사람)

서비스를 해주는 역할을 한다면 나의 노트북도 서버가 될 수 있다.

2) 서버의 외부 모습

모니터가 없거나 1개만 있고 항상 인터넷에 연결되어 있다.

저장소와 메모리 크기가 모두 어마어마하다.

3) 서버의 내부 모습

사용자가 요청했을 때 네트워크에 연결된 컴퓨터가 실행하는 코드가 서버이다.

(ep20)

• 풀스택(full stack)

: 프런트엔드 + 백엔드 + 데브옵스

데브옵스 ⇒ 소프트웨어의 개발과 운영의 합성어이다.

(서버를 고르고, 설정하고, 서버에 소프트웨어도 설치하고, DB 설정도하고, 보안도 신경 쓰고 ...)

프런트엔드, 백엔드, 데브옵스를 모두 다 할 수 있는 사람이 풀스택 개발자!(자세히 알아야 한다.)

(ep21)

• 서버리스

: 영어 번역으로는 서버 없음 이지만 진짜로 서버가 없다는 뜻이 아니라

직접 관리하지 않는 서버라는 것을 의미한다.

• 서버리스가 생기기 전

: 서버를 직접 구매해서 전원을 꽂고 인터넷을 연결해서 관리했다.(정전이나 문제가 생긴다면 큰일)

아마존에서 제공한 서비스 EC2(Amazon Elastic Compute Cloud)

(⇒ 서버를 아마존이 대신 운영해준다는 목적으로 나온 서비스)같은 서비스들이 생겨났지만

이런 서비스들은 하드웨어를 제공, 관리해 줄 뿐이고 서버의 소프트웨어 관리는 여전히 해야했다.

• 서버리스 등장

: 서버리스는 등록한 함수가 실행된 만큼만 돈을 내면 된다.

(서버를 위한 소프트웨어(백엔드 코드)를 작은 함수 단위로 나누고 그 함수를 서버 서비스에 올린다.

그 함수들은 잠을 자고 있다가 요청이 오면 깨서 작업을 수행하고 다시 잠에 든다.)

효율성이 매우 높다.(전력 낭비가 없어지고 하드웨어를 더 효율적으로 쓸 수 있는 것)

• 서버리스의 단점

: 1) 콜드 스타트(cold start) ⇒ 함수가 잠에서 깨는 시간이 필요하다.

2) 서버 제공자에게 지나치게 의존한다.

(편리한 만큼 함수의 형태가 서비스에 딱 맞아 떨어지는 형태여서 다른 회사의 서버리스로 옮기기 쉽지 않다.)

• 결론

: 사이드 프로젝트를 하는 사람이나 프로토타입을 최대한 빠르게 출시하고 싶은 기업에서 추천

(서버 관리, 설정에서 시간을 아끼고 싶다면 서버리스가 좋다.)

(+ 브라우저 익스텐션 추천)

• ColorZilla

: 웹 페이지의 색상을 스포이드 기능으로 뽑아 낼 수 있다.

• Momentum

: 할 일 목록을 정리할 수 있다.

• CSSViewer

: 특정 페이지의 CSS 요소들을 확인할 수 있다.

• JSON Viewer

: 웹 브라우저에서 JSON 파일을 아름답게 보여 준다.

• React Developer Tools

: state와 prop이 뭔지, 누가 prop을 보냈는지 등 리액트 관련 정보를 모두 볼 수 있게 해주는 도구이다.

• WhatFont

: 웹 사이트의 font 이름을 간편하게 알아낼 수 있다.

• Grid Ruler

: 웹 사이트에서 줄자를 사용할 수 있게 해주는 도구이다.

• BuiltWith Technology Profiler

: 웹 사이트가 어떤 기술로 만들어졌는지 알려 주는 도구이다.

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

익숙한 걸 선호하는 성향이다 보니까 사람들이 크롬을 막 사용하기 시작할 때도 익스플로러를 고집했던 기억이 났다. 그렇게 내가 붙잡고 있던 익스플로러가 어떻게 사라지게 된 건지 알게되니까 조금의 충격을 받았다.

내가 만든 쿠키~🍪 너를 위해 구웠지 !!

쿠키는 조심해야 할 수도 있겠지만 웹 사이트를 사용할 때 나에게 편의성을 주기 위해 필요할 수도 있으니 편견은 버려야겠다 : ) !

풀스택 개발자가 대단하다는 것을 새삼 더 느끼게 됐다.

노마드 코더에서 인강을 들으며 궁금했던 브라우저 익스텐션을 추천받아서 너무 기뻐요 ! 잘 활용하겠습니다~!

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

😊오늘 읽은 다른사람의 TIL

• inalee님의 TIL (https://nomadcoders.co/community/thread/8254)