항해99 6주차 회고록 WIL(Weekly I learned)
6주차 내용
- 2/14-2/17: 미니2 프로젝트(FE+BE)
- 2/18-2/19: 클론코딩(FE+BE)
미니2 프로젝트 주차 회고
프로젝트 이름: Devel-rope
- 코드와 매일 같이 싸움하는 개발자들(Developers)을 위한 하늘에서 내려온 동아줄(rope) 같은 앱! 개발자들끼리 다양한 질문을 올리고, 트러블슈팅도 하고, 각종 지식을 공유할 수 있는 커뮤니티 입니다. 😊
결과물
소감
- 처음으로 프론트엔드 담당으로서 백앤드 분들과 협업을 하게 된 프로젝트였는데, 어떻게 서버에 연결해야 하는지, 또 그에 맞춰 코딩은 어떻게 해야 하는지, 백앤드쪽에 대한 이해가 많이 없는 상태에서 서로 소통은 어떻게 해야 하는지 등.. 수 많은 걱정이 많았지만 결과물이 너무 잘 나왔다. 모든 것을 가능하게 해주신 팀원분들에게 감사드린다. :)
- 생각보다 백앤드분들께서 서버를 너무나도 빨리 구축해주셔서 프론트단 작업이 그를 따라가지 못해 죄송한 마음이 컸다. 안그래도 아직 리액트와 친해지려고 애쓰는 중이라 작업 속도가 남들보다 더딘 편인데, 서버 연결도 해야하고, 추가 기능들도 계속 붙여야 했어서 매번 조급한 마음을 가졌던 것 같다.
- 백앤드 서버 연결 시 로그인 부분에서 예상치 못한 에러가 많이 터졌었다.. CORS 관련 이었고, 프론트단에선 매우 생소한 개념이기 때문에 더욱 당황을 했던 것 같다. 월요일 서버 연결 시 무려 4시간 정도가 소요되었던 것 같은데, 협업 시 서버 연결은 되도록이면 빨리 진행해서 오류를 서둘러 풀어나가는 것이 매우 중요하다는 것을 배울 수 있었다.
- API 명세서를 잘 짜자: 프론트 & 백이 함께 프로젝트 설계 시 API 명세서를 짜는데, 이게 은근 시간이 많이 걸린다. 하지만 시간을 조금 충분히 갖고, 누락사항 없이 촘촘하게 짜야 추후에 고생을 덜 한다. 협의 하에 정한 명칭 및 URL을 잘 쓰는 것은 몰론, 중간에 변동사항이 생긴다면 즉시즉시 팀원들에게 알려야한다.
- UI UX의 중요성: 모든 웹사이트를 만들 때 무조건 UI UX를 고려해야 하는데, 이번 프로젝트를 하면서 다시 한 번 깨닫게 된 것 같다. 아무리 이런 저런 기능이 많이 들어간다 하더라도 유저 입장에서 사용 시 불편함이 있거나 시각적으로 매력적이지 않다면, 그 웹사이트는 외면받게 될테니.. 특히 난 프론트 담당이니까 더욱 신경써야 한다.
아쉬운 점
- 프론트, 백 팀원분들 모두 친절하게 설명을 잘 해주셨으나 서로가 서로의 기술스택에 대한 이해가 잘 없는 상태에선 아무리 설명을 하더라도 이해가 잘 가지 않았던 것 같다. 이래서 나중엔 무조건 풀스택으로 가야 하나..?
- 이미지 업로드 기능 관련: 백앤드쪽에서 멀터를 쓰시면 프론트에서는 폼데이터를 사용하여 처리해보고 싶었는데, 사정상 저번주에 썼던 파이어베이스 스토어를 사용하여 프론트단에서 구현하였다. 이번엔 데이터가 많지 않았어서 가능했지만 다음에는 꼭 새로운 기술을 써보고 적용해보고 싶다.
- 좋아요 구현 실패: 프론트 작업자가 2명 뿐이었고, 우선순위가 높은 타 기능을 먼저 작업하다 보니 제출 당일에 좋아요를 구현하기는 무리라고 판단하여 포기..를 할 수 밖에 없었다. :( 저번 과제 때 좋아요를 해내지 못해서 꼭 해보고 싶었는데.. 많이 아쉽다.
- Mock API: 연결에 성공하여 데이터가 잘 뿌려지는지 확인은 해보았지만 사실 백앤드쪽 서버를 연결하고 나니 코드를 대폭 수정해야 했다... 약간 프론트 쪽에서 작업을 너무 빨리 완료해서 백앤드 서버를 더 기다려야 할 때가 아니라면 그냥 다른 작업(예를 들어 css)을 하다가 나중에 진짜 서버에 연결해보는게 더 나은 것 같다는 생각이 들었다.
- ScrollTop 실패: 리액트는 페이지 뒤로가기를 하면 스크롤이 화면 최하단으로 내려가는 이상한 특징?을 가지고 있는데, 이를 해결하기 위해 ScrollTop을 적용해보려고 시도하였으나 결국엔 하지 못했다.. 다음 프로젝트때는 꼭 구현해야지!
클론코딩 시작
- 인원: FE React 3명 + BE Spring 3명
- 클론할 웹사이트: 마켓컬리
- 주요 기능: 로그인, 회원가입, 메인페이지 데이터 크롤링, 메인페이지 내 carousel 구현, 상세페이지, 장바구니, 리뷰
- 담당 기능: 로그인, 회원가입 (추후 타 기능들 추가 예정)
- 프로젝트 주제가 '클론코딩' 이기 때문에 어떠한 기능을 창조해내기 보단 최대한 똑같이 만드는 것에 집중하기로 했다.
- 백앤드분들께서 API 작업을 월요일에 모두 완료하시면 그 날 서버 연결을 해보기로 했다. 분명히 한 번에 안될거기 때문에.. 최대한 차분하게 잘 대응해봐야 겠다.
개선이 필요한 부분
- 코드를 참고하더라도 따라서 직접 쳐보자
- 아직 쌩으로 코드를 다 치는건 좀 힘들어서, 여러 코드를 가져와 현재 진행하는 프로젝트에 맞게 변경사항을 적용해 보는데 이러면 인자 하나를 빼먹는다던지 실수를 하기 쉬운것은 몰론 연결 관계가 이해가 잘 안된다. 아무리 급해도 직접 쳐보는 시간을 많이 갖자.
앞으로의 방향
- 2/24 19시까지 클론코딩 프로젝트 제출
- 알고리즘 스터디 신청: 언어는 Python, JS 중 고민하긴 했지만 아마도 Python으로 할 것 같다.
