CS

Hyper Text Transfer Protocol의 약자로, HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 계층의 프로토콜이다. 쉽게 말해 서버와 클라이언트 간에 데이터를 주고 받기 위해 사용되는 통신 규약이라고 이해하면 된다.  문서뿐 아니라 이미지, 영상, 파일, JSON, XML 등 거의 모든 형태의 데이터를 전송할 수 있어 대부분 HTTP 프로토콜을 사용하여 통신을 한다.  HTTP 통신은 클라이언트(Frontend)와 서버(Backend)로 단이 나뉘어 클라이언트가 요청(request)을 하면 서버가 이에 대한 응답(response)을 보내주는 방식으로 동작한다. 💡 URL에서의 http예를 들어 http://www.cotato.kr 라는 인터넷 주소가 있다면, www.cot..

브라우저 저장소는 브라우저에서 데이터를 클라이언트 측에 저장하기 위한 기술이다. 이를 통해 웹 애플리케이션은 서버와 상호작용하지 않고도 데이터를 저장하고 관리할 수 있다. 브라우저 저장소의 종류는 Web Storage와 Cookie 두 가지로 나뉘고, Web Storage는 Local Storage와 Session Storage로 나눌 수 있다.  Web Storage웹 데이터를 클라이언트에 저장하기 위한 key-value 형태의 저장소로, Cookie의 단점을 보완하고자 HTML5에 추가된 스펙이다.저장된 데이터는 클라이언트(브라우저)에 존재할 뿐 서버로 전송되지 않는다. 따라서 네트워크 트래픽에 영향을 주지 않는다.쿠키에 비해 용량 제한이 넉넉하다. (서버로 전송되지 않고 그저 클라이언트 측에 데이터..

MPA와 SPAMPA(Muliple Page Application)새로운 페이지를 요청할 때마다 서버에 정적 리소스를 요청ex.JSP, PHP SPA(Single Page Application)모든 정적 리소스를 최초 한 번에 다운로드ex. React, Vue, Next, Nuxt 🤷🏻‍♂️ MPA는 SSR, SPA는 CSR?일반적으로 MPA는 SSR, SPA는 CSR 방식을 많이 사용하나, 고정된 규칙은 아니다. 예외가 되는 사례들을 살펴보자. - SSR을 사용하는 SPANext.js는 기본적으로 SPA임에도 불구하고, SSR과 CSR을 혼합한 하이브리드 렌더링 방식을 사용한다. - CSR을 사용하는 MPA일부 MPA는 초기 HTML을 서버에서 제공하고, 나머지 상호작용을 위해 JavaScript를..

Reflow와 Repaint 브라우저의 렌더링 과정에서 렌더 트리가 생성된 후, 뷰포트를 기반으로 요소(노드)들의 위치, 크기 등을 계산하는 과정을 Layout 단계, 이를 바탕으로 화면에 요소들을 픽셀화하여 그리는 과정을 Paint 단계라고 한다.(브라우저의 렌더링 과정에 대해 더 자세히 알고 싶다면 여기를 참고) Reflow는 Layout과,Repaint는 Paint와 연관되어 있는데, 쉽게 말해 Reflow는 레이아웃이 변경되었을 때, 각 요소들의 위치나 크기 등을 다시 계산하는 과정이고, (변경 시 영향을 받은 모든 노드의 수치를 계산 -> 렌더트리 재생성) Repaint는 Reflow가 일어나고 화면을 다시 그리는 과정을 말한다.  Reflow와 Repaint가 발생하는 시점Reflow 발생 예..

브라우저가 웹 페이지를 불러올 때는 웹킷(Webkit), 게코(Gecko) 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진은 HTML, CSS, JavaScript와 같은 웹 페이지를 이루는 요소들을 파싱하고, 이를 브라우저 화면에 표시하는 역할을 한다. 이 과정은 크게 DOM, CSSOM, 렌더트리 그리고 레이아웃을 포함하며 이러한 프로세스를 CRP(Critical Rendering Path)라고 한다. ✅ CRP(중요 렌더링 경로)는 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킨다.  1. DOM 생성브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성한다.✅ DOM(Document Object Model..

프론트엔드를 공부하다보면 한번쯤 웹팩, 번들, 바벨, 폴리필🤷‍♂️❓ 등등...과 같은 단어들을 들어본 적이 있을 것이다. 지금은 CRA를 사용해 초기 구축을 많이 하지만, 프로젝트를 완전히 커스터마이징해서 사용하기 위해서는 환경설정과 빌드세팅까지 직접 해야한다. 오늘은 그때 다루어야 할 개념들에 대해 포스팅을 쓰려고 한다. 궁금한 것도 많은데 알아야 할 것도 너무 많기 때문에 우선은 뭐가 뭔지 얕게만 정리해보면서 차차 알아가보자.   모듈 번들러(Module Bundler)명칭 그대로 모듈 단위로 쪼개진 코드 조각들을 하나로 묶어주는 도구이다. JS, HTML, CSS, 이미지 파일 등을 포함한 모든 리소스를 최적화하여 하나의 파일로 만들어준다. 크롬과 같은 브라우저는 이 단일 파일을 로드함으로써 애..