본문 바로가기

배울 것은 정말 많아 🚨/프론트엔드 [ Frontend ] 🎨3

React 폴더 구조 정하는 방법(FSD 아키텍처) 프런트엔드 애플리케이션이 점점 복잡해지면서, 코드의 유지보수성과 확장성을 높이는 아키텍처 패턴이 중요해지고 있습니다. 그중 하나가 Feature-Sliced Design(FSD) 아키텍처입니다. 이번 포스팅에서는 FSD 아키텍처의 개념과 구조, 그리고 적용 방법에 대해 알아보겠습니다.[ 엔카코 ]1. FSD 아키텍처란?Feature-Sliced Design(FSD)는 프런트엔드 애플리케이션을 보다 체계적으로 구성하기 위해 만들어진 아키텍처입니다. 주요 목표는 다음과 같습니다:코드의 가독성 및 유지보수성 향상기능(feature) 단위로 코드를 분리하여 관리유연성과 확장성을 높이는 구조 제공FSD는 애플리케이션을 크게 레이어(Layer), 슬라이스(Slice), 세그먼트(Segment) 3가지 요소로 구분합.. 2025. 2. 2.

React + Vite 번들링으로 빠르게 설치하는 방법 React를 시작할 때 속도가 느려 고민이신가요? 이번 포스팅에서는 React 프로젝트를 Vite로 빠르게 설치하고 설정하는 방법을 알려드리겠습니다. Vite는 경량화된 번들러로, 빠른 개발 환경을 제공하며 복잡한 설정 없이도 React를 간편하게 실행할 수 있습니다.[ 엔카코 ]1. Vite란 무엇인가요?Vite는 “빠르다”는 의미를 가진 프랑스어 단어에서 유래했으며, JavaScript와 TypeScript 개발을 위한 차세대 빌드 도구입니다. Vite는 기존 번들러와 달리 다음과 같은 특징을 제공합니다.빠른 서버 시작: Vite는 ES 모듈을 활용하여 기존의 번들링 과정 없이 개발 서버를 즉시 실행합니다.빠른 HMR(Hot Module Replacement): 코드 변경 사항을 실시간으로 반영합니다.. 2025. 1. 26.

리액트 React 프로젝트 설치 후 로컬서버 실행하는 방법 React는 최신 웹 애플리케이션 개발에서 널리 사용되는 JavaScript 라이브러리로, 사용자 인터페이스를 효율적으로 구축할 수 있습니다. 이 글에서는 React 프로젝트를 설치하고 로컬 서버를 실행하는 방법을 단계별로 쉽게 설명합니다.[ 엔카코 ]1. React Extension Pack 설치하기 - VS Code의 Extension 탭에서 "React Extension Pack"을 검색하여 설치합니다. 이 확장팩은 React 개발에 유용한 도구들을 포함하고 있어 코드 작성과 디버깅을 더욱 효율적으로 만들어줍니다. 2. Node.js, npm, npx 버전 확인하기 - React 프로젝트를 실행하려면 Node.js와 npm이 필수입니다. 아래 명령어로 현재 설치된 버전을 확인해 필요한 환경이 .. 2025. 1. 24.

이전 1 다음

티스토리툴바