리액트 시작하기-vite이용, 환경설정

우선 node.js는 지난번에 설치해놓음. https://nodejs.org/en

npm 명령어로 vite를 사용할 것임. https://ko.vite.dev/guide/ 홈페이지에서 시작하기 문서를 읽어보자.

 

node.js와 vite의 간략한 설명은 아래와 같다.

Node.js

JavaScript를 브라우저 환경이 아닌 서버 환경에서도 실행할 수 있도록 해주는 런타임 환경. 일반적으로 서버 개발, 명령줄 도구 제작, 파일 시스템 작업 등에 사용됨

Vite

웹 개발을 위한 차세대 프론트엔드 빌드 도구, 빠른 개발 환경 설정과 빌드를 제공함. 특히 개발 서버의 속도가 빠르고, 최신 브라우저를 지원함.

 

Node.js와 Vite의 관계

Vite는 Node.js 환경에서 실행되며, Vite의 설치와 실행을 위해 Node.js와 npm이 필요하다. Node.js는 Vite의 개발 서버와 빌드 과정을 지원하며, Vite를 통해 빠르고 효율적인 프론트엔드 개발 환경을 제공한다.

 

1. 우선 프로젝트 폴더에가서 

보통 vs코드로 터미널을 키고? 홈페이지에 나와있는 아래 코드로 새 프로젝트를 생성한다.

npm create vite@latest

그러면 추가파일 설치에서 엔터누르고,

프로젝트명 입력

그리고 사용할 프레임워크,, 리액트! 선택해준다. 언어는 타입스크립트를 선택.

 

cd 플젝명으로 작업폴더에 들어가서 npm install(또는 npm i) 명령어로 패키지들을 설치해준다.

프로젝트 폴더에서 npm run dev로 실행시키면 잘 실행되는 걸 확인할 수 있다.

폴더구조는 이렇게 생겼는데 

Vue, Svelt, 리액트, 앵귤러 이런 라이브러리, 프레임워크들은 SPA(Single Page Application)구조이기 때문에 index.html 단일 파일이고

index.html에 있는 root div에 코드들이 렌더링된다.

 

---

플러그인, 확장팩

ES7+ React/Redux/React-Native snippets 설치

 

그리고 터미널에서 추가로 설치해줄 것

API 통신 위해

npm install axios

그리고? 리액트 중앙집중식 상태관리 라이브러리인 recoil 설치

npm install recoil

 

그리고 스타일링에 필요한 컴파일러로 SASS, SCSS도 설치.

 

• SASS: 들여쓰기 기반 문법.
• SCSS: CSS와 유사한 문법, 더 많이 사용됨.
• 공통점: 변수, 중첩, 믹스인 등 강력한 기능 제공. (SCSS가 SASS의 업그레이드된 문법)

npm install -D sass

 

페이지 전환을 위한 리액트 라우터도 설치.

npm install react-router-dom localforage match-sorter sortby

옵션도 추가적으로 달아줬는데, 역할은 아래와 같다. (로컬스토리지 등등 사용할 예정)

라이브러리	설명
react-router-dom	React에서 라우팅을 처리하는 라이브러리로, SPA(Single Page Application)에서 페이지 이동을 구현
localforage	브라우저에서 데이터를 로컬에 저장할 수 있도록 돕는 비동기 데이터 저장 라이브러리. IndexedDB, WebSQL, localStorage를 활용
match-sorter	문자열을 검색 키워드에 따라 필터링하고 정렬하는 유틸리티 라이브러리로, 대소문자 무시 및 부분 일치 검색을 지원
sort-by	객체 배열을 키 값에 따라 간단히 정렬할 수 있는 가벼운 유틸리티 라이브러리

그다음 타입스크립트에서 node.js 모듈을 쓰기위한 환경 구축.

npm install @types/node

그리고.. 리액트 토스트 UI를 보여줄 수 있게

npm install react-simple-toasts

(리액트 토스트는 리액트에서 간단하게 Toast 메시지를 표시할 수 있도록 도와주는 라이브러리)

 

모듈들 설치가 끝났고...

어떤 모듈 설치했는지 까먹지 않게 README.md에 저장해둠,,

 

---

alias 및 설정파일

vite.config.ts 파일에 코드를 간결하게 사용할 수 있도록 alias설정

alias는 기호가 어떤 코드를 나타내는지 직접 설정할 수 있음

이렇게 작성했다면 @키워드는 ./src로 src폴더에 접근하는 것과 같은 의미.

각각 해당 폴더에 접근할 수 있도록 더 써주고,

 

CSS 스타일링 코드를 기본적인 CSS가 아니고 SCSS 사용할 것임

전역적으로 사용되는 CSS 스타일링 코드 적어서 관리해줌

각 컴포넌트마다 스타일 파일을 개별적으로 import하지 않아도 되도록함.

그리고 main.scss 파일에 프로젝트 전반에 걸쳐 공통적으로 사용되는 스타일(예: 변수, 믹스인, 함수, 기본 스타일 등)을 정의해서 사용

 

tsconfig.app.json

에서 alias설정했던 부분을 추가해줌.

 

 

npm run dev로 실행시켜보면 이렇게 기본화면이 나오는데

마지막으로 안 쓰는 기본 파일들을 삭제해줌

index.css

App.css

main.tsx에서도 해당부분 삭제

 

마지막으로 App.tsx에 있는 내용을 모두 지우고

rfce 치면 기본코드 나오도록 스니펫 사용.

이렇게 기본적인 셋팅을 맞췄다아ㅏ

 

 

보고 있는 강의

https://youtu.be/Yv5tSNr4h2c?si=R8-UYyjZuI6SGDjN