백고등어 개발 블로그

브라우저가 어떻게 웹페이지를 화면에 그리는지 아는 것은 프론트엔드 개발자에게 정말 중요해요. 성능 최적화를 하려면 브라우저의 내부 동작을 이해해야 하거든요. 복잡해 보이지만 차근차근 따라가면 그리 어렵지 않아요.전체 렌더링 과정1. 브라우저 렌더링 과정을 순서대로 설명해주세요. HTML 문서를 받으면 파싱해서 DOM 트리를 만들어요. 동시에 CSS를 파싱해서 CSSOM 트리를 만들죠. 이 둘을 합쳐서 렌더 트리를 생성하고, 각 요소의 위치와 크기를 계산하는 레이아웃 단계를 거쳐요. 마지막으로 화면에 실제로 그리는 페인트 단계와 여러 레이어를 합치는 컴포지트 단계를 진행합니다.2. DOM과 렌더 트리의 차이점은? DOM은 HTML 문서의 모든 요소를 트리 구조로 나타낸 것이고, 렌더 트리는 실제로 화면에 ..

Next.js는 React 기반의 풀스택 프레임워크로, 최근 많은 회사에서 도입하고 있어요. SSR, SSG 같은 고급 기능들 때문에 면접에서도 자주 다뤄지는 주제입니다. 실무에서 정말 중요한 Next.js 개념들을 정리해봤어요.Next.js 기본 개념1. Next.js가 무엇이고 왜 사용하나요? React를 기반으로 한 풀스택 웹 프레임워크예요. 서버사이드 렌더링, 정적 사이트 생성, API 라우트, 파일 기반 라우팅 등을 제공해요. 마치 React라는 기본 재료에 여러 가지 편리한 도구들을 미리 준비해둔 요리 세트와 같아요.2. SSR과 CSR의 차이점은? CSR(Client-Side Rendering)은 브라우저에서 JavaScript로 화면을 그리는 방식이고, SSR(Server-Side Rend..

React는 현재 프론트엔드 개발에서 가장 인기 있는 라이브러리 중 하나예요. 거의 모든 회사에서 React 관련 질문을 물어보죠. 실무에서 정말 중요한 React 개념들을 질문과 답변 형식으로 정리해봤습니다.React 기본 개념1. React가 무엇이고 왜 사용하나요? React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리예요. 컴포넌트 기반으로 개발할 수 있어서 코드 재사용성이 높고, Virtual DOM을 사용해서 성능도 좋아요. 마치 레고 블록처럼 작은 조각들을 조합해서 큰 화면을 만드는 방식이라고 생각하시면 됩니다.2. Virtual DOM이 무엇이고 왜 빠른가요? 실제 DOM을 JavaScript 객체로 표현한 것이 Virtual DOM이에요. 상태가 변경되면 새로운 Vir..

대규모 트래픽 처리는 백엔드 개발자의 핵심 역량입니다. "사용자가 1000만 명이라면?", "초당 10만 건의 요청이 온다면?" 같은 질문에 체계적으로 답변할 수 있어야 해요. 실제 시스템 설계 경험을 바탕으로 핵심 포인트들을 정리해보겠습니다.1. 대규모 시스템 설계 시 가장 먼저 고려해야 할 것은 무엇인가요?답변: 가장 중요한 것은 요구사항을 명확히 하는 것입니다. 대규모라는 게 구체적으로 어느 정도인지, 어떤 종류의 트래픽인지 파악해야 해요.트래픽 특성 파악이 첫 번째입니다. 읽기 중심인지 쓰기 중심인지에 따라 설계가 완전히 달라져요. 예를 들어 유튜브는 읽기가 99%라서 CDN과 캐싱에 집중하지만, 은행 시스템은 쓰기 정확성이 더 중요하죠.데이터 규모와 성장률도 중요합니다. 현재 1TB인 데이터가 ..

프론트엔드 개발자 면접을 준비하고 계신가요? 수많은 회사를 거쳐온 개발자들과 면접관들이 입을 모아 말하는 "이것만은 꼭 알아야 한다"는 질문들을 정리해봤습니다. 마치 요리를 할 때 기본 재료가 있듯이, 프론트엔드 면접에도 반드시 나오는 기본 질문들이 있어요.HTML/CSS 기초 질문1. DOCTYPE이 무엇이고 왜 필요한가요? HTML 문서의 맨 위에 선언하는 것으로, 브라우저에게 "이 문서는 HTML5로 작성되었어요"라고 알려주는 역할입니다. 마치 편지 봉투에 받는 사람 주소를 적는 것처럼 필수적이죠.2. 시맨틱 태그를 사용하는 이유는? 와 만 쓰는 것보다 , , , 같은 의미있는 태그를 쓰면 검색엔진도 이해하기 쉽고, 스크린 리더 같은 보조 기술도 내용을 더 잘 파악할 수 있어요.3. CSS Box..