반응형 Front-End/React8 Shadcn UI 리뷰: 리액트 생태계의 새로운 패러다임 https://ui.shadcn.com/ Build your component library - shadcn/uiA set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.ui.shadcn.com 리액트 개발의 새 바람, Shadcn UI의 부상최근 프론트엔드 개발 커뮤니티에서 가장 뜨거운 화제로 떠오른 Shadcn UI는 기존 UI 라이브러리들의 패러다임을 완전히 바꾸어 놓고 있습니다. 기존 React 컴포넌트 라이브러리들과 달리, Shadcn UI는 "라이브러리가 아닌 컴포넌트 모음(not a lib.. 2025. 3. 2. T3 Stack에서 Websocket 동시 적용하기 들어가며T3는 타입스크립트 기반으로 NextJS, tRPC, tailwind 등의 주요 라이브러리들을 사전에 조합해서 풀스택 웹 앱을 만들 수 있게 해주는 개발 툴킷이다.현대 웹 프레임워크는 Front-End와 Back-End가 분리되어 구성된 형태가 표준으로 자리잡았다.그러나 빠르게 MVP를 출시해야 하는 스타트업이나 소규모 개발팀에서는 Front와 Back을 나누는 행위 자체가 번거로울 때가 있다.MAU가 많지 않고, 비즈니스 로직이 복잡하지 않는데 프로그램 구조를 표준에 맞추다보니 오히려 개발 공수가 늘어난다.이러한 문제를 해결하기 위해 일부 타입스크립트 개발자들을 중심으로 풀스택 어플리케이션을 구현하는 움직임이 생겼다.여기서 말하는 풀스택은 레거시라 불리는 JSP / SRPING의 디자인 패턴이 .. 2025. 2. 23. CRA vs Vite: React 개발 환경의 새로운 패러다임 들어가며React 애플리케이션을 시작할 때 개발자들이 가장 먼저 마주치는 선택지 중 하나는 바로 개발 환경 설정입니다. 오랫동안 Create React App(CRA)은 React 프로젝트의 표준으로 쓰였지만 2020년 이후 Vite라는 강력한 대안이 등장하면서, 많은 개발자들이 Vite로 전환하고 있습니다. 이 글에서는 두 도구의 차이점을 심도 있게 살펴보고, Vite가 제공하는 이점들을 상세히 알아보겠습니다.Create React App (CRA)의 특징1. 작동 방식webpack을 기반으로 동작전체 애플리케이션을 번들링한 후 개발 서버 구동Hot Module Replacement(HMR)를 위해 전체 번들을 다시 빌드2. 장점안정적이고 검증된 도구React 생태계와의 완벽한 통합복잡한 설정 없이 바.. 2025. 2. 10. React의 useEffect 훅과 사이드 이펙트 알아보기 React의 useEffect와 사이드 이펙트 이해하기React 애플리케이션을 개발하다 보면 컴포넌트 내에서 데이터 페칭, DOM 조작, 구독(subscription) 설정 등 다양한 사이드 이펙트를 다뤄야 할 때가 있습니다. 오늘은 React의 useEffect 훅을 통해 이러한 사이드 이펙트를 어떻게 효과적으로 관리할 수 있는지 알아보겠습니다.사이드 이펙트란?사이드 이펙트는 컴포넌트의 렌더링 과정에서 발생하는 순수하지 않은 동작들을 의미합니다. 예를 들면:API 호출DOM 직접 조작브라우저 API (localStorage, setTimeout 등) 사용구독 설정 및 해제이러한 작업들은 컴포넌트의 렌더링에 직접적인 영향을 미치지 않지만 애플리케이션의 동작에 필수적인 요소들입니다.useEffect 개요와.. 2025. 2. 8. React 컴포넌트 구현 방식 비교: 화살표 함수 vs 일반 함수 React 컴포넌트를 작성할 때 우리는 크게 두 가지 함수 선언 방식을 사용할 수 있습니다: 화살표 함수(Arrow Function)와 일반 함수 선언(Function Declaration). 이 두 방식의 차이점과 각각의 장단점을 자세히 살펴보겠습니다.1. 문법적 차이일반 함수 선언 방식function Greeting(props) { return 안녕하세요, {props.name}님!;}// 또는 함수 표현식으로도 가능const Greeting = function(props) { return 안녕하세요, {props.name}님!;};화살표 함수 방식const Greeting = (props) => { return 안녕하세요, {props.name}님!;};// 더 간단한 형태로도 가능const .. 2025. 2. 7. 고찰: useState가 배열을 반환하는 이유 useStates는 왜 배열을 반환하는가?React의 useState 훅은 상태 관리의 핵심 메커니즘입니다. 독특하게도 useState는 서로 다른 배열을 반환합니다. 왜 이렇게 디자인 되었는지 근본적인 이유를 탐구해보겠습니다.Map을 사용하지 않는 이유useState는 왜 서로 관련이 없는 두 개의 값이 있는 배열을 반환할까요? 자바스크립트는 파이썬의 tuple처럼 서로 다른 값을 나이스하게 결합할 수 없습니다.그렇기에 map을 사용하면 훌륭하게 문제를 해결할 수 있을 것 같습니다.모던 자바스크립트 문법에서는 구조분해를 활용해 객체를 배열하는 방법을 즐겨씁니다.리액트 컴포넌트에 props을 전달할 때도 구조분해를 활용하여 객체를 전달합니다.function button({name, color}){ re.. 2025. 2. 1. 이전 1 2 다음
