03 react vite 설치

리액트 공식문서

불필요한 파일 삭제

src 폴더에서 불필요한 파일들(.sh, .fcss, index.css 등) 삭제
이미지 파일들과 관련 에셋 파일들 제거
프로젝트 구조를 간소화하여 필수 파일만 남김

오류 메시지 해석 및 해결 방법

터미널의 오류 메시지에서 파란색 파일명 확인 (Ctrl+클릭으로 해당 위치로 이동)
파일이 없는데 불러오려는 import 구문 제거
삭제된 이미지 파일을 참조하는 태그들 모두 제거
사용하지 않는 태그와 컨테이너도 함께 제거

React 프로젝트 실행 및 테스트

npm run dev 명령어로 개발 모드에서 애플리케이션 실행
개발 모드는 빌드하지 않고 테스트 버전으로 실행 (소스코드 압축 없음)
localhost 주소에서 결과물 확인 가능
HMR(Hot Module Replacement)을 통한 실시간 변경사항 반영

React 기본 개념

컴포넌트 이름은 대문자로 시작 (예: App, StrictMode)
함수 이름은 소문자로 시작 (예: createRoot)
모듈 임포트 시 중괄호({}) 사용 규칙:
- 중괄호 없음: 파일에서 단일 default export를 가져올 때
- 중괄호 사용: 파일에서 여러 함수/모듈을 내보낼 때 특정 항목 가져올 때

오류 디버깅 팁

터미널 오류 메시지 확인 후 파란색 텍스트 클릭하여 문제 위치로 이동
에러가 많이 발생할 경우 터미널 창에서 “Clear Terminal” 옵션 사용
오류 발생 시 관련된 import 구문과 사용 부분 모두 찾아 제거
ESBuild 대신 PowerShell이나 Bash 터미널 사용하기

https://chatgpt.com/share/68b7c7a2-1ee4-8005-947e-f27c03e87fd2

그 폴더를 최소한으로 열었구요 필요없는 파일을 삭제할거에요 여기 이미지에 보시면 마킹되어있는 애들 다 필요가 없어요 얘네 다 지우세요 src 폴더 열어서 sh 그 다음에 fcss index.css 지우세요 지우세요. 뭘 망설이세요. 지우세요. src 폴더를 열어서 그 다음에 인덱스 지웁니다. sfdelete, fcssdelete, indexcssdelete 자, 그 다음에 실행화면 보시잖아요? 그러면 이렇게 나와요. 괜찮아요. 인자에 이런 오류가 나와도 여러분들이 익숙해지셔야 돼요. 문제는 항상 발생을 하고요. 여러분들이 문제를 해결을 하셔야 그게 이제 문제 해결 능력이 여러분들의 영향이 되는거에요. 괜찮아요 이거? 지우고 저장하세요 안나오시면 안지운거에요 아니면은 안나오시면은 새로고침으로 한번해보세요 진짜… 너무 안 지워 그냥 자 이거 리소스 파일이 없어져서 그래요 fjsx2번 라인에 문제가 발생했다고 하고요. 우선 저희가 21번에 있는 import app.css 파일을 삭제를 하고 여기 sf 폴더에 지워버렸잖아요 sf 폴더 통째로 지었으니까 당연히 이제 요게 없잖아요. 이 폴더의 이미지 가져오던게 이미지 없어서 지금 여기서 오르나는거에요 이미지 파일 없어가지고 이젠 여러분들이 이미지 경로 잘못쓰잖아요? 그러면 이렇게 겁나게 이렇게 무서운 빨강색 피 이렇게 이렇게 피가 나요 이렇게 인제는 엄청 무섭게 피가 나요 이거 다 진짜 이미지를 잘못 넣었을 뿐인데 이렇게 엄청나게 결과를 초래합니다. 자, 이제 수정하겠습니다. 여기 지금 보시면은 실행화면에 어디서 문제가 발생을 했다라고도 나오고 터미널 메시지를 보시면 터미널에도 영어가 엄청 길게 나오거든요. 아무튼 저희가 잘못을 하면은 잔소리를 이렇게 해요. 잘하잖아요. 그러면. 아무 말도 안해요. 뭐라고 뭐라고 얘기를 안하면 잘한거에요. 귓도 그렇잖아요. 성공하면 아무 말도 안하는데 잘못했을 경우에 길게 나와요 여기 지금 보시면 파일 어느 파일의 몇 번 라인에서 지금 문제가 발생했다고 나오죠 컨트롤 키를 누르고 문제가 발생한 곡의 라인을 클릭하세요 컨트롤 클릭 그러면 해당 줄번호로 바로 이동합니다. 파란 글씨는 그냥 무조건 컨트롤 클릭하세요. 터미널 글씨가 너무 쪼끄매서 잘 안보이실 경우에는 요 터미널 창을 한번 이렇게 마우스 왼쪽으로 클릭해서 선택해 놓으시고 컨트롤 키 누른 상태로 플러스 눌러서 크게 하세요 그 다음에 마우스 휠을 요렇게 요렇게 요렇게 요렇게 요렇게 해서 해당 줄 번호로 얼른 찾으세요 문제가 발생한 부분이 이렇게 키보드 커서로 선택되면서 파일이 열립니다 그리고 해당 라인 삭제하겠습니다. assets 폴더가 지금 없으니까 같은 경로에, 같은 경로에 src 폴더에 에셋츠의 리액트 svg를 가지고 오고 있는데 없어요 없어요 그래서 없으니까 올인하잖아요 지우세요 이따가 또 이렇게 저장을 하시고 다음 메세지 또 확인해볼거에요. 다음 뭐 이렇게 길잖아요? 터미널이 길면은 어휴 길어 하고 클리어 맨 밑으로 그냥 스크롤을 쭉 내려갖고 CLEAR 엔조이 커플 어? 이거 안됐네요? 클리어가 안되네? 이거 어떻게 지우더라? 여기 누를게요 점 3개, 터미널 창에 점 3개 누르세요. 클리어 터미널 한번 눌러보세요. 그러면 깨끗하게 청소가 돼 그 다음에 다시 npm run debug 어? 이상하다? 이상하다. 왜 안되지? 저희가 사용할 수 있는 터미널의 프로그램을 보시면 되는데 지금 보면 저는 esbuild라고 되어있거든요 다들 esbuild라고 되어있으면 얘는 그 자바스크립트 문법검사하는 애에요. 요거 펼쳐가지고 파워쉘이나 기빼쉬나 다른 애 선택하셔야 해요 뭐 이런 애가 나와있어요? 파워쉘로 다시 돌아갈게요

