Home

Redux-toolkit 으로 관리한 state와 그 이유

• Product는 react-query로 관리하고, Cart만 Redux-Toolkit을 사용하여 관리
• 세준
• 영우

  redux toolkit을 처음 사용해보며 구조를 이해하는데 시간이 걸려 아쉬웠지만, 지원해주는 기능이 편리하여 앞으로 Context API로 상태관리를 할 수 없는 상황에는 고려해볼만한 상태관리 도구 같다고 느꼈습니다.

• 원호

  Redux와 달리 Redux-Toolkit을 사용하니 state 값을 변경할 때 불변성을 따로 유지할 필요 없이 직접적으로 state 값을 수정하면 돼서 상태변화 로직을 작성하는게 편리하다고 느꼈습니다.

• 일곤

  이번 과제에서는 Main과 Reservation 두 페이지만 있고, Main에서 보여주는 Products를 Reservation 페이지에서 관리할 필요가 없다고 판단하여 Redux로 관리하지 않았다. Redux의 가장 큰 장점은 상태가 어떻게 될 지 예측이 가능한 것이라고 생각한다. Cart는 add, delete, count, discount등 다양한 action이 필요한데, Redux를 사용하여 예측 가능한 상태로 관리할 수 있었다.

• 지석

  기존에 Redux-toolkit을 다루어본 경험이 이번 기업 과제를 하는데 도움이 많이 됐다. Redux-toolkit을 활용해 장바구니를 구현하였는데, Redux-toolkit 자체적으로 객체의 불변성을 유지하여, 불변성을 유지하는 코드를 추가하지 않아 코드량이 적어졌다. 계층 구조가 다른 컴포넌트의 상태관리를 해야하는 상황이 리액트로 개발하면 필연적으로 마주치는 부분인데, 이런 상태관리 라이브러리를 사용하면 정말 편한 것 같다. Redux-toolkit 뿐 아니라 다른 상태관리 라이브러리도 관심을 가져야겠다.

• 하은

  장바구니에 담은 상품의 상태를 전역적으로 관리하기 위해 redux-toolkit을 사용하였다. 처음에 thunk함수를 이용해서 reduce 호출을 지연시켜 장바구니 상태를 sessionstrage에 저장시켰는데 미들웨어라를 활용하는 더 좋은 방식을 알게 되었다. 이번 과제를 통해 redux-toolkit의 미들웨어를 사용해 볼 수 있어서 좋았다. 미들웨어에 대한 더 깊은 공부를 해보고 싶어졌다.

• 해솔

  다양한 액션들과 연결되어 있는 카트 상품들을 Redux-toolkit을 통해 효율적으로 관리할 수 있었다. 이전엔 redux-thunk를 통해 미들웨어를 주로 구현했었는데 이번 프로젝트를 계기로 Redux 미들웨어를 조금 더 정확하고 깊이있게 알아보고 싶어졌다.

• 현우

  Main페이지에서 장바구니에 담은 상품을 Reservation페이지에서 보여줘야했기에 전역 상태로 관리할 수 있는 Redux-toolkit을 사용하였다. 처음 사용하는거라 이해도가 조금 떨어져서 사용하면서 조금 힘들었지만 팀원분들이 Redux-toolkit을 통해 미들웨어나 초기값들을 사용하는 걸 보고 효용성을 느낄 수 있었고 조금 더 공부해보고자 하는 의욕이 생겼다.

가격, 공간 필터링

• React-query로 가져온 data를 JS 내장함수를 사용하여 필터링
• 영우

  처음 사용하는 기술 스택들을 학습하느라 필터 기능을 구현하지 못했지만, 이번 주말에 개인적으로 Best Practice로 뽑힌 팀원 분의 코드를 참고하며 마저 구현해보고 싶습니다.

• 원호

  다른 기능들을 공부하면서 구현하기에도 바빠 필터링 기능은 완전히 구현해내지 못했지만 팀원분들의 다양한 구현 방법들을 보면서 많이 배울 수 있었습니다.

• 일곤

  처음에는 Filter Component에서 Main에서 불러온 data를 prop으로 전달받아 필터링하는 방식을 사용했다. 하지만 다른 팀원들은 data를 price와 space로 재가공해 useState로 관리하였다. 이 방식이 괜찮아서 필터링 함수는 Main에서 , setState는 Filter 컴포넌트에서 진행하였다.

