[WIL 5] 주특기 2번째 프로젝트 완료

항해99

99일, 주니어 개발자로 입사하기에 충분한 시간

hanghae99.spartacodingclub.kr

---

 

• 진행 날짜 - 2021.03.26 ~ 2021.04.01
• 주특기(Node.js) 목적 - 팀을 이루어 Node.js를 공부하고, 각자 주어진 과제를 해결하기
• 이번 주에 한 일 - 

      github.com/WonDongGyun?tab=followers

 

• 필수 포함 사항

 

• 깃 허브 링크 - 

WonDongGyun - Overview

---

 

항해 99의 다섯째 주가 밝았습니다!

 

요번주는 저번주에 이어서 주특기 기간이었습니다. 다만, 과제는 좀 더 어려워져서 돌아왔습니다!!!

 

 

 

완성한 basicBoard.ejs

 

저번주의 과제는 로그인이 기능이 없는 게시판을 만드는 것이었다면, 요번주의 과제는 로그인이 있는 게시판을 만들고 로그인 여부에 따라 기능이 나뉘어 지는 것이었습니다.

 

 

 

 

 

요번에는 과제 조건이 좀 많아서 노트에 정리할 사항이 많았습니다. 글씨를 못 쓰는건 양해해주세요. ^^

 

저번주 과제랑 가장 큰 차이점은 특정 조건을 만족하면 경고창을 띄우거나 페이지를 이동시키는 조건이 많았습니다.

예를 들어 비밀번호 확인과 비밀번호가 같지 않다면 모달을 띄운다던가, 로그인을 하지 않고 글쓰기 버튼을 눌렀을 때 로그인 창으로 옮기는 조건들이요. 그래서 그런지 이번 프로젝트에 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 백엔드를 제대로 이해못해서 오류 잡는데 너무 지나친 시간을 쏟아부었습니다. 그게 너무 아쉽게 남았습니다.....