Step1. To_Do 웹 만들기 구상 및 설계

무사히 전역을 한 후 제일 먼저 해볼 것이 바로 개인 프로젝트 만들기.

컴공 학부 1학년을 마치고 자바스크립트, C언어, Python 기초를 훑고 난 뒤

node.js를 이용하여 To_Do 웹을 만들 예정

 

1. 프로젝트 기획

1.     하루 일과 및 장기, 단기 목표, 생활 패턴 설정 이용
2.     뽀모로모 타이머을 포함시켜 효율적인 학습
3.     최종적으로 웹사이트에서 앱 개발로 구글플레이에 올려보기

군SW.AI 역량강화 프로그램을 신청 후 자바스크립트 웹개발에 대해 배웠고 이를 바탕으로 제작해볼 예정

VScode를 이용하여 제작 백엔드는 MongoDB 이용(추후 개발에 따라 변경)

 

2. 모듈 버전

 

node.js   v16.17.0 버전 사용(요즘은 npm이 자동으로 깔린다고 합니다)

 

추가적인 모듈은 VScode 내부에서 설치 

express 프레임워크

npm install express -g   

-g는 global 설치

 

저는 npm install express-generator -g 를 통해 기본 파일들을 형성해주었습니다.

설치 후 express 프로젝트 디렉터리명 을 입력 시 

이렇게 생성이 됩니다. 

사용 시에는 cd todo_web && npm install 를 통해 해당 디렉터리로 이동하여 필요한 의존모듈을 설치합니다. 

 

저는 express, ejs, dotenv, mongoose, nodemon, body-parser, moment-timezone 을 추가로 설치했습니다.

/bin 에는 www.js 파일이 있습니다.

npm start 명령어로 웹 서버를 실행시킬 시 www.js 파일이 실행되게 됩니다. 

기본은  3000포트로 되어있습니다.

 

app.js 은 

const createError = require('http-errors'); // 필요한 모듈 불러오기
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');

const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

const app = express();

// view engine setup 화면 출력에 사용되는 뷰 템플릿 파일 경로 /views 폴더
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs'); //뷰에 이용되는 기본엔진은 ejs 사용 예정 

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler 에러코드 시 실행
....

 

/routes 파일은 요청받은 URL과 뷰를 매칭시킵니다.

 

//routes/index.js
const express = require('express');
const router = express.Router();

/* GET home page. */ // "/" 주소로 들어오면 index.ejs 파일로 이동
router.get('/', function(req, res, next) {
  res.render('index', { title: 'ejs'});
});

module.exports = router;

router.get 함수는 GET 형식을 이용하여 들어오는 경로 연결

' / ' 경로는 메인 페이지가 됩니다. 

req(Request Object 요청 객체), res(Response Object 응답 객체) 로 정보를 주고 받고가 가능해집니다.

 

/routes/index.js 파일 코드입니다. 

/views/index.ejs 로 이동해 화면에 출력해줍니다.