IT 5분 잡학사전 Day 06

TIL (Today I Learned) 날짜

2024년 03월 20일 수요일

 

오늘 읽은 범위

EP.16 ~ EP.21

 

책에서 기억하고 싶은 내용

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

인터넷 익스플로러가 사라진 이유
CSS와 Ajax를 가장 먼저 지원한 웹 브라우저.
사용자가 원하고 좋아하는 기술을 빠르게 사용한 브라우저 '였다'

브라우저 엔진
프런트엔드 기술을 지원한다.
웹 브라우저의 핵심 프로그램을 말한다.
게코(gecko) - 파이어폭스, 웹킷(webkit) - 사파리, 블링크(blink) - 크롬
자바스크립트를 웹 브라우저에서 실행시키는 v8엔진
브라우저 엔진의 성능이 웹 브라우저의 성능을 결정한다.

웹킷이 브라우저 엔진이었구나!

조금 찾아보니 브라우저 엔진과 렌더링 엔진을 묶어서 말하는 경우가 많던데 더 공부해서 정리해 봐야겠다.

 

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

HTTP
- HyperText Transfer Protocol
- 인터넷과 정보를 주고받기 위한 프로토콜(=통신 규약)
- Serverless 특징이 있다. => 브라우저가 우리의 정보를 기억하지 못한다.

HTTP의 Serverless 특징 때문에 쿠키를 사용한다.

우리가 로그인을 하고 새로고침을 해도 로그인 정보가 남아있도록 하는 것, 팝업을 며칠 동안 보지 않는다고 선택한 정보 등이 쿠키에 저장된다.

쿠키(cookie)
브라우저를 통해 컴퓨터에 방문한 웹 사이트의 정보를 보관하는 기록
규칙 1: 쿠키는 도메인 1개에만 한정한다. 
규칙 2: 쿠키는 자동으로 보낸다.
규칙 3: 쿠키는 컴퓨터에 자동으로 저장된다.

규칙 1: A라는 사이트에서 생성된 쿠키는 B 사이트에 전송할 수 없다.

규칙 2: 쿠키는 컴퓨터와 서버를 자유롭게 오갈 수 있다.

 

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

프런트엔드
- 모든 프로그램의 가장 앞(화면)
프런트엔드 개발자 공부 특징
- 기술의 변화 속도가 빠르다.
- 내가 입력한 내용을 바로 볼 수 있다.

프런트엔드를 공부하는 사람으로서 기술의 변화 속도가 빠르다는 말에 공감한다.

오래 공부하진 않았지만 당장 리액트 19 업데이트 소식이 들려오고 있다.

수많은 라이브러리와 프레임워크들도 부담이 가는 이유 중 하나이다.

백엔드
- 모든 프로그램의 가장 뒤(DB, 라우터 등)
백엔드 개발자 공부 특징
- 개발 환경이 안정적이다.
- 기술 선택지가 다양하다.
- 사용자와 거리가 멀어서 흥미가 떨어질 수도 있다.

내가 프런트엔드를 선택한 이유가 내가 만들고 수정하는 사항을 눈앞에서 바로바로 볼 수 있다는 게 좋아서였다. 

요즘에는 개발 환경이 안정적인 백엔드에도 관심이 많지만 아직은 프런트엔드 공부를 계속할 거다.

 

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

서버
- 24시간 내내 인터넷과 연결되어 있는, 저장소와 메모리가 큰 컴퓨터
- 사용자가 요청했릉 때 네트워크에 연결된 컴퓨터가 실행하는 코드
- 24시간 내내 주소 입력을 기다리다, 주소가 입력되면 그 주소에 해당하는 데이터를 꺼내 보여준다.

서버(+)
- 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템
- 사용자의 요청에 의해 서비스를 진행 => 클라이언트 - 서버 시스템
- 클라이언트-서버 시스템: 하나 이상의 응용 프로그램을 상호 협력적 환경에서 운용하는 분산처리 형태
- 서버의 운영 체제로는 리눅스, 솔라리스, FreeBDS 등이 있다.

