[TIL]2024-05-13

오늘은

데이터 통신 공부로 ARP 요청/답 및 에러 및 플로우 컨트롤을 하는 DLC에 대해서 공부하였고,

 

실전 코딩은 FE 개발 공부를 하게 됐다.

---

실전 코딩이 프로젝트와 관련이 많기 때문에 여기에 정리하자.

 

FE의 기술 스택 트렌드는 계속해서 변동이 많았는데 최근 2024에서는 Next.js, React, ... 등이 꽉 잡고 있다.

 

여기서 서버가 '언제' '어떻게'  HTML 및 JS 를 내려주는 지에 따라서 기술 스택의 선택이 달라지게 될 것이다.

 

웹 페이지 구성방식은 MPA & SPA가 있다.

MPA는 모든 화면(페이지)을 서버가 다시 화면을 그려서 보내준다.

SPA는 업데이트가 된 화면을 보면 필요한 부분만 로딩을 해서 보내주게 된다. (재사용할 수 있는 부분은 계속 재사용)

 

예전에는 MPA로 개발되었지만 이제는 SPA로 많이 쓰인다. 근데 요즘에는 둘이 섞어서 쓴다.

 

웹 개발 구성

CSR과 SSR의 비교. 화면의 로딩 / 렌더링

CSR은 클라이언트에서 렌더링을 할 것이고, SSR은 서버에서 렌더링을 할 것이다.

 

첫 페이지는 SSR로 하고 그 다음에는 CSR로 하기도 한다. 양 쪽의 방식을 잘 알아야 웹 개발을 잘 알 수 있다.

 

채용 공고를 보면 SSR을 원하는 곳도 많다.

 

대외활동으로 Nexters 추천.

 

브라우저 엔진 구성

전 세계 사람들이 많이 사용하는 소프트웨어로 웹 브라우저.

 

각 브라우저 엔진 마다 다르긴 하지만 크게는 비슷 비슷 하다.

 

DOM 트리 형태로 렌더링이 된다. 파싱하고 하나 하나 그려주면서 DOM.

The Document Object Model로

<script> 안에 쓰여 있는 걸로, DOM API를 이용하여 동적으로 웹을 작동하도록 한다.

 

CSS도 따로 트리를 만드는데 그것이 CSSOM이라고 한다. 

 

그리고 DOM과 CSSOM이 합쳐져서 렌더 트리가 만들어지고, Layout and Paint가 되는데 이건 매우 코스트가 큰 작업이기 때문에 확실히 잘 처리가 되어야 한다.

 

레이아웃에서 실행? 페인트에서 실행? 이런 걸 잘 생각하면서 최적화를 잘 해주어야 한다. 콤포넨트들을 재활용하는 것도 중요.

 

자바스크립트 엔진

자바스크립트를 이해하는 것인데, Nodejs,electron,React-native 등이 있다.

자바스크립트를 공부할 때, V8을 많이 알게 될 것이다.(코어 공부를 하게되면 이런 걸 알게 될 것임.)

 

메모리 힙과 콜 스택은 자바스크립트에 대한 면접에서 많이 나오는 질문이다.

 

자바스크립트는 싱글 스레드로 실행 되는데 비동기가 지원이 된다. 이게 무슨 일인가? 어떻게 가능한가?

이거 꼭 공부해두면 좋을 것이다. 면접 준비 때 공부하기를.

 

번들러는 중요한 개념이다.

프로젝트가 커질수록 번들러가 중요해진다. 어떻게 사용자에게 최적화 하여 작은 파일들로 필요한 것들만 사용할 수 있을까!

 

초창기에는 웹의 수행기능이 작고 간단하여 파일들이 많이 필요하지 않았다.

하지만.. 이제는 아니다.

 

중복되는 이름으로 인한 충돌. 파일 전송의 속도 문제 이러한 문제들이 파일들이 많아지면서 생긴다.

 

번들러의 탄생 : 사용하지 않는 파일은 요청하지 말고 사용하는 파일은 가볍게 하나로 묶어서(bundle) 보내자!

중복되는 이름으로 인한 충돌은 변수명을 랜덤화해서 겹치지 않게 해보자.

 

웹 구성에 필요한 다양한 파일들을 묶어서 하나의 번들 파일로 보내자.

 

불필요한 공백을 제거, 미사용 파일들은 포함하지 않고 코드를 짧게 줄여서 파일 압축!

이를 통해 브라우저의 부담을 줄일 수 있다.

 

번들러로 난독화(이 코드가 뭐야..? 개발을 마치고 제출할 때.)

변수명과 함수명이 중복되지 않게 한다. 네이밍을 짧게 하면서 용량을 압축. 외부에서 쉽게 노출되는 js 파일을 알아보지 못하게 만들어서 방어한다.

 

https://velog.io/@teo/2024-frontend-techstack

2024 프론트엔드 기술스택 이야기

 

기술 스택 이야기.

 

https://yozm.wishket.com/magazine/detail/1261/

JavaScript 번들러로 본 조선시대 붕당의 이해 | 요즘IT