Tools
Claude Code 완전 정복 1편 — 무엇이고, Mac에 설치해서 첫 작업까지
Claude Code가 일반 AI 채팅과 무엇이 다른지, Mac에 설치하고 로그인해서 첫 작업을 해 보는 과정, 권한 모드와 꼭 알아야 할 명령어까지 공식 문서 기준으로 정리합니다.
#claude code#ai#cli#macos
Tools
AI란 무엇이고, 어떻게 써야 제대로 쓰는 걸까
AI, 머신러닝, 딥러닝, LLM이 어떤 관계인지 정리하고, 대화형 AI가 답을 만드는 방식과 그 때문에 생기는 한계(환각, 학습 시점), 그리고 결과를 좋게 만드는 다섯 가지 사용법과 개발할 때 쓰는 요령을 다룹니다.
#ai#llm#생성형 ai#프롬프트
Frontend
Fetch API의 abort signal, 네트워크 요청을 똑똑하게 관리하는 방법
Fetch API와 AbortController, AbortSignal을 활용하여 네트워크 요청을 효과적으로 취소하고 관리하는 패턴을 알아봅니다. 컴포넌트 생명주기 연동, 사용자 액션 기반 취소, 타임아웃 구현까지 실전 예제와 함께 설명합니다.
#fetch#abortcontroller#비동기#네트워크
Design
CSS Custom Properties, 테마 전환과 동적 스타일링의 핵심으로 거듭나다
CSS Custom Properties를 활용한 테마 전환 및 동적 스타일링 심화 활용법을 JavaScript 없이 CSS만으로 테마를 변경하는 방법과 사용자의 입력에 반응하는 동적 스타일링 예제를 통해 설명합니다. 브라우저 호환성, 변수 이름 짓기, JavaScript 연동 등 실전 팁도 포함합니다.
#css#custom properties#variables#theming#dynamic styling
TypeScript
TypeScript의 Union과 Intersection 타입: 복잡한 데이터 구조, 이렇게 다뤄보세요
TypeScript의 Union 타입과 Intersection 타입은 복잡한 데이터 구조를 다루는 데 필수적인 도구입니다. 이 글에서는 두 타입의 기본 개념과 함께, 실제 프론트엔드 개발 시나리오에서 어떻게 활용할 수 있는지 예시 코드를 통해 자세히 설명합니다. API 응답 처리, 이벤트 핸들링, 상태 관리 등 다양한 상황에서의 적용 방법을 익혀 타입 안전성을 높여보세요.
#typescript#types#union types#intersection types
Tools
Vite의 HMR, 어떻게 빠르게 변화를 감지할까?
Vite의 HMR이 어떻게 빠른 속도를 제공하는지, 네이티브 ES Modules와 `import.meta.hot` API를 중심으로 동작 원리를 파헤칩니다. 개발 생산성 향상의 비밀을 알아보세요.
#vite#hmr#hot module replacement#개발 서버#성능
React
React Server Components와 Client Components, 어떻게 데이터를 주고받을까? (상호작용 패턴 분석)
React Server Components와 Client Components 간의 데이터 흐름과 상호작용 패턴을 Props, Server Actions, 콜백 함수, 동적 임포트 등 실제 코드 예시와 함께 분석하여 효율적인 React 애플리케이션 구축 방법을 제시합니다.
#react#server components#client components#상호작용#패턴
Frontend
Custom Elements: 네이티브 UI 구축의 핵심, 재사용 가능한 컴포넌트 만들기
JavaScript만으로 네이티브 HTML 요소처럼 동작하는 재사용 가능한 UI 컴포넌트를 구축하는 Web Components 표준 기술, Custom Elements에 대해 알아봅니다. 기본 개념부터 생명주기 콜백, 활용법, 장단점까지 상세히 설명합니다.
#web components#custom elements#네이티브#ui 구축