https://ko.wikipedia.org/wiki/%EC%84%9C%EB%B2%84#:~:text=%EC%84%9C%EB%B2%84(%EC%98%81%EC%96%B4%3A%20server%2C%20%EB%AC%B8%ED%99%94%EC%96%B4,(device)%EB%A5%BC%20%EC%9D%98%EB%AF%B8%ED%95%9C%EB%8B%A4.

서버 - 위키백과, 우리 모두의 백과사전

 

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

풀스택
- 프런트엔드 + 백엔드 + 데브옵스
- 할 수 있는 것과 하는 것은 엄연히 다르다.

나도 언젠가는 풀스택 개발자가 되고 싶다.

커리어의 시작은 프런트엔드이지만 백엔드, 데브옵스 파트도 궁금하고 앱 개발, 게임 개발, 보안 등 그냥 컴퓨터로 할 수 있는 모든 것에 관심이 많아서 풀스택 개발자가 되고 싶다.

 

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

서버리스(Serverless)
- 직접 관리하지 않는 서버
- EC2: 아마존 엘라스틱 컴퓨트 클라우드 => 서버의 하드웨어적 부분 관리
- 서버의 소프트웨어 관리 => 서버리스

서버리스 동작
1. 서버를 위한 소프트웨어를 작은 함수 단위로 나눈다.
2. 함수를 서비스(서버)에 올린다.
3. 평상시 잠들어있는 함수를 깨워서 사용한다.
4. 등록된 함수 중 실행된 함수 횟수만큼만 금액을 지불한다.

서버리스 단점
- 콜드 스타트: 서버리스의 함수는 잠에서 깰 때 시간이 필요하다.
- 서버 제공자에게 지나치게 의존한다. 서버리스 서비스 사이에 이동이 쉽지 않다.

그리고 서버리스 서비스를 진행하는 회사의 서버에 문제가 발생하면 해당 서버에 등록되어 있던 모든 서비스들도 다 먹통이 된다.

예전에 AWS 장애로 인해 몇몇 게임들의 서비스가 일시적으로 멈췄던 적이 있었다.

나중에 내가 만든 프로젝트도 AWS로 배포해보고 싶어서 공부할 예정이다.

참고할 만한 서버리스 프레임워크 사이트도 알려준다.

serverless.com, AWS 람다, 구글 클라우드 평션, 아펙스 (Apex), 테라폼(Terraform) 등

 

IT 쿠키 상식: 웹 개발자라면 꼭 알아야 하는 브라우저 익스텐션 1, 2

1. ColorZilla: 웹 페이지의 색상을 알 수 있다.
2. Momenturm: 하루 할 일을 기록해 두는 브라우저 창
3. CSSViewer: 특정 페이지의 CSS 엘리먼트를 확인할 수 있다.
4. JSON Viewer: 웹 브라우저에서 JSON을 정리해서 보여준다.
5. React Developer Tools: 리액트 관련 정보를 볼 수 있다. (디버깅 시 유리)
6. WhatFont: 폰트 이름을 알 수 있다.
7. Grid Ruler: 웹 사이트에서 줄자 사용하는 익스텐션, 그리드 작업, 마진 작업 시 유용
8. Built Technology Profiler: 웹 사이트가 어떤 기술로 만들어졌는지 알 수 있다.

몇몇 익스텐션들은 사용하고 있었는데 새롭게 알게 된 익스텐션들이 유용하다!

특히 React Developer Tools와 Built Technology Profiler를 사용해 봤는데 많이 사용할 거 같다.

 

읽은 소감 + 떠오르는 생각

서버 쪽 이야기들이 흥미로웠다.

개발 분야는 원래 알고 있어서 가볍게 읽었다.

브라우저 익스텐션을 더 둘러봤는데 유용해 보이는 기능들이 많아서 잘 사용해보려고 한다.