개인정보-컴플라이언스-웹애플리케이션(3) - 프론트 구조 및 백엔드 구조

우선 프론트는  react-vite를 설치후 테일윈드로 디자인을 하면서 개발을 할 것 입니다.

npm create vite@latest

npm install 

npm run dev

 

설치 후 실행을 해보면 됩니다.

 

react-router-dom을 설치하여 라우터 처리를 통해 페이지 이동처리를 하도록 하고 

recoil 을 통해서 상태관리를 해보도록 하겠습니다.

리코일이란

https://codingbasics.tistory.com/314

리코일이란

 

우선 파일구조는 components 폴더와 pages폴더를 통해 분리하여 하겠습니다.

pages 폴더안에는 피드백, 로그인, 관리자, 자가진단, 슈퍼유저 로 폴더를 만들어서 각각 맞는 파일들을 넣도록 하겠습니다.

components 폴더에도 마찬가지로 해주시면 됩니다.

 

이어서 백엔드 파일구조를 설명하겠습니다.

백엔드는 node.js를 통해서 express를 설치하여 진행하겠습니다.

 

npm i express

 

를 통해서 설치하도록 하겠습니다. 기본 app.js 를 통해서 기본 코드를 적어줍니다.

app.js

// app.js
import express from "express";

const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.get("/about", (req, res) => {
  res.send("About!");
});

app.get("/setting", (req, res) => {
  res.send("Setting!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

 

package.json

// package.json
{
  "dependencies": {
    "express": "^4.18.1"
  },
  "type": "module"
}

 

또 cors 를 설치하여 모든 도메인에 대해서 cors허용을 해주도록 합시다.

 

import express from "express";
import cors from "cors";

const app = express();
app.use(cors());

 

파일구조는 app.js에는 경로만 적어두고 routes폴더를 만들어서 파일들을 만들어서 그 안에서 export를 해주면 됩니다.