안녕하세요, 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 3기 수료 중인 김당퀔입니다! 이번 3기 수료 기간은 9월 13일부터 4월 14일까지 총 7개월 과정입니다. 7개월 동안 매주 주말 회고록을 작성해 보려고 합니다.

블로그 제출 기한으로 인해서 지난 금요일부터 해당 주 목요일까지의 사이클로 작성됩니다.

요일별 공부 기록

❤️ 2월 24일 금요일

1. 미왕론 배포

🧡 2월 26일 일요일

1. 노마드 코더 트위터 클론

• Nweeting

💛 2월 27일 월요일

1. 백준

• 11718 그대로 출력하기
• 5622 다이얼
• 2444 별 찍기
  • 계속 출력 오류라고 떠서 당황했지만… trimEnd 써서 해결!

2. 노마드 코더 트위터 클론

• File Upload
• Edit Profile

3. Field Passer 회의

• ts로 파일 변환 내일까지
• api 수정 완료되면 연결하기

💚 2월 28일 화요일

1. 백준

• 10988 팰린드롬인지 확인하기

2. 파이널 프로젝트 설명

• 주제 정해서 제출

3. Feild Passer

• ts로 파일 변환 완료

4. 미니 프로젝트 회고

• Q1. 프로젝트를 진행하면서 생겼던 문제는? 그에 대한 해결 방안?

  • 항상 윈도우 전체 사이즈만 생각해 오던 것을 모바일 사이즈로 진행하려고 하다 보니 px단위가 맞는지, rem 단위가 맞는지 생각하게 되었다. 멘토님이 말씀해 주신 방안으로는 스크린 사이즈에 맞춰서 px 단위를 정해 놓거나, 지정된 폰트 사이즈가 있다면 rem도 나쁘지 않다고 하였다. 우리가 사용한 방식은 max 사이즈 px를 정해 놓고, 그 안에서 margin 값들을 맞추는 방식이었다. 작업하는 프로젝트마다 사용하는 방식은 다르므로 다름 프로젝트 때는 rem 사용해 보는 것을 추천해 주셨다. 개인적으로 테일윈드 라이브러리는 반응형에 친화적인 라이브러리라고 생각이 드는데 스크린 사이즈에 대한 반응을 제대로 작성하지 못한 점이 아쉽게 남는다.
  • 리덕스를 사용하여서 사용자의 로그인 상태를 관리해 주었는데 첫 로그인 후 토큰이 있음에도 불구하고 api 서버에서 회원에 대한 정보를 받아오지 못 했다. 오류의 원인을 파악해 보자면, 리덕스에 정보값을 저장하기 전, 토큰을 저장하기 전 빠르게 api로 요청을 보낸다는 것. 해당 방법을 해결하기 위해서는 리덕스 툴킷으로 로그인이 완료되었을 때 받는 request에 토큰이 있는지 확인 후 회원의 정보를 받아오는 방법을 사용해야 한다.
  • 간단한 오류였지만 react-toastify를 사용할 때 해당 페이지 상위 컴포넌트에 toastContainer를 넣은 것이 아니라 하위 컴포넌트에 toastContainer를 넣었더니 토스트가 보이지 않았다. 상위로 컨테이너를 옮겨 주니 잘 실행되었다.

• Q2. 프로젝트를 진행하면서 좋았던 진행 방법은?

  • 처음으로 팀 프로젝트를 진행하면서 issue(마일스톤)와 pr 시 issue 연동하는 방식을 사용하였다. 프로젝트의 흐름이 보이고 다른 팀원들과 회의를 하지 않아도 팀원이 어떤 코드를 작성하고 있는지 눈에 보이는 점이 좋았다.
  • 페이지 흐름도를 작성할 때 표로 그리는 것이 아니라 피그마로 작성했던 점이 조금 더 명시적으로 이해할 수 있어서 좋았던 것 같다. 이번 프로젝트를 진행하면서 디자인까지 신경 쓰게 되어서 피그마로 진행하게 된 거긴 했지만 조금 더 빠르게 프로젝트를 시작할 수 있었던 것 같다.

