카테고리 없음

엘리스 2차 프로젝트 3주차 KPT회고(최종)

S_sunny 2023. 1. 7. 18:58

엘리스 SW Engineer 트랙 - 2차 프로젝트

2022.12.12 ~ 2022.12.30 (3주)

3주차 회고

 

정신없이 몰아친 3주 드디어 마무리

 

주말동안 팀원들 모두 프로젝트 마무리를 위해 몰두했다. 나도 담당한 페이지에서 주요 기능들을 거의 완성하고 css를 다듬어볼까 하고 있었다. 그런데 스크럼을 하면서 아직 구현이 되지 않은 페이지들이 있다는것을 알았다. 기획기간을 충분히 잡고 준비했다고 생각했는데도 피그마에서 생각하지 못했던 단계의 페이지도 있어서 당황스럽기도 했다. 프로젝트의 주요 기능에 무리가 없는 페이지는 빼고 필요한 페이지는 탭과 모달창에서 이어서 보여주기로 하고 내가 맡게 되었다. 프로젝트 마무리 직전에는 전체 플로우 시연을 하면서 수정할 부분에 대해 이야기하고 css를 손보면서 발표자료와 리드미를 함께 준비하는 시간을가졌다. 

▶ KEEP(다음 번에도 이어갈 부분)

  1. 프로젝트 마무리 전 디버깅 (콘솔로그 삭제, 콘솔창 에러 해결, 미사용 함수 및 모듈 삭제 등)
  2. Squash Merge, 커밋 컨벤션, MR템플릿을 활용하여 커밋 기록의 가독성을 고려하며 진행.

 

▶ Problem(진행하면서 문제가 되었던 부분)

  1. 페이지네이션 라이브러리에 tailwindCSS를 적용하는데에 어려움을 겪음 -> 레퍼런스를 확인하며 적용할 수 있는 css로 커스터마이징 함.
  2. .env파일을 push하여 저장소에 계정정보가 올라감 -> git filter branch 명령어를 찾아봤지만 안전한 진행을 위해 계정 password를 바꾸는 방법을 택함.
  3. 프로젝트 마감을 앞두고 구현해야 할 기능/페이지를 발견함 -> 각자의 진행상황을 매일 아침 스크럼을 통해 알고있었기에 비교적 여유가 있는 사람이 담당할 수 있었음.
  4. api 명세서의 잦은 변경으로 인한 통신오류 -> 해당 기능을 담당하는 백과 프론트가 함께 디버깅하며 uri 오류부분 확인.
  5. recoil 전역상태관리의 부재 -> 담당한 페이지에서 전역으로 관리할 상태가 없어서 recoil을 사용하지 못함.

 

▶ Try(다음 진행에서 새롭게 시도해 볼 부분)

  1. 페이지네이션 라이브러리 공식 문서를 조금 더 제대로 읽어보고 테일윈드를 사용하여 커스터마이징 시켜볼것.
  2. 작업을 push할때 git add . 보다는 작업한 파일명을 직접 기재하여 올리는 습관을 들이고 .gitignore 파일에 민감한 파일들이 제대로 기재되어있는지 항상 확인할것. 나중을 위해 git filter branch 명령어 숙지해두기.
  3. 웹 기획단계에서 플로우차트를 사용하여 화면 흐름을 명확히 이해할 필요를 느낌.
  4. postman 확인 및 구현한 코드에 대한 확실한 이해 필요.
  5. 다른팀원이 recoil을 사용한 부분을 확인해보고 내 코드에도 적용해볼 수 있는 부분 적용해보기.

1주차에 무슨 일들이 있었나?

 

- 드디어 페이지네이션 적용완료

마음에 드는 라이브러리를 찾느라 시간도 뺏기고 적용하는법도 익히느라 시간을 보냈는데 css를 적용하는것도 쉽지 않았다. 클래스명으로 스타일을 주는 tailwind 특성때문에 어떻게 요소들에 적용시켜야할지 막막했다. 돌아보니 천천히 공식문서를 읽어봤다면 제대로 쓸 수 있었을텐데 마음이 급해서 그런지 문서 설명조차 제대로 들어오지 않았다. 결국 레퍼런스를 바로 활용해서 스타일을 적용하기 위해 css 파일을 만들어 적용했다. 테일윈드를 쓰기로 해놓고 css를 쓰려니 뭔가.. 양심에 찔렸지만 기간내 완성을 해내는게 중요하다는걸 느꼈기에 진행했다.

 

- 정렬 버튼 공통컴포넌트 구현도 완료!

