[WIL 5] 주특기 2번째 프로젝트 완료
- 진행 날짜 - 2021.03.26 ~ 2021.04.01
- 주특기(Node.js) 목적 - 팀을 이루어 Node.js를 공부하고, 각자 주어진 과제를 해결하기
- 이번 주에 한 일 -
github.com/WonDongGyun?tab=followers
- 필수 포함 사항
- 깃 허브 링크 -
WonDongGyun - Overview
Tristy의 코딩 노트 . WonDongGyun has 12 repositories available. Follow their code on GitHub.
github.com
항해 99의 다섯째 주가 밝았습니다!
요번주는 저번주에 이어서 주특기 기간이었습니다. 다만, 과제는 좀 더 어려워져서 돌아왔습니다!!!
저번주의 과제는 로그인이 기능이 없는 게시판을 만드는 것이었다면, 요번주의 과제는 로그인이 있는 게시판을 만들고 로그인 여부에 따라 기능이 나뉘어 지는 것이었습니다.
요번에는 과제 조건이 좀 많아서 노트에 정리할 사항이 많았습니다. 글씨를 못 쓰는건 양해해주세요. ^^
저번주 과제랑 가장 큰 차이점은 특정 조건을 만족하면 경고창을 띄우거나 페이지를 이동시키는 조건이 많았습니다.
예를 들어 비밀번호 확인과 비밀번호가 같지 않다면 모달을 띄운다던가, 로그인을 하지 않고 글쓰기 버튼을 눌렀을 때 로그인 창으로 옮기는 조건들이요. 그래서 그런지 이번 프로젝트에 if else문이 엄청 많이 사용됐답니다.
분명히 쉬운 프로젝트라는 것을 알고 진행한 것이었지만 생각보다 엄청 많은 시간을 투자해서 완성하였습니다. 제 실력이 부족한 탓도 있었겠지만, 기본적인 css를 가지고 프론트와 백단을 같이 작업하려니까 진짜로 죽을 맛이었습니다.
상황이 이렇다 보니 조금만 신경을 덜 쓰면, 코드 이곳저곳이 엉켜버렸기에 그걸 풀어내는데 상당한 시간을 소비하였습니다. 그 중에서 가장 오랜 시간동안 붙잡고 있었던 오류는 제가 express를 제대로 이해하지 못해서 middle ware를 사용할 때 나타났습니다.
원래 ejs 페이지에서 버튼을 눌렀을 때 단순히 /writeBoard로 이동하는 기능이었으나, 과제가 바뀌면서 로그인 했을 경우에만 /writeBoard로 이동시켜야 했습니다. 그래서 authMWRouter 라는 인증 절차가 포함된 미들웨어를 선언해서
app.get('/writeBoard', authMWRouter, async (req, res) => {
res.render('./basicBoard/writeBoard');
})
이런식으로 3줄로 끝나는 코드를 만들었으나, 해당 페이지로 이동을 하지 않는 문제가 발생했습니다. 처음에는 미들웨어에 구문을 잘못써서 발생하는 오류인 줄 알았습니다. 그래서 오랫동안 authMWRouter를 붙잡고 있었고, 하루 종일 관련 자료만 뒤졌죠.
그렇게 시간을 허비하던 중, console.log을 찍어보며 발생 순서를 파악하다가 GET 통신이 페이지를 넘어갈 때 지나치게 많이 발생하는 것을 발견하였습니다.
express에서 템플릿을 사용해 res.render를 할 경우, 버튼에 window.location을 사용해서 /writeBoard 같은 링크로 보내면, 해당 페이지로 이동했을 때 GET 통신이 한번 발생함과 동시에 app.get API를 타버려서 GET 통신이 총 2번 발생한다는 것을 알았습니다.
첫 번째는 jwt 인증 토큰 값을 서버단에 성공적으로 전송을 해줄 수 있었지만, 2번째 발생하는 GET에는 그런 토큰 정보가 안담겨있었기에 발생하는 오류였던 것입니다. 어떻게든 짤막하게 작성하려고 했지만...... 어쩔 수 없이 api를 분리해서 전송을 해야 했습니다. 이 오류 덕분에 다음에는 서버에서 페이지를 이동시키지 말고, 프론트에서 페이지를 옮기는 방식을 사용해서 이러한 오류를 줄여야 겠다고 다짐 할 수 있었습니다.
Jest 같은 경우에는 조금 난해해서 하기 어려웠던 것 같습니다. 사용자가 정한 파일의 위치에서 테스트를 진행합니다.
다만, 데이터베이스 테스트 같은 경우에는 접근한다 "가정"하고 진행을 하는 것이기 때문에, 테스트 통과 조건을 잘 작성해야 합니다. 조금만 논리적으로 틀려도 바로 jest에서 오류코드를 내뱉기 때문이죠. 이처럼 접근한다 가정하고 test 코드를 짜는게 처음에는 어려웠지만 몇번 진행하고 나니 익숙해져서 완성할 수 있었습니다.
😀 배운 점
jest 사용법, sequelize, 새로운 Vanilla JS AJAX(fetch), docker desktop mysql 연동 등 다양한 기술들을 배울 수 있었습니다. 특히, jest 같은 경우에는 상당히 독특해서 이해하는데 어려움이 많았지만 유용한 기능인 만큼, 사용하는데에 익숙해져야겠다고 생각했습니다.
😙 느낀 점
스스로 express 더 배우며 갈고 닦아야겠다고 느꼈습니다. 아직 node의 길은 멀고 험난하네요 ㅠㅠ
😭 아쉬웠던 점
제가 node 백엔드를 제대로 이해못해서 오류 잡는데 너무 지나친 시간을 쏟아부었습니다. 그게 너무 아쉽게 남았습니다.....