📖 IT 5분 잡학사전(Ep.16 ~ 21)

오늘 TIL 3줄 요약

• 쿠키가 뭘까~용?
• 프런트엔드 + 백엔드 + 데브옵스 = 풀스택!
• 서버의 이해와 서버리스

TIL (Today I Learned) 날짜

2024.07.31

오늘 읽은 범위

• Ep.16 인터넷 익스플로러가 사라진 이유와 브라우저 엔진
• Ep.17 아, 쿠키가 먹는 게 아니라고요?
• Ep.18 프런트엔드, 백엔드?
• Ep.19 서버가 뭔지 아직도 모른다고?
• Ep.20 슈퍼 개발자만 할 수 있다, 풀스택?
• Ep.21 서버리스는 서버가 없다는 뜻?

책에서 기억하고 싶은 내용

서버가 만든 쿠키~ 나를 위해 구웠지~~~(사실 책에 없음)~~

---

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

인터넷 익스플로러가 등장한 초기에는 최초로 CSS를 도입한 브라우저였기에 인기를 끌었었다.

 

프런트엔드 개발자는 기본으로 HCJ(HTML, CSS, JavaScript)를 다룬다.

 

• HTML은 웹 사이트에 들어갈 텍스트, 그림 등 구조를 표현하는 규약이다.
• CSS는 웹 사이트를 개발할 때 화면을 배치하고 꾸미는 등의 스타일 작업을 할 때 필요한 기술이다.
• JavaScript는 사용자가 웹사이트에서 버튼을 클릭하거나 어떤 행동을 할 때 그에 대한 반응으로 브라우저가 어떻게 동작해야 할지를 정의하는 프로그래밍 언어이다. 이를 통해 서버에서 데이터를 가져와서 웹 페이지에 동적으로 표시하거나, 특정 작업을 수행한 결과를 보여주는 등의 인터랙티브한 행동들을 구현할 수 있다. 이 모든 과정은 사용자의 경험을 개선하고, 웹사이트의 기능을 풍부하게 만들어 주는 중요한 요소로 작용된다.

이 3가지를 웹 브라우저가 이해하고 상호작용하려면 브라우저의 엔진 혹은 렌더링 엔진이 각 브라우저마다 존재하여야 한다.

즉, 엔진이 최신 표준안과 최신 기술들을 지원해야 최신 웹 브라우저가 된다!

HTML, CSS 브라우저(렌더링) 엔진

HTML, CSS, DOM 등 웹 기술의 규격을 정하고, 브라우저 간의 호환성과 일관성을 보장하도록 W3C(World Wide Web Consortium)와 WHATWG(Web Hypertext Application Technology Working Group)가 정의한 웹 표준을 따른다.

엔진 이름 브라우저 이름

게코(gecko)	파이어폭스
웹킷(webkit)	사파리
블링크(blink)	크롬

자바스크립트 브라우저 엔진

JavaScript가 일관되게 동작할 수 있도록 에크마스크립트(ECMAScript)라는 표준안을 따른다.

엔진 이름 브라우저 이름

v8엔진	크롬, Node.js, 디노
SpiderMonkey	파이어폭스
JavaScriptCore	사파리

 

하지만 인터넷 익스플로러는 점유율이 95%만큼 대단했기에 열심히 엔진을 성장시키지 않아서 점점 다른 브라우저에게 밀려가며 여러 보안이슈도 생기고 하다가 결국에 2022년 6월 15일 부로 공식 지원이 종료되었다.

 

그리고 마이크로소프트는 더 최신 기술을 지원하는 엔진을 가지고 안전한 마이크로소프트 엣지를 사용하도록 권장하였다. 마이크로소프트 엣지도 블링크 엔진을 크롬과 동일하게 사용한다.

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

HTTP(HyperText Transfer Protocol)는 인터넷에서 사용자와 서버가 정보를 주고받기 위한 약속, 규정으로 사용자가 주소를 브라우저에 치고 받아온 화면을 띄워주는 과정 모두 HTTP 프로토콜 아래서 시행된다.

 

