분류 전체보기 (28) 썸네일형 리스트형 🔗 API 통신 타입, 이렇게 정의하면 실무에서 편해진다 (React + TypeScript + Axios) 들어가면서 React + TypeScript에서 API를 다룰 때, 가장 흔히 생기는 문제는 다음과 같다:res.data가 어떤 구조인지 매번 console.log로 확인해야 함백엔드에서 응답 구조 바뀌면 알아채지 못함반복되는 response.data.foo.bar.baz에 타입 없음에러 처리할 때 구조가 다 달라 혼란이 문제는 "타입 안전한 API 응답 구조 정의" 로 상당 부분 해결할 수 있다.이번 포스팅에서는 Axios 기반 실무 코드에서 사용하는 API 타입 설계 패턴을 알아보고자 한다. ✅ 1. 기본적인 Axios 응답 타입 지정interface User { id: number; name: string; email: string;}axios.get('/api/user/1').then((.. 🧩 Props에 타입 주는 법 완전 정리 (React + TypeScript) 들어가면서 React 컴포넌트를 만들 때 가장 기본이자 중요한 부분은 Props를 제대로 타입 지정하는 것이다.이전 포스팅에 이어지는 내용으로,이번 포스팅에서는 실무에서도 자주 쓰이는 패턴을 중심으로, children, optional, default 값 처리까지 깔끔하게 정리해보겠다. ✅ 1. 기본적인 Props 타입 지정type ButtonProps = { label: string; onClick: () => void;};function Button({ label, onClick }: ButtonProps) { return {label};} type 또는 interface로 Props 정의 가능함수형 컴포넌트에 인자로 구조분해하여 사용 ✅ 2. Optional Props (선택적으로 받을 수 .. 🧠 useState에 타입 주는 가장 깔끔한 패턴 정리 (React + TypeScript) 들어가면서React에서 useState를 사용할 때, 타입을 어떻게 줘야 가장 안정적이고 깔끔할까?처음 TS를 쓰기 시작하면 헷갈리는 부분 중 하나인데, 이번 포스팅에서는 다양한 상황에 맞는 useState 타입 선언 패턴을 정리해보겠다. ✅ 1. 기본 타입 (number, string, boolean)const [count, setCount] = useState(0);const [name, setName] = useState('홍길동');const [isLoading, setIsLoading] = useState(false);useState에 초깃값만 넣으면 자동 추론되기도 하지만, 명시하는 게 더 안전할 때도 있음 (초깃값이 null일 때 등) ✅ 2. 유니언 타입 (string 또는 null)co.. [React] 📁 프로젝트 폴더 구조, 어떻게 구성해야 할까? 🧭 들어가며React 프로젝트가 점점 커지면 파일과 컴포넌트가 어지럽게 섞여 유지보수가 어려워집니다.“기능별로 나눌까?”, “컴포넌트는 어디에 두지?”, “hooks, utils는 또 어디에?”이 글에서는 실무와 사이드 프로젝트 모두에 적용할 수 있는 깔끔한 폴더 구조 예시와 이유를 공유합니다. ※ 실무 경험은 없지만 현업에 계신 선배들의 조언과 제가 프로젝트를 하면서 경험한 것들과서치 등을 활용하여 종합적으로 정리한 내용이므로 주관적인 견해가 들어간 점 양해주셔서 참고 정도로만해주시고 본인들의 상황에 맞게 정하시면 좋을 것 같습니다. 🧱 기본 구조 예시src/├── assets/ # 이미지, 폰트, 정적 파일├── components/ # 재사용 가능한 UI 컴포넌트├─.. 🐻 React + Zustand로 간단하고 가벼운 전역 상태 관리하기 🧭 들어가며React 프로젝트를 하다 보면 props drilling을 피하고 전역에서 상태를 관리할 필요가 생깁니다.하지만 Redux는 너무 무겁고, Context API는 비동기 처리나 구조가 복잡한 경우엔 번거롭습니다.그럴 때 대안으로 떠오르는 게 바로 Zustand입니다. Zustand는 “곰”이라는 뜻의 독일어로, React에서 가볍고 직관적인 전역 상태 관리 솔루션이에요. 여러 프로젝트를 진행하다 보면 기능 구현과, UI 디자인을 우선으로 개발하다 보니 어떤 상태관리 라이브러리를 사용할지 고민 하기보다, 무지성으로 Redux만을 사용하곤 했습니다.하지만 최근 졸업 롤링 페이퍼 플랫폼 프로젝트를 진행할 때 Zustand를 처음으로 프로젝트에 사용하였습니다. 사용 해본 결과는 진작 애용할걸 이라.. 🚀 React 19 프리뷰: useFormState, useActionState 등 새 훅 분석 🧭 들어가며작년 12월에, React 19는 드디어 공식 프리뷰(알파)를 통해 여러 신기능들을 공개했습니다.그중에서도 특히 주목할 만한 기능은 폼 상태 처리와 서버 액션에 대한 새로운 접근 방식입니다. 서버와 클라이언트가 자연스럽게 협업할 수 있도록 만들어주는 훅,바로 useFormState, useFormStatus, useActionState입니다. 이번 글에서는 이 새로운 훅들이 어떤 문제를 해결해주는지,그리고 어떻게 사용할 수 있는지를 예제와 함께 살펴보도록 하겠습니다. 🎯 기존의 문제점: React에서 폼을 다룰 때 생기는 일들React에서는 일반적으로 폼 상태를 이렇게 다룹니다:useState로 입력값을 관리하고onChange, onSubmit으로 이벤트를 제어하며서버 요청은 fet.. [React]🔥React Server Components(RSC)의 등장과 미래 0. 들어가며React는 2013년 등장 이후, 프론트엔드 개발 방식에 큰 변화를 가져왔습니다.하지만 사용자 경험과 성능을 동시에 챙기기란 여전히 쉽지 않았습니다. **React Server Components(이하 RSC)**는 바로 이 문제를 해결하기 위해 등장했습니다. 서버에서 렌더링되는 컴포넌트를 도입함으로써, 클라이언트의 부담은 줄이고 성능은 극대화할 수 있도록 돕는 혁신적인 기능입니다. ❓1. RSC란 무엇인가?RSC는 서버에서 실행되는 React 컴포넌트입니다.클라이언트로 전송되지 않고, 서버에서만 렌더링되어 HTML로 변환된 후 브라우저로 전달됩니다.기존 CSR(Component Side Rendering): 모든 코드를 브라우저로 전송 → 번들 사이즈 ↑기존 SSR(Server Si.. [JavaScript]🔍화살표 함수(Arrow Function) vs function 키워드 차이점 0. 들어가면서JavaScript에는 함수를 선언하는 여러 가지 방법이 있지만,가장 자주 비교되는 두 가지는 바로 function 키워드와 화살표 함수입니다. 이번 포스트에서는 이 둘의 차이점, 언제 어떤 것을 사용해야 하는지, 그리고 주의할 점을 정리해보겠습니다. 1. 기본 문법 차이// function 키워드function sayHello(name) { return `Hello, ${name}`;}// 화살표 함수const sayHello = (name) => { return `Hello, ${name}`;};// 화살표 함수의 축약형 (한 줄 리턴일 때)const sayHello = name => `Hello, ${name}`; → 화살표 함수는 더 짧은 문법을 제공하며, 익명 함수로 사용.. 이전 1 2 3 4 다음