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

배포할 때마다 이런 고민을 해본 적이 있을 거다.지금 고친 게 patch인지 minor인지, 팀원마다 기준이 달라서 PR에서 논쟁이 벌어진다.CHANGELOG.md는 매번 "다음에 정리하자"고 미루다가 결국 아무도 안 쓴다.버전 태그를 깜빡하고 npm publish부터 눌러서 배포 이력이 꼬인다. 결국 "누가 배포하느냐"에 따라 릴리즈 품질이 달라진다.이 모든 걸 커밋 메시지 하나로 자동화해주는 도구가 semantic-release다.GitHub에서 24k개 이상의 star를 받고 있고, 지금도 활발히 유지보수되고 있는 프로젝트다. 이 글에서는 semantic-release가 어떤 문제를 해결하는지, 실제로 어떻게 동작하는지, 그리고 GitHub Actions에 연동해서 배포까지 자동화하는 방법을 정리한..

1. 네이티브 래퍼란 무엇인가?여러분이 React로 멋진 웹앱을 하나 만들었다고 가정해봅시다. 그런데 클라이언트가 갑자기 이런 말을 합니다."그거 앱스토어에도 올려주실 수 있나요? 아이폰이랑 안드로이드 둘 다요."순간 머릿속에 Swift, Kotlin, Xcode, Android Studio가 스쳐 지나갑니다. 패닉이 오기 시작하죠.바로 이때 네이티브 래퍼(Native Wrapper) 가 구원자로 등장합니다.네이티브 래퍼란, 기존 웹 코드를 iOS·Android 네이티브 앱의 껍데기 안에 넣어주는 도구입니다. 내부적으로는 WebView라는 내장 브라우저를 띄우고, 그 안에서 여러분의 웹앱이 실행됩니다. 마치 앱처럼 보이지만, 실제로는 웹 페이지가 돌아가는 거죠.2. Capacitor의 동작 원리Capac..

"파일 업로드가 왜 이렇게 복잡하지?" — 모든 FE 개발자가 한 번쯤 했을 생각 들어가며회원가입 폼에 프로필 이미지를 추가하거나, 게시글에 여러 첨부파일을 붙이는 기능을 구현할 때 우리는 multipart/form-data를 마주하게 됩니다. 단순히 을 붙이고 FormData를 던지면 되는 것 같지만, 실제 서비스 환경에서는 생각보다 많은 함정이 있습니다.이 글에서는 multipart의 개념부터 시작해서 실전 FE 구현 패턴, 자주 하는 실수, 그리고 UX 최적화까지 다뤄보겠습니다.1. Multipart란 무엇인가?HTTP는 기본적으로 텍스트 기반 프로토콜입니다. 그런데 이미지나 동영상 같은 바이너리 데이터를 텍스트 필드(예: username, email)와 함께 하나의 요청에 담아 보내려면 어떻게 해..

버튼 클릭 핸들러를 만들다 보면 가끔 이런 상황을 마주친다.분석 로그에 클릭 수가 이상하게 많이 찍힌다. button.click()으로 트리거한 테스트 코드가 실제 브라우저 동작과 다르게 움직인다.클립보드 복사나 전체화면 요청이 어떤 코드 경로에서는 되고, 어떤 경로에서는 조용히 막힌다.이 문제들의 공통 원인은 하나다. 브라우저는 "사람이 직접 한 행동"과 "코드가 흉내 낸 행동"을 서로 다르게 취급한다.이 글에서는 그 둘을 구분하는 표준 방법인 event.isTrusted와, 조금 더 넓은 개념인 User Activation API를 정리한다. (이전에 한번 공부했었는데, 다시 좀 더 알아보았다)event.isTrusted — 가장 기본적인 구분자DOM 이벤트에는 isTrusted라는 읽기 전용 프로퍼..

왜 이 작업이 필요했나?같은 코드를 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를 태그로 붙이면 이 해석 과정을 건너뛰고 소스 코드에 적힌 그대로..