스파르타코딩클럽 내일배움캠프 40일차

오늘 일과 요약

1. 프로젝트
2. 프로젝트
3. ....
4. 프로젝트...

 

 

 

 

 

 

9시 회의

어제 정했던 그라운드 룰 중 하나가 바로 9시에 오늘 어떤 걸 할지 회의하는 거였다.

그래서 오늘 9시 되자마자 바로 오늘 할 일에 대해 이야기를 나눴고 각자 공부를 우선 하고 기능 구현하기로 했다.

 

나는 그냥 미리 게시글 input창을 만들어보면서 연습해보려고 했다.

그래서 css는 아예 신경쓰지 않고 기능만 되게끔 만들었다.

중간에 10시에 CS 특강이 있었어서 다 만들지는 못하고 중간에 특강 듣고 다시 돌아와서 만들었다.

 

기능만 구현하는데도 익숙하지 않은 흐름이 많아서인지 파일을 만들었다 고치고

오류를 다시 해결하고...생각보다 시간이 좀 걸렸다.

오전 시간을 전부 쓴 것 같다.

 

 

 

 

 

오류 해결하기

우리 프로젝트의 구조를 보면,

메인 페이지에서 글 쓰기 버튼을 누르면 글 쓰기 창으로 넘어가야 했는데 그걸 계산하지 못하고 처음에 detail page router를 연결했다. 그게 오류의 시작이었던 것 같다.

 

 

...
	<Route path="/" element={<Main />} />
        <Route path="/:id" element={<BoardDetail />} />
        <Route path="/boardwrite" element={<BoardWrite />} />
...

이게 Router.js 안에 포함된 내용인데 원래는 Write 페이지를 따로 만들지 않아서 메인-글쓰기페이지 연결하는 걸 실패..

그래서 조원들에게 물어보고 고민하다가 새롭게 write 페이지를 만들기로 했다.

 

메인 페이지의 글쓰기 버튼을 누르면 BoardWrite.jsx 로 넘어가고,

거기서 입력 받아와서 BoardList를 메인 페이지에 넣는 형식으로...!

 

처음에 시작할 때 큰 그림을 그리고 시작했어야 하는데, 그 부분을 생각하지 못해서 아쉽다.

원래 혼자 과제 했었을 때는 그랬는데 이번에는 기능 구현을 먼저 하겠다는 생각 하고서 급하게 시작했더니..ㅠ

해결하기는 했지만 혼자 조금 더 생각해보면 되었을텐데, 아쉽다.

 

 

 

 

오류 해결하기 2

이번에는 BoardItem에서 자세히보기를 누르면 그 해당 item의 detail page로 넘어가는데 거기서 오류가 생겼다.

제대로 넘어와서 해당 item만 보여지기는 하는데, 문제가 두 가지였다.

 

1. 새로고침 시 원래 있던 페이지가 사라지면서 아무것도 보이지 않음
2. 홈으로 돌아가기 버튼 클릭 시 콘솔창에 오류가 찍히면서 아무것도 보이지 않음

 

이 두 가지였는데, 처음에 BoardItem을 받아올 때 문제가 있었었다.

지난 심화 과제에서는 detail page로 들어가기 위해서 해당 글의 id를 받아와서 params에 저장하고,

그 id에 맞는 item만 받오도록 했는데, 그걸 그대로 조금 수정해서 쓰니까 오류가 발생한 것이었다.

 

그래서 고친 코드가 이거.

...

  const dispatch = useDispatch();
  const board = useSelector((state) => state.boardSlice.board);
  const navigator = useNavigate();
  const param = useParams().id;

...
	{board
        .filter((item) => item.id === param)
        .map((item) => {
          return (
            <div key={item.id}>
              <div>{item.title}</div>
              <div>{item.content}</div>
              <button onClick={() => onDeleteHandler(item.id)}>삭제</button>
            </div>
          );
        })}
        
...

BoardDetail.jsx 페이지의 return 부분이다.

 

원래는

...

  const dispatch = useDispatch();
  const board = useSelector((state) => state.boardSlice.board);

  const { id } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    dispatch(getTodoID(id));
  }, [dispatch, id]);
  
  ...

이런 식으로 useEffect를 사용했었는데 굳이 그러지 않아도 useParams()를 이용해 id를 받아오면

저절로 그 id 에 해당하는 Board만 가져와주기 때문에 useEffect를 쓸 이유가 없었다...!

 

