요즘 채용공고에 WebPack와 같은 번들러를 이용한 개발 환경 설정 경험이 자격 요건으로 올라와 있는 것을 자주 보게되었습니다. 궁금했지만 미뤄오던 React 개발 환경 셀프 세팅을 시작하였습니다. 개발 시작 처음부터 cra(create react app)를 통해 편하게 리액트 개발을 해온지라 초기 개발환경 설정은 간단하지만 어떤 프로젝트냐에따라 하나하나 설정할 것이 많다는 것을 알게되었고 이론으로만 듣던 프로젝트가 무겁다는 말이 무엇을 의미하는 지 새삼 느끼게되었습니다. 해당 글에서는 Vite React를 이용해 Socket.io로 간단한 채팅앱을 만들어보려합니다.
해야할 일은 아래와 같습니다.
ToDos ✏️
- Vite React TypeScript 설정하기
- App.tsx 파일 vite 서버로 실행하기
- 프로젝트에 맞는 CSS 설정하기
- socket.io를 이용한 채팅 만들기
0. 시작 전 준비사항
React 프로젝트를 시작하기전 우리의 컴퓨터에는 node.js와 npm또는 yarn이 필요합니다. 필자는 node v 22.13.0 기준으로 해당 프로젝트를 시작하였습니다. 해당 글을 빠르게 vite react로 최소한의 개발 환경 설정을 위한 스크립트 위주로 작성되었습니다.
완료된 프로젝트 보일러플레이트 보러가기 >> https://github.com/devchaeyoung/vite-chat-app
1. 프로젝트 생성하기
원하는 위치에 프로젝트 폴더 생성 후 개인이 쓰고 있는 IDE로 프로젝트 폴더를 열어줍니다. ( 해당 프로젝트는 Visual Studio Code 기준으로 작성되었습니다. )
cd <원하는 위치>
mkdir vite-react-app
cd vite-react-app
code .2. 프로젝트 초기 설정하기
각자 쓰는 패키지에 맞춰 프로젝트에 맞게 초기화를 합니다.
yarn initnpm일 경우
npm init프로젝트 폴더에 package.json이 설치된 것을 확인할 수 있습니다.
3. DevDependence로 react typeScript 설정하기
react TypeScript를 설정을 원하는 경우 해당 명령어를 그대로 입력하시면 됩니다.
yarn add -D vite
yarn add -D typescript @types/react @types/react-dom;
yarn add react react-dom4. 폴더 구조 잡기 및 package.json에 서버 실행 스크립트 추가하기
- 파일 트리(폴더 구조) : 각자 프로젝트에 맞춰 파일트리를 잡아줍니다.
- package.json
{
"name": "vite-react-chat-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "vite"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@types/react": "^19.0.3",
"@types/react-dom": "^19.0.2",
"@vitejs/plugin-react": "^4.3.4",
"typescript": "^5.7.2",
"vite": "^6.0.7"
},
"dependencies": {
"@emotion/babel-plugin": "^11.13.5",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"socket.io-client": "^4.8.1"
}
}- vite.config.js : 해당 파일에 대해 더 알아보려면 https://vite.dev/config/를 참고해주세요.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
jsxImportSource: "@emotion/react",
babel: {
plugins: ["@emotion/babel-plugin"],
},
}),
],
});5. APP 모듈 연결하기
- index.html : 주의할 점은 script태그 type속성에 module을 꼭 입력합니다.
- script태그에 module 속성이 필요한 이유 >> https://devchaeyoung.tistory.com/73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./src/main.tsx" type="module"></script>
</body>
</html>- main.tsx : 여기서 main.tsx는 index.html에 리액트 파일을 뿌려주는 역할을 합니다.
import React from "react";
import App from "./App";
import { createRoot } from "react-dom/client";
// index.html 제어할 요소를 가져옴
const container = document.querySelector("#root");
const root = createRoot(container!);
root.render();- app.tsx
import React from "react";
// 잘 연결됐는지 확인하기위한 간단한 텍스트를 작성해줍니다.
export default function App(){
return (<>연결됨</>);
}6. 실행 스크립트로 서버 실행해보기
yarn start0. 만약 아래와 같은 에러가 발생할 경우?
- 당황하지 않고 서버 실행을 위한 해당 라이브러리가 없다는 뜻이니
yarn add명령어나npm i를 통해 추가해줍니다.
실행시 에러
yarn add -D @vitejs/plugin-react0. 성공
터미널에 아래 화면이 보이고 http://localhost:5173에 접속해 연결됨 텍스트가 떠있다면 다음 스텝으로 넘어가면 됩니다.
이어서 하기
2탄 스타일 의존성 설치부터 컴포넌트 디자인까지 https://devchaeyoung.tistory.com/74
ToDos ✏️
Vite React TypeScript 설정하기App.tsx 파일 vite 서버로 실행하기- 프로젝트에 맞는 CSS 설정하기
- socket.io를 이용한 채팅 만들기
'Web Frontend > React' 카테고리의 다른 글
| Vite+React+Styled-Components 개발 환경 세팅하기 (feat. Socket.io이용한 chat App만들기) (0) | 2025.01.09 |
|---|---|
| JSX 유의사항 (0) | 2024.08.09 |
| useReducer로 useState 지옥 벗어나기 (0) | 2024.07.26 |
| Styled-components 태그에 속성 추가하는 법 (0) | 2024.07.10 |
| 🎯 Trouble Shooting 컴포넌트 리턴 후 발생하는 렌더링 에러 (0) | 2024.07.01 |
