React + Vite 프로젝트를 개발하던 중, 다음과 같이 이미지 경로를 설정했다.개발 서버(localhost)에서는 이미지가 정상 표시됐다.프로덕션 빌드(배포)에서는 이미지가 표시되지 않고 404가 발생했다.로컬에서는 됐지만, 배포 환경에서 경로가 깨지는 현상이 있

TypeScript에서 빈 객체를 타입으로 표현할 때 가장 흔히 사용되는 표기는 {}이다.그러나 {}는 겉보기와 달리, 실제로는 빈 객체를 정확히 표현하는 타입이 아니다.이 글에서는 {}와 Record<string, never>의 차이점을 정리하고,정확하게 빈 객

TypeScript는 개발자에게 강력한 타입 시스템을 제공하지만, 겉으로 보기에 비슷한 여러 선언문들 때문에 혼동을 느끼기 쉽다. 특히 React와 같은 프레임워크를 사용하다 보면, 이러한 미묘한 차이를 제대로 이해하지 못해 런타임 오류, 타입 누락, 심지어는 불필요한

ComitChu 프로젝트에서는 GitHub 기반의 소셜 로그인을 OAuth 2.0 방식으로 구현했다.React + Spring Boot 기반 SPA 구조이며, 로그인 흐름은 Authorization Code Grant 방식에 따라 구성했다.이 글에서는 실제 프론트 코

– 프론트엔드 개발자의 입장에서 이해하는 CORS 이슈와 해결법웹 개발을 하다 보면, 다음과 같은 에러를 종종 마주친다.프론트에선 API 호출도 했고, 백엔드에서도 응답을 보내줬는데…“아니, 응답은 있는데 왜 못 쓰게 하는 건데?”처음엔 너무 억울하다. 그래서 이번 글

ComitChu는 GitHub 커밋 활동을 기반으로 펫이 진화하는 재미있는 웹 서비스다. 서비스가 점점 커지면서 공통 UI 요소를 효율적으로 관리하는 구조의 필요성을 절감했고, 이를 해결하기 위해 버튼과 입력창을 컴포넌트화(원자화) 하는 작업을 진행했다.초기 코드베이스

1부에서는 React 프로젝트에서 아이콘을 사용하는 다양한 방법을 다뤘다.(SVG 인라인 삽입, SVG 파일 import, react-icons 설치 방식 등)이번 2부에서는 복사한 SVG 아이콘을 실전에서 재사용 가능하게 컴포넌트화하고,props로 제어 가능한 구조로

React 프로젝트를 진행할 때 아이콘은 사용자 인터페이스의 완성도를 높여주는 중요한 구성 요소다. 버튼, 입력창, 네비게이션 등 다양한 곳에서 기능을 직관적으로 전달하기 위해 아이콘을 자주 활용하게 된다. 이 글에서는 React에서 아이콘을 사용하는 주요 방법 4가

다국어를 지원하는 웹 서비스를 만들기 위해 i18n을 적용했다.React 기반 프로젝트에서 react-i18next를 이용해 간단하게 다국어 지원을 설정할 수 있다.이번 글에서는 국제화(i18n)의 개념부터 적용 과정까지 차근차근 정리한다.i18n은 Internatio

"분명 CSS는 적용됐는데 빨간 줄이 계속 뜬다… 왜 그럴까?"React 프로젝트를 TypeScript로 개발하다 보면, CSS Modules를 사용할 때 이런 경험을 한 번쯤 하게 됩니다.스타일은 잘 적용되는데, VSCode에서는 계속 빨간 밑줄이 그어지고 빌드 시

React 애플리케이션을 만들다 보면, 여러 컴포넌트에서 비슷한 로직이 반복되는 경우가 많다.예를 들어 입력 값 제어, 타이머 관리, 로컬 스토리지 접근, API 상태 관리 등은 다양한 컴포넌트에서 공유되는 공통된 패턴이다.React는 이러한 로직을 커스텀 Hook(C

useState와 useEffect는 렌더링 흐름을 중심으로 상태와 사이드 이펙트를 관리한다. 하지만 렌더링과 무관하게 값을 기억하거나, DOM을 직접 조작해야 하는 순간도 있다. 이럴 때 React는 useRef라는 훅을 제공한다.이번 글에서는 useRef의 기본 개

React 함수형 컴포넌트는 깔끔하지만, UI 외의 작업(예: API 호출, 이벤트 등록, 타이머 설정 등)을 어디서 처리해야 할까? 클래스 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 등을

React는 클래스형 컴포넌트에서 함수형 컴포넌트 중심으로 구조가 변화하면서, Hook이라는 개념을 도입했다. 그중에서도 useState는 가장 기초적이면서도 자주 사용되는 Hook으로, 컴포넌트 내부에 상태(state)를 선언하고 조작할 수 있게 해준다. 이 글에서

Next.js 루트 구조 완벽 정리 (App Router 기준) Next.js를 처음 접하거나, 최신 버전(App Router)을 사용하려고 할 때 프로젝트 루트 구조를 이해하는 건 정말 중요합니다. 이번 글에서는 Next.js 기본 디렉터리 구조를 App Route

포트폴리오가 중요한 이유 프론트엔드 개발자는 사용자가 직접 접하는 UI/UX를 구현하는 역할을 담당한다. 따라서 기술 역량뿐만 아니라 디자인 감각, 사용자 중심의 사고, 최신 트렌드 반영 능력 등을 증명하는 것이 중요하다. 이를 효과적으로 보여줄 수 있는 것이 바로

개요 프로젝트 진행중에 중복클릭이 가능하여 같은 폼을 여러번 보내는 문제가 발생했다. 개발자도구에서 network throttling을 3g로 걸어주니 서버에 호출을 받기까지 시간이 2초정도 걸리더라... 이렇게 개발자가 의도하지 않은 동작을 막기위해 isLoading

Portal이란? React의 Portal은 특정 컴포넌트를 부모 컴포넌트의 DOM 계층 구조가 아니라, 지정된 DOM 노드에 렌더링할 수 있도록 도와주는 기능이다. 기본적으로 React는 컴포넌트 트리 구조를 따라 렌더링되지만, Portal을 사용하면 부모 컴포넌트의

1. 중요한 데이터는 state에 담자 위 코드에서 useState를 통해 데이터를 받아와서 '글제목'에 값을 넣는다. 이런 식으로 변수를 사용하지 않고 state를 사용해서 자료를 저장할 수 있다. let [글제목, b] = useState('남자 코트 추천')에서 b가 뭐지?? useState()를 쓰면 그 자리에 [데이터1, 데이터2] 이렇게 생긴...

1. HTML의 class사용 다음과 같이 스타일을 주기 위한 class명을 넣을 때 className을 사용해야한다. 왜냐하면 jsx파일에서 class는 선언으로 쓰이기 때문이다. 2. 변수를 HTML에 넣기 다음과 같이 중괄호{}를 통해 변수를 넣어줄 수 있다.