NodeJS, pug로 투두앱 만들기
처음부터 끝까지 혼자만의 힘으로 해낸 나의 작고 소중한 투두앱
CSS는 li의 불렛을 없앤것뿐인, 날것의 모습 그대로지만 이래봬도 CRUD 기능은 모두 정상적으로 작동한다!
오늘의 배운점
pug에 style.css 적용하기
결론부터 말하자면, pug의 include를 사용한다.
처음엔 기존 html문서에 적용하는 방식 그대로를 pug문법으로 작성했다.
html
head
link(href="../public/style.css" rel="stylesheet")구글링을 하여 다른 사람들의 기록들을 확인하니, 다들 위의 방식으로도 적용이 되는 듯하다.
하지만 나의 경우 위의 방식으로는 style.css가 정상적으로 적용되지 않았다.
이에 공식문서를 확인하니, Includes 파트에 아예 설명이 되어있었다.
Including non-Pug files simply includes their raw text.
doctype html
html
head
style
include style.css
body
h1 Todo-app
script
include script.jsCSS 적용이 막막했는데 이리 심플했을줄이야🫢
무조건 공식문서'부터' 참고하기
NodeJS, Express, Mongoose, MongoDB, Pug 등,
혼자 적용해나가며 배운점이 있다면 일단 공식문서부터 참고하자라는 것이다.
김태연 교수님께서 공식문서를 성경 삼듯이 해라" 말씀하셨을땐 그저 웃어넘겼었는데, 이번에 혼자 미니 프로젝트를 진행하며 더욱 공감하게 되었다.
공식문서를 찾아보고 → 영어나 개념이 이해되지 않는다면 그 부분의 연장선상으로다가 구글링을 진행한다 → 이때 블로그나 stackoverflow 등을 확인한다
Edit와 Update는 별개다(API 설계의 중요성)
너무 당연하게 유저의 입장에서만 생각해왔던것 같다.
시작한 당일날 끝날 수 있던 프로젝트가 이틀에 걸쳐 진행된 이유 중 하나다.
너무 당연하게 "기존글을 수정하는 것"과 "수정된 내용을 업데이트 하는 것"을 같은 것이라 생각하고 API 분리를 진행하지 않았다.
여러 강의 및 다른 분들의 프로젝트 속 API 설계를 참고하고나서야 분리의 필요성을 깨닫고 뒤늦게 router와 controller를 수정해나갔다. (덕분에 view도 계속 건드리게 돼서 정신 똑바로 차리고 있어야 했다)
프론트엔드에서 배치 하나하나를 꼼꼼히 뜯어보는 것 마냥, 백엔드에서도 API 설계를 꼼꼼히 하는 것이 너무너무 중요하다는걸 깨달았다.
이렇게 작은 타이니미니 프로젝트에서 미리 깨달을 수 있어 천만번 다행이고 행운이라고 생각했다😌
PUT과 DELETE에 관하여
이론상으로는
'아 http메소드와 Restful API, 그러면 (1) Get은 목록 불러올때, (2) Post는 새글 작성할때 (3) Put은 수정할때(아니라면 새글 쓸 때) (4) Delete는 삭제할 때!'
라고 막연히 알고 있었다.
이에 app과 router에 적용할때도 app.put app.delete router.put router.delete와 같이 작성해나갔다.
하지만 put과 delete를 적용한 페이지의 화면에는 Cannot get /todos/update/과 같은 에러가 보이기 시작했다.
알고보니 HTML은 PUT, DELETE 메소드를 지원하지 않는다고 한다. 이에 나 역시도 GET과 POST로 둘의 자리를 대체하여 구현해나갔다.
Restful API를 지키기 위해 method-override라는 패키지를 사용하여 PUT과 DELETE를 가짜로 만들기도 한단다. 사실 자세한 내용은 헷갈려서 주중에 코치님께 다시금 문의 드릴 예정이다.🤔
느낀점: 미니 프로젝트를 하는 이유
이론으로만 이해한건 절대 내것이 아니구나 라는걸 깨달았다.
개발자라면 어떻게든 구현해내는것이 목표인데, 이 작은 프로젝트에서 조차 낑낑대는 내 모습에 살짝 충격을 받았다. 한번에 해낼것이라 믿은 것 또한 욕심이지만, 그래도 이렇게 간단한 투두앱에서 많은걸 배우게 될지는 몰랐다.
하지만 그래서 그만큼 성취감이 크다.
이 성취감이 주는 뿌듯함이 엄청나서 계속 공부할 수 있는 힘을 주는 것 같다.
앞으로 리액트, 데이터 분석, AI를 하나씩 맛보게 되겠지. 그때마다 조금이라도 하나씩 프로젝트를 만들어 나갔으면 좋겠다 :)
