레시피 사이트 프로젝트 회고

사실(fact)

이 프로젝트는 사실 친구와 2인조로, 나는 프론트엔드를, 친구는 백엔드를 맡아서 2달간 진행할 예정이었다. 그러나 기획 중간에 친구에게 개인적인 사정이 생겨서 나만 따로 진행하다가 결국 백엔드까지 하게 되어 풀스택 솔로 프로젝트가 되었다. 이후 친구의 백엔드 코드에 맞춘-친구는 파이썬 개발자이다.- 프론트엔드 코드를 collab이라는 브랜치를 따로 파서 나누어 진행하게 되었다.

기획단계에서 친구가 종종 이용한다는 '만개의 레시피' 사이트를 참고해서 이와 같은 레시피 공유 사이트를 만들자는 의견이 나왔고, 따라서 우리가 만들 수 있는 최소한의 선에서 일부 기능과 디자인을 참고하여 개발했다.

나는 이전 팀 프로젝트에서 느꼈던 부족한 css 실력을 키우기 위해 한 달 이상의 긴 시간을 프론트 개발에 쏟게 되었다. 그리고 이번에는 리덕스 대신 react-query를 사용해 ajax 통신과 서버 응답 상태를 전역적으로 관리했는데 코드 진행이 내 예상과 다를 때가 많아 적응하는 데 시간이 걸렸다.

이번 개발을 하면서 여러 시행착오를 겪었지만 새롭게 배운 것도 많았다.

프론트엔드

• 리액트 컴포넌트의 라이프 사이클 이해를 기반으로 컴포넌트 재활용하기
• 반복문 내 비동기 코드 동작에 대한 이해
• 리액트의 렌더링 성능 최적화를 위한 hook의 사용: useCallback, useMemo
• 프론트 전역값 관리: useContext
• css 레이아웃: 그리드, 반응형
• css: z-index stacking context, 슬라이드 배너
• 기타 등등..

백엔드

• cors 에러 처리
• 쿠키 처리
• sequelize orm 쿼리 문법
• 외부 api 이용하기(oauth2)
• seeder 파일로 예시 만들기

배포

• 무료 도메인 이용
• aws https 연결

사실 개발적인 것 이외에 실수를 통해 배운 것도 있다.

• 깃 리모트 레포지토리에 aws 엑세스 키 노출로 인한 해킹: 이 문제로 12월은 aws와 연락하며 내 계정을 정리하고, 내가 해킹당했다는 것을 증명하는 데 시간을 보냈다. 레포지토리를 퍼블릭으로 변경하면서 한 순간의 실수와 뒤늦은 대응으로 이런 일이 발생하였다. 이를 통해 깃과 aws를 이용하는 데 있어 더 큰 경각심을 갖게되었다.

느낌(Feeling)

혼자서 개발을 하다가 막히는 구간이 있으면 스스로 알아내고 풀어내야 하기 때문에 답답하기도 하지만 문제를 해결하는 과정이 재밌고 해결을 했을 때 더 큰 기쁨이 찾아온다. 이런 과정을 통해 나온 결과물은 나의 성장을 명확히 인지할 수 있는 수단이 된다. 부족한 부분 또한 보이기에 새로운 것을 더 배우고 싶다는 욕심이 생긴다.

교훈(finding)

명확한 데드라인을 정하고 계획대로 개발을 진행하자.
혼자서 하다보니 자꾸 늘어져서 시간을 낭비하는 순간이 많았다. 철저한 계획하에 일정 안에 개발을 진행하는 습관을 들이자.

깃과 aws 이용시 주의하자.
뒤늦게 안 사실이지만 깃가디언을 이용하면 민감 파일이 외부로 유출되는 것을 미리 방지할 수 있다.

향후 행동(Future action)

• 친구가 준비가 된다면 친구의 벡엔드 코드에 맞추어 프론트엔드의 일부를 재구성하는 작업이 필요하다.

• 성능최적화를 고려하며 개발을 하기 위한 공부를 해야겠다.

피드백(Feedback)

• http 통신이 필요이상으로 발생해 리소스를 낭비하는 것 같아서 효율적인 코드를 짜는 법에 대해 공부해야한다.
• 로그인 유지를 위해 다양한 방법들을 생각해봤지만 보안이 우려되어 시도하지 않았다. 이에 대해 더 알아봐야 할 필요성이 있다.
• 클래스 등록 api는 만들었으나 페이지를 만들지 않아 아쉽다. 이 부분은 나중에 기회가 된다면 보충해야한다.
• 네이버 로그인 기능은 내 사이트를 네이버에 검수를 받아야 서비스를 사용할 수가 있다. 현재 미리 등록된 테스트 아이디만 네이버 로그인이 가능하다. 이 부분을 미리 알아보지 않고 적용한 점이 아쉽다.