본문 바로가기

회고/스파르타 코딩클럽

[노드 기초반] 2주차 개발일지

1. 배운 내용

Express의 Routing

Express의 MiddleWare

템플릿 엔진으로 실제 페이지 연결해보기

 

 

2. 새로 알게 된 내용

(1) Express의 Router 사용 방법

// index.js
const goodsRouter = require('./routes/goods');

app.use('/goods',goodsRouter);

 

(2) Express에서의 MiddleWare

// index.js
// 아래의 친구가 먼저 실행됨 * 미들웨어임
app.use((req, res, next) => {
  console.log(req);
  next();
});

// 미들웨어 실행되고 나서 response 실행됨
app.get('/', (req, res, next) => {
  res.send('Welcome Home');
});

 

(3) 데이터 가공용도로 index 수정하기

// index.js
// 요청받은 body 내용 해석과 response로 줄 body 내용 인코딩 문제 default로 해결해주기
app.use(express.urlencoded({extended: false}))
app.use(express.json())
// 이미지 파일 등 정적 파일 경로 지정해주기 (public 폴더 안에 쿼리에 전달받은 파일이 있으면 띄워줌)
app.use(express.static('public'));

 

(4) 템플릿 엔진

- 사용하는 이유 : 그냥 index.js 파일 안에 html 코드를 가져다 쓰기에는 index 파일 내용이 너무 길어지고 가독성도 떨어져서 유지보수에도 안좋고 재사용성도 안좋아서

- 템플릿 엔진의 장점 : 많은 코드를 줄일 수 있고, 재사용성이 높고, 유지보수에 용이함

- 템플릿 엔진 사용 방법

1. index.js 수정

// index.js 수정
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

app.get('/test', (req, res) => {
  let name = req.query.name; // 이후에 ejs 문법으로 <%= name %>으로 값을 전달해줌
  res.render('test', {name});
})

2. 설정해준대로 views 폴더 만들어주고 폴더 안에 000.ejs로 html 코드 파일을 만들어준다.

 

 

3. 느낀 점

react보다 훨씬 가벼운 깊이로 배우기도 하고 다른 라이브러리들을 신경 많이 안써도 되는 게 좋은 것 같다. 그리고 정말 스프링과 다르게 정말 정말 가볍구나, 노드 ! 문법도 전혀 다르고 템플릿 엔진이라는 것도 존재하다니.

 

반응형