TIL 42 day 2차 프로젝트 회고록

Winney·2020년 11월 15일

후기

목록 보기

3/5

2차 프로젝트를 돌아보며

2020/11/2 ~ 2020/11/13

1. 2차 프로젝트 소개

wecode에서 진행한 2차프로젝트 myrealtrip을 cloning했다. 항공권, 호텔, 투어 등 여행 관련 상품을 중개하는 사이트이다. 그 중에서 항공권과 호텔 예약의 비중이 큰 것같아서 팀원들과 첫 미팅에서 항공권 및 호텔 예약하는 부분을 구현하기로 결정했다. 나는 호텔 부분의 호텔 디테일 페이지를 만들기로 했다.

2. 처음 내 목표

1차 프로젝트 회고에서 2차 프로젝트에 대한 목표를 작성했었다.

axios를 사용해 백앤드에 api 호출하기
포스트맨을 사용해 api 호출 및 응답하기
query string이나 path로 동적 라우팅 구현하기
자식컴포넌트에서 부모컴포넌트에 어떻게 데이터를 넘겨야 하는지
옮바른 질문하기
문제해결 능력
redux
AWS 사용하기
react hooks 사용하기
styled component 사용하기

아쉽게도 상단의 대부분을 하지 못 했다. 뒤의 반성 부분에서 꼼꼼하게 되짚어 볼 예정이다.

2차 프로젝트에서 이룬 목표

query string이나 path로 동적 라우팅 구현하기
: URL parameters를 이용한 페이지 이동 구현
자식컴포넌트에서 부모컴포넌트에 어떻게 데이터를 넘겨야 하는지
: Lifting State Up 사용
react hooks 사용하기
styled component 사용하기

3. 사용스택

React, JavaScript, Redux, HTML, Styled component, CRA, npm, git, prettier, ESLint, trello

4. 나의 역할

호텔 상세페이지(hotel detail page) 구현
README 작성

5. 기억나는 코드

1) 성인/소아에 따라 명수 세는 코드

  const isIncreasePeopleCount = (increase, targetCount, type) => {
	const isAdult = type === 'adult';
	const setCount = isAdult ? setAdultCount : setChildCount;
	const count = isAdult ? adultCount : childCount;

	if (targetCount === 0 && !increase) return;
	increase ? setCount(count + 1) : setCount(count - 1);
};

이 코드의 기능은 다음과 같다.
첫째. 0이하로는 카운트 되지 않는다.
둘째. 카운트는 덧셈 뺄셈이 된다.

지금은 리팩토링이 잘 된 코드이지만 처음에는 순수하게 if문으로만 구성이 되어있었다. 성인/소아를 구분해 +1, -1로 계산이 되어야 해서 if, else if로 총 8줄이나 되는 if문을 작성했었다.
멘토님의 도움으로 달라지는 부분만 변수 설정을 통해 단 2줄의 if문으로 리팩토링하였다. 아직 함수 작성 시에 변수 사용하는게 너무 어색하고 특히 삼항연산자는 계속 머리에 들어오지 않고 있다.
너무 초보적인 부분에서 익숙해지지 않는 것같아 if문을 쓰고 삼항연산자로 쓸 수 있는지 계속 확인해볼 생각이다.

2) 평점 점수에 따른 별 아이콘 나타내기

const [starArr, setStar] = useState([]);

const handleStar = () => {
	for (let i = 0; i < star; i++) {
		starArr.push(<StarFull />);
	}
	for (let i = 0; i < 5 - star; i++) {
		starArr.push(<StarEmpty />);
	}
	setStar([...starArr]);
};

이 코드는 평점에 따라 ★채워진 별을과 ☆빈 별을 랜더링하는 함수이다.
기억에 남는 이유는 이 코드를 작성해야할 때 for문까지는 생각이 났는데 어떻게 써야하지?하는 생각에 키보드에 전혀 손대지 못 하고 있었다. 그러던 분에 PM분께서 메모장에 작성 순서에 대해서 생각해서 작성하고 이걸 코드로 만드려면 어떻게 해야하는지에 대해 옆에서 봐주셨다.
그런 끝에 만들어진 코드고 그 과정에서 <StarFull />, <StarEmpty />과 같은 styled component를 for문으로 돌릴 수 있다는 것과 [...starArr]와 같은 spread 연산자를 알게 되었다. 여전히 활용하는 법은 정확하게 머리에 들어오지 않지만 새로운 것을 배우고 순서대로 생각하는 것을 PM님께 배울 수 있어서 좋았다.

3) 리뷰의 평균 점수를 구하는 함수이다.

const calculateAverage = () => {
	if (!reviewData) return;
	const ratingArr = reviewData.review_list.map((review) => {
		return review.rating;
	});

	setAverageRating(
		parseInt(ratingArr.reduce((acc, cur) => acc + cur, 0) / ratingArr.length),
	);
};

이 함수도 한 번의 리팩토링을 거친 함수이다. 처음으로 reduce를 써본 함수이다. 처음 작성 시에 mdn을 보면서 const sum = (acc, cur) => acc + cur을 선언하고 ratingArr.reduce(sum) => ...이런 식으로 작성을 했다. 하지만 멘토님께서 굳이 변수 선언으로 쓸 필요가 없다고 하셨고 reduce는 인자가 2개가 들어와야 한다는 점을 알려주시면서 리팩토링을 했다.
reduce 메소드를 바로 활용하기는 힘들 것같지만 reduce 하나로 map도 할 수 있고 여러가지를 할 수 있다고 해서 나중에 꼭 다양하게 사용 할 수 있었으면 좋겠다.

6. 함께하는 것에 대하여

