회고/코드스테이츠 FE 부트캠프

[코드스테이츠 FE 부트캠프 40기] 프리 프로젝트 회고

칠뎁 2022. 12. 8. 11:36

😎 프로젝트를 마치고

프리 프로젝트, 메인 프로젝트를 연달아 끝내고 다시 블로그에 돌아오니..

개념 정리하면서 공부하던 때가 옛날 이야기처럼 멀~~게 느껴진다.

엄청나게 바빴던 두달. 

밤이고 낮이고 새벽이고 주말이고 

노트북 앞에 앉아보낸 내 두달....!!!!!!

천천히 회고해보려한다.

 

일단 프리 프로젝트 부터!!

 


🤯 일단 해보자! 프리 프로젝트

코드 스테이츠에서 정해준 프리프로젝트는 모든 팀에게 일괄적으로 동일했다.

 

스택오버플로우 클론 코딩

 

개발에 발가락이라도 담가봤다면 모를 수 없는 스택오버플로우 사이트를 클론코딩하는 일이었다.

랜덤으로 구성된 프론트3, 백3명의 팀원분들과 함께 프로젝트를 하게되었고,

사용자 요구사항 정의서부터, API 문서까지 모두 회의를 통해 작성하고

본격적인 프로젝트에 들어갔다.

 

프리 프로젝트는 그래도 클론코딩이다보니 UI를 디자인하는 일은 생략이 가능했다.

우리는 아래의 툴을 사용하기로 정하고 개발을 시작했다.

 

Frontend HTML, CSS, JavaScript, React, Styled Component, Recoil, Axios
Backend Java, Spring Boot, H2, My SQL, Spring Security, Spring Data Jpa
DevOps AWS EC2, AWS RDS, AWS S3

 

 

프론트 기술중에 이 프리 프로젝트 때에 처음 도입했던 기술은 Recoil 이었다.

이때는 다른 팀원분께서 리코일을 써보자고 제안을 주셔서 쓰게 되었는데

이때 리코일에 매력에 빠져 결국 메인 프로젝트 때는 내가 제안을 하게 되었다.

 


😱 시간이 너무 부족해

 

프리프로젝트는 팀원분 한분이 컴이 고장나기도 했고, 

퍼블리싱 작업에 익숙한 인원이 없는 등의 이유로 일 배분이 잘 되지 않았다.

 

그래서 11개의 페이지중 대략 8페이지를 내가 만드는 불상사가 발생했다.😱

그리고 그 밖의 컴포넌트 들까지... (헤더나 푸터등)

 

사실상 프론트 업무를 두명이 나눠야 하는 상황이었는데, 

글 쪽과 관련된 부분이 서로 연결이 되어있다보니

(글 작성과 글 수정, 댓글 작성과 댓글 수정 서로 비슷하고 같은 에디터와 뷰어를 사용해야하는 등의 이유)

이걸 제 시간 내에 끝내려면 나중에 이어받은 사람이 헤매면서 파악할 시간에

처음 관련해서 시작한 사람이 끝내버리는게 나은 상황이었다.

 

그리고 나는 이전 회사에서 에디터를 사용해서 퍼블리싱을 한 적이 있는 관계로

안그래도 모자란 시간을 메꾸기 위해선 다른 분이 고민하면서 시간을 쓰는 것보다

그냥 내가 끝내버리는게 낫다고 판단을 했다.

 

게다가 한 팀원분에게 맡겼던 부분이

마감일이 다되도록 완성되지 않아 다시 손보다 보니

일이 이렇게 되어버리기도 했다.

 

그리고 다른 프론트 팀원 한분은 전역 상태값 리코일 세팅이나,

프라이빗 라우트와 같은 부분들을 세팅해주시기로 했다.

 

시간 내에 에러없이 잘 굴러가게 하자!를 일차 목표로

새벽 늦게까지 코딩하던 지난날... 🥲

 

절대적인 시간도 부족했는데

페이지네이션과, 코드까지 적을 수 있는 에디터, 그리고 그 에디터를 화면에 뿌릴 때

코드에 색이 적용되도록하는 뷰어도 알아보고 적용하느라 고민하는 시간도 필요했다.

 

 


🙃 그럴싸하지만 속으론 아쉬웠던 결과물

 

그렇게 시간에 쫓겨가면서 기계적으로 임했던 결과물은 

꽤나 훌륭했다.

 

퍼블리셔 시절 쌓았던 내공으로

짧은 시간 내에 많은 페이지의 반응형을 완벽하게 구현했는데

이런 팀은 거의 우리팀밖에 없었다.✨

(내가 확인한 팀들은 반응형을 아예 구현하지 않거나

특정 분기까지만 되는 등의 상태가 대부분이었다.)

 

하다 못해 모바일은 다른 도메인으로 접근된다고 하더라고

pc만해도 뷰포트 크기가 천차 만별이고

창을 줄이는 일도 많은데,

"반응형은 당연히 지원해야되지 않아?"

라는 개인적인 신념이 있어서 더 신경쓴 부분도 있는것 같다.

 

그리고 무엇보다 클론 코딩하려는

스택오버플로우는 반응형 지원을 했으니까.


😗 결국 잘했어! 나자신

 

시간에 쫓겨가며 진행한

첫 리액트 팀 프로젝트인 만큼

아쉬운점도 있지만,

그래도 훌륭하게 끝낸것 같다.

 

이제 결정적으로 프리프로젝트를 끝나고

바로 그 다음날부터 들어간 메인 프로젝트에서

프리프로젝트보다 더 코드 퀄리티적인 부분에서

향상되었다고 느껴서 더 보람찬 시간이라고 느꼈다.

 


🥳 배운 것들과 결과물

 

에디터와 페이지네이션을 하면서 배운 사실들이 있는데,

이것들은 기술 카테고리에 차근차근 업데이트를 하고 링크를 달 예정이다.

 

나름... 에디터 진짜 시행착오없이 골라서 멋지게 썼다고 생각해서

쓸말이 많다!

그리고 블록 코드를 보여줄때에도 

실제 스택오버플로우와 같은 라이브러리를 찾아서 쓴지라 굉~~장히 유사하다는 점이 진짜 자랑하고 싶다.

이거 쓴 팀은 못봤던거 같다. 후후

 

✨결과물 이미지를 보고 싶다면 클릭👍🏻✨

더보기
회원가입

 

로그인

 

로그아웃

 

메인

 

질문 상세

 

질문 작성

 

질문 수정

 

답변 수정

 

마이페이지

 

질문 검색

 

404

 


✍️ 요약

 

이상으로 프리프로젝트를 요약하며

다음 메인 프로젝트 회고로 넘어가려한다!

 

👍🏻Good: 기간엄수, 위기대응, 업무 효율성, 반응형, 에러없는 기능
👎🏻Bad: 코워킹, 일분배, 클린코드, 코드 컨벤션, 건강

 

절반의 성공! 절반은 다음 메인에서 보완!!