2024.02.22 TIL - 개인프로젝트(팬레터함 심화) 회고, Redux thunk

회고

• 사용한 기능 : Redux toolkix, axios, json server, JWT 인증/인가

기능별 회고

• redux toolkit

  • 처음엔 리덕스 자체도 제대로 이해하지 못한 상태에서 작성되어있는 리덕스 코드를 리덕스 툴킷으로 바꾸려니 뭐가 뭔지도 모르겠고 하나 수정하면 오류가 줄줄이 따라오고 멘탈이 많이 흔들렸다.ㅠㅠ
  • 그래도 희망적인건 계속 과제를 하면서 엉성하더라도 다음 단계, 그 다음 단계를 구현하면서 계속 할 수 있을 것 같은 것들을 구현해나가다 보니 얼떨결에 리덕스 흐름이 좀 이해가 된 것 같아서 신기했다. 리덕스 툴킷이 리덕스에 비해 구조가 직관적이고 비교적 단순해서 이해에 도움이 많이 된 것 같았다.

• axios

  • POST, GET, PATCH, DELETE를 모두 사용해보았는데, 이 중 가장 어려웠던건 GET과 PATCH였다.
  • GET은 useEffect를 활용해서 써야해서 생각보다 각 컴포넌트에서 어디서 어떻게 활용해야할지 섬세한 작업이 필요했던 것 같다. 코드의 흐름을 이해하지 못하고 아무데나 넣었다가 최신정보를 가져오지 못하기도 하는 등 생각보다 애로사항이 꽤 있었던 부분이었다.
  • PATCH는 JWT 회원정보수정 파트에서 사용해보았는데, JWT 인가와 맞물리다보니 많이 헤맸다.
  • header도 authorization와 token을 포함해서 잘 써야하고, formData로 정보를 보내야하는것도 몰랐어서 많이 헤맸고, 이미지를 보낼때는 파일로 보내야 하는건줄 모르고 URL로 보냈더니 이미지는 수정이 안되고 계속 닉네임만 수정돼서 이 부분을 고치는데도 상당히 시간이 많이 걸렸다.

• json server

  • axios로 json server와 통신하는 작업을 했는데, json server와 통신하는 것보다 더 헷갈렸던건 json server에는 정보를 보냈는데 내 화면에서 렌더링할때는 state를 변화시켜줘야하는 서버와 화면의 일관된 연동을 구현하는게 너무 어려웠고 아직 제대로 알아내지 못했다.
  • thunk를 사용하면 서버의 내용과 화면 상의 내용을 일관되게 연동시킬 수 있다는걸 얼핏 들었는데 아직 구체적인 방법은 몰라서 연구가 필요하다.

• JWT 인증/인가

  • 와 이거 진짜 어려웠다...
  • 서버와 통신한다는 개념 자체도 잘 안잡혀있는 상태에서 인증/인가를 구현해내려니 처음엔 정말 뭐가 뭔지 감도 안왔다.
  • JWT 서버로 구현한 기능들 : 내 정보를 보내서 회원가입하고, 토큰을 받고, 로그인 하기 위해 또 정보를 보내고, 받은 유저 정보들을 가지고 컴포넌트들에서 활용하고, 프로필정보를 수정하기위해 인가를 받고...
  • 받은 정보를 리덕스에 넣고 활용하는데 리덕스 사용하는 것도 어설프니 리덕스에 넣어놓은 정보를 컴포넌트에서 활용하는 것도 어려웠고...
  • 인가할때도 진짜 많이 헤맸다. 프로필정보 수정해야하는데 formData로 보내야하는걸 몰라서 헤매고, 이미지 전달할때도 파일로 전달해야하는거 몰라서 헤매고...
  • 깊은 공부가 필요한 대목인 것 같다.

KPT 회고

KEEP

• 중간 과정들을 상세히 기록하려고 많이 노력했던 것
  • 프로젝트 끝난 후에도 진행 과정을 다시 한 번 복기할 수 있어 좋았다.
  • 기록하면서 기억에도 많이 남아서 공부에도 크게 도움이 된다는걸 느꼈다.
    (특히 트러블슈팅 했던 부분들을 이번 과제하면서 많이 적어놓았는데, 보기 예쁘지 않더라도 내 생각을 내 언어로 정리하는 과정에서 공부가 많이 됐고 과제가 끝난 지금도 기억에 많이 남아서 앞으로도 이렇게 기록을 열심히 해야겠다는 생각이 든다.)
