React 프로젝트 디렉토리 구조 변경

그 전 글을 통해 알린 VSCode에서 깃허브 터미널 관련 디렉토리가 아주 꼬여버린 사건!

보통 다른 기기에서 프로젝트를 열 때 node_modules를 통해 npm install을 하면 이미 설치된 패키지들을 알아서 설치해준다던데 나는 이 방법으로 해결하지 못했다.

 

꼬였던 디렉토리를 풀고 다시 서버와 클라이언트 디렉에서 npm start를 외쳐봤지만 소용이 없었다 ㅠ

 

 

뭐가 문제였나

- server.js에 등록했던 서버 시작 문구가 console에 뜨지 않았다.

// 서버 시작
app.listen(port, () => {
  console.log(`서버가 http://localhost:${port}에서 실행 중입니다.`);
});


vscode에서 콘솔에서 이게 뜨지 않음
서버가 http://localhost:5000에서 실행 중입니다. << 연결 성공 문구
MySQL에 연결되었습니다.

 

- axios 오류가 떴다.

axios가 not found 하다.. 설치했으나 같은 오류 반복

 

- react react-dom 오류

이것 역시 install을 했는데, node_module 폴더에 react 관련 폴더가 생기지 않았다.

 

 

 

그래서

해결 방법

1. 리액트 프로젝트 구조를 cmd에서부터 다시 만들고

2. 필요한 모듈 설치

3. 원래 만들어놨던 src/컴포넌트와 dbconfig 등은 재사용

 

결국 cmd에서 React 프로젝트 다시 만들었다!

 

 

 

이번에는 구조를 좀 바꾸었다. 좀 더 직관적이도록.

 

 

 

원래 구조

dessert-recipe-server/
├── dessert-recipe-client/
│   ├── node_modules
│   ├── public/

│   ├── src/
│   │   ├──  config/
│   │   ├──  db/

│   │   ├──  styles/
│   ├── App.js
│   ├── index.css
│   ├── index.js
├── .gitignore
├── package.json
├── package-lock.json
└── README.md

 

 

새 구조

dessert-recipe-project/ 
├── backend/

│   ├── config

│   ├── db
│   ├── node_modules/
│   ├── server.js
│   └── package.json
└── frontend/
│     ├── node_modules/
│    ├── public/
│     ├── src/
│     │   └── App.js
│     └── package.json

├── .env

├── .gitignore

├── node_modules

├── package-lock.json

└── package.json

 

 

구조를 좀 축약해서 올렸다.

 

 

 

뭐가 달라졌나

	이전 구조	✅ 현 구조
이름 변천	server	project
	client	backend frontend 서버와 프론트 폴더 구분
현 구조 폴더별 주요 특징		backend - config - db - server.js frontend - src - public - App.js
중요하게 여기게 된 것		.gitignore를 잘 사용하자! 폴더별 기능을 분리하자. node_modules와 package.json은 백/프론트/루트에 모두 있어도 된다?

 

 

프론트와 백의 기능을 좀 더 분리해서 만들었고,

mysql id와 pwd는 개인의 소중한 정보니까 env파일에 따로 적어놓고 config로 이어주었다.

그리고 적극적으로 gitignore를 사용하여 굳이 build할 필요 없는 파일들을 제외하고 깃허브에 올릴 수 있도록 사용해보아야겠다 다짐했다!

 

디렉이 너무 꼬여서 한동안 골치가 아팠는데 그럴 때마다 전보다 더 좋은 프로젝트로 만들 수 있을거라는 럭키비키 생각을 가지고 임했던 것 같다.

오히려 더 많이 배울 수 있는 기회가 되어 좋았다😄