실행해보세요. 또 오르나죠? 이번에는 3번 라인에 불 들어오는 거 삭제 오류를 스크롤 내리시면서 다 찾아가지고 삭제하세요. 스크롤을 내리시면 메인에 있는 얘도 나올거에요. 컨트롤 클릭해서 다 찾아가지고 해당 라인 다 삭제하세요. 스크롤을 내리시면 지금 문제가 되는 애들 파일이 두개정도 나올거에요. F2-AES-X의 내용 탑재에 의해서 콜라 드레그에서 열렸지 내가 아까 오전에 엄청 짜증을 냈었던 그 일을 하고 있어 지금. 오우 신경쓸라 진짜. 항상 봐봐 내가 그거 때문에 아까 오전에 엄청 짜증냈어 누군가가 그럴 것 같아. 여러분들이 에러메시지를 보면서 찾으실 줄 알아야 돼요. 이거를 자꾸 GPT한테 그 의존하는 습관을 그동안에 들으셨어가지고 그냥 읽어가지고 이거 찾는 꼬라기에 특이하지 미숙하세요 터미널에 보면 내용들이 쭉 나오는데 이중에서 핵심되는 내용들은 몇가지 없거든요 파일에 파란 글자, 파란 글자 있잖아요. 파란 글자. 이 파란 글자 클릭해서 들어가시면 돼요. 검정 글자는 뭐 그냥 여기에 대한 로그예요. 여기서 지금 이게 파싱이 안 됐다 뭐 이런 문제고 관련된 라이브러리가 지금 그 일을 못했다 뭐 이런 얘기 구요 중요한 거는 여기 파란 글자 에요 이거 컨트롤 클릭하시라는 얘기 인데 아버님도 지금 이걸 못하고 있네요 fjs x 로 이동하셔서 import react 로고와 import beat 로고 두줄 삭제합니다. 그 다음에 import.. 아 이거는 import bt 로고도 삭제하시고 import fcss 3줄 삭제해주세요. 필요없어요. 자 이거 제가 왜 삭제했냐면은 폴더 자체를 삭제했기 때문에 삭제했습니다. 이게 지금 아까 폴더를 삭제했기 때문에 폴더가 없는데 이 파일에서 불러들여 오려고 하니까 이래서 오류가 나고 있는 거예요. 여러분 이해되셔야 돼요 파일이 없는데 어떻게 불러오려고 하니 하면서 그 메시지가 그 오류 메시지가 아랫줄에 지금 나오고 있는 거예요.

