TIL / 20210728

✍ 오늘한 일

오늘은 프로젝트 4일차 어제 주류를 세분화하지 말고 맥주의 종류를 세분화하는 쪽으로 범위를 좁히라는 튜터님의 조언을 따라 아이디어도 바뀌었다.

이미 작업한 결과물을 없애긴 너무나도 아쉬웠지만, 더 나은 프로젝트가 되어가고 있어 다행이다.

오늘은 뷰작업 2일차로 맥주 카테고리 페이지와 맥주별 리뷰 게시판을 구현했다.

구현하며 배운 몇가지를 기록해본다.

1. history를 사용하는 방법은 크게 두가지가 있다

방법1) useHistory 사용하기
import { useHistory } from 'react-router-dom';
const history = useHistory();

useHistory를 사용하면 history를 props에서 얻어왔을 때 처럼 동일하게 사용 가능하다.

방법2) withRouter 사용하기
import { withRouter } from 'react-router-dom'; / export default withRouter(LoginPage)

Route 태그의 부모 요소인 BrowserRouter, Switch에 의해서 defaultProps 에는 history 객체가 들어가게 되고, 이 history 객체를 이용하여 리액트 웹 내에서 라우팅이 가능하게 된다.
그리고 history 객체를 사용하기 위해서는 withRouter를 이용하여 컴포넌트를 감싸주어 동작시킨다. 이 방법으로도 history를 사용할 수 있으나 store 관리쪽에서 충돌 문제가 생길 수 있어 주의를 해야한다.

우선 useHistory를 사용하기로 했고, 나중에 configureStore에 있는 history를 사용하기로 했다.

history.goback()이 아닌, history.goBack()

계속해서 아래와 같은 에러가 발생했다.

TypeError: history.goback is not a function

여러번의 시도를 해도 해결되지 않았는데 결국은 goBack 대소문자 구분을 확실히 하지 않아서 발생한 에러이다. 에러를 확인할 수 있는 눈을 길러야겠다.

깃 충돌 해결

지난 프로젝트 때는 팀원 한사람의 브랜치에서 충돌을 확인하고 공용 브랜치에 적용하는 방식으로 했었다.
이번에는 각자 작업한 내용을 바로 공용 브랜치에 적용하는 방식으로 진행을 했는데 둘다 변경한 파일에서 어김없이 conflict이 났다. 해결 방법으로는 팀원이 공용 브랜치에 적용한 내역을 내가 pull 한다음 다시 내 작업까지 적용해 공용 브랜치에 push하는 것이다.

이렇게 하니 conflict이 현저히 줄었다.

또 배운 교훈은 꼭 공용 브랜치에서 pull먼저 한 후 내 작업내역을 push하기 이다. git은 프로젝트의 형식을 잘 맞춰 줘야하기 때문이다.

그리고 커밋을 자주 해 conflict을 줄여줘야겠다는 생각이 들었다.

3일동안 계속 만들고 지우고를 반복하고 있는데 이제는 코드를 과감히 지우는 용기가 생긴것 같다.
이제는 코드를 짜집기 하는 것보다 새로 만드는 것이 빠르다는 것을 알아가고 있는 것 같다.