그리고 우리는 무엇을 준비해야 하는가 몇 년 전만 해도 프론트엔드 개발자의 경쟁력은 꽤 명확했습니다.React를 얼마나 잘 다루는지, 상태 관리를 얼마나 깔끔하게 하는지, CSS를 얼마나 정교하게 작성하는지가 곧 실력이었습니다.그런데 지금은 상황이 조금 다릅니다.같은 코드를 작성하는데도, 어떤 사람은 AI를 활용해 몇 분 만에 페이지를 만들고, 어떤 사람은 여전히 직접 모든 것을 구현합니다. 그리고 그 차이는 단순한 생산성 차이를 넘어, 개발 방식 자체의 차이로 벌어지고 있습니다.이 변화의 핵심은 하나의 문장으로 정리할 수 있습니다.이제 개발은 “코드를 잘 작성하는 것”이 아니라“코드가 잘 만들어지도록 환경을 설계하는 것”으로 이동하고 있다. 프롬프트에서 하네스까지: 무엇이 달라졌나AI를 활용한 개발은..

들어가며...리액트를 어느 정도 써본 사람은 useState, useEffect, props, 컴포넌트 분리 정도는 익숙하다. 하지만 면접이나 실무에서 진짜 중요한 건 근본에 대한 파악이라는 생각이 들었다! 예를 들어❓ “리액트는 왜 이런 구조를 선택했을까?”요런 궁금증... 그래서 이번 글에서는 리액트의 설계 철학 + 핵심 동작 원리를 중심으로 정리해보려고 한다. 1️⃣ 리액트는 왜 선언형 UI인가?명령형 UI (Imperative)button.addEventListener('click', () => { title.style.display = 'none'})“어떻게” 바뀌는지 직접 지시UI 상태가 많아질수록 관리가 어려움 선언형 UI (Declarative) {isVisible && }“무엇을 보여줄..

✅ 1. 브라우저 이벤트 전파 (Event Capturing & Bubbling)이벤트는 단순히 클릭 → 실행이 아니라 전파(Event Propagation) 과정을 거친다. ✔️ 이벤트 전파 3단계1️⃣ Capturing Phase이벤트가 상위 → 하위 요소로 내려감2️⃣ Target Phase실제 이벤트가 발생한 요소3️⃣ Bubbling Phase이벤트가 하위 → 상위 요소로 올라감 ✔️ event.target vs event.currentTargetul.addEventListener('click', e => { console.log(e.target) console.log(e.currentTarget)}) 속성의미target실제 클릭된 요소currentTarget이벤트 리스너가 달린 요소 ✔️ ..

✅ 1. 프로토타입(Prototype) 동작 원리JavaScript는 프로토타입 기반 언어이며 객체는 서로 연결된 체인(Prototype Chain) 을 통해 속성을 상속한다. ✔️ Prototype Chain const user = { name: 'lala' };user.toString(); // Object.prototype에서 찾음 찾는 속성이 객체에 없으면→ __proto__(부모 객체)→ 그 부모의 __proto__→ 최종적으로 Object.prototype 까지 탐색한다. ✔️ __proto__ vs prototype구분설명obj.__proto__객체가 실제로 참조하는 부모(prototype link)Function.prototype생성자 함수로부터 만들어질 객체의 부모 템플릿 면접에서 가장..

오늘은 단골 면접질문 4탄으로 돌아왔습니다! 바로 가보죠! ✅ 1. 실행 컨텍스트(Execution Context)JavaScript 코드가 실행될 때 스코프·변수·this·함수 선언 등을 관리하는 구조체.모든 JS 실행은 아래와 같은 흐름으로 진행됩니다. ✔️ 실행 컨텍스트 생성 단계1. Variable Environment (VE) 생성초기 변수 정보(var), 함수 선언 저장2. Lexical Environment (LE) 생성let/const 변수외부 스코프 참조environmentRecord + outerEnvironmentReference 로 구성3. this 바인딩 결정 ✔️ 실행 단계여기서 코드가 실제로 실행되며VE/LE에 저장된 변수들이 실제 값으로 초기화됩니다. ✔️ Lexical ..

오늘은 면접에서 자주 나오는 면접질문 3탄을 주제로 정리해보려고 합니다!특히 네트워크·브라우저·최적화 쪽에서 많이 나오는 질문들 위주로 작성 해보았습니다!✅ 1. CORS(Cross-Origin Resource Sharing)브라우저가 “다른 출처의 리소스 요청”을 기본적으로 제한하는 보안 정책입니다.✔️ 왜 존재할까?악성 사이트가 사용자의 인증 쿠키로 API 호출하는 것을 막기 위함→ 즉, 브라우저 보안 정책이지 서버·프레임워크 문제는 아님.✔️ 해결 방법서버에서 Access-Control-Allow-Origin 헤더 설정프록시 서버 활용 (Dev 환경에서 많이 사용)브라우저 extension(개발용), Nginx Proxy, Cloudflare 등을 통한 우회✔️ 면접 포인트CORS는 "요청이 막히는..