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

백엔드 API와 프론트엔드가 커뮤니케이션할 때, 수동으로 타입·클라이언트 코드를 만드는 건 이제 너무 비효율이다.그래서 등장한 것이 OpenAPI 스펙(OpenAPI/Swagger) 기반 코드 생성 도구다.이런 도구들은 OpenAPI 스펙을 읽어서…타입 정의 자동 생성fetch/axios 기반 API 호출 함수 생성React Query/SWR 훅 생성Mock 데이터/테스트 코드 생성까지 해준다 !즉 API 계약(contract)을 코드로 직결시키는 워크플로우를 만든다.이번 글에서는 그런 도구 중에서 대표적이고 커뮤니티 논의도 활발한 3개를 골라서 정리했다. 1️⃣ Orval — “생산성 최우선 OpenAPI TS 생성기”공식 --> https://orval.dev/Github Stars / NPM 인기 ..

### 파트 2 - chapter 5 변수의 비밀 생명주기 변수 선언 위치에 따른 작동 방식의 차이와 사용 여부스코프 아래에 있더라도, 스코프 시작 부분에서 변수의 가시성이 확보된다 -> 호이스팅function 함수 선언문의 경우 고유 특성인 함수 호이스팅이 있다.함수 선언문으로 함수가 선언되면, 함수 이름에 해당하는 식별자가 스코프 최상단에 선언되고, 함수 참조로 해당 값이 자동 초기화 됨따라서 함수 선언문은 스코프 내 어디서든 호출 가능함수 선언문 및 var를 사용한 선언 변수의 호이스팅 -> 이름 식별자가 블록 스코프가 아니라, 가장 가까운 함수 스코프에 등록됨 (함수 스코프가 없으면 전역 스코프) 함수 표현식에서는 함수 호이스팅이 적용되지 않음var로 선언한 변수는 호이스팅도 되고 여기에 더해서 ..

디버깅은 짜증나는 작업이고, 긴급 대응이고, 원인을 못 찾으면 막막하고 답답하기도 하다.하지만 많은 저명한 개발자들이 공통적으로 말하는 것이 있다.디버깅을 잘하는 개발자는 기능을 만드는 것보다 문제를 추적하는 과정에서 더 발전한다.Brian Kernighan 은 아래와 같이 말했다고 한다.“코드를 이해하는 것보다 디버깅하는 것이 더 어렵다.그러므로 디버깅할 수 있을 만큼 이해할 수 있도록 코드를 작성해야 한다.”즉 디버깅 능력 = 단순 기술이 아니라 소프트웨어를 다루는 철학이다. 이번 글에서는 FE 개발을 하고 있는 나의 관점에서 React 및 JS 웹개발의 디버깅 방법들에 대해서 좀 정리해보려고 한다. console.log — 여전히 가장 빠른, 가장 저렴한 디버깅콘솔 로그는 구식이라고 느껴지지만, 여..

### 파트 2 - chapter 4 전역 스코프 최신 JS 프로그램에서는 대부분 코드를 전역이 아닌 함수/모듈에 작성한다다만, 렉시컬 스코프를 이해하고 전역 스코프에 접근하며 사용할 줄 아는 것도 중요하다여러 파일로 분리된 JS 파일을 JS 엔진은 어떻게 실행 시점에 하나로 연결시키는가? (브라우저 기준)ES 모듈을 사용하면, 파일을 각자 하나씩 로딩함. 로딩 후 import 문으로 다른 모듈을 참조하며 이때 스코프는 공유 X 배타적으로 협력함구축 과정에 번들러가 관여하는 경우, 파일 전체가 하나로 합쳐져 브라우저및 JS엔진에 전달된다. 브라우저 및 JS 엔진은 하나의 거대한 JS 파일만 처리한다. 이 경우엔 파일 내 코드 조각끼리 참조할 때 사용할 이름 등록 등 메커니즘이 추가로 필요해진다.번들러는 ..

