TIL: 2022-10-17

⚙️ 오늘 배운 주제

StatesAirline 과제 실습 & 리뷰

🐹 오늘의 기분

주말에 발생한 카카오 화재 때문에 티스토리 블로그를 이용할 수가 없었다. 보호글로 올려놓았던 글을 열심히 수정하고 딱 올리려던 때에 일이 터져서 하마터면 글을 다 날려버릴 뻔했다. (직전에 스킨도 열심히 수정해놨는데 모바일 화면만 떠서 웃음밖에 안 나옴 ㅜㅎ) 다행히 뭔가 이상해서 html 코드를 바로 백업해놓은 상태이다. 지금은 어느 정도 복구가 되긴 했지만 안정적인 상태는 아닌 것 같아서 옵시디언에 임시로 TIL을 쓰고 있다.
그 동안 제대로 된 공부 내용은 전부 블로그에 올려놓았어서 티스토리에 아예 접속도 안되는 동안에는 너무 답답하고 막막했다. 이번 일로 로컬에 파일을 저장해두는 것의 중요성을 뼈저리게 느꼈기에 이참에 옵시디언을 한 번 제대로 써봤다. 원래는 학습하면서 노션에 키워드만 날림으로 써왔는데 데이터가 쌓일수록 묘하게 느려져서 별로였다.
옵시디언은 일단 빠르다. 전부 텍스트라 용량이 진짜 작아서 부담이 없다. 그리고 여기 자체에서 개발자 도구도 열어볼 수 있어서 맘에 안 드는 부분은 코드를 직접 수정할 수도 있다! 이게 진짜 대박인듯 👍 티스토리가 완전히 복구될 때까지는 옵시디언에 써야겠다.

글쓰기 중독이 아닐까?

아무튼 오늘은 금요일에 했던 실습을 마저 했다. 생각보다 빨리 끝나서 남은 시간에는 옵시디언도 이것저것 만져보고 미들웨어 공식문서도 다시 읽어보았다. 처음엔 어려웠는데 차근차근 읽어보고 하나씩 정리해가니까 서서히 이해가 되어서 재밌었다.

🗣 과제 포인트

req.query와 req.params

path variable과 query string의 차이
query는 정렬이나 필터링 시에,
path는 고유한 리소스를 식별할 때 쓰는 것이 적절하다.
다만, 어떤 것이 고유하느냐에 대한 기준이 각자 다르기 때문에 이 부분도 논쟁이 있다고 한다.

req.query는 요청 query문에 들어온 내용을 객체 형태로 담아준다.
GET /search?q=티스토리 ('티스토리' 검색)

console.log(req.query); // {q: '티스토리'}

req.params는 요청 path variable에 들어온 내용을 객체 형태로 담아준다.
/post/:id
GET /post/177 (177번째 게시물을 가져옴)

console.log(req.params); // {id: '177'}

req.query와 req.params를 활용할 때 구조분해할당으로 더 간단하게 쓸 수 있다.

// req.query
const { q } = req.query;
console.log(q); // '티스토리'

// req.params
const { id } = req.params;
console.log(id); // '177'

Router 미들웨어를 쓰는 이유

모듈식 마운팅 가능한 핸들러를 작성할 수 있음.
=> 앱이 거대해지면 한 파일에 몰아넣는 것보다 관리하기 편해짐
express.Router 공식 문서
birds.js라는 파일이 있다.
여기에는 /와 /about을 정의했다.

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

// 시간 출력 middleware
router.use(function timeLog(req, res, next) {
  console.log('Time: ', Date.now());
  next();
});

router.get('/', function(req, res) {
  res.send('Birds home page');
});

router.get('/about', function(req, res) {
  res.send('About birds');
});

module.exports = router;

app.js에 아래 내용을 쓰면 라우팅한 내용을 불러올 수 있음.

// birds 파일을 불러옴
const birds = require('./birds');

// 미들웨어 활성화 및 해당 라우터 경로 설정
app.use('/birds', birds);

그럼 이제 /birds와 /birds/about을 쓸 수 있다.