main.jsx 파일을 열어주세요. src 폴더에 보면 main.jsx 가 있어요. 여기에 인덱스 css 있죠? 요거 지워서 없어요. 요거 또 지울게요. 자, 이제 그래도 오류가 나요. 자 이제부터 살펴볼게요. 다시 FJS X로 이동해 볼게요. 자 여기 리턴 안쪽에 내용을 살펴 볼게요 이상하게 생긴 빈 태그가 하나 보이고 디브 안쪽을 보시잖아요 이미지 src 에 비트 로고 리액트 로고 하는 뭔가 이런 애들을 불러서 쓰고 있어요 근데 다시 한 번 저는 위에 있는 소스코드 아까 지웠던 거 살려볼게요. 위에 아까 제가 지웠던 리액트랑 비트로고, 임포트한 애들을 앱이라고 하는 이 함수 내에서 변수 형태로 이걸 불러와서 이미지 주소에 해달라고 합니다. 해당 임포트한 애들을 이미지로 물기 중괄호 안에서 사용하고 있거든요 얘네들은 이제 요런식으로 외부에, 외부에서 이미지를, 리액트는 이렇게 불러와서 이미지를 요런 형태로 사용을 해요. 근데 저희가 이미지 파일이 없어서 임포트문을 지웠잖아요. 그런데 그 상단에서 import문이 지워진 이미지 별명, 이거 변수에요. 변수명인데, 이 이미지 변수명을 또 이미지 src 에서는 또 사용하고 있어요. 이러면 또 요것도 오류가 나겠죠. 그래서 아직 오류 해결이 안된 거 거든요. 요기도 지워 줘야 돼요. 그래서 다시 2번에 지울께요. 그래서 다시 요 안쪽에 펑션 앱 안쪽에 있는 이미지 태그 부분 이거 지우시구요 음 이게 지워지면 이미지가 지워지면 사실 a 태그 a 태그 안에 사실상 그 화면이 보여지는 컨텐츠가 없으니까 요것도 제 역할을 못하는거나 마찬가지 거든요 이것도 지울게요 이것도 A도 그 다음에 요것도 요기도 지금 이미지가 없죠? 요 안에 들어가는 변수가 선언되지 않았어요. 위에 지금 그 임포트 하고 있는 그걸 삭제를 했으니까 요런 요 값이 없는 변수에요 이거는 지금 그래서 이것도 치울게요 그 다음에 A가 컨텐츠가 없는 상태이니까 이것도 사실상 의미가 없어요. 지우세요. 그 다음에 이 D부도 그렇게 따지고 나면은 이 D부도 쓸데없는거잖아요. 이거 지우세요. 한 번 볼 건데요. AS 빌드라고 하는 애가 여기 옆에 두 개가 있어요. 얘 꼴보기 싫어요. 이렇게 에러가 많이 나서 이렇게 두 개 되어있는 애는 요 위에서 마우스 올리잖아요 그러면 휴지통 보이시죠 요거 누르시면 죽어요. 킬 보이죠? 클릭합니다. 클릭하시면 실행중인 터미널이 죽어요. 터미널 서버가 삭제돼요. 정말 동작이 중지됩니다. 그러면 터미널 모두 닫히구요 컨트롤 제이 다시 눌러서 터미널을 열어주세요 엔피엠 한 칸 띄고 실행이라 런 한 칸 띄고 대부를 입력하는데 이 대부는 실행을 하는데 개발자, 개발자 모드로 실행해 라는 의미에요. 개발자 모드로 실행할 때의 특징은 빌드를 하지 않고요. 테스트 버전으로 실행이 돼요. 개발자 그 빌드를 하지 않고 테스트 버전으로 실행한다는 얘기는 소스코드를 압축하지도 않구요 여기에 퍼블릭 여기에다가 실제로 배포를 하기 위한 정적 파일을 생성하지도 않아요. 그냥 저희가 다 잘 만들어졌는지 안 만들어졌는지 테스트하기 위한 거에요. 마치 라이브 서버로 간단하게 테스트 버전을 보는 것과 같아요. 엔터 칠게요

