[WIL] 항해99 6주차 회고록 - 협업

 

 

 

 

 

🔎 일주일 동안 한 일

 

 

12/6 월 - 미니 프로젝트 주제 선정 / API 설계 / 와이어프레임 / FE 폴더 구조 및 재사용 elements 초기 설정

12/7 화 - FE 각 페이지 뷰 만들기

12/8 수 - FE 뷰 세부사항 수정 / axios 인스턴스 생성 및 api 연동을 위한 인덱스 파일 작성 / 기능 모듈 작성

12/9 목 - FE 뷰 세부사항 수정 / api 파일 수정 / 이미지 모듈 작성 / 로그인, 회원가입 구현

12/11 금 - FE 이미지 업로드 오류 해결 / 포스트 관련 api 통신 오류 해결 / 포스트 추가, 수정, 삭제 구현

12/12 토 - FE 댓글 추가, 삭제 구현 / 로그인 상태 여부에 따른 버튼 조건부 렌더링 / 세부 CSS 수정 / 배포

 

 

🔎 우리의 미니 프로젝트

 

프로젝트 이름: 항해록

도메인: 소셜 미디어

link: http://hanghaelog.shop/

 

---

 

와이어프레임

 

 

API

 

 

user API

 

 

board API

 

 

comment API

 

 

페이지

 

 

---

 

 

🔎 새롭게 배운 것

 

 

커뮤니케이션과 협업

 

 

정확히 말하면 새롭게 배운 건 아니지만 중요성을 다시금 알 수 있었고

왜 기업에서 개발자를 채용할 때 커뮤니케이션 역량을 고려하는지도 알 수 있는 주였다.

 

다행히 이번 주에도 커뮤니케이션의 나쁜 예가 아닌 좋은 예로 중요성을 느낄 수 있었다.

 

이번 6주차는 처음으로 백엔드와 프론트엔드가 만나서 하나의 미니 프로젝트를 만들어야 하는 주차였다.

 

백엔드에 대한 기초지식도 없는 상태에서 함께 결과물을 만들어 가는 일이 결코 쉽지 않을 거라는 생각에 걱정이 많았었는데

프론트엔드뿐 아니라 백엔드분들도 너무나도 좋은 분들을 만나게 되어 많이 배울 수 있었다.

 

API 설계에 대한 것도 어렴풋이만 알고 있을뿐 어떻게, 어디에 쓰는지 잘 몰랐었는데

능수능란하게 각 기능에 필요한 데이터와 형태, url도 뚝딱뚝딱 만들어 주셔서 통신할 때 큰 문제 없이 기능을 구현할 수 있었고,

프론트엔드에서 어려워하는 개념과 프로세스들을 친절하고 상세하게 설명해 주시기도 했다.

 

프론트엔드도 모두 비슷한 사람들만 모여서 신기했다.

적당히 조용하고, 적당히 재밌으면서도 모두 정말정말 열심히 해서 프로젝트를 진행하는 내내 즐거웠다.

 

'뭐든 적당히' 라는 말은 어디서든 자주 쓰이는 말이지만,

그래서 적당한 게 어디까진데? 라는 의문이 항상 따라다녔는데

그 '적당히'를 이번 주에 몸소 체험하고 실천할 수 있었던 것 같다.

 

과하지도, 그렇다고 부족하지도 않은 적당한 커뮤니케이션은

미래에 발생할 수 있는 문제의 수를 현저하게 줄여주고, 

어쩔 수 없이 발생한 문제도 빠르게 해결 가능한 범주에 들어올 수 있도록 만들어 준다는 생각이 들었다.

 

아무튼 우리 팀 최고!

 

 

커다란 팀 테이블 냅두고 좁은 곳에 오밀조밀 모여 있는 귀여운 우리 팀

 

 

 

axios 라이브러리와 API 통신

 

1주차 때 ajax의 실패를 맛 본 나는 걱정인형답게 일요일부터 정말x23435634 걱정이 많았다.

 

내가 데이터를 요청하고 잘 받아오는 코드를 제대로 작성할 수 있을까?

API 통신에 문제가 생겼을 때 잘 해결할 수 있을까?

 

이런 걱정과 더불어 월요일에 들은 금시초문의 axios 라이브러리는 나에게 엄청난 공포감을 주었다.

