[facebook 프로젝트] 프로젝트 폴더 구성

▶프로젝트 폴더 구성

크게 클라이언트 부분은 📁frontend 폴더에서 구성하였으며, 서버 부분은 📁backend 폴더에서 구성하였습니다.

backend 폴더와 frontend 폴더

 

📁 backend 폴더

본 폴더에서는 주로 Node JS 프레임워크를 이용하여 서버 관련 코드를 관리하였습니다.

📄src/api/index.js 파일 → api 연결 코드
📄src/api/mysql.js → 데이터베이스 연결 코드
📄server.js → 미들웨어 및 서버 연결 코드

backend 폴더

 

📁 frontend 폴더

본 폴더에서는 React JS를 이용하여 클라이언트 관련 코드를 관리하였습니다.

📁css → 화면 구성에 이용할 css 파일들을 모아둔 폴더
📁view → 화면 구성에 이용할 컴포넌트 파일들을 모아둔 폴더

frontend 파일

 

🔧 프로젝트 진행 방법

VS Code 라는 소스 코드 편집기를 사용했으며 아래와 같이 frontend 폴더 경로와 backend 폴더 경로 각각으로 터미널을 열어 동시에 실행시켜 프로젝트를 진행했습니다.

아래와 같이 package.json 파일을 수정하여 클라이언트와 서버를 실행하였습니다.

// backend 폴더에서의 package.json 파일에서..
"scripts": {
    "server": "nodemon --watch ./ server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  
  // frontend 폴더에서의 package.json 파일에서..
  "scripts": {
    "client": "react-scripts start",
    "build": "react-scripts build"
  },
  ...
  "proxy": "http://localhost:8090"

클라이언트 : npm run client → 리액트 서버 연결
서버 : npm run server → nodemon으로 8090 포트로 연결

 

위와 같은 내용들을 바탕으로 프로젝트 진행을 시작하였습니다 :)