이렇게 로컬이라고 나오죠? 로컬 뭐예요? 시청해주셔서 감사합니다. 내 컴퓨터의 주소 요기에 가면 볼 수 있어 이거에요 완전히 그 배포가 된 호스트 서버 주소가 아니라 네 컴퓨터에서 볼 수 있어 이거에요 컨트롤 클릭 css도 다 삭제되고 정말 이 아무것도 없는 버전이구요 정말 그 리액트에서 제공하는 함수만 남아있는 그 다음에 edit, src, fjs, save 어쩌고 어쩌고 이렇게 나오면서 hmr 이라는 단어가 나와요. 요고 아유 미국애들 이렇게 줄임말 쓰는데 아주 환장하겠어요 아샤츄 때문에 저도 아주 진짜 이거 나 진짜 여기 앞에서 이걸 딱 한 입 빨아보고 클레이블 걸으러 갈까 말까 그냥 먹자 하고 올라왔는데 정말 다행이에요. 난 아이스 아메리카노 샤츠인줄 알았는데 시큼해가지고 나 진짜 hmr이 뭘까요 H.M.R. 여러가지 상상되죠? 이게 핫! 개발한거 빨리 다시 리로드 해주는거에요. 그래서 실시간으로 이렇게 실시간 리로딩 해주는 모듈이다. 그거예요. 그러니까 해석해보면 src폴더 안에 있는 .jsx 테스트 할 수 있다 이거 거든요 실시간으로 빠르게 볼 수 있다 테스트 할 수 있다 이거에요 근데 또 사람들이 실무에 가시면은 hmr방식 어쩌고저쩌고 이렇게 블로그 보면은 이렇게 hmr 이라는 언어를 막 쓰면서 되게 어렵게 얘기를 하는 경우가 있어요 그러면 아 여러분들이 알아서 들으세요 스트리밍이구나 이런식으로 알아서 이해하시면 되요 스트리밍 방식 뭐 이런식으로 들으시면 되요 자 그 다음에 이번에는 되게 중요한 건데요 이 안에 내용들을 뜯어볼거에요 여기서 실제로 개발을 할때 사용하는 애들이 src의 fjsx와 mainjs 엑스 얘네들이 핵심 소스코드들을 가지고 있는 애들이고 여기에 우리가 어떤 로직을 작성하면 실행 화면에 반영이 됩니다. 한번 보고 내용 바꿔 볼게요. 우선은 main.js.x파일을 열어보실께요. 메인 jsx 내용 확인해 볼게요. 자 얘는 스트링 모드라고 하는 오디를 불러오고 있어요 from 어디서? 리액트라고 하는 데서 가지고 오고 있는데 우와 되게 좋아졌다 여러분들 이거 떠요? 리액트 위에 마우스 이렇게 올리면 경로가 떠요? 이렇게? 저때는 이거 안 떴어요 저때는 그래서 컨트롤 클릭해서 들어갔어요 그래서 요 위에 있는 요 조그만한 거 요거 읽었어요 이야 이게 너무 좋아졌네요 경로는 환경설정에 디폴트로 세팅이 되어 있어 가지고 앞에 그 노드 모듈스라고 하는 이 경로를 쓰지 않아도 이 앞에 있는 건 생략해도요. node-modules 하위에 있는 라이브러리들을 import할 수 있어요. 자 이 생략해도 되는 라이브러리들은 이 앞에 있는 애들, 생략되어있는 이런 경로들은요. 전부 어디에 들어있는 애냐 하면 여기에 있는 애들이거든요. 아까 노드 모듈스 하 위에 제가 리액트 폴더를 잠깐 보여드렸잖아요. 그 안에 들어가면 스트릭 모드라고 하는 작은 함수 형태의 모듈이 하나 익스포트되고 있어요. 개를 찾아보러 갈 건데 그 안에 가면 작게 잘게 잘게 쪼개져 있는 함수들이 되게 많아요 기억나실지 모르겠지만 중가로로 불러오는거 뭐에요? 그래 맞아요. 그거예요. 그거. 그, 그, 거식이에요. 한 파일 안에서 대빵 많이 내보낼 때 그때 쓰는 거 거든요. 한 파일 하나, 그러니까 파일 하나에 하나만 내보낼 때는 중과를 안 해도 되는데 이것처럼 예처럼 이거 되게 많이 궁금해 하세요 어떤 애는 중괄호를 하고요 어떤 애는 중괄호를 안하잖아 임포트 할 때 중과로 안한 애는 파일 하나에 함수 하나 내보낼 때에요. 중과로 안한 애는 파일 하나에 함수를 대빵 많이 내보낼 때에요. 그래서 이거 요 안에 들어가 가지고 이 함수 하나 찾으려면 되게 오래 걸리니까 이렇게 찾을 거에요. 컨트롤, 컨트롤키 누르고 이 해당 모듈명 위를 마우스에 올리면 이렇게 손가락으로 바뀌어요. 클릭하세요. 그러면 해당 함수 내보내기가 작성된 위치로 이동하거든요. 자, 얘의 위치가 로드 모듈스에 있구요. 리액트에 있어요. 리액트 폴더에. 그리고 리액트에 스트릭 모드라고 하는 조그만 어떤 여기 보시면 블럭 표시 있잖아요. 하나의 모듈화 되어있는 함수 중에 하나에요. 보시면 콘스트 스트링 모드라고 하면서 얘 지금 요렇게 요렇게 이렇게, 이렇게 있는거 있잖아. 땡땡. 어, 맞아맞아맞아. 그거. 맞아요. 그거. 그거, 이거는 타입스크립트라고 하는 그 자바스크립트의 슈퍼셋이라고 하는데요. 자바스크립트를 좀 개선한 문법이에요. 일단 그건데 어쨌거나 지금 얘는 스트림 무드라고 하는 애가 그 하나의 모디버가 되가지고 내보내기가 되어있고 그거를 다시 컨트롤키 누르고 스트링모드를 여기 컨트롤키 누르고 마우스를 이렇게 올려보시면 여기서 지금 사용하고 있대요. 그럼 리액체즈 야이고 안가네요? 그냥 여러분들이 가세요 이렇게 연결이 되어있어요. 이 index.d.ts 라고 하는 파일에 길이를 보시면 라인이 지금 엄청 길어요 그런데 모듈화 되어있기 때문에 필요한 부분 하나 조금만 불러서 메인에서 사용하고 있기 때문에 불필요한 모듈은 안 불러 와도 돼요 굉장히 효율적으로 작업을 할 수 있습니다. 이 스트링 모드라고 하는 애는 리액트 코드를 작성할때 엄격한 문법 검사를 하는 그런 모듈이에요. 자 그 다음에 닫으시고 다음 두번째 라인 보시게 되면 리액트 돔 이라는 모듈로부터 하위에 있는 클라이언트 react-dom 의 하위 클라이언트 모듈로 부터 create-route 를 import 하고 있어요 어? 이상하다. 여러분 스트링모드는 대문자이구요, 크리에이트루트는 소문자로 시작하잖아요. 요건 또 무슨… 무슨 차이지? 스트리트 모드는 앞에 시작 단어가 대문자구요 크리에이트 루트 는 앞에 시작 문자가 소문자 잖아요 차이가 있어요 여기 지금 임포트 하고 실제로 이 측별자들이 사용된 사례를 보시면 대문자로 시작된 애들은 태그 형태로 사용이 되었고 소문자로 임포트된 애들은 보세요 함수의 호출 형태로 사용이 됐어요 리액트에서 대문자, 요렇게 대문자로 작성된거는 저희가 s, x 문법을 사용합니다. 이거는 컴포넌트라고 얘기해요. 아무거나 대문자로 명명하지 않습니다. 요 밑에 있는 앱 있죠? 앱 임포트 3번 라인에 있는 앱도 대문자로 시작하죠? 리액트 문법이에요. 파일에 이름을 붙이실 때 앞 시작 단어를 영문 대문자로 붙이시면 리액트에서는 어? 컴포넌트 라고 얘기를 해요. 알아요. 그래서 대문자 아무거나 대문자로 붙이시면 안됩니다. 요거 제가 얘한테 요청해서 정리해 달라고 할게요 어우 진짜 피티 너무 좋아 파일명의 파일이나 모듈명 앞단어 b, a, 2, 3, 4 오늘 컴포넌트까지 하지는 않을 건데 제가 얘한테 요청해서 정리한 내용을 공유해드릴게요.

3. React 개발환경 설정

3.1. React를 라이브러리로 설치

3.1.1.Vite

아래의 링크에서부터 시작한다.

https://ko.vite.dev/guide/#scaffolding-your-first-vite-project

1
 npm create vite@latest .
2

3
 npm install -D babel-plugin-react-compiler@latest

1
npm install
2
npm run dev

3.1.2.Parcle

3.2. React를 프레임워크로 설치

Next.jsRemixGatsbyExpo (for native apps)Bleeding-edge React frameworksNext.js (App Router)

3.3. 프로젝트명 규칙

리액트 프로젝트 생성 시 앱 네이밍 규칙은 다음과 같다.

소문자만 사용한다.
*하이픈(-)**을 사용하여 단어를 구분한다.
숫자로 시작할 수 있다. 예시: my-react-app, react-shopping-mall-2025