웹사이트의 성능은 사용자들에게 첫인상으로 또는 다시는 사이트에 돌아오지 않게 되는 중요한 요소일 수 있다. 개발을 시작하기 전에도 느린 응답이나 이벤트 처리가 생기면 잘 처리가 되더라도 불편하다는 인식을 가지게 되었다. 개발 이후에는 서비스의 성공과도 연결될 수 있다는 생각에 성능 개선에 관심을 가지게 되었다. lighthouse로 성능을 측정하고 개선을 진행해보기도 하며 다양한 지표와 시점들을 보게 되었고 이를 정리해보고자 한다. TTFB (Time to first byte) TTFB는 브라우저가 페이지를 요청하고 첫번째 byte를 받는 사이의 시간을 의미한다. DNS 검색과 HTTPS로 연결되는 경우 TCP 핸드쉐이크, SSL 핸드쉐이크 연결을 구축하는 시간도 포함한다. TTFB는 핵심 웹 성능 지표..
이전에 컴퓨터 과학을 CS50(네이버 부스트코스 강의)로 접하면서 C를 사용한 강의를 수강한 적이 있습니다. 이때 C 언어는 malloc() , free()와 같은 함수로 메모리 할당을 해제하는 모습을 보았고 자바스크립트에서는 어떠한 방식으로 메모리를 관리하는지 궁금하여 가비지 컬렉션에 대해 정리를 하게 되었습니다. garbage collection이란? 메모리 관리 기법 중의 하나로, 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요없게 된 영역을 해제하는 기능입니다. 더보기 메모리 관리 gif와 같이 컴퓨터는 우리가 작성한 변수, 함수, 객체들을 메모리에 할당한다. 하지만 계속 할당만 해서 메모리가 꽉 차게되면 작업중인 프로그램이 느려지고 결국은 강제종료되는 현상이 일어나게됩니다. 가상메모리도 메..
면접 중 질문을 받게 되었는데 답변을 완벽하게 하지 못했다는 느낌이 들었다. 이번 기회에 충분한 정리하고 정보 공유를 위해서 브라우저 렌더링에 대한 글을 작성하게 되었다. 브라우저의 기본 구조 브라우저의 기본적인 구조는 다음과 같다. 사용자 인터페이스 - 주소표시줄, 뒤로 가기/앞으로 가기 버튼 등 요청 페이지를 제외한 인터페이스 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진사이의 동작을 제어 렌더링 엔진 - 요청한 컨텐츠를 표시, HTML과 CSS를 파싱하여 화면에 표시 통신 - HTTP 요청과 같은 네트워크 호출에 사용 UI 백엔드 - 버튼, 체크 박스와 같은 기본적인 위젯를 그림 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행 자료 저장소 - localStorage, 쿠키와 같이 로컬에..
CS 학습 스터디를 진행하며 발표를 진행했던 내용들을 정리하여 블로그에 공유하려고 합니다. 프론트엔드를 다루다 보면 만나게 되는 REST API에 대해 정리하였습니다. REST + API ? 우선 REST API에 대해 알기 전에 간략하게 API, REST에 대해서 간략하게 알아보고 갑시다. API란? Application Programming Interface의 약자입니다. API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘입니다. 컴퓨터와 인간을 연결시키는 사용자 인터페이스(UI)와 반대로, API는 컴퓨터나 소프트웨어를 서로 연결합니다. REST란? Representational State Transfer의 약자인 REST는 API 작동 방식에 ..
🚀 새로운 블로그로 이전했습니다.
살펴보러 가기