그런데 HTTP는 비연결성 프로토콜로 사용자와 서버간 한 번의 요청-응답 사이클이 끝나면 이제 연결을 끊고, 이후 요청에서는 이전 상태를 기억하지 않는다. 사용자가 요청한 시점에서만 기억하고 서버가 데이터를 전달한 후에는 우리가 누구인지 잊는 것이다.

 

그렇지만 사용자의 정보를 기억하지 못하면 곤란한 경우가 생기므로 이를 보완하기 위해 사용자와의 상호작용하는 여러 정보들을 일부 기억 해 놓는 쿠키가 생겼다.

 

특히 웹 사이트에서 로그인을 해놨는데 브라우저 창을 닫아버려 다시 접속하면 로그인 정보가 사라져 있어야 하는데 이럴때 사용자가 처음 로그인을 했을 시, 서버는 사용자를 신뢰하는 의미로 쿠키에 신뢰정보를 담아 브라우저 저장소에 저장 해 놓고 다시 사용자가 사이트에 접속하면 자동으로 서버에게 쿠키를 전달하고 로그인이 되어 있는 것이다.

 

쿠키에 대해서 더 자세히 알고 싶다면 다음 포스팅을 참고하자!

https://jisung-rithm.tistory.com/94

🍪 쿠키란 무엇일까?

페이스북의 쿠키 사용

페이스북은 다른 웹사이트에 페이스북과 상호작용할 수 있는 요소(예: 좋아요 버튼)가 있을 때, 해당 웹사이트에서 사용자가 상호작용할 경우 쿠키를 통해 사용자의 활동 정보를 수집할 수 있다. 이 정보는 사용자의 활동 패턴을 분석하고 알고리즘 개선에 사용된다.

Ep.18 프런트엔드, 백엔드?

프런트엔드는 앞(front), 끝(end)으로 모든 프로그램의 가장 앞을 의미한다. 애플리케이션이나 웹 사이트에서 우리가 사용하며 보는 화면들을 의미한다.

• 네이버 화면, 카카오톡 화면 등

프런트엔드 개발자 장단점

장점: 내가 입력한 내용을 바로 볼 수 있다!

단점: 기술의 변화 속도가 엄청 빨라 배울게 많다! HCJ는 무조건 알아야 한다.

 

백엔드는 뒤(back), 끝(end)으로 모든 프로그램의 가장 뒤를 의미한다. 애플리케이션이나 웹 사이트에서 보이지 않는 내부의 동작과 처리 과정을 의미한다.

• 데이터베이스, 라우터 등

백엔드 개발자 장단점

• 장점: 개발환경이 안정적이다, 기술 선택지가 다양하다!(자바, 루비, 장고, 파이썬, 플라스크 등)
• 단점: 사용자와 거리가 멀어서 흥미가 떨어진다!

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

서버는 단순히 말하자면 서비스를 제공하는 컴퓨터이다. 대신 모니터가 없고, 1년 내내 24시간 가동되며 저장소와 메모리가 엄청 큰 컴퓨터이다.

 

서버 컴퓨터에는 사용자가 요청한 주문을 읽고 처리하여 해당 데이터를 전달해주는 코드를 가지고 있어, 서비스를 위해 저장된 데이터를 가지고 항상 사용자의 요청만을 기다린다.

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

풀스택 개발자는 프런트엔드+백엔드+데브옵스(DevOps) 3가지를 통틀어서 모두 하는 사람을 지칭한다. 그러니 기본적으로 공부하고 하는 일이 정말 많다.

 

데브옵스에 대한 자세한 내용은 다음 포스팅을 참고하자!

https://jisung-rithm.tistory.com/91

데브옵스(DevOps)를 알아보자!

• 프런트엔드: 사용자가 보는 화면의 인터페이스인 사용자 인터페이스(UI), 사용자와 상호작용하는 부분
  • HTML, CSS, 자바스크립트, 리액트, 제이쿼리, Vue.js 등
• 백엔드: 사용자가 눈으로 볼 수 없지만 실제로는 사용하고 있는 기능. 사용자 인터페이스(UI)로 눈에 보이는 화면으로 사용자는 데이터를 다루지만 실제로는 내부에서 백엔드 기술들로 하여금 가능하게 된 것이다. → 계정 생성, 동영상 업로드, 댓글 저장 기능 등
  • PHP, 자바, 파이썬, 자바스크립트, C# 등
