23년 5월 8일

시도 한 것, 알게 된 점

5주간 동안 프로젝트 구현과 UT도 성공적으로 마무리 되고, 이번주부터는 코딩은 하지 않고, 그동안 준비 했던 실전 프로젝트를 최종 발표를 하기 위한 여정이 시작되었다고 보면 된다.
오늘 해야했던 작업은 상당히 급했는데 프로젝트 브로셔를 오후 1시까지 해야한다는 소식을 듣게 되었다. 먼저 브로셔 라는 의미가 조금 생소 할 수 있는데, 최종 발표를 하기 앞서서 우리가 만든 작품을 간단히 소개하는 문서라고 보면 된다. 이 문서들은 항해에서 운영하고 있는 협력하고 있는 회사들에게 전달이 된다고 한다. 물론 어느정도인지는 정확하지는 않아도, 우리가 만든 프로젝트를 시니어 멘토님들이 본다는 것이니, 협력사 한테한테는 도움이 될 수 있다.

그래서 우리 팀은 다른 조에 비해서 다들 늦게 오는 편이라 미리 먼저 출책한 내가 초안과 뼈대를 잡았었다. 참고로 브로셔는 이미 만들어진 노션 템플릿에다 적으면 되었고, 필수적인 것은 대표적으로 프로젝트 소개하는 메인 이미지와 로고, 프로젝트 소개, 기능, 아키텍쳐, 기술적 의사결정과 트러블 슈팅이 필수 항목이였다. 나는 해당 필수내용들을 제목들을 미리 만들었고 목차를 만들 었다. 그리고 추가적으로 UI/UX, ERD, 팀원 소개 및 역할 분담도 추가적으로 만들었고, 이 중에서는 아키텍쳐, 기술적 의사 결정, 트러블 슈팅은 제외하고 나머지를 미리 작성하였다.

이후에 11시에 최종발표 주차 발제를 듣게 되었고, 원래 3시로 알고 있었는데 1시로 단축되어서 더더욱 시간이 촉박해진 것을 알게 되었다. 그래서 가장 급했던 것은 아키텍쳐 그리는 것이였는데, 구글 PPT에서 사용했던 기술들의 로고들은 모두다 취합을 해서 모두 보냈고, 시스템 아키텍쳐는 프론트 분이 직접 그려 주셨다. 우리 백앤드에서도 중간발표때 쓰지는 않았지만 미리 그렸던 손그림으로 그렸던 아키텍쳐를 찾았고, 그것을 참고해서 급하게 프론트분들에게 대략 그림 어떻게 표현하면 되고 설명을 하였다. 시간이 부족해서 아주 자세하게 그리지 못하고 1시에 제출을 했지만, 그래도 완성은 할 수 있었다. 약간 미완의 느낌도 있긴 했다.

왼쪽이 프론트쪽이고 오른쪽이 백앤드 쪽인데 우리 백앤드에서는 자바스크립트라는 언어와 노드라는 주특기 기술을 사용했고, 대중적으로 가장 많이 사용하는 express.js라는 웹 프레임워크를 사용하였다. 그리고 multer라는 것을 통해서 사진들을 저장을 하였고, 우리가 작성한 모든 코드들은 Mysql과 Sequelize ORM을 통해서 데이터베이스를 관리 하였다. 이후 Amazon EC2과 ubuntu를 통해서 인스턴스를 만들었고 그 안에 우리가 프로젝트로 만들었던 깃허브 파일들을 클론해서 배포를 하였다. 마지막으로 cors를 통해서 웹 서버를 프론트에게 연결을 해서 서버를 킬 수 있게 하였다.

이러한 것들을 배포된 api를 통해서 프론트에서 구현한 마이페이지, 메인 페이지, 피드, 댓글 등등을 적용을 하였고, 소셜 로그인을 통해서 유저들이 로그인을 할 수 있게 하였고, 마지막으로 네이버 클라우드 플랫폼을 통해서 현 위치의 좌표와 맵 표시를 하게 하였다.

이 외로 기술적 의사 결정과 트러블 슈팅은 각각 지난주에 적었던 시니어 멘토링 양식 작성과 기존에 관리했던 실전 프로젝트 팀 노션에다 이전에 작성한 부분을 최대한 추려서 정리하고 작성을 하였다. 그렇게 최대한 빠르게 하니까 1시 살짝 오버되었지만 무사히 마무리 하게 되었다.

정신없었던 브로셔 제작이 끝나고 오후에는 github에 지난 88일차에 리드미를 작성을 했었다. 근데 이번에 브로셔 작성했으므로, 리드미에도 기술적 의사 결정, 시스템 아키텍쳐, 트러블 슈팅을 추가적으로 기입을 하였다.
생각외로 내용이 많아서 정리하는데 상당히 오래 걸렸다. 특히나 트러블 슈팅에 대해서는 쓸 내용이 너무 많았는데, 여기서 추가적으로 알게된 리드미 작성 기술을 하나 소개 하려고 하는데 우리가 노션에서도 많은 글을 숨길 수 있는 토글 기능이 있다. 근데 의외로 깃에서 제공하는 리드미 작성 할때도 토글을 적용 할 수 있다는 것을 알게 되었다.

적용하는 방법은 다음과 같다. 참고로 이 방법은 벨로그에서도 가능하다.

<details>
<summary>토글 제목 작성</summary>

토글 안에 있는 내용

</details>

이렇게 코드 작성하면 아래의 결과처럼 된다.

토글 제목 작성

토글 안에 있는 내용

또한 토글 안에 또 다른 토글 넣는 방법도 가능하다. 예시는 다음과 같다.

<details>
<summary>토글 제목 작성</summary>
토글 안 내용
  <details>
    <summary>토글 부제목 작성1</summary>
    토글 안 부내용1
  </details>
  <details>
    <summary>토글 부제목 작성2</summary>
    토글 안 부내용2
  </details>
</details>

마찬가지로 결과는 아래와 같이 적용이 된다.

토글 제목 작성 토글 안 내용 토글 부제목 작성1 토글 안 부내용1 토글 부제목 작성2 토글 안 부내용2

이렇게 하면 리드미에 내용이 많은데 감추지 않고 모두 다 겉으로 다 나타내면 가독성이 매우 떨어지게 된다. 그러기 때문에 이렇게 토글을 이용하면 아무리 긴 내용이라도 깔끔하게 나타 낼 수 있고, 자세히 보고 싶으면 토글을 눌어서 세부적인 내용을 볼 수 있게 우리가 작성한 리드미를 다른사람에게 흥미를 볼 수 있게 만들었다.

그렇게 저녁에 추가적인 내용들을 모두 정리하고 오늘은 어버이날이라 그런지 개인적으로 부모님 감사축하 파티라도 늦은 밤에 하기 위해서 빠르게 체크 아웃했다.

앞으로 할 일

내일부터 본격적으로 최종 프로젝트 발표에 대한 영상 마지막 피드백과 최종발표에 사용할 ppt 제작에 대해서 조금 의논을 할 것 같다.