해시테이블(Hash Table)이란? 해시테이블은 페어로 데이터를 저장하는 자료구조의 유형 중 하나로 빠르게 데이터를 검색할 수 있는 자료구조 입니다. 해시테이블이 빠른 검색속도를 제공하는 이유는 내부적으로 배열(버킷)을 이용하여 데이터를 저장하기 때문입니다. 해시테이블은 각각의 Key값에 해시함수를 적용해 배열의 고유한 를 생성하고 이 를 활용하여 값…
실행 컨텍스트 (Execution Context) 정의 코드의 실행환경에 대한 여러가지 정보를 담고 있는 개념 으로, 간단히 말하자면 자바스크립트 엔진에 의해 만들어지고 사용되는 코드 정보를 담은 객체의 집합이라고 할 수 있다. 종류 자바스크립트의 코드는 3가지 종류로 이루어지는데, 글로벌 스코프에서 실행하는 글로벌 코드, 함수 스코프에서 실행하는 함수 …
Lighthouse란? Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구입니다. 어떤 웹 페이지든 사용할 수 있습니다. Lighthouse에서 확인할 수 있는 부분 가장 중요한 부분만 자세하게 설명해보겠습니다. Performance 퍼포먼스는 말 그대로 웹 사이트의 성능을 보여주는 부분입니다. 간단하…
각설하고 이렇듯 브라우저라는 것이 웹에 있어서 뗄래야 뗄 수 없는 그런 존재이다. 그럼 과연 브라우저는 어떻게 동작을 하는지 알아보자. 브라우저 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서이지만, PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Unifo…
프로세스 프로세스는 운영체제 위에서 연속적으로 실행되고 있는 프로그램이다. 지금 내가 글을 쓰고 있는 웹스톰도 하나의 프로세스 이 글을 읽을 수 있는 크롬도 하나의 프로세스 이다. 현재 실행중인 프로그램 모두 프로세스를 가지고 있다. 각 프로세스는 메모리 위에서 독립적으로 실행된다. 프로세스는 격리된 실행 개체이며 데이터 및 정보를 공유하지 않는다. 따라…
TL;DR 가비지컬렉터의 역할은 자바스크립트 엔진이 메모리 할당을 모니터링하고 할당된 메모리의 블록이 더 이상 필요하지 않은 시점을 확인하여 회수하는 것이다. 가비지컬렉터는 알고리즘과 알고리즘에 따라 동작한다. 참조-세기(Reference-counting) 참조-세기는 더 이상 필요없는 오브젝트를 어떤 다른 오브젝트도 참조하지 않는 오브젝트라고 정의한다…
이번에 알림톡을 이용해서 휴대폰 인증번호를 보내는 기능을 구현하기 위해 찾아보다 네이버 NCP(Naver Cloud Platform)을 이용해 알림톡 보내기가 가능하다 해서 작업해봤습니다. 카카오 비즈니스에 따르면 알림톡 기능을 이용하기 위해서는 공식 딜러사를 통해 이용하도록 되어 있습니다. 저는 이 과정을 거치기엔 시간이 부족했기 때문에 바로 적용이 가…
요즘 나의 상태와 딱 맞는 짤… 오늘이 프론트엔드 개발자로서 일을 시작한지 정확히 1년째 되는 날이다. 블로그 글을 너무 오랫동안 안썼는데 회고록을 쓰면서 다시 한 번 써보자고 다짐해본다. 짧다고 생각하면 짧고 길다고 생각하면 긴 1년인데, 나에게는 너무나 짧은 1년이었다. 그래도 1년이라는 시간동안 많은 것을 배울 수 있었고, 내 인생이 바뀔 수 있는 …
취업 후 4달만에 쓰는 블로그라니.. 😱 그 동안 바쁘다는 핑계로 너무 소홀했던 것 같다. 매일매일은 아니더라도 꾸준히 글을 써야겠다는 다짐(작심삼일)을 하면서 오랜만에 글을 써본다. 성능 최적화에 대해 설명하기에 앞서 React에서 렌더링이 일어나는 이유에 대해 알아야 한다. React에서 렌더링을 실행하는 과정 React에서 렌더링을 수행하는 시점은 …
블로그를 이사했습니다! 개발자가 된지 1년차가 된 기념으로 깃헙 블로그로 이사했습니다. 이전에 막 썼던 글들은 아쉽지만… 뒤로 한 채 앞으로 양질의 글을 쓸 수 있도록 노력해보겠습니다. 감사합니다 🙇♂️