코딩하는 곰돌이

🌍 웹 기초 지식 완전 정리"프레임워크는 몇 년마다 바뀌지만, 브라우저와 네트워크의 기본 원리는 변하지 않는다."프론트엔드 면접에서는 프레임워크 지식만큼이나 웹의 근본 동작 원리를 자주 묻습니다. 이 글에서는 URL 입력부터 화면 렌더링까지의 전체 과정을 정리합니다.📌 목차브라우저에 URL을 입력하면 일어나는 일렌더링 과정: Critical Rendering Path리플로우 vs 리페인트HTTP/HTTPS와 캐싱CORS브라우저 저장소 비교1️⃣ 브라우저에 URL을 입력하면 일어나는 일면접 단골 질문입니다. 전체 흐름을 단계별로 정리하면:1. URL 파싱2. DNS 조회 (도메인 → IP 주소)3. TCP 연결 (3-way Handshake)4. TLS 핸드셰이크 (HTTPS인 경우)5. HTTP 요청..

⚛️ 프레임워크 심화 개념: React & Vue 면접 대비"라이브러리 사용법을 아는 것과, 왜 그렇게 설계되었는지 아는 것은 전혀 다른 레벨의 이해다."React와 Vue를 단순히 "쓸 줄 아는" 수준을 넘어, 면접에서는 내부 동작 원리를 묻는 경우가 많습니다. 이 글에서는 두 프레임워크의 핵심 개념을 정리합니다.📌 목차가상 DOM과 재조정(Reconciliation)React: Hooks의 동작 원리React: 렌더링 최적화Vue: 반응성 시스템React vs Vue 비교상태 관리의 흐름1️⃣ 가상 DOM과 재조정(Reconciliation)실제 DOM 조작은 비용이 큽니다. React/Vue는 **가상 DOM(Virtual DOM)**이라는 메모리상의 가벼운 객체를 먼저 비교한 뒤, 변경된 부분만..

FRONTEND · ASYNC JAVASCRIPT 콜백 지옥에서 벗어나기 비동기 작업 세 개만 순서대로 이어붙여도 코드가 오른쪽으로 계단처럼 밀려나는 경험, 다들 한 번쯤 해보셨을 거예요. 이 삼각형이 왜 생기는지, 그리고 Promise와 async/await가 정확히 무엇을 바꿔서 이 문제를 풀었는지 코드로 따라가 볼게요. 콜백 지옥이란 비동기 작업 A가 끝나야 B를 시작할 수 있고, B가 끝나야 C를 시작할 수 있다면 어떻게 될까요. 콜백 기반 API는 "일이 끝나면 실행해줘"를 함수로 넘기는 방식이라, 다음 작업이 이전 작업의 콜백 안에 중첩될 수밖에 없어요. 단계가 늘어날수록 ..

FRONTEND · REACT React Hook — 함수 컴포넌트 이해하기 함수 컴포넌트는 렌더링할 때마다 처음부터 다시 실행되는 순수 함수예요. 그런데 상태를 기억하고, 부수 효과를 관리하고, 생명주기를 다뤄야 한다면? 그 다리 역할을 하는 게 Hook이에요. "왜 이렇게 동작하는가"를 중심으로 짚어볼게요. 함수 컴포넌트는 원래 기억력이 없다 함수 컴포넌트를 이해하는 가장 빠른 방법은, 매 렌더링마다 그 함수 전체가 처음부터 다시 호출된다는 사실을 받아들이는 거예요. 일반 자바스크립트 함수라면 지역 변수는 함수가 끝나는 순간 사라져요. 컴포넌트도 마찬가지예요. function Count..

