항해 7주차 - Day 47 ~ Day 49 [WIL]

이번주는 클론코딩이 끝나면서 최종 프로젝트를 시작하는 주차이다.

요즘 TIL (말이 TIL이지 그냥 일기다...) 쓰는게 귀찮아서 여러번 빼먹었는데 그러다보니 내가 뭘했는지 기억나지 않는다.

간단하게 클론코딩 주차에서의 트러블 슈팅만 요약해보자면 나에게 두가지 트러블 슈팅이 발생했었다.

 

트러블 슈팅

 

1.

AXIOS로 서버에 데이터를 추가하고, useNavigate를 통해 홈화면으로 이동하게 하는 코드였는데

홈화면으로 가도 바로 데이터가 추가 된 것이 보이지 않고, 새로고침을 해야만 그 결과를 볼 수 있었던 것이다.

스스로 이 원인을 추정해봤는데, 내가 서버에 post 요청을 통해 데이터를 추가하는 요청을 보내고 홈 화면으로 바로 이동을 하는데

서버에 데이터가 추가 되기 이전에 get 요청으로 서버의 데이터를 불러와서 그런 것이 아닌가 하는 생각이었다.

그래서 어떤 방식으로 해결해야하나?

고민을 해보았는데 내가 생각한 방법은 두가지였다.

하나는 리덕스에 보관된 데이터를 사용하여 홈화면으로 돌아갈 때 이미 리덕스 데이터가 있는 경우 다시 서버에 데이터를 요청하지 않고 리덕스 데이터를 재활용하여 사용하고, 우리가 데이터를 추가할 때 서버에서 추가가 성공한 경우 추가된 데이터만 새롭게 받아서 리덕스에 추가해주는 것이다. 다만 이 경우 프론트에서도 코드를 변경해야 할 뿐 아니라 서버에서도 코드를 변경해야 하기 때문에 일단은 보류했다.

두번째 방법은 navigate 함수를 늦게 사용하는 것이었다.

다만 setTimeout과 같은 방법은 좀 아닌거 같아서, 서버에 데이터 추가 요청을 받은 뒤 서버에서 성공 메세지를 받으면 그때 navigate를 통해 이동하면 어떨까와 같은 생각이었다. 근데 이 경우, navigate 함수를 성공 메세지를 받은 뒤 실행하려면 dispatch를 한 이후 미들웨어 단계에서 navigate 함수를 실행해야 하는데, 정말 이 방법이 맞을까? 라는 생각이 들면서도 도저히 다른 방법이 생각이 나지 않았다.

그래서 미들웨어에 매개변수로 navigate 함수를 넘겨주고, 미들웨어에서 response 값을 받았을 때, navigate 함수가 실행되도록 작성했다.

나중에 피드백에서 그렇게 작성한 근거만 있다면, 그리고 많은 고민을 했다면 훌륭하다는 소리를 들어서 기분이 좋았다,,

다만, 조언으로 어떤걸 알아보라고 하셨는데 내 귀가 안 좋아서 제대로 못 알아들었다. 그래서 어떻게 검색해야할지 영 감이 안온다 ㅠㅠ...

이 포스트를 작성하고 나면 여러가지 기술 스택을 조사해보면서 한번 알아보려고 한다.

작성했던 코드 방식은 아래와 같다.

 

< pages/Add.js >

// Add.js

const dispatch = useDispatch();
const navigate = useNavigate();

... code ...
  
const upload = () => {
  const newPost = {
      title: title_ref.current.value
      postImg: img_ref.current.url,
      content: content_ref.current.value,
      category: category,
      price: numberPrice,
  };
  dispatch(carrotPost(newPost, navigate)); // carrotPost 함수로 navigate 함수를 넘김
};

... code ...

 

< redux/modules/post.js >

... code ...

export const carrotPost = (newPost, navigate) => { // 매개 변수로 navigate 함수를 받음
  return async function (dispatch) {
    try {
      const res = await instance.post("api/post", newPost);
      //console.log(res)
      dispatch(uploadPost(newPost));
      navigate("/main"); // navigate 함수의 사용
    } catch (err) {
      console.log(err);
    }
  };
};

... code ...

이 포스팅을 볼 사람이 있다면... 더 좋은 방법이 있다면 알려주면 감사하겟슴다...

 

 

2.

프로필 수정 페이지에서 주소 선택 화면으로 넘어간 뒤에 다시 프로필 수정 페이지로 돌아오면, 기존에 수정하던 값들이 사라지는 현상이 있었다.

