[2023/04/17 개발 일지] 개발 환경 세팅

안녕하세요! 오늘은 출석체크 자동화 프로그램 개발하기 편하도록 개발 환경을 세팅해보려합니다. 

---

< 오늘 할 일>

1. 깃허브 연동

    깃을 사용하면 여러 이점들이 많기 때문에 깃을 배운 이후의 모든 프로젝트를 깃에 연동시켜놨어요. 이번에도! 깃을 사용할 예정입니다. 깃허브에 들어가서 레포지토리를 하나 만들고 만든 레포지토리를 VSCode에서 열면 끝입니다. VSCode에서 새창 만들기하면 Clone git repository가 나오는데 그거 클릭하고 레포지토리 주소 붙여넣으면 알아서 잘 만들어주고 잘 연동시켜줍니다. 

 

https://github.com/rimi3226/automation_check

GitHub - rimi3226/automation_check: The program developed to automate attendance verification system.

---

2. npm 기본 설치

개발 환경을 세팅하는 것이기 때문에 npm으로 필요한 모듈을 전부 설치합니다.

npm init
npm i express cookie-parser express-session morgan dotenv nunjucks googleapis passport twilio nodemon bcrypt passport-local

npm init 할 때 기본 설정은 다음과 같이 간단하게 했습니다. 

필요한 패키지도 전부 다운 받았습니다.

---

3. 폴더 세팅하기

    개발을 원활하게 하기 위해서 폴더를 깔끔하게 정리합니다.

• views : 템플릿 파일들
• routes : 라우터들
• public : 정적 파일들
• passport : passport 패키지 관련 파일들 -> 로그인
• googleapis : googleapis 패키지 관련 파일들 -> 구글 스프레드 시트
• middlewares : 접근 제어 관리하려고 만든 미들웨어 파일들
• controllers : 컨트롤러 파일들
  • 컨트롤러 : 라우터 마지막에 위치해 클라이언트에 응답을 보내는 미들웨어
• config : 환경설정 파일들

하나씩 폴더 추가하기 귀찮아서 명령어로 해결!

mkdir view routes public passport googleapis middlewares controllers config

---

4. 파일 생성

• app.js : 메인 코드

//모듈 불러오기
const express = require('express');
const cookieParser = require('cookie-parser');
const morgan = require('morgan');
const path = require('path');
const session = require('express-session');
const nunjucks = require('nunjucks');
const dotenv = require('dotenv');

//dotenv 불러오기
dotenv.config();
const pageRouter = require('./routes/page');

//라우터 기본 설정
const app = express();
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'html');
nunjucks.configure('views', {
  express: app,
  watch: true,
});

//미들웨어 
app.use(morgan('dev')); //로깅하는거 개발모드
app.use(express.static(path.join(__dirname, 'public'))); //폴더명+public path를 얻기 위함
app.use(express.json()); //json 요청 받을 수 있게함
app.use(express.urlencoded({ extended: false })); //form 요청 받을 수 있게함
app.use(cookieParser(process.env.COOKIE_SECRET)); //쿠키 전송하는거 처리
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false, //개발 시에는 https를 안쓰기 때문에 false
  }
}));

//app.use는 항상 쓰는 미들웨어이다.
app.use('/', pageRouter);

app.use((req, res, next) => {
  const error = new Error(`${req.method} ${req.url} 라우터가 없습니다.`); //없는 페이지에 온 경우, 404 Not Found
  error.status = 404;
  next(error);
});

//에러처리 미들웨어
app.use((err, req, res, next) => {
  res.locals.message = err.message;
  res.locals.error = process.env.NODE_ENV !== 'production' ? err : {};
  res.status(err.status || 500);
  res.render('error'); //넌적스가 views폴더에서 찾아서 에러를 보내준다
});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기중');
});

• .env : 설정값

COOKIE_SECRET=_____

• views 폴더에 error.html, main.html 생성

---

5. app.js와 라우터, 컨트롤러 엮기

• routes 폴더에 page.js 파일 넣기

const express=require('express');
const {renderMain}=require('../controllers/page.js');

const router=express.Router();

router.use((req,res,next)=>{
    res.locals.user=null;
    next();
})

router.get('/',renderMain);
module.exports=router;

• controllers 폴더에 page.js 파일 넣기

exports.renderMain = (req, res) => {
    res.render('main');
  };

동작 : app.js에서 라우터를 불러옴 -> 라우터에서 컨트롤러를 불러옴

 

---

< 에러 >

라우터에서 함수 맨끝에 next()를 안붙여서 컨트롤러가 실행되지 않는 에러가 발생했었다. 

 

< 현재 진행상황 >

localhost:3000으로 들어가면 app.js에서 라우터를 부르고, 라우터는 컨트롤러를 불러서 views 폴더의 main.html 파일이 열린다.

 

---

간단하게 개발환경을 세팅해보았다. 깃에 initial setting이라는 커밋 메세지와 함께 푸쉬했다.