• 풀스택: 프런트엔드 + 백엔드 + 데브옵스
  • 프런트엔드+백엔드 이외에도 서버 고르기, 서버 설정, 서버에 SW설치, 데이터베이스 설정, 보안 등 모든걸 다 하는 사람이 풀스택 개발자 이다.
  • 풀스택 개발자 주의할점: 2~3명이 해야 할 일을 풀스택 개발자 1명이 처리해야한다면 그 회사는 거르자. 굉장히 고된 일이 될 것이다. 사실 자본이 적은 스타트업 회사에서 이런 일이 더 발생한다. 돈을 많이 받는게 아니라면 노예가.. 될 것이다… (자본주의의 노예라면..!?)
  • 취업 시 물어 볼 사항
    • 백엔드로 Node.js를 사용하는지? 아니면 파이썬을 사용하는지? 아님 자바?
    • 데브옵스는 할 수 있지만 개발에 더 집중하고 싶은데, 개발 프로세스가 궁금해요!
    • 팀원은 몇명인가요?

Ep.21 서버리스는 서버가 없다는 뜻?

서버리스는 우리가 직접 관리하지 않는 서버를 의미한다. 예전에는 서버를 운영하려면 직접 물리적인 서버 컴퓨터를 가지고 있어야 했다.

하지만 이것은 여러모로 불편했다. 잘못해서 전기가 나가거나 코드가 빠지면 서버가 멈추게 되고 만약 인기가 많아져서 한번에 허용가능한 트래픽 이상으로 몰리게 된다면 굉장히 느려지고 멈출 수 있기에 빠르게 용량을 늘리거나 했어야 했다.

 

하지만 이제는 대표적으로 아마존의 EC2(Amazon Elastic Compute Cloud) 서비스같은 클라우드 서버 서비스가 등장했다. 그렇기에 직접 서버컴퓨터를 관리할 필요가 없어졌다. 하지만 서버 컴퓨터의 관리만 안하지 그 이외 부분인 서버의 운영체제 업데이트, 보안 점검, 장애 회복 시스템 구축, 데이터 백업 등 해야 할 일은 엄청 많다. 이러한 부분에서 서버리스가 등장한다!

 

서버를 위한 소프트웨어(백엔드 코드)를 작은 함수 단위로 쪼갠다. 그리고 이 함수들을 아까 말한 EC2같은 서비스(서버)에 올린다. 이 함수들은 항상 깨어있지않고 사용자에게 요청을 받았을때만 깨어나서 작업을 수행하고 다시 잠들기 때문에 전력소모도 적고 하드웨어를 효율적으로 이용할 수 있다.
함수가 요청받아 작업을 처리하는 횟수만큼만 비용을 지불하기 때문에 비용적으로 이득을 볼 수 있다.
하지만 단점도 존재한다.

1. 서버리스 함수는 요청받아 잠에서 깰 때 딜레이 시간이 걸린다.
2. 서버 제공자(ex. AWS)에게 지나치게 의존해야 한다.
   • 서버리스 서비스는 서버 제공자마다 함수 형태가 다르기 때문에 다른 서버 제공자로 옮기기가 어렵다.

• 사이드 프로젝트를 하는 사람이나 프로토타입을 최대한 빠르게 출시하고 싶은 기업에게 서버리스의 사용을 추천할 수 있겠다. 서버 관리, 설정에서 시간을 아끼고 개발에 집중할 수 있기 때문이다.
• 서버리스 알아보기 : serverless.com, AWS 람다, 구글 클라우드 펑션(Google Cloud Function), 아펙스(Apex), 테라폼(Terraform)

---

오늘 읽은 소감은?

읽는 것 보다 공부해서 포스팅하는 시간이 배로 더 걸리는 이 모순덩어리!? ㅋㅎㅋㅎㅋ

약간 계절학기를 자체적으로 듣는 느낌일지도 ㅎㅎ

아무튼 힘내보잣!