• 끈질기게 문제를 해결하려 노력한 끈기
  • 문제를 해결하는 능력이 조금씩 향상된다는 생각이 든다.
  • JWT 관련해서 많이 헤매서 튜터님들께 질문도 많이 했고, 구글링도 많이 했다. 그냥 이 기능은 포기할까 싶을때도 많았는데 포기하지 않고 계속 매달려서 성공하니 뿌듯했다.

PROBLEM

• 트러블슈팅은 많이 기록했지만, 일자별로 어떤 로직들을 구현했는지, 로직 별로 코드는 어떻게 짰는지 상세한 기록을 하지 못해서 아쉽다.

  • 일자별로 어떤 기능들을 구현했는지 정리해놓으면 프로젝트가 끝나고 시간이 많이 지나더라도 다시 봤을때 도움이 많이 될 것 같다.

• 데이터, 서버, 로컬에서의 정보의 흐름들을 제대로 정리하고 계속 한 걸음 씩 진행했어야 했는데, 머릿속으로만 계속 흐름을 상상하니 너무 헷갈렸다.

  • 나중에는 내가 짠 코드인데도 많이 헷갈렸고, 어디서 어디로 받아와서 어디로 가는건지, 언제 정보를 받아서 언제 리덕스로 보내는건지 등 나중에는 흐름들이 너무 헷갈려서 머릿속이 많이 복잡했다.

TRY

• 일자별로 좀 더 섬세하게 프로젝트 진행 과정을 기록하고, 트러블슈팅도 따로 모아놓기

  • 트러블슈팅은 많이 적었지만, 일자별로 어떤 로직들을 구현했는지 적는게 좀 부족했어서 아쉬웠다. 프로젝트를 돌아보기 위해 프로젝트의 일자별 구현 과정들도 함께 정리해놓으면 많은 도움이 될 것 같다.

• 구현한 기능 중 어렵고 헷갈렸던 기능들은 따로 내 언어로 개념정리해보는 시간을 가져도 좋을 것 같다.

• 데이터, 서버, 로컬 사이에서 정보의 흐름을 큰그림으로 손으로 쓰든 해서 내 언어로 한번 제대로 정리한 다음에 하나씩 진행해보는게 좋을 것 같다. 머릿속으로만 상상하니 나중에는 엄청 헷갈리더라.
  (그래서 DATA ERD를 초기에 미리 세팅하는 작업에 시간을 많이 할애하나보다.)

Redux Thunk

• redux thunk란?

  • Redux toolkit의 미들웨어

  • 미들웨어 : 중간에 끼어들어서 뭔가 추가 실행을 하게 만드는것

  • 컴포넌트 -> 리듀서에 바로 dispatch하기 전에, 중간에 한 단계 거치게 만드는것!

• 개념

  • 리듀서로 전달하는 과정이 복잡할 때, 중간다리에서 한번 과정 하나 처리하고, 그 다음 리듀서로 전달해주니까 내가 직접 복잡한 과정을 계속 반복해서 작성할 필요가 없어짐

  • 예시) 이 과정들을 하나로 합쳐주고 싶을때!
    컴포넌트 -> api로 어떤 data GET하기
    GET해온 정보 -> 리듀서로 dispatch하기
    리듀서의 state를 컴포넌트에 가져와서 사용하기

    => 중간다리에서 GET하고, GET해서 받은 정보를 리듀서로 자동으로 전달해서 그 값(리덕스의 state)을 컴포넌트에서 바로 받아서 쓸 수 있게 해줌!

  • 작성할 때는 좀 시간이 걸릴지라도, 한번 작성만 해놓으면 컴포넌트에서 수행해야하는 동작이 월등히 줄어듦!
    (dispatch로 thunk함수만 호출하면 끝남. thunk함수 안에 중간다리에서 api통신까지 해줄거니까)

• 특징

  • dispatch에 함수가 들어감!
    (기존 리덕스에서의 dispatch에는 action 객체가 들어감)
  • thunk함수는 컴포넌트에서 주로 dispatch안에 넣어서 사용됨