hmk run dev

결국 프론트엔드 코드는 웹브라우저 위에서 동작한다. 웹 프로트엔드 개발자로서 브라우저의 동작을 이해한다면? 개발 시 더 나은 선택, 코드를 작성 할 수 있지 않을까? 먼저 chromium에 대해 알아보자 chromium chromium은 구글에서 만든 오픈소스 프로젝트로 대부분의 브라우저는 chromium을 기반으로 동작한다. chromium의 멀티프로세스 아키텍처 원래 일반적으로 프로그램을 하나 키면 프로세스가 1개 실행 되어야한다. 그러나 실제로 크롬을 실행시키면 아래와 같이 여러개의 프로세스가 실행되는 것을 확인할 수 있다. 위 그림에서 보면 렌더러 프로세스가 여러개인 것을 확인할 수 있는데, 렌더러 프로세스는 탭별로 하나씩 생성된다. Blink 엔진이란? GPU 프로세스는 어떻게 GPU가 작업을 ..

1. 프로미스란? 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 2. 콜백 패턴의 단점 2.1 콜백 헬 먼저 동기식 처리 모델과 비동기식 처리 모델에 대해 간단히 살펴보자. 동기식 처리 모델 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스..

CSS란? CSS는 HTML이나, XML으로 작성된 문서의 표시 방법을 기술하기 위한 스타일시트 언어이며, 웹페이지를 꾸미기 위한 코드 또한, CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되야 하는지 지정합니다. 브라우저 렌더링 과정의 4단계 파싱 (Parse): HTML 및 CSS 문서를 해석하고 이해하는 과정입니다. 재미난 비유: 마법사가 주문서를 읽어서 그 내용을 이해하는 것과 비슷합니다. 브라우저는 HTML을 읽고 DOM(문서 객체 모델) 트리를 만들고, CSS를 해석하여 스타일 규칙을 생성합니다. 레이아웃 (Layout): 설명: DOM 트리와 스타일 규칙을 기반으로 각 요소의 크기와 위치를 계산하는 단계입니다. 재미난 비유: 가구를 배치하는 인테리어 디자이너처럼, 브라우..

얼마 전 회사에서 테스트 코드를 짜다가 아래와 같은 피드백을 받았습니다. TC를 통해서 함수가 어떤 기능을 수행하는지 사양을 파악하기 위함도 있습니다. 사실 어찌 보면 너무 당연한 말인데, 간과하고 넘어갔던 사실이라는 생각이 들었고, 지적해 주신 동료분께 감사한 마음이 들었네요 :) 결국 대부분의 개발자는 커리어 내내 협업을 할 것이고, 내 가짠 코드는 다른 사람이 보기에도 의도가 명확하고, 신뢰감을 줄 수 있는 코드를 작성해야 한다는 사실을 잠깐 망각했습니다. 그래서 아래와 같은 내용으로 테스트해야 할 데이터가 큰 경우(가독성이 떨어질 수 있는 테스트) 어떤 식으로 개선했는지에 대한 내용을 다뤄보겠습니다~! 종종 테스트를 작성하다 보면 테스트의 데이터가 너무 커서 보는 이로 하여금 어떤 기능을 함수, ..