웹프론트엔드

원문: https://nolanlawson.com/2026/01/31/building-a-browser-api-in-one-shot/TL;DR 프롬프트 하나로 Claude Code와 Ralph 루프를 사용해 IndexedDB 구현체를 만들었습니다. 목표로 삼은 Web Platform Tests 하위 집합의 95%를 통과했고, 더 엄격한 테스트 하위 집합은 77.4%를 통과했습니다.정작 놀라웠던 점은 두 프로젝트 모두 Web Platform Tests(WPT)를 제대로 활용하지 않는 듯 보였다는 것입니다. WPT에는 헤아릴 수 없이 많은 사람의 시간이 들어간 전문 지식이 응축되어 있습니다. 브라우저가 어떻게 동작해야 하는지를 가장 기이한 엣지 케이스까지 정밀하게 정의해 둔 결과물이죠. (두 번째 프로젝트는..

원문: https://www.matuzo.at/blog/2025/whats-an-interactive-element2년 전에 저는 dialog 요소에 관한 글을 썼습니다. showModal() 메서드로 모달 다이얼로그를 열었을 때 포커스가 어디로 가는지 테스트했습니다. 요소와 속성을 여러 조합으로 바꿔 가며 어떤 일이 일어나는지 살펴봤는데, 2023년 당시에는 동작이 무척 일관되지 않았기 때문입니다.테스트 중 하나에서 저는 dialog 요소에 tabindex 속성을 넣었습니다. 이번 주 초에 Joy가 저에게 연락한 것도 그래서였습니다. MDN의 dialog 요소 페이지에 다음과 같이 쓰여 있어서, 그게 좋은 방법인지 확신이 서지 않았던 겁니다.그리고 사용 시 주의 사항은 이렇습니다. 요소는 인터랙티브하지..

나는 평소에 개발 관련 서적을 많이 읽는 편이다. 서점에 가서 보기도 하고 지인들에게 추천을 받아 읽기도 한다. 그러던 중 최근에 눈길을 끄는 제목의 프론트엔드 개발 서적 한 권을 우연히 만나게 되었다. 바로 이 책이다. 나는 현재 회사에서 타입스크립트와 리액트로 웹 프론트엔드 개발을 하고 있다. 사실 이 스택은 나 뿐만 아니라, 굉장히 많은 회사에서 이미 표준으로 자리잡고 있는 스택이라 웹 프론트엔드 개발자로 취업을 하길 희망하는 취준생에게는 필수적이라고 보아도 과언이 아닐 것이다. 하지만 시중에 많은 리액트, 타입스크립트 책을 봐온 나로서는 아쉬운 점이 있었다. 크게 두 가지인데 첫 번째는 책이 너무 두꺼웠고, 두 번째는 책이 너무 어려웠다. 대부분 아쉬운 점은 1번 아니면 2번, 아니면 둘 다였다...

내가 자주 헷갈리는 개념인 reflow와 repaint에 대해서 공부한 내용을 정리해 보려고 한다. 브라우저 렌더링 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 여기서 자원은 일반적으로 HTML 문서이지만, 다른 형태의 파일(e. g. 이미지, PDF 등)일 수도 있다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석하여 표시하는데 이 명세는 웹 표준화 기구인 W3C에서 정한다. 브라우저의 주요 구성 요소는 다음과 같다. 사용자 인터페이스 : 요청한 페이지를 보여주는 창 제외한 나머지 모든 부분 (e.g. 북마크, 주소 표시줄 등) 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어 렌더링 엔진 : 요청한 콘텐츠 표시. 예를 들..

웹 프론트엔드 개발자라면 어떤 회사에서, 어떤 프로젝트를 맡아서 개발을 하든지 누구나 궁금해 할 수 있고 누구나 물어볼 만 한 질문들을 골라서 이에 대한 나의 나름대로 최선의 대답을 정리해 보는 포스팅을 연재해 보려고 한다.(반응이 좋으면 계속 연재해 볼 생각) 현업에 계신 많은 웹 프론트엔드 개발자들 그리고 새로운 꿈을 찾아 취업을 준비하는 학생 및 예비 개발자 분들에게 조금이나마 도움이 되기를 바라는 마음으로 글을 작성해 본다. 아직 2년차 웹 프론트엔드 개발자라 잘못된 지식을 알고 있거나, 깊이가 부족할 수 있는데 이러한 부분에 대해서는 날카로운 피드백을 해 주시면 정말 감사할 것 같다. JavaScript 엔진은 어떻게 동작하나요? 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인..

올 한해 2020년도 이제 얼마 남지 않았다. 이번에도 한 해를 돌아보며 나의 2020년을 회고하는 글을 써 보려고 한다. 나의 3번째 회고록이며 소프트웨어 개발자로서 1년차의 회고록이다. 2018년 회고록 2019년 회고록 분기별 Highlight Q1 (1월 ~ 3월) 토스에서 Scraping Developer로 일을 열심히 했다. 진짜... 열심히 했다. 내가 했었던 일은 은행 및 카드사로부터 계좌나 거래내역과 같은 금융 정보들을 불러오는 과정(Scraping)을 하기 위한 회원가입/로그인 자동화 기능 개발 및 유지보수 였다. 쉽게 설명하면 고객들이 직접 일일이 해야 하는 작업들을 Puppeteer라는 Headless Chrome Browser 오픈소스 도구를 이용하여 자동화를 시켜주는 것이다. 신..

이번 포스팅에서는 RxJS에서 시간에 대한 개념을 정리해 보고자 한다. 왜 우리가 시간을 신경써야 하는지, RxJS에서는 시간을 어떻게 처리하는지 등에 대해서 알아보고자 한다. 앞서 우리가 살펴본 바에 따르면 옵저버블은 시간 경과에 따른 이벤트의 무한 시퀀스이다. 동기적인 코드라면 실행 시간을 정확하게 측정하여 예측할 수가 있지만 비동기는 명령들이 선형적으로 실행이 되지 않기 때문에 실행 시간을 정확하게 알 수 없고 예측은 더더욱 할 수가 없다. 따라서 특정 작업이 언제 완료될지를 추측하는 것이 아닌, 작업에 반응한다는 방식으로 접근해야 한다. 왜 시간을 신경써야 할까 시간을 신경써야 하는 이유는 단순하다. 시간이 오래 걸리면 사용자는 초조함을 느끼고 결국에는 떠난다. 따라서 우리는 시간을 최대한 단축할..

지난 포스팅에 이어서 이웅재님의 우아한 타입스크립트 세미나 2편을 정리해 보려고 한다. 이번 포스팅에서는 실전 타입스크립트 코드를 작성하는 측면에서 적용해볼 수 있는 부분들에 대해 알아본다. 1. Conditional Type 활용하기 Conditional Type이란 타입이 조건부로 적용되는 것을 의미한다. 타입 T를 제네릭 형태로 받는다. 예를 들면 아래의 예제 코드처럼 T가 string인 경우는 StringContainer로, T가 number이면 NumberContainer로 받을 수 있다. 이번에는 infer라는 키워드를 살펴보도록 하자. 조건부 타입에서 infer는 타입변수를 참조하기 위해서 사용이 된다. 프로미스의 제네릭은 보통 리턴타입을 의미한다. 아래의 예제는 Promise의 배열인 경우..