[node.js] Express 기본 폴더 구조

📌 Static

: 브라우저에서 접근이 가능한 폴더의 위치를 지정해 주는 역할

app.use(express.static('views'));

 

 

위의 미들웨어를 사용하면 프로젝트에서 사용하는 폴더 경로의 시작점 -> localhost:4000/views

./ 의 상대 경로  -> localhost:4000/views/ 와 동일한 의미를 가짐 

브라우저에서 접근 가능한 기본 폴더를 설정하는 만큼 너무 많은 폴더를 정하는 것은 피하는 편이 좋음

보통 public 이라는 폴더를 기본으로 설정해 놓고 해당 폴더만 설정

public 폴더의 경우 브라우저 등의 클라이언트가 접근이 가능한 폴더로써 보통 CSS, 브라우저에서 사용하는 JS, 이미지 등을 위치

 

📌 Express 기본 폴더 구조

 

/images = /img

/javsscript = /js

/stylesheets = /css

 

📌 Express 기본 폴더 구조로 변경 

app.js -> 제일 외부로 이동

npm start를 입력하면 실행이 될 수 있도록, package.json 수정

"scripts": {
    "server": "nodemon app.js",
    "start": "nodemon --watch \"./routes/*.js\" --exec \"npm run server\""
  },

 

✅ puclic 폴더 설정 

public 폴더 만들고 static 설정 

// app.js
app.use(express.static('public'));

public/css 폴더 만들고 css 파일 옮기기

public/js 폴더 만들고 test.js 파일 넣기

 

✅ routing 처리

각각 기능을 파일로 나눈 뒤, 모듈 타입으로 라우팅 처리

ex) users 기능 

routes/users.js 파일에서 user에 관련된 기능 전부 처리 

const express = require('express');
const router = express.Router();

users의 기능은 router 라는 객체에 담아 모듈로 exports 하고

해당 모듈을 app.js 에서 require 를 사용하여 가져와서 사용할 예정

-> router 라는 이름으로 통일해서 담기

+ users 관련 기능 옮기고 데이터 담당 변수, 기존에 만든 router 미들 웨어들 옮기기

 

📍모듈 빼기, 가져오기

// users.js
module.exports = router;

// app.js
const userRouter = require('./routes/users');
app.use('/users', userRouter);