여기서 나는 꽤 오랜시간을 고전했다. (한 4시간정도?)

여기서 첫번째 방법으로 생각했던건, 페이지를 주소 선택 페이지로 넘어갈 때 state를 넘기는 방법이었는데 이유는 모르겠지만 주소 선택 페이지로 데이터를 넘기는건 되는데, 주소 선택 페이지에서 다시 프로필 선택 페이지로 데이터를 넘기는게 안되었다. (이 부분에 관해서는 나중에 다시 비슷하게 코드를 짜보고 실험을 해봐야겠다고 생각했다.)

위 방법이 실패하자, 두번째 방법으로는 리덕스에 임시 데이터를 보관하는 방법을 생각했는데 이 방법으로 성공하게 되었다.

하지만 이것도 1번과 같이 맞는건가 생각이 들었던게, 단순히 1회성으로 사용할 데이터를 이렇게 리덕스에 보관하는게 맞는가 싶은 생각이 들었다.

그래도 어찌저찌 성공하게 되어 문제가 풀리게 되었다.

 

이번 주차를 진행하며 내가 가장 신경 쓴 부분 / 기술에 대한 정리

이번 주차에는 기획 회의에서 1차 스코프에서의 기능을 최대한 줄이고 2차 스코프인 채팅을 구현할 시간을 마련하는데 집중했다.

사실 기술적으로 신경 쓴 부분은 많이 없었다. 나름대로 줄였다고 생각했는데도 꽤 작업할게 많았다고 해야하나...

그리고 완성도 있게, 최대한 버그가 없게끔 하는데 신경을 많이 썻다.

스타일 하나하나 픽셀 하나하나 당근 마켓과 최대한 유사하게 보이도록 노력했고, 여러 방법으로 테스트 해보며 우리가 원래 생각했던것과 다르게 작동하는지 체크했다. (그럼에도 발표에서 버그가 하나 있었던 것 같다.)

그렇게 확보한 시간으로 채팅을 맡으신 팀원분이 어느정도 간단한 채팅을 만들어 내셔서 그걸 마지막날에 추가하고 발표하게 되었다.

사실 이 프로젝트에서 내가 맡은 부분은 많지 않았고 채팅을 맡은 분이 정말 의욕이 넘치셔서 많은 역할을 하셨던거 같다.

그래도 이번 주에는 이것 저것 많은 상황을 마주하였고, 꽤 재밌게 프로젝트를 진행했던 한 주 였던거 같다.

거기다 영상을 찍기로 하신 팀원분이 잘 찍어주셔서 너무 감사할 따름이다.

 

 

https://www.youtube.com/watch?v=gpb6dWag9Uo 

 

 

최종 프로젝트를 시작하다

나는 원래 알던 백엔드분과 최종 프로젝트를 함께하기로 했는데, 사실 그 분과 나 둘다 분위기 메이커 스타일은 아니라서 원래 같이하자고 말씀드리지 않았었는데 어쩌다보니 같이 하게 되었다.

그래도 그 백엔드분도 잘 참여하시고, 나도 꽤 말을 많이하려고 노력해서 어떻게 팀을 잘 굴러가고 있는거 같다.

최종 프로젝트는 꽤 멋있는 프로젝트를 완성하면 좋을 것 같다.

근데 역시 나는 팀장의 상이 아니라는걸 느꼈다.

기획을 이틀 내내 하니까 너무 짜증이 나고 힘들다....

스트레스도 많이 받고 그냥 코드나 짜고 싶다는 생각이 들었다. 다행인건 어제까지 아이디어와 기획이 어느정도 FIX가 되었다는 점이다.

디자이너분이 2주간은 바쁘실거라고 하셔서 조금 걱정도 되긴 하는데 작품 지금까지 만드셧던거보면 거의 전문가 급이라 걱정은 안해도 될 것 같다.

우리 프로젝트에서 내가 신경 쓰려는 부분은 '높은 완성도'와 '실용성'이다.

기능이 많이 없더라도 최대한 효율적인 코드, 그리고 그 ㅎ적은 기능은 정말 많은 사람들에게 쓸모가 있게끔 만들고 싶다.

이 아이디어에 관해서는 내일부터 TIL이나 WIL에 적어보려고 한다.

 

오늘은 간만에 WIL을 길게 주구장창 쓰는 것 같다.

그래도 이것저것 나름 이번주에는 뭔가 많은 것을 한 것 같아 기부니가 좋다.