코딩하는 곰돌이

⚛️ 프레임워크 심화 개념: 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 — 분산된 원자 그래프 ..

FLOW-3D 교량 세굴 3D 대시보드수치해석 결과를 브라우저에서 직접 탐색하는 WebGL 기반 시각화 플랫폼.하상 변화, 유체장, 교각 안전도를 단일 시간축으로 동기화합니다.Three.js 0.169TypeScript StrictVite 5VitestDocker + NginxZero UI Framework109TypeScript 모듈17단위 테스트 스위트80K최대 유체 포인트1updateAtTime(t) 규약목차왜 이 프로젝트인가시스템 아키텍처핵심 설계: 단일 시간축 규약Three.js 렌더링 코어데이터 레이어: 합성 · Manifest · CSV시각화 모듈 딥다이브대용량 CSV 스트리밍 파이프라인UI & 인터랙션인프라 & CI/CD성능 & 운영 고려사항마치며1. 왜 이 프로젝트인가교량 세굴(Bridg..

Q.자바스크립트는 어떤 언어인가요? A. 자바스크립트는 하나의 콜스택을 갖는 단일 스레드 기반 언어이자 동적인 언어입니다. Q.자바스크립트가 유동적인 언어인 이유는 무엇인가요? A. 객체기반 언어로써 동적으로 프로퍼티를 추가하거나 삭제 할수있고 프로퍼티에 함수를 할당하는 것도 가능하며, 상태 변경을 최소화하고, 높은 재사용성과 모듈화가 가능하다는 특징이 있습니다. Q.웹 브라우저에 www.naver.com 을 입력하면 일어나는 일 A. 1. 사용자가 웹 브라우저를 통해 url을 입력하면 브라우저는 로컬 캐시에서 해당 url에 대한 최근 저장된 IP 주소가 있는지 확인한다. 2. 요청한 url이 캐시에 없으면, DNS 서버에 도메인 네임의 IP 주소를 찾기위해 검색을 요청한다. 3. IP 주소가 확인되면 ..

관리 포탈 연계 작업으로 인해로그인을 통합 관리 포탈에서 진행하고, DT 플랫폼에서는 로그인을 하지 않는 방식으로 변경 하기로 했다. 기존 url이localhost:8000/ 이였다면localhost:8000/dtmap 이 들어가고 /dtmap 뒤에 accessToken과 refreshToken 값을 받아오는 형태의 url로 바뀔 예정이다. ex)localhost:8000/dtmap/?accessToken=aToken&refreshToken=rToken 이런 식이다. router 설정하는 작업은 처음이라 조금 헤맸다..구글에 검색해 보니 routes에 /dtmap/* 이렇게 paht를 설정해주면 된다고 해서 /dtmap/*도 해보고 /dtmap/temp (경로 고정)을 해봐도 안 되는 것이였다. Chat..

안녕하세요🖐🏻 코딩 알려주는 형입니다.오늘은 리액트(React)의 특징과 장·단점에 대해 알아보겠습니다.👀리액트(React)란? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다.Facebook이 관리하며, 단일 페이지 애플리케이션(SPA) 개발에 자주 사용된다. 리액트(React)의 특징 1. 컴포넌트 기반 아키텍처2. props & state3. 가상 DOM(Virtual DOM)4. JSX(Javascript XML) * 컴포넌트 기반 아키텍처 React의 컴포넌트 기반 아키텍처는 이 라이브러리의 가장 큰 특징 중 하나이다.컴포넌트는 자신만의 UI와 기능을 담당하는 재사용 가능한 코드 객체이며 크게 두 가지 종류가 있다. 클래스 컴포..