나 때무네 프로젝트가 망하면 어떡하지..하는..🥲

 

이 공포감이 또다른 자극이 되어 이번에는 절대 성공하겠다는 다짐을 하게 만들어주었고,

비슷한 내용이라도 axios와 관련된 글과 유튜브 영상을 여러번 찾아본 기억이 난다.

 

다행히 내가 api 인덱스 파일을 작성하게 돼서 공부가 많이 되었고,

왜 프로젝트의 가장 초반에 하는 API 설계가 중요한지도 알 수 있었다.

 

그리고 통신하면서 발생하는 에러들을 여러 차례 만나면서 왜 CS 지식이 필요한지도 다시금 깨닫게 되었다.

문제를 해결하려면 원인을 알아야 하는데 원인을 모르니 스스로는 해결하기 위한 접근 방법조차 떠올릴 수 없었다.

 

공부해야 할 게 많다는 것...오히려 좋아.

 

 

json-server 와 Mock API 이용하기

 

백엔드 분들이 서버와 데이터베이스를 촘촘하고 탄탄하게 만들어주시는 동안

프론트엔드 단에서 데이터를 불러와서 뿌려주는 작업을 확인해 볼 수 있도록 가짜 서버를 이용했다.

 

이 과정에서 우리의 프론트엔드 리더 1sam님이 많이 찾아봐주셔서

json-server와 포스트맨을 이용해서 서버와 통신하는 과정을 먼저 경험해볼 수 있었다.

 

포스트맨 어플리케이션을 보니 통신 외에도 여러가지를 해볼 수 있어서 앞으로도 유용하게 이용할 수 있을 것 같다.

 

 

AWS S3 이미지 업로드

 

이번에는 AWS S3를 이용해서 이미지 업로드 기능을 구현했다.

 

사실 백엔드 분들이 모두 만들어주셔서 프론트엔드에서는 S3 이미지 경로를 불러오기만 하면 됐었는데

프론트엔드에서 API를 호출할 때 문제가 있어서 결국 이미지 url 변환을 프론트엔드에서 작성하기로 했다.

 

아마도 개인 과제에서 사용한 파이어베이스의 스토리지와 비슷한 프로세스일 것 같기도 하고,

이전 기수의 깃헙에서 참고할 만한 레퍼런스도 있어서 내가 작성하게 되었는데

팀원들이 다같이 알아봐주고 도와줘서 금방 S3와 연동해서 이미지를 저장하고 S3 url을 가져올 수 있었다.

 

꼭 프론트엔드에서 하는 일은 아니더라도 알고 있으면 앞으로도 많은 도움이 될 것 같아서 오히려 좋았다는 생각이 든다.

 

 

 

🔎 느낀 점

 

협업이란?

 

이번 주도 잠을 많이 못 잔 바람에 세세하게 기억이 다 나지는 않지만

프로젝트를 진행하는 내내 즐거웠다는 기억만은 선명하게 남아있다.

 

합이 잘 맞는 사람들과 함께 하는 즐거움을 만끽하는 동시에

그렇지 않은 경우에는 어떻게 상황을 풀어나가야 할 지에 대한 고민도 새롭게 찾아왔다.

 

 

새로운 시도

 

이번 주의 몇 안 되는 아쉬운 점 중 가장 큰 아쉬움은 나 자신에게 있는데,

프로젝트에 새로운 시도를 아무것도 하지 않았다는 것이다.

 

처음부터 이번 미니 프로젝트의 의의를 백엔드와의 협업과 주특기 기간 동안 배운 것들에 익숙해지기로 둬서

결과적으로는 잘한 선택이었고, 스코프였다고 생각하긴 하지만

주특기 기간 동안 배우지 않은, 새로운 기능들을 추가하고 구현한 팀들을 보면서 많은 감명을 받았다.

 

이번 클론 코딩 주에는 새로운 시도들을 할 수 있는 사이트로 정해서 만들 수 있었으면 좋겠다.

 

 

---

 

댕댕이도 사이버 친구가 있답니다.

 

 

이번 주에는 프로젝트 때문에 바쁘다는 핑계로 TIL을 거의 안 쓰는 바람에 회고록을 쓰는 게 너무 어려웠다. 🤯

다음 주에는 제발 열심히 쓰자!