그래서 그걸 과감히 지우고 item.id === param 인 경우를 filter해주고

해당 item만 return 해주는 형식으로 바꿨다.

그랬더니 자세히 보기를 클릭하면 저절로 들어가졌다...!

 

사실 이건 나 혼자 해결한 건 아니고,

선형님의 코드를 응용하고 다경님의 코칭(?)을 받아서 해결한 오류이다.

그때그때 캡처해서 TIL에 올렸어야 했는데, 실제 오류가 났을 때는 그런걸 생각하지 못하고 해결하기 급급해서...ㅋㅋㅋ

결국 완벽히 해결하고 나서야 복기하면서 그 때 이런 오류가 났었지, 하고 있다.

다음에는 꼭 오류를 전부 적어둬야겠다.

 

 

 

 

git으로 제대로 협업하기

이번에는 git & github를 제대로 써보자! 해서 브랜치를 따로 나누고...이런식으로 정했는데 생각보다 어렵다ㅠ

 

오후에 회의를 하던 와중에 튜터님이 오셔서 S.A. 피드백을 주시면서 동시에

협업할 때 깃허브를 어떤 식으로 이용해야 하는지 알려주셨다.

그래서 우리도 issue / PR / project 부분을 써보기로 하고 쓰는데...사실 전부 깃허브 초보라서 많이 애먹었다ㅠㅠ

 

특히 내가 지금 구현한 기능을 깃허브에 올려서 그걸 조원들이 공유하기로 했는데,

브랜치를 만들고 내가 멋대로 merge 해버린 것이다..!

그러면 깃허브에서 pull request를 보내지 못하는데, 그대로 브랜치를 닫아버렸다.

그래서 어찌해야 하나, 고민했는데 지영님이 깃과 깃허브를 잘 아시는 분을 초대해주셔서 그분에게 특강(!)을 들었다.

이걸 볼지 안 볼지 모르겠지만....감사했습니다...ㅠㅠ

덕분에 어떤 식으로 브랜치를 써야 할지 알게 되었어요

 

그래서 브랜치를 따로 나눴다.

 

• develop : master에 merge하기 전에 최종적으로 merge하는 브랜치
• feature/board
  • feacture/board-update
    • feature/board-pw : 비밀번호 유효성 기능 구현
    • feature/board-patch : 게시글 수정 기능 구현
    • feature/board-img : 글 작성 시 이미지 업로드 하는 기능 구현
• feature/comment
  • feature/commet-read
  • ...

 

 

이런 식으로 우리가 구현할 기능을 board(게시판) 과 comment (댓글) 로 나누어 역할을 분담했었기 때문에

브랜치 역시 그런 식으로 나누기로 정했다.

 

그리고 커밋 컨벤션도 따로 노션에 적어두었다.

최대한 그 컨벤션에 맞춰서 커밋도 해보고 issue도 적어보고...

이번 기회에 정말로 협업할 때 깃허브를 어떤 식으로 쓰는지 알아가고 있다.

 

아직도 브랜치 바꾸는게 어색하고 오래 걸리지만....나중에 익숙해지는 날도 오겠지.

이번에 프로젝트 하면서 이런 기회가 와서 정말 다행이다.

 

 

 

 

 

 

짧은 일기

오늘 진짜 너무 바빴다...왜지...?

회의를 계속하고 소통을 너무 많이 해서 그런가...? 소통이 많다는 건 프로젝트가 순조롭다는 뜻이니까 좋은 거겠지 뭐.

여튼 그래서 계속 대화를 하면서 나름의 규칙들을 잘 정한 것 같아서 다행이다.

기능 구현 역시 순조롭게 진행되는 것 같고...좀 괜찮은데?!

 

사실 이번에는 프로젝트 기간이 너무 짧아서 그 안에 기능 구현을 못하면 어쩌나 싶었는데,

오늘 하루는 그래도 나름 좋게좋게 흘러간 것 같아서 다행이다.

오히려 회의 하고 깃허브랑 git flow에 대해서 공부하느라 시간이 다 가버렸다 ㅋㅋㅋㅋㅋㅋㅋㅋ

내일 오전에 다시 만나기로 했는데 TIL 작성하고 다시 맡은 기능 구현하러 가야겠다.

 

이번 프로젝트도 이런 기분으로...끝까지 마무리 했으면 좋겠다.