vite로 리액트 프로젝트 시작하기(리액트 공부 재개)

회사에서 공공 si 프로젝트를 계속하다보니 리액트를 공부할 필요성을 못느껴 맛만보고 접었었는데

갑자기 나를 사기업 si에 보내겠단다. 일단 사용 기술은 ts, react, nextJs가 되겠다.

 

우선 내가 써놓은 글을 봤는데 거진 3년이 되가는 글이다보니 기억도 잘 안나고 기술 자체도 많이 변했을 테니

기본 개념만 가져가고 새로 공부를 시작하기로 했다.

 

일단 전체적인 기능들을 훑으며 써봤는데 전체적으로 느낀점은

아무래도 스프링 자바 위주로 개발을 해왔던 나에겐 굉장히 어색한 코딩방식이라는 것이다.

프론트는 그냥 회사에서 가져온 솔루션 갖다가 딸깍딸깍했었는데

직접 프론트 화면을 구현해보니 얼마나 백엔드랑 방식이 다른지 알겠다.

컴포넌트화 및 state와 props가 작동하는 방식이 객체지향프로그래밍과 다른 느낌이다.

 

그래서 다시한번 찬찬히 리액트 기능들을 돌려보며 내가 막연히 느낀점을 글로 정리해보려한다.

 

어쨌든 react 프로젝트를 시작하기 위해서는 node.js를 설치해야한다.

 

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

 

버전은 기본 세팅되어있는 버전을 추천한다.

위의 링크에서 본인의 환경에 맞는 방식으로 Node.js를 설치하되 Current 버전은 본인이 버그테스터가 되고싶지 않다면 지양하도록 하자. 그냥 사이트 접속했을 때 세팅되어있는 버전으로 받으면 웬만하면 문제가 없다.

 

node.js 환경을 구축했다면 이제 vscode의 터미널을 켜 간단하게 react 프로젝트를 생성할 수 있다. 이게 가능한게 vite(참고로 비트라고 읽는다. 왜 vite가 아닌가 궁금했는데 프랑스어라 veet에 가까운 발음이라고 한다.) 덕분인데 vite에 대한 자세한 정보가 궁금하다면 아래 링크를 참조하면 된다.

https://ko.vite.dev/guide/

Vite

 

vite는 nodeJs환경에서 이용가능하므로 nodeJs를 설치했다면 vscode를 켜 react프로젝트를 생성할 폴더를 연 뒤 터미널에서 간단한 명령어(npm create vite@latest)와 함께 프로젝트를 시작할 수 있다.

npm create vite@latest /** 프로젝트명 */

프로젝트 명이 project-exam인 경우

그리고 프레임워크를 React로 선택하고 나머지는 그냥 기본 값으로 엔터를 쳐서 선택하면 아래와 같이 프로젝트가 생성된다.

 

 

프로젝트가 생성되었다면 프로젝트 vscode에서 폴더를 열어 터미널에 npm run dev를 실행하면 해당 프로젝트의 앱 서버가 실행되고 터미널의 Local 주소에 접속하면 현재 실행중인 앱을 확인할 수있다.

우측 화면과같은 화면이 나오면 됨