23년 3월 23일

배운 것

드디어 프론트앤드 분들도 배포를 마무리 하여서 최종 점검을 하였고, 각자 트러블 슈팅을 의논하였고, 발표 준비를 하였다.

시도 한 것

프론트 앤드 분들도 오늘 새벽에 배포를 마무리 해서 오늘 아침에 최종 테스트를 진행하였다. 우리가 구현 한 것은 운동 게시글인 Today I Exercise(TIE : 오운완) 이라는 프로젝트이다.
완성된 배포사이트를 들어가보니까 진짜로 프론트 앤드 분들이 엄청 고생하셨다.

먼저 처음 접속하면 메인페이지가 나오는데 운동 후기나 여러가지 운동 관련된 커뮤니티 인 것을 볼 수 있다.

사진에 그리기 체크를 했는데 닉네임을 다들 본인이름을 써가지고 가렸다. 안가린 것은 내가 적은 게시물이다.
오른쪽 위에는 로그인 안했다면 login 버튼이 생겼을텐데, 지금은 로그인 해서 이렇게 나온 것이고 바로 왼쪽의 연필은 게시글 작성하는 페이지로 이동한다. 다만 로그인을 안했다면 로그인이 필요한 기능이라고 표시하고 로그인 페이지로 넘어간다.

로그인창은 딱히 볼 것 없다. 흔히 우리가 보는 로그인 기능이다. 회원이 없으면 회원가입 버튼 누르면 회원가입을 할 수 있다.

회원가입 창에서는 아이디, 닉네임, 비밀번호, 비밀번호 확인 이렇게 4개를 작성 할 수 있다. 프론트 앤드 분들이 실수한 부분이 있는데 아이디, 닉네임, 비밀번호 기준을 총족하면 초록글씨로 바뀌는데 이게 너무 작게 표시가 되어 있다. 아무튼 아이디 입력해서 중복된 아이디가 있으면 막고, 중복확인 누르지 않고 회원가입하면 중복확인 누르라고 명시 되어 있다.

pc에서 켜서 보면 원래는 이렇게 나오는 것인데, 모바일에서는 너무 작게 표시되었다느 단점이였다.

아까 로그인을 하고 연필 버튼을 누르면 게시글을 작성 할 수 있다. 제목과 내용을 적을 수 있고, 파일을 선택해서 사진을 등록도 가능하고 우선 우리는 사진 1개만 등록할 수 있게 구현을 하였다.
다만 제목과 내용이 비어있으면 제출이 되지 않게 에러메시지가 나오게 하였다.

마지막으로 해당 게시글을 누르면 다음과 같은 상세 페이지로 나오게 된다. 여기서 사람들이 적은 사진, 제목, 내용을 볼수 있고 아래에는 댓글을 작성 할 수 있게 구현을 하였다. 지금은 내가 적은 게시글이라 저렇게 수정 또는 삭제를 할수 있게 구현을 하였고, 댓글도 또한 내가 작성한 댓글은 삭제 할 수 있게 하였다. 다른 게시글이나 댓글은 수정 및 삭제 표시가 뜨지 않게 구현을 하였다.

트러블 슈팅

마지막으로 백앤드에서 트러블 슈팅이 있다면 크게 4가지가 있었는데 먼저 첫번째로는 CORS 설정이였다 모든 주소에 접근을 권한을 줬는데도 에러가 났었는데 알고보니 라우터 보다 아래에 CORS설정을 해서 호이스팅 문제가 있었다. 이 부분을 위로 쭉 올리니까 해결이 되었다.
다음으로는 TOKEN 문제가 있었다. TOKEN이 불러지지 않는 오류가 있었는데 알고 보니 토큰 이름을 대문자로 적어서 안되었던 것이였다. API 명세서에는 대문자로 표시했는데 우리가 소문자로 적은 바람에 안되었던 것이였기에 우리가 소문자로 바꾸니까 해결되었다.
그 다음으로는 시간이 9시간 늦게 나타나는것이였다. 표준 시간대로는 한국보다 9시간이 늦어서 그랬던 것이였고 dayjs 라이브러리를 사용하거나 sequelize을 이용해서 형변환을 하면 해결이 되었다.
마지막으로 사진을 저장하는 multer 라이브러리를 활용하는데에서도 많은 것들이 힘들었다. 사진을 어디다 저장할지, 이런 부분이 처음 시도 했던 것이라 상당히 애를 먹었었다. 팀원 한분이 구현하신거라 나는 해당 부분을 완벽하게 알지는 못했었지만 그래도 어느정도 어떻게 구현하는지 알게 되었다. 또한 원래는 초단위로 사진 등록을 하게 하였는데 이게 부화 문제가 나타나서 이걸 밀리엄초로 바꾸니까 사진 등록하는 문제도 해결이 되었다.

이렇게 발표도 무사히 마무리 하고 이번 한주 프로젝트가 마무리 되었다. 우리가 구현한 API들을 프론트앤드분들이 다음과 같이 활용해서 구현 했다는 것이 놀라웠었다.
우리가 작성한 백앤드 깃허브 주소는 다음 링크로 올려줬다.
TIE 프로젝트 백앤드 깃허브 주소 링크

알게 된 점

이번 프로젝트를 하면서 느낀 점은 일주일동안 많은 생각을 하게 되었다. 우선 우리도 주특기 주차때 강의노트에서 참고하여서 API위주로 거의 가져와서 조금만 수정하고 일부 살을 붙힌것이 전부였기 때문에 백앤드 API는 3일만에 구현을 마무리 하였다. 그 뒤로는 프론트앤드분들이랑 협업하면서 문제가 났을때 계속해서 조금 수정을 하는 것을 하였다. 다만 아쉬웠던 것은 우리는 3계층 아키텍쳐 분리 작업을 하지 않은 상태로 진행하다보니까 뒤늦게 아키텍쳐 분리를 각자 레포에서 시도를 했지만 결국 끝내 구현하지는 못했었다. 다음에 프로젝트 할때 시도한다면 3계층 아키텍쳐 분리하는 연습도 필요 해보였고, 내가 작성한 API 코드도 다시 한번 생각해보는 시간도 가지게 되었다. 그래도 프론트 앤드분들이랑 처음으로 협업을 하니까 색다른 경험을 했었고 매우 어려웠지만 좋은 경험이였다고 생각하였다. 사실 아침에 약간 몸살 기운이 있어서 힘들었었는데 다행히 오후부터는 괜찮아졌고, 오늘은 발표하고 일찍 끝나서 푹 쉬었다.

앞으로 할 일

이렇게 주특기 미니 프로젝트가 종료되었다. 내일부터는 실제 운영하는 서비스를 하나 골라 최대한 똑같이 구현하는 클론코딩 프로젝트가 시작된다. 기존에 완성된 것을 최대한 똑같이 구현하는거라 쉽지 않을 것 같지만 새로운 도전이 될 것 같다.