FRONTEND · BROWSER RENDERING Reflow는 왜 느릴까 "레이아웃 계산이 무겁다"는 말은 자주 듣지만, 정확히 무엇이 느린 건지는 은근히 설명하기 어려워요. 렌더링 파이프라인을 따라가면서 Reflow가 왜 다른 단계보다 비싼지, 그리고 왜 코드 한 줄이 수십 개의 요소를 다시 계산하게 만드는지 짚어볼게요. 렌더링 파이프라인 먼저 브라우저는 DOM이 바뀔 때마다 5단계를 거쳐 화면을 다시 그려요. 이 중 어디서부터 다시 실행하느냐가 성능을 가릅니다. DOM 변경 요소 추가·삭제·수정 ..

FRONTEND · TOOLING npm, Yarn, pnpm — 같은 package.json, 다른 node_modules 셋 다 npm install 한 줄로 끝나는 것처럼 보이지만, 그 뒤에서 파일을 디스크에 어떻게 놓느냐가 완전히 달라요. 이 차이가 설치 속도, 디스크 사용량, "왜 되던 게 갑자기 안 되지"의 원인이 됩니다. 구조부터가 다르다 세 도구 모두 package.json과 lockfile이라는 같은 인터페이스를 쓰지만, 실제로 node_modules를 채우는 방식은 완전히 다른 세 가지 전략이에요. NPM 평면 구조(flat) 모든 ..

FRONTEND · STATE MANAGEMENT Store 하나로 갈 것인가, Atom들로 쪼갤 것인가 Redux와 Recoil은 둘 다 "리액트 상태를 컴포넌트 밖으로 꺼낸다"는 같은 문제를 풀지만, 접근 방식은 정반대예요. 하나는 중앙 창고, 하나는 흩어진 원자. 실무에서 부딪히는 차이를 코드로 짚어볼게요. READING · 12 MIN LEVEL · INTERMEDIATE TOPIC · REACT STATE REDUX — 단방향 파이프라인 RECOIL — 분산된 원자 그래프 ..

cesium-gaussian-splatting 이슈 & 트러블슈팅 기록CesiumJS 위에 Gaussian Splatting을 통합하는 과정에서 실제로 겪었던 문제, 원인 분석, 적용한 해결책을 정리한 문서입니다.관련 문서: [project-technical-learning.md](./project-technical-learning.md), [gaussian-splatting-review.md](./gaussian-splatting-review.md)목차요약: 이슈 분류렌더링 & 좌표계배치 & 정합 (Alignment)라이브러리 통합빌드 & 배포운영 중 자주 겪는 증상미해결 / 구조적 한계디버깅 체크리스트1. 요약: 이슈 분류#증상원인해결 상태1splat이 떨리거나(jitter) 가우시안 위치가 어긋남E..

cesium-gaussian-splatting 기술 학습 노트CesiumJS 위에 3D Gaussian Splatting을 오버레이하는 실험 프로젝트를 분석·학습한 내용을 정리한 문서입니다.3DGS 이론의 심층 리뷰는 [gaussian-splatting-review.md](./gaussian-splatting-review.md)를 참고하세요.1. 프로젝트 개요1.1 목적지구 규모 3D 지도(CesiumJS) 위에 실사 기반 3D Gaussian Splatting 모델을 배치해, 특정 경·위도 위치에서 스캔한 공간을 지형·건물과 함께 볼 수 있는지 검증하는 PoC(Proof of Concept)입니다.데모 (GitHub Pages)원본 아이디어: tebben/cesium-gaussian-splatting1..

ml-sharp 트러블슈팅 내역Apple의 오픈소스 프로젝트 [ml-sharp](https://github.com/apple/ml-sharp)(Sharp Monocular View Synthesis)를 Windows 환경에서 직접 실행하면서 겪은 이슈와 해결 과정을 정리한 문서입니다.작성자: HYEONWOO대상 저장소: apple/ml-sharp (main 브랜치, base commit 1eaa046)실행 환경: Windows 10/11 (win32 10.0.22631), PowerShell주요 사용 CLI: sharp predict, sharp render참고: 아래 이슈들은 코드 기준(src/sharp/cli/predict.py, src/sharp/cli/render.py, src/sharp/util..