• Q3. 프로젝트를 진행하면서 개인 성장이 느껴졌던 부분은?

  • 라이브러리를 사용하는 것에 거부감이 있는 건 아니었지만 당장 무엇을 써야 할지, 어떤 상황에서 써야 할지 잘 파악이 안 되었는데 프로젝트를 진행하면서 라이브러리를 사용하며 조금 더 나은 서비스를 만들 수 있었다.
  • TS를 사용하여 제대로 된 마무리를 한 건 이번 프로젝트가 처음이었다. TS에 대한 이해가 조금 더 올라가게 되었고, 전에 다른 팀 멘토링에서 얻은(…) 내용으로는 타입을 지정하여 쓸 수 있을 정도만 되어도 좋다고 하셨는데 any 타입이 아닌 명확한 타입들을 작성하여 코드를 작성하였다.

• Q4. 프로젝트를 진행하면서 추가적으로 개발해 보고 싶은 기능은?

  • 결제 기능을 해 보고 싶다. 다른 팀이 제출한 결과를 보았을 때 임의로 카드 신청을 했다는 결제 기능이 있었다.
  • 개인적인 의견이지만 장바구니, 관심 상품 기능을 스스로 리덕스로 코드를 구현해 보고 싶다.
  • 토큰 만료 시간에 맞춰서 사용자에게 재로그인을 하라고 하는 메시지, 페이지 만들어 보기.

• Q5. 이번 프로젝트를 진행하면서 얻은 새로운 인사이트는?

  • 백엔드와 소통하면서 생길 수 있는 문제들에 대해서 알게 되었다. http / http 에러, cors 에러 등, 상태 코드에 대한 이해도도 올라가게 되었다.
  • 깃허브 이슈와 pr 활용법!

💙 3월 1일 수요일

1. 원티드 프리온보딩 프론트엔드 사전 과제

• 배포 사이트

2. Field Passer

• 코딩을 하면서 생각했던 고민
  • 반환 값이 없거나, 정보를 덜 주었는데도 상태 코드가 200으로 오는 것에 대한 고찰...
  • 회원 정보 조회 시 이미지 설정을 안 했을 때 띄워 줄 기본 이미지에 대한 고찰...
  • 내용 변경에 대한 알람을 confirm이나 alert?
  • 글 목록을 조회할 때 날짜로 조회할 수 있던데 이걸 페이지 네이션으로 변경 가능할까?
• 방문자 수, 최근 글 수 등 조회가 되지 않음

💜 3월 2일 목요일

1. 노마드 코더 트위터 클론

• 배포 완료!
  • 분명 보안 설정까지 했는데 왜 로그인이 안 되는가...

2. Field Passer

• 관리자 페이지 로그인 기능 구현

3. CS 면접 질문 정리

• HTML
• CSS

4. 포트폴리오에 넣을 내용 정리하기
5. 회고 발표회

• KPT 회고 방법
  • Keep | Problem | Try
• 포트폴리오에 팀 프로젝트 완성도가 중요하다.
• 프로젝트가 끝난 후 기능 추가보단 내가 왜 이렇게 코드를 짜게 되었는지 회고가 더 중요하다.
• 에러 핸들링에 대한 내용 문서화 하기.
• axios interceptor 꼭 사용해 보기.
• 프론트에서 백엔드 서버가 배포되기 전 목 데이터로 서버 만들어 보기는 것을 추천.

주간 회고

미니 프로젝트를 배포하고 나니 조금 마음의 여유도 시간적 여유도 생긴 것 같다. 미루고 있던 사이드 프로젝트를 다시 시작했는데... api들이 많이 아팠다. 안 되는 게 너무 많다! 내가 잘못 정보를 주고 있는 건가 해서 백엔드 담당자 분들과 소통을 하며 코딩을 진행하고 있다. 사이드 프로젝트도 잘 마무리 하고 싶다. 미니 프로젝트 회고를 하면서 다른 팀들의 상황도 많이 듣게 되었는데 다들 백엔드와의 소통 문제가 많았던 것 같다. 다들 처음 하는 일이기도 하고, 처음부터 잘할 수는 없는 노릇이니 서로의 상황을 이해하고 맞추어 가는 것이 중요할 것 같다. 다행히도 우리 팀은 프론트와 백 사이에서 소통이 어려웠던 점은 없어서 너무 감사했고, 또 앞으로 어떤 어려움이 있을지 조금 걱정이 되기도 했다. 너무 무난하기만 하면 또 문제점을 모를 수도 있으니까. 파이널 프로젝트도 잘 끝낼 수 있기를...! 근데 어떻게 벌써 파이널 프로젝트지....

지금까지 25주차의 기록을 읽어 주신 여러분, 감사합니다! 김당퀔은 이만 공부하러. 🥕🥕