개발을 한 지 꽤 되었는데도 “릴리즈 관리”는 막상 손대기 어려운 영역이었다.로컬에선 잘 돌아가는데, 배포는 또 다른 세계고…PR 만들고 Merge하고, 태그 달고, 배포 트리거하고, 버전 올리고, changelog 갱신하고… 심지어 SemVer(시맨틱 버전), 릴리즈 태그 전략, GitHub Release, CI/CD 파이프라인, semantic-release, rollback 전략까지 알아두면 좋지만, 이걸 한 번에 배운 적은 없었다. 그래서 이번 기회에 한 번 제대로 정리해보려고 한다. (흐름 위주로 !) 릴리즈 관리란 결국 뭐냐한 줄로 말하면 이런 것 같다.코드를 안정적으로 사용자에게 전달하기 위한 버전·변경·배포 흐름을 관리하는 것 이를 좀 더 실무스럽게 풀면어떤 기능이 언제 릴리즈되었는지 흔적..

### 파트 2 - chapter 3 스코프 체인 스코프와 중첩 스코프 사이에 맺어진 연결 -> 스코프 체인변수 접근 시 스코프 체인을 기반으로 변수를 찾는데, 위/밖으로만 찾음렉시컬 스코프는 컴파일 초기에 확정 -> 런타임에서는 이미 정해진 렉시컬 스코프를 활용하여 변수를 탐색한다런타임에 찾지 않기에, 효율적 👽다만, 런타임에 다른 프로그램이 변수를 전역에 선언할 가능성 등이 있기에, 런타임 도중에 스코프가 정해지는 경우도 있다따라서 완전히 확정되는 것은 런타임중이긴 함 이름은 같은 두 개의 변수가 하나의 스코프에 동시에 존재할 수는 없다같은 이름의 변수를 굳이 사용하고자 한다면, 스코프를 분리해야 한다변수를 찾는 순서는 현재 위치부터 위로 올라가기에, 동일한 이름의 변수가 지역, 전역에 모두 있는 ..

브라우저에서 DOM 요소의 내부 HTML을 바꿀 때 우리는 보통 element.innerHTML = ... 이런 식으로 써왔다.그런데 이 방식은 XSS(크로스사이트스크립팅) 공격에 취약하고, 문자열 그대로 HTML을 넣다 보니 예기치 않은 태그나 속성이 들어올 수 있다.요즘은 이 문제를 해결하기 위해 실험 단계지만 setHTML()이라는 메서드가 등장했다!이 메서드는 HTML 문자열을 파싱하고, XSS나 잘못된 요소는 자동으로 제거한 뒤 요소의 서브트리로 넣어준다는 역할을 한다고 공식 문서가 말한다.즉 “HTML 문자열을 안전하게 넣기"를 위한 새로운 메서드이다. 사용법기본 문법element.setHTML(inputString);element.setHTML(inputString, { sanitizer: ..

VS Code + GitHub Copilot과 함께 써보는 최신 워크플로우요즘 웹 개발은 코드만 짜는 걸로 끝나지 않는다.런타임에서 실제로 무슨 일이 벌어지는지 — 네트워크 요청이 어떻게 오가는지, 렌더링 병목이 어디서 생기는지 — 이런 걸 함께 봐야 진짜 디버깅이라고 할 수 있다.그런데 이제는 이런 과정을 AI와 함께 자동화할 수 있는 시대가 왔다 !! 🙊Chrome DevTools MCP를 사용하면 되는데,이 글에서는 MCP가 뭐고, VS Code + Copilot 환경에서 어떻게 쓸 수 있는지, 그리고 실제 예제까지 한번 해보기로 했다. Chrome DevTools MCP가 뭐길래?MCP (Model Context Protocol)은 AI 모델이 외부 도구나 데이터랑 직접 상호작용할 수 있게 해주..