본문 바로가기

전체 글305

Chrome DevTools 빌드해서 실행하는 방법 웹 개발을 하면서 자주 사용하는 Chrome DevTools. 이 도구의 화면도 TypeScript와 CSS로 만들어져 있다. 익숙하게 사용하던 Elements 패널이나 Console의 코드를 직접 읽고 수정해 볼 수 있다는 뜻이다.이번 글에서는 macOS의 zsh 환경을 기준으로, DevTools 소스 코드를 내려받고 로컬에서 실행하는 과정을 정리한다. Git을 사용할 수 있는 환경을 전제로 한다.1. depot_tools 설치하기먼저 Chromium 프로젝트에서 사용하는 개발 도구 모음인 depot_tools를 설치한다. 소스 코드를 받는 fetch, 의존성을 동기화하는 gclient 등이 포함되어 있다.여기서는 홈 디렉터리 아래에 설치한다.git clone https://chromium.google.. 2026. 11. 1.
Chromium을 빌드해서 실행하는 방법 Chromium에 처음 기여한다면, 첫 목표는 소스를 내려받아 내 컴퓨터에서 브라우저를 실행해 보는 것입니다.이 글은 macOS와 Linux에서 데스크톱 Chromium을 빌드할 때의 방법을 다룹니다. 전체 과정은 개발 도구 준비 → 소스 받기 → 빌드 설정 생성 → 빌드 → 실행입니다. 운영체제에 따라 달라지는 준비 사항과 실행 명령은 따로 표시했습니다. 지원 환경과 최신 요구 사항은 운영체제별 공식 안내에서 확인할 수 있습니다.1. 개발 환경을 준비합니다.먼저 Git을 설치하고, 사용하는 운영체제에 필요한 개발 도구를 준비합니다.운영체제준비할 도구와 확인 사항macOSXcode, macOS SDK, APFS 형식의 작업 볼륨LinuxGit, Python 3, 배포판에 맞는 빌드 의존성 패키지필요한 버.. 2026. 10. 25.
[달레스터디] 리트코드 스터디 8기 회고 개발자인 달레님께서 운영하시는 스터디 중 리트코드 문제를 함께 푸는 스터디에 참여했던 후기를 적어보고자 한다.6월에 링크드인에서 우연히 리트코드 스터디 모집 글을 보고 큰 고민 없이 스터디를 신청했다.올해 초부터 리트코드 문제를 개인적으로 풀고 있었는데, 꾸준히 푸는 게 쉽지는 않았기에 함께하는 스터디에 참여하면 습관이 되지 않을까 하는 기대로 신청했다.스터디 초기 몇 주간은 시간적인 여유가 있었고, 굉장히 많은 시간을 할애했었다. 우선 내가 문제를 직접 풀 수 있을 때까지 몇 시간이고 며칠이고 고민해서 풀어내려고 노력했다. 문제를 보고 내 사고가 닿는 부분까지만 풀이가 생각났기 때문에 무슨 문제인지 감도 잡히지 않는 경우에는 굉장히 고통스러웠던 것 같다.하지만 몇 번이고 고민하고 여러 방면에서 생각하면.. 2026. 10. 18.
Promise, async, await는 어떻게 이어질까: Chromium으로 이해하는 비동기 실행 프론트엔드에서는 서버의 응답을 기다리고, 데이터를 가공하고, 그 결과를 화면에 반영하는 코드를 자주 작성한다. Promise와 async, await는 이런 흐름을 표현하는 도구다. 먼저 세 가지가 각각 무엇을 의미하고 어떻게 연결되는지 살펴본 뒤, Chromium 안에서 실제로 실행되는 과정을 따라가 보자.Promise는 작업의 성공 결과나 실패 이유를 나타내는 객체다. 서버에 데이터를 요청하는 fetch(url)을 호출하면 응답 데이터 자체가 즉시 반환되는 대신, 응답을 기다릴 수 있는 Promise가 반환된다. 결과를 기다리는 동안에는 pending(대기), 성공 결과가 확정되면 fulfilled(이행), 실패하면 rejected(거부) 상태가 된다. 한 번 fulfilled 또는 rejected가.. 2026. 9. 20.