샘플로 구축한 백엔드 API 서버의 화면을 구성할 리액트 프레임워크의 프로젝트 생성 및 구현을 통해 백엔드+프론트엔드 풀스택 개발을 빠르게 시작 할 수 있도록 가이드를 제공하고자 한다.
Table of Content
1. Why React? Vite?
1. React란?
React
•
Node.js 기반 프레임워크
•
컴포넌트 기반 프론트엔드 프레임워크
•
가상 DOM 구현체를 통한 빠른 데이터 바인딩 및 페이지 로딩
•
선언적 UI(컴포넌트 모듈)와 JSX(JavaScript 기반 XML) 직관적인 코드(객체지향)
2. Vite란?
Vite
•
3. React 기술을 선택한 근거
•
기술적 근거
◦
Node기반의 프레임워크
▪
Chrome 브라우저의 내장 엔진인 V8 엔진을 활용한 JavaScript 런타임환경으로 개발된 서버사이드 프레임워크인 Node.js를 기반으로 하기 때문에, 기본적인 성능적 이점을 가지고 있음
▪
Node.js의 방대한 커뮤니티
•
Node.js의
◦
컴포넌트 방식의 모듈화
▪
기존 JavaScript의 장점인 유연성과 모듈화를 통한 확장성을 그대로 사용 가능
▪
이전 프로젝트들의 정돈되지 않은 프로젝트 구조 및 컴포넌트 분리 등 구조적 문제를 정리
•
트렌드 지향적 근거
◦
글로벌 점유율
▪
JavaScript기반의 Node 개발자(백엔드)가 접근하기 쉬운 프론트엔드 프레임워크로 유명해짐
◦
HTML, JavaScript에 익숙한 기존 개발자들에게 컴포넌트식 프레임워크로 이전 접근성이 높음
◦
이후 TypeScript까지 지원하면서 타입언어의 장점과 객체지향 프로그래밍의 장점을 모두 사용 할 수 있음
2. NVM, Node, NPM 등 관련 용어 정리
1. NVM이란?
•
Node Version Manager
◦
◦
2. Node.js란?
•
3. NPM?
3. React+Vite 개발 환경 구축
1. NVM 설치 및 Node.js 설치
2. NPM을 통한 라이브러리 설치
3. 실행 명령어 등 정리
4. React의 동작 방식과 프로젝트 구조 살펴보기
1. 기본 프로젝트 소스코드를 통한 리액트 동작 방식
2. 기본 프로젝트 구조를 통한 리액트 프로젝트 구조와 관례
Related Posts
Search
