React (12) 썸네일형 리스트형 [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}`; → 화살표 함수는 더 짧은 문법을 제공하며, 익명 함수로 사용.. [React]🔑배열의 index를 key로 사용하면 안되는 이유 0. 들어가면서React에서 리스트를 렌더링할 때, key props는 필수입니다. 많은 초보 개발자들이 편의상 index를 key로 사용하곤 하는데요, 사실 이것은 예기치 못한 버그의 원인이 될 수 있습니다. 저도 여러 프로젝트를 진행하면서 분명 리스트의 순서가 제 의도와는 맞지 않게 변경되거나리렌더링되는 현상을 경험한 적이 있습니다. 이번 포스팅에서는 왜 index를 key로 사용하면 안 되는지, 어떤 문제가 발생할 수 있는지, 그리고 어떤 대안을 사용하는 것이 좋은지를 정리해보겠습니다. 1. 🔑 key란 무엇인가?React는 리스트를 렌더링할 때 각 요소를 효율적으로 추적하고 업데이트하기 위해 key라는 고유한 식별자가 필요합니다.key를 통해 어떤 요소가 변경되었고, 추가되었으며, 제거되었는.. [JavaScript]💡3. 비동기 처리의 핵심, Promise와 async/await 0. 들어가면서비동기 프로그래밍은 현대 웹 개발에서 필수적인 개념입니다. 얼마 전 포스팅에서도 뉴스 리스트 페이지를 개발하며 마주쳤던 문제인 비동기 제어 처리를 하는 법에 대해 포스팅 했지만 이번엔 온전히 그 개념만을 살펴보도록 하겠습니다. JavaScript에서 비동기 처리를 다루는 대표적인 방식으로 Promise와 async/await.이번 포스팅에서는 이 두 개념을 비교하고, 어떻게 활용하는 것이 좋은지 알아보겠습니다. 1. Promise란?Promise는 비동기 작업을 처리할 때 사용하는 JavaScript 객체로, 성공 또는 실패 상태를 갖습니다. ✅ Promise의 특징대기(pending) → 성공(fulfilled) → 실패(rejected) 의 3가지 상태를 가짐.then(), .cat.. [React]📘2. Virtual DOM(가상 돔)이란? 0. 들어가면서이전 포스팅에서 DOM에 대해 공부했다. 그러면 자연스럽게 떠오르는 것은 React에서 사용하는 가상 돔(Virtual DOM)이다. 그래서 이번 포스팅에서는 가상 돔에 대해 알아보고 공부해보는 시간을 가져보겠다. 1. Virtual DOM의 개념Virtual DOM(가상 DOM)은 실제 DOM의 가벼운 사본변경 사항을 Virtual DOM에서 먼저 계산한 후, 실제 DOM에 최소한의 변경만 적용React 등 최신 프레임워크에서 성능 최적화를 위해 활용 2. Virtual DOM이 필요한 이유2.1 실제 DOM의 성능 문제DOM 변경 시 리플로우(Reflow) 와 리페인트(Repaint) 가 발생하여 성능 저하요소가 많아질수록 브라우저가 다시 렌더링하는 부담이 커짐 2.2 Virtu.. 이전 1 2 다음