저번주에 시간상의 문제로 어느정도 포기하고 있던 정렬버튼 공통컴포넌트화도 성공했다. 다른 페이지에서도 정렬 기능이 들어갔기에 디자인의 통일을 주고싶어 시작했던 기능인데 생각보다 고려해야할 부분이 너무 많았다. 처음엔 그저 버튼을  import해오면 쓸수있도록 하면 될줄 알았는데 정렬 옵션이다보니 옵션개수만큼 드롭다운이 생성되어야하고, 버튼 너비도 변경할수 있게 하고, 옵션마다 정렬하는 함수도 동적으로 할당되어야 하기 때문에 props로 넘겨주면서 고려해야할 부분이 많았다. 완성 후 컴포넌트로 만들어둔 정렬버튼을 불러온 다음에 확연하게 깔끔해진 코드를 보고 참 뿌듯했다. 재사용 가능한 컴포넌트 구현이 쉽다는 리액트의 장점을 활용해보고 싶어서 도전했던 부분인데 사실 시간이 오래 걸려서 프로젝트의 효율성에 기여를 했다기 보다는 가독성과 리액트 컴포넌트에 대한 이해를 높일 수 있게 되었다는 것에 의의를 두고 싶다.

 

- 새로운 페이지 담당

저번주에 이어 새로운 페이지를 담당하게 되었다. 유저가 마이페이지에서 확인할 수 있어야 하는 정보가 빠져있었는데 새로운 페이지를 구현하기에는 시간이 촉박할것 같아 기존의 페이지에서 탭을 이용해 새로운 데이터를 보여주기로 했다. 불러올 데이터가 많아지면 페이지네이션이 들어가야했는데 주말동안 구현해둔 기능이였기 때문에 수월하게 적용할 수 있었다.

 

- api연결 오류의 반복

새로운 페이지에서 fetch 요청을 하는데 계속해서 데이터가 불려와지지 않는 오류가 있었다. 저번주에 처음으로 api연결을 해봤기에 처음에는 내 코드에 문제가 있는 줄 알고 계속 원인을 찾으려고 했는데 결국에는 api명세서 상의 오류였다. 반나절동안 같이 디버깅을 하면서 고생을 했는데 명세서에서 s하나의 문제였다는걸 알고는 허무하기도 했다. 1차때 백엔드로 지원을 했던 이유가 백엔드 포지션에 대한 이해를 바탕으로 협업을 원활하게 할 수 있는 지식을 갖추기 위해서였는데 그제서야 왜 서버 코드를 확인해볼 생각을 안했는지, 포스트맨 동작 확인요청을 해볼 생각을 안했는지 안타깝기도 했다. 하지만 프론트 포지션으로써는 우선 내 코드에 대한 확신이 없었던 문제도 있었다. 당연히 경험이 없는 내 문제라고 생각하고 시야를 좁혔던 문제도 컸으니 스스로 확실한 코드 구현을 할 수 있는 실력을 키울 필요가 있다고 생각했다.

 

 

 

프로젝트 최종 회고

100% 마음에 드는 웹페이지를 만들기에는 시간이 역시 부족했지만 1차때에 비해서 확실히 체계적으로 진행이 되었던것 같다. 그리고 뒤로갈수록 협업경험이 많은 팀원이 프로젝트를 전체적으로 확인하면서 이끌어준 부분이 완성도를 높이는데 큰 도움이 되었다. 프론트엔드로써는 첫 프로젝트이기 때문에 팀프로젝트 시작 전에 개인적으로 페이지도 만들어보고 학습한 개념들을 정리하면서 준비했었는데도 부족함을 많이 느꼈다. 이번 프로젝트로 react기본 개념들을 확실히 하는 계기가 되었고 새롭게 접한 기능들도 정말 많아서 한동안 천천히 프로젝트를 되돌아보는 시간을 가져야 할것 같다.

 

추가 구현 과제 및 리팩토링 요소

    1. inline 스타일로 구현한 컴포넌트 리팩토링
    2. 담당한 페이지에 MSW적용
    3. 구현한 공통컴포넌트 활용
    4. skeleton ui
    5. 백그라운드 이미지 고정한채로 스크롤 되도록 구현
    6. 홈화면 스크롤모션 이벤트 적용
    7. 네비바에 NavLink 재적용하여 링크스타일 주기
    8. 각 페이지에 지역버튼 선택되면 스타일 주기
    9. recoil 활용 확인 및 적용해보기
    10. 캐싱에 대해 알아보기