[개발 용어] Repaint와 Reflow 쉽게 이해하기 프론트엔드 개발을 하게되면 repaint와 reflow 라는 말을 자주 듣게 될 것이다. 브라우저의 렌더링 과정과 관련이 있다. repaint와 reflow를 이해하려면 먼저 브라우저가 어떻게 페이지를 그려서 보여주는지 알아야 한다. 우리가 HTML과 CSS로 작성한 코드는 '렌더링(Rendering)'이라는 과정을 거쳐 화면에 나타난다. HTML(DOM)과 CSS(CSSOM) 코드를 기반으로 브라우저 엔진이 Render Tree를 형성하고, 이 과정에서 reflow와 repaint가 발생한다. 자바스크립트로 DOM을 조작하거나 CSS를 동적으로 변경할 때 이 두 현상이 트리거된다.웹 브라우저의 렌더링 엔진(Rendering Engine)이 화면을 그리는 과정DOM과 CSSOM 생성: 웹 브라우저의 렌더.. 2025. 3. 20. [개발 용어] Dev container (데브 컨테이너) Part 2 - 작성 방법 및 예시 지난 글에서는 데브 컨테이너의 개념에 대해 살펴보았다. 이번 글에서는 데브 컨테이너의 구조 및 작성 방법에 대해 간단히 알아보려고 한다. 참고로 데브 컨테이너는 JSON 형식을 사용하는데, 나는 아직 JS도 알못이다. 😂 어쨌든 나중에 내가 개발을 하게 되면 참고하려고 쓰는 소위 '와드' 성격의 글임을 감안했으면 좋겠다.형식(data format)데브 컨테이너는 JSON (JavaScript Object Notation) 형식을 사용한다. 먼저 알아야 할 것은, JSON은 프로그래밍 언어가 아니라는 것이다. 데이터를 저장하고 교환하기 위한 경량 데이터 형식(data format)이다. 따라서 JSON 자체는 실행 가능한 코드(로직, 함수) 등을 포함하지 않는다. 단지 데이터를 구조화하는 방식일 뿐이다... 2025. 3. 10. [개발 용어] IDE에서 디렉토리 이해하기 프로젝트를 진행할 때 Visual Studio Code나 다른 IDE에서 디렉토리의 개념과 작동 원리를 이해하는 것은 매우 중요하다. 디렉토리 구조는 코드와 파일을 체계적으로 관리하며, 프로젝트의 효율성과 유지보수성을 높이는 데 핵심적인 역할을 한다. 디렉토리의 개념과 작동 원리를 알아보자. 👀디렉토리란?디렉토리(directory)는 파일 시스템에서 파일과 다른 디렉토리를 계층적으로 조직화하는 “폴더”를 의미한다. 이는 운영 체제(Windows, macOS, Linux 등)에서 파일을 저장하고 관리하는 기본 단위로, 프로젝트를 진행할 때 소스 코드, 설정 파일, 리소스 등을 분류하는 데 사용된다.IDE(통합 개발 환경)에서 디렉토리는 프로젝트의 '작업 공간' 또는 '루트 폴더'로 설정되어, 해당 디렉토.. 2025. 2. 22. [개발 용어] Dev container (데브 컨테이너) Part 1 - 기본 개념 Dev container 란?“Dev Containers”는 **Visual Studio Code(VS Code)**에서 제공하는 확장 프로그램이다. 이 확장의 핵심 아이디어는 개발 환경을 컨테이너라는 독립적인 “상자” 안에 넣어서 관리하는 거다.쉽게 말하면, Dev Containers는 “내 컴퓨터에서 개발 환경을 새로 만들지 않고, 이미 준비된 환경을 바로 가져다 쓰게 해주는 도구”라고 생각하면 된다.Dev Container의 역할Dev Containers 확장이 하는 일은 크게 세 가지로 나눌 수 있다.1. 일관된 개발 환경 제공팀원마다 컴퓨터 환경이 달라서 생기는 문제를 없애준다. 예를 들어, 누군가는 윈도우, 누군가는 맥을 쓰는데, 소프트웨어 버전이나 설정이 달라서 코드가 제대로 안 돌 수 있다.. 2025. 2. 22. 이전 1 다음
