프론트엔드 공부 블로그 프론트엔드 공부 블로그

왜 이 작업이 필요했나?같은 코드를 Windows에서 실행하면 에러가 나고, macOS에서는 잘 되는 경우가 있다.특히 pnpm dev처럼 패키지 매니저를 통해 명령어를 실행할 때 이런 문제가 자주 생긴다. Pulsefolio 프로젝트에서도 두 가지 문제가 발생했다.Windows에서 pnpm dev 실행 시 프로세스 접근 거부 에러Windows PowerShell에서 한글이 깨지는 현상이 글에서는 이 두 문제를 어떻게 해결했는지 소개한다.문제 1 Windows에서 명령어가 실행 안 된다왜 생기는 문제인가?macOS나 Linux에서 pnpm dev를 실행하면 내부적으로 node_modules 안의 Next.js 파일이 직접 실행된다.Windows에서는 다르다. pnpm이 .CMD라는 Windows 전용 ..

## 2부 chapter 8. 모듈 패턴 JS에서의 모듈은 본질적으로 스코프, 클로저 기반으로 만들어진다.스코프와 클로저는 JS에서 변수 저장 및 코드 구조화 이해에 필수적이다.캡슐화와 최소 노출의 원칙 (POLE) - 캡슐화는 데이터, 함수를 묶어 배치해 공통화를 하는것.JS는 렉시컬 스코프 메커니즘을 통해 가시성을 제어한다.캡슐화 -> 코드 그룹화 & 공개하기 싫은 데이터에 접근을 선택적으로 제한위와 같은 노력들로 자연스레 코드를 체계화할 수 있다.공개/비공개 영역, 경계, 연결지점을 알면 소프트웨어 구축 및 유지보수가 쉬워진다.데이터의 과다 노출을 피해 코드 품질을 높일 수 있다. => 따라서 JS의 코드를 모듈화한다. 모듈 => 관련된 데이터, 함수(메서드)의 모음 // 또한, 공개 가능한 정보와..

AI 코딩 도구는 단순히 질문을 던지는 것만으로도 도움을 준다. 하지만 Claude Code는 조금 다르다.이 도구는 단순한 챗봇이 아니라프로젝트 환경에 맞게 설정할수록 더 강력해지는 “개발 에이전트”에 가깝다. 특히 다음 설정을 제대로 활용하면 생산성이 크게 올라간다.CLAUDE.md — 프로젝트 규칙 정의MCP (Model Context Protocol) — 외부 도구 연결Commands / Skills / Hooks — 반복 작업 자동화이 글에서는 Claude Code를 실무 개발에 맞게 설정하는 방법을 정리해보기로 했다. Claude Code의 핵심 개념Claude Code는 단순히 코드 생성만 하는 도구가 아니다.설정 파일과 플러그인을 통해 개발 환경 자체를 확장하는 구조다.대표적인 구성 요소는..

\n, \t 같은 이스케이프 시퀀스가 원하는 것과 다르게 처리돼서 당황한 적 있다면, 이 글이 도움 될 거다.1. String.raw()가 뭔가템플릿 리터럴 안에서 백슬래시(\)를 이스케이프 문자로 해석하지 않고, 문자 그대로 보존해주는 내장 태그 함수다.console.log(`C:\new\test`); // C: // ew est ← \n, \t가 이스케이프로 처리됨console.log(String.raw`C:\new\test`); // C:\new\test ← 그대로 나옴일반 템플릿 리터럴은 \n을 줄바꿈으로, \t를 탭으로 해석해버린다.String.raw를 태그로 붙이면 이 해석 과정을 건너뛰고 소스 코드에 적힌 그대로..

쿠키는 오래된 기술이지만, React SPA 환경에서는 생각보다 복잡한 문제를 만들어냅니다.로그인 직후 인증 상태가 안 잡힌다거나, 다른 탭에서 로그아웃했는데 현재 탭은 여전히 로그인 상태라거나, CORS 설정을 다 했는데 쿠키가 안 붙는다거나.이 글에서는 이런 상황들이 왜 발생하는지를 먼저 이해하고, 실무에서 쓸 수 있는 패턴들을 정리합니다.1. 쿠키 속성, 실무 관점으로 다시 읽기쿠키 속성은 MDN에서 다 볼 수 있지만, 실무에서 어떤 의미를 갖는지 짚고 넘어갑니다.HttpOnlySet-Cookie: token=abc123; HttpOnlyHttpOnly가 붙으면 JavaScript에서 document.cookie로 접근할 수 없습니다. 브라우저가 요청에 자동으로 포함시키기만 합니다.XSS 공격이 성..

localhost:3000 으로만 개발하고 있다면, 이 글을 읽고 나서 생각이 바뀔 수도 있어요. 1. 왜 가상호스트가 필요한가요?개발 초반에는 localhost:3000, 127.0.0.1:8080 같은 포트 기반 방식으로 충분하게 느껴져요. 그런데 프로젝트가 조금만 복잡해지면 생각지 못한 곳에서 문제가 생기기 시작해요.포트 기반 방식의 한계 쿠키 domain 분리가 안 돼요. localhost는 서브도메인을 지원하지 않아서, domain=.myapp.local 같은 방식으로 쿠키를 공유할 수가 없어요. CORS / SameSite 정책이 달라져요. 브라우저가 localhost를 특별하게 취급하는 경우가 있어서, 운영 환경에서 터지는 CORS 문제를 로컬에서 재현하기 어렵습니다. OAuth red..

같은 Claude Code를 쓰는데 생산성이 3배씩 차이 나는 이유는 ??엔지니어링 문화를 마크다운으로 배포하는 플러그인을 해부한다(이전에 작성했던 bkit 플러그인 글의 superpowers 버전입니다 !) 1. 왜 같은 AI를 써도 결과가 다를까 ??2026년 현재, 대부분의 개발자는 이미 Claude Code 같은 AI 에이전트를 활용하고 있다.함수 작성, 에러 수정, 리팩토링까지 — AI가 개발을 빠르게 만들어준다는 건 사실이다. 그런데 이상한 현상이 있다. 같은 AI를 쓰는데도 어떤 개발자는 생산성이 2~3배씩 올라가고, 어떤 개발자는 "그냥 조금 편해진 정도"에 머문다.💡 핵심 질문: 이 차이는 AI의 성능에서 오는가? 아니다. AI를 어떻게 사용하느냐에서 온다. 더 정확히는, AI에게 어..

결합도/응집도, 웹 서비스(SOAP/REST/WSDL/UDDI), EAI, UI 설계 원칙, SW 아키텍처 패턴, 제품 패키징(DRM/버전관리), 신기술 용어까지 한 번에 정리한다.1. 결합도 (Coupling) — 낮을수록 좋음모듈 간 상호 의존하는 정도. 낮을수록 독립성이 높아 좋은 설계.암기: 내공외제스자 (강 → 약)순위결합도설명1 (가장 강함)내용 (Content)한 모듈이 다른 모듈의 내부 기능·데이터를 직접 참조·수정2공통 (Common)전역 변수를 여러 모듈이 공유3외부 (External)외부에서 선언한 변수를 다른 모듈에서 참조4제어 (Control)제어 요소(flag, if 조건 등)를 다른 모듈에 전달5스탬프 (Stamp)배열·구조체 등 자료구조를 매개변수로 전달6 (가장 약함)자료 ..