• 지석

  가격과 장소 개별 필터링과 다중 필터링을 진행했는데, 혼자 개발하며 다중 필터링의 의미가 모호해서 고민을 많이 했다. 팀원들의 코드를 보며 다중 필터링의 의미를 구체화 시킬 수 있었다. 개인적으로 필터링을 구현하는 것이 가장 어려웠는데, 팀원들이 코드를 보며 여러 방식으로 구현할 수 있다는 것을 알게 되었으며 많이 배웠다.

• 하은

  필터링을 다들 다양한 방식으로 구성하셨는데, 덕분에 다양한 구현을 배울수 있었다. 덕분에 useState를 더 잘 쓸수 있게 되었다.

• 해솔

  개발 시간에 쫓겨 놓칠 수 있는 부분들을 팀원들이 바로 잡아줘서 보다 확장성 높은 코드로 리팩토링을 할 수 있었다. 역시 동료 학습👍👍 이번 프로젝트에서 필터링이 핵심이라고 할 수 있을 정도록 다양한 로직들을 보고 많이 배웠다.

• 현우

  필터링에 사용할 최소금액, 최대금액, 장소를 useState로 사용했다. 처음엔 state의 초기값을 직접 하드코딩 방식으로 넣어줬는데 팀원들과의 논의를 통해 forEach를 통해 Math.min/max로 최소, 최대금액을 찾고 장소리스트도 뽑을 수 있었다. 데이터가 추가 되더라도 바꾼 방식을 통해 유지보수를 쉽게 할 수 있어서 좋았다.

Chakra-ui 사용후기?(Skeleton, NumberInput, RangeSlider…etc)

• Skeleton, NumberInput등 기존 CSS로 구현하기 까다로운 것들을 쉽게 구현할 수 있음
• 영우

  지원하는 컴포넌트도 많고, 특히 컴포넌트에 전달할 수 있는 props에 유용한 것이 많아 인상적이었습니다. 과하지 않고 모던한 UI를 프로젝트에 적용하고 싶을 때 고려해볼 수 있을 것 같습니다.

• 원호

  다양한 컴포넌트들이 제공되고 해당 컴포넌트들에 적용할 수 있는 props들과 기능들이 자세히 명시돼있어서 사용하기 편리하다고 느꼈습니다.

• 일곤

  MUI나 tailwind등 다양한 CSS 라이브러리들 못지않게 편리한 라이브러리였다. CSS는 직접 만드는 것보다 라이브러리에서 만든 컴포넌트를 사용하는 방식이 오히려 내 의도대로 작성하기 쉬운 것 같다. 앞으로 다른 프로젝트에도 chakra-ui 사용을 생각해볼 것 같다.

• 지석

  처음 요구사항을 받았을 때는 Chakra-ui를 사용해 스타일링 하는 게 제일 어렵겠다고 생각했는데, 막상 사용해보니 공식문서도 정말 잘 되어있고, 이모션과 합도 잘 맞아서 만족스럽게 스타일링을 진행했다. 각종 컴포넌트들이 기본적으로 제공이 되어있어 무언가 빠르게 만들고 싶을 때 사용하면 최상의 퍼포먼스를 낼 수 있을 것 같다.

• 하은

  공식 문서에 데모가 잘되어 있어 처음 적용하기에 시간이 오래 걸리지 않아 좋았다. UI 스타일리에 많은 시간을 잡고 싶지 않을때 사용하면 좋을것 같다.

• 해솔

  공식 문서가 잘 되어 있었고 기본 컴포넌트들이 잘 구성되어 있어 프로젝트에 적용하기 편했다. ChakraProvider를 통한 custom theme을 주입해 사용해보니 프로젝트의 규모가 커질수록 초기 설정 후 사용하기에 좋을 것 같았다. Emotion과의 결합도도 좋아서 조금 더 알아보고 싶고 다음 프로젝트때도 고려해볼 만한 라이브러리였다.

• 현우

  만들어진 컴포넌트를 가져다 사용한다는게 내가 온전히 이해하지 못한 컴포넌트라서 사용하기 어려울거라 생각했다. 하지만 막상 Chakra-Ui를 사용해보니 해당 컴포넌트의 props들과 활용방법도 상세하게 나와 있어서 내가 원하는 대로 활용하기 편리했다.