고백하자면 2차 프로젝트의 진행이 스스로는 만족스럽지 않았다. 아침 미팅을 안 하고 넘어간 일이 많았고 수다스러울지라도 충분한 커뮤니케이션을 하고 싶었는데 그러지 못 했다.

배울 것도 많고 기능도 많았다. 1차 프로젝트를 하며 정신적으로나 육체적으로 서로 많이 힘들어했다. 나도 그 사실을 알기 때문에 커뮤니케이션을 하고 싶지만 시간과 에너지를 뺏는 듯 해서 눈치보다가 어영부영하는 경우도 있었다.

그러다보니 1차때보다 많이 삐그덕거린다는 느낌을 많이 받았다.
예를들어 내가 맡은 호텔 상세페이지에는 슬라이더로 된 추천 호텔이 나오는데 처음 시작할 때 백엔드에서 추천 호텔도 데이터만 보내주면 할 수 있다고 해서 만들었다.
하지만 2주차 때 백엔드에서 추천 호텔은 백에 데이터가 없어서 mock data로 해야한다고 말을 했다. 매일 아침 미팅을 했으면 서로 뭘 할 건지 알 수 있어서 이런 일을 없었을 것이다.

이런 부분이 몇 부분 있어서 왜 매일 아침 미팅을 짧게라고 해야하는지 절절히 알 수 있었다. 1차 때는 단 하루도 빼 놓지 않고 했고 멘토님한테도 아침미팅 제일 열심히하는 팀이라는 이야기를 들었는데 그렇게 한 아침미팅이 프로젝트 진행에서 이정도 차이가 있을지 몰랐다.

다시 한 번 커뮤니케이션이 왜 중요한지 느낄 수 있는 경험이었고 앞으로 팀원에게 어떻게 내 의견을 전달하고 설득할지에 대한 고민도 해야겠다.

7. 반성

기능구현에 치중하느라 스스로의 배움을 소홀히 한 것에 반성한다. 주말에 2차 프로젝트에 대한 설문조사를 하면서 새로울 기술을 익히는 것에 빠져 배움을 소홀히 했다는 것을 깨달았다.

예를 들면 검색으로 우연히 정답 코드를 알았지만 의미도 모른채 복사 붙여넣기를 했다던가 특정 기능을 구현하기 위해 집착하기 보다 2-3일에 걸쳐 로직을 손으로 써보고 머리로 생각해보던가 하는 노력을 2차 때는 거의 하지 않았다.

이번에 팀이 전반적으로 많이 지쳐있어서 나도 내가 맡은 기능만 구현하고 그 기능이 어떻게 되는지 따져보지 않았다. 지쳐있었다고는 하나 스스로의 기준을 지키지 못 했다는 것은 두고두고 반성해야하는 일이면 큰 실책이라고 생각한다. 이는 배우는 사람으로서의 올바른 방향이 아니라고 생각하면서도 지키지 못한 것이기 때문에 반성이 필요한 부분이라고 생각한다.

8. 칭찬

성급하게 redux를 사용하지 않고 Lifting State UP을 해본 것이 가장 잘 한 것같다.

2차 프로젝트의 1주차 때 hooks 및 styled component를 적용하고 2주차에 redux를 적용해보는게 위코드의 스케줄에 있었다. 하지만 1차 때 자식에서 부모로 props를 가져오는 Lifting State Up을 전혀 하지 않은 채로 redux를 배우는게 맞는가 큰 의문이 들었다.

그래서 멘토님께 상담을 했고 redux를 배우는 것은 좋으나 그 필요성을 충분히 경험하지 않았다면 이번에 redux를 사용하지 않고 해보는 것도 좋다고 하셨다. 그래서 팀에게 나는 이번에 redux를 사용하지 않고 해보고 싶다고 하고 사용하지 않았다.

해보니 왜 사람들이 redux를 사용하는지 알것같았다. 최상단에서 모든 state 관리를 하려고 하다보니 4단계 아래에서부터 props를 가져와서 다시 다른 곳으로 props를 보내고 하는 것이 정말 너무 헷갈리고 힘들었다.
코드도 props를 계속 넘기다 보니 쓸데없이 길어졌다는 것을 알았다.
덕분에 redux의 필요성을 절실히 알게 되었고 순수하게 props를 오가게 하는 것도 배워서 좋은 경험이었다.

9. 기업협업 목표

팀 및 기업 구성원과의 커뮤니케이션 열심히 하기
: 감정에 휘둘리지 않기. 사람이 힘들때면 감정조절이 힘들어 진다는 것을 2차 프로젝트 때 많이 느꼈다.
올바른 배움 실천하기
: 무작정 코드를 가져다 쓰기보다 하나를 하더라도 알고 하기.
양보다 질이 중요하다!

10. 더 하고 싶은 말

새로 배울 것도 많고 여전히 코드를 작성하는게 어렵고 심지어 키보드에 손을 올리지 못 할 때도 많았다. 내 코드의 대부분은 우리 팀원과 동기들에 의해서 작성이 되었다. 내가 모르는 개념을 설명해주고 전혀 작성할 엄두도 못 낼때는 생각하는 것부터 차근차근 알려준 우리 팀원과 동기들에게 항상 감사하고 고맙다.
빠듯한 시간에 각자 하는 것에 치여 힘들어 하면서도 내가 붙잡고 이 코드가 이런과정에서 이루어지는게 맞는지 하나하나 물어봤지만 한 번도 화내거나 짜증내지 않은 우리 팀원 및 동기들에 대해 다른 사람들도 꼭 알아주었으면 좋겠다.

project Github : https://github.com/wecode-bootcamp-korea/13-MyFakeTrip-frontend
youtube 영상 : https://www.youtube.com/watch?v=G8wdZMn2BhU