웹사이트의 성능은 사용자들에게 첫인상으로 또는 다시는 사이트에 돌아오지 않게 되는 중요한 요소일 수 있다. 개발을 시작하기 전에도 느린 응답이나 이벤트 처리가 생기면 잘 처리가 되더라도 불편하다는 인식을 가지게 되었다. 개발 이후에는 서비스의 성공과도 연결될 수 있다는 생각에 성능 개선에 관심을 가지게 되었다. lighthouse로 성능을 측정하고 개선을 진행해보기도 하며 다양한 지표와 시점들을 보게 되었고 이를 정리해보고자 한다. TTFB (Time to first byte) TTFB는 브라우저가 페이지를 요청하고 첫번째 byte를 받는 사이의 시간을 의미한다. DNS 검색과 HTTPS로 연결되는 경우 TCP 핸드쉐이크, SSL 핸드쉐이크 연결을 구축하는 시간도 포함한다. TTFB는 핵심 웹 성능 지표..
이전에 컴퓨터 과학을 CS50(네이버 부스트코스 강의)로 접하면서 C를 사용한 강의를 수강한 적이 있습니다. 이때 C 언어는 malloc() , free()와 같은 함수로 메모리 할당을 해제하는 모습을 보았고 자바스크립트에서는 어떠한 방식으로 메모리를 관리하는지 궁금하여 가비지 컬렉션에 대해 정리를 하게 되었습니다. garbage collection이란? 메모리 관리 기법 중의 하나로, 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요없게 된 영역을 해제하는 기능입니다. 더보기 메모리 관리 gif와 같이 컴퓨터는 우리가 작성한 변수, 함수, 객체들을 메모리에 할당한다. 하지만 계속 할당만 해서 메모리가 꽉 차게되면 작업중인 프로그램이 느려지고 결국은 강제종료되는 현상이 일어나게됩니다. 가상메모리도 메..
리액트를 어느 정도 학습한 분들이라면 key prop에 대해 들어보았을 것이고 이것이 리스트 렌더링 할 때만 사용하는 값이라고 생각할 수 있다. key prop은 조금 더 의미를 가지고 있다. 이번 글은 리액트 공식문서 스터디를 진행하며 스터디원들과 이야기했던 key에 대해 작성하려고 한다. map과 함께 사용하는 key prop React에서는 list를 렌더링하기 위해 map 메서드와 함께 사용한다. 리턴하는 가장 바깥쪽 JSX props로 key 값을 입력하지 않으면 다음과 같은 에러가 발생한다. Warning: Each child in a list should have a unique “key” prop. 그런데 에러가 발생하여도 우리는 화면에 렌더링된 내용을 확인할 수 있다. 이는 React는 ..
면접 중 질문을 받게 되었는데 답변을 완벽하게 하지 못했다는 느낌이 들었다. 이번 기회에 충분한 정리하고 정보 공유를 위해서 브라우저 렌더링에 대한 글을 작성하게 되었다. 브라우저의 기본 구조 브라우저의 기본적인 구조는 다음과 같다. 사용자 인터페이스 - 주소표시줄, 뒤로 가기/앞으로 가기 버튼 등 요청 페이지를 제외한 인터페이스 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진사이의 동작을 제어 렌더링 엔진 - 요청한 컨텐츠를 표시, 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 작동 방식에 ..
WuMo | 우리들의 모임 프로젝트를 마치며 2023.02.16-03.15 약 한 달간의 집중 개발 기간을 마치고 최종발표와 함께 데브코스의 수료식도 함께 진행되었다. 백엔드와 함께 진행하는 프로젝트인 만큼 걱정도 있었지만 좋은 팀원들을 만나게 되어 큰 트러블 없이 프로젝트를 끝마칠 수 있었다. 프로젝트 소개 🗓️ 모임 계획, 추억 관리를 위한 프라이빗 서비스 기획 평소 여행이나 모임을 계획할 때 어떻게 하시나요? 그룹채팅방에서는 모임과 상관없는 이야기도 오가면서 모임에 필요한 장소나 사진 등이 잊히기 쉽습니다. 그렇다면 모임과 관련된 내용만 모아 보면서 함께 계획을 완성하고 추억을 기록할 도구가 있다면 어떨까요? 주요 기능 모임을 만들어 친구, 가족을 초대한다. 후보지를 정하고 의견을 공유한다. 마음..
🚀 새로운 블로그로 이전했습니다.
살펴보러 가기
