Search for a command to run...
Series
프론트엔드 개발과 관련된 개념, 기술, 그리고 고민했던 문제들과 해결 과정들을 기록합니다.
이번 포스팅에서는 라우팅을 직접 구현하면서 마주한 문제들과, 이를 해결해가는 사고의 흐름을 정리해보고자 한다. 🧭 목표 SPA에서 a 태그나 URL 이동을 했을 때 페이지 새로고침 없이,적절한 화면(UI)만 바꿔주는 라우팅을 직접 구현한다. 1️⃣ 문제 정의 보통 페이지 전환을 어떻게 구현하지..? 기존 MPA 방식: 브라우저 + 서버가 페이지와 라우팅을 처리 URL 해석: 브라우저가 경로를 보고 서버에 요청 라우팅 로직: 서버가 요...
"npm vs yarn vs pnpm vs yarn PnP… 도대체 뭐가 다른 거지?" 이 글에서는 패키지 매니저의 흐름과 변화를 따라가며,npm → Yarn Classic → pnpm → Yarn Berry (PnP, Zero-install)까지각 방식이 어떤 원리로 동작하고, 어떤 장단점이 있는지 정리하였습니다. 1. 왜 패키지 매니저가 필요할까? 우리는 프로젝트를 만들 때 보통 모든 코드를 직접 다 구현하지 않습니다.예를 들어 웹앱을 만...
🔎왜 모듈 시스템이 필요했을까? ESM이 도입되기 전에는 브라우저 자체 “모듈 시스템”이 없었습니다. 즉, 파일을 나누어도 모든 스크립트가 하나의 전역 스코프를 공유했기 때문에 다음과 같은 문제들이 발생했습니다: 전역 변수 충돌의 위험 스크립트 로드 순서에 따라 에러 발생 가능 의존성 관리가 수작업 예를 들어 다음과 같은 코드가 있다고 해보겠습니다: <!-- index.html --> <script src="jquery.js"></s...
1️⃣유령 의존성이란? package.json에 명시되어 있지 않지만, 코드에서 사용되고 있는 외부 의존성. 실제로는 다른 의존성의 하위 의존성으로 설치되어 있어서 작동함 직접 설치하지 않았기 때문에 예상치 못한 오류나 의존성 충돌의 원인이 될 수 있음 1. package.json에 lodash 없음 { "dependencies": { "react": "^18.2.0" } } 2. 코드에서 lodash 사용 impor...
웹 개발을 하다 보면 브라우저 저장소를 자주 쓰게 됩니다. 쿠키 / 로컬 스토리지 / 세션 스토리지 는 다 브라우저가 제공하는 “클라이언트 저장소”지만, 각 저장소마다 가지고 있는 특징 / 용량 / 보안성이 달라서 목적에 맞게 올바르게 선택해야 합니다. 1️⃣ 로컬 스토리지 (localStorage) 특징: 데이터가 영구적으로 저장됩니다. 사용자가 직접 지우지 않는 이상, 컴퓨터를 껐다 켜도 그대로 남아있습니다. 용량: 도메인당 약 5MB...
Chat (ctrl + L , ctrl + i) : “대화하며 질문/설명 받기” Agent Mode → 내가 직접 코드 수정/생성을 요청할 때 Ask Mode → 내가 직접 질문/개념 설명 받고 싶을 때 Background Agent → 내가 뭘 안 물어봐도, 코드 흐름을 계속 지켜보다가 자동으로 도움을 주는 역할 백그라운드에서 설명이나 개선안을 미리 띄워줌. 자잘한 boilerplate 코드 자동 작성. 참고) Background...