randomly
Randomly 프로젝트 - React Query 데이터 캐싱 올바르게 사용하기
Randomly 프로젝트 - React Query 데이터 캐싱 올바르게 사용하기 🏡 GitHub : https://github.com/soohyun-dev/Randomly GitHub - soohyun-dev/Randomly: 📑 스터디를 돕는다~! : 질문 관리 프로젝트 📑 스터디를 돕는다~! : 질문 관리 프로젝트. Contribute to soohyun-dev/Randomly development by creating an account on GitHub. github.com React-Query의 캐싱 기능에 대해 잘못 알고 있는 부분이 있었고, 제대로 적용을 해보았습니다. 이전 게시물에서 React-Query를 통해 캐싱 기능을 이용한다고 하였습니다. 하지만, 정작 가장 중요한 stale-Tim..
Randomly 프로젝트 - 새폴더 모달창 구현 이외의 추가 기능들
Randomly 프로젝트 - 새폴더 모달창 구현 이외의 추가 기능들 🏡 GitHub : https://github.com/soohyun-dev/Randomly 이번주는 새폴더 추가 방식을 바꿔보았어요. 그리고 리팩터링을 진행하였습니다. 🫡 새폴더를 만들 수 있는 페이지입니다. 기존에는 질문 폴더 추가 버튼을 누르면 새폴더를 만들어주었지만, 새폴더라는 이름으로 무조건 사용해야 했어요. 저기 '3월 첫째주 금요일 스터디' 처럼 변경된 글씨는 운영진만 따로 임의대로 데이터를 변경해서 사용한거였습니다. 급하지 않은 기능 구현이라 생각했는데, 생각해보니 너무 불편한 방식이더라고요. 그래서 편의를 위해서 이번 기능 구현을 하였습니다. 어쩌면 빨리 했었어야하는 기능이였겠구나 싶네요. ❓어떤식으로 구현할까 새폴더의 이..
Randomly 프로젝트 - 팀원 피드백 기능, React로 모달창 구현
Randomly 프로젝트 - 팀원 피드백 기능, React로 모달창 구현 🏡 GitHub : https://github.com/soohyun-dev/Randomly 오늘 정리할 것은 그동안 구현한 팀원 피드백 기능이랑 그 과정에서 모달창을 구현한 방법 및 트러블 슈팅에 대한 것입니다. 😊 ❓ 무엇을 구현했나요 팀원 피드백 기능을 구현했습니다. 이 기능은 실제 면접 스터디를 하면서 각 팀원끼리 실시한 모의 면접에 대한 피드백을 주기 위한 것입니다. 위의 사진에서 확인할 수 있듯이 피드백에 대한 대상이 있고 피드백을 주는 대상이 있습니다. 이 기능은 현재 로그인을 하지 않아도 사용할 수 있게 하였습니다. 이유는 좀 더 많은 유저들이 사용할 수 있도록 편의를 제공하기 위함입니다. 아무래도 로그인을 해서 사용해..
Randomly 프로젝트 - React Query로 비동기 처리하기, 상태(state) 다루기
Randomly 프로젝트 - React Query 비동기 처리하기 🏡 GitHub : https://github.com/soohyun-dev/Randomly 그동안 RTK를 통해 전역으로 관리하던 상태들을 React-Query로 캐싱하여 값을 다루는 로직으로 변경하였다. 해당 기능을 구현하면서 useQuery의 비동기처리를 어떻게 처리할 것인지에 대해 고민이 되었고, 그 과정을 담아 본다. 📌 변경된 상태 다루기 그동안 나는 RTK를 통해 폴더, 질문, 멤버, 질문 순서, 응답자 순서 등등 을 전역적으로 관리하였다. 위 값들은 store에서 기본적으로 다루고 있는 값들이다. 이렇게 다루니 컴포넌트의 벽을 허물고 전역적으로 상태들을 다룰 수 있어서 무척 편리했다. 하나둘 편해서 store에서 다루는 값들을..
Randomly 프로젝트 - React-Query 적용기
Randomly 프로젝트 - React-Query 적용기 카테고리 기능 구현 이후로 많은 리팩터링을 했다. 차근차근 정리를 해보려고 한다. 그 중 가장 먼저 React-Query를 적용한 것을 기록하려고 한다. ❓ 도입한 이유 남들이 다 쓴다고 쓰는 것보다 내가 진짜 쓰고 싶다고 느낄때 사용하고 싶었다. 필요할때마다 기술을 도입하였기 때문에 이번 randomly 프로젝트를 하면서 리팩터링을 자주 하게 되었는데, 그럴때마다 각 기술들이 어떤 부분들에서 이점이 있는지를 잘 느끼게 되었다. 예를 들어, RTK를 적용하기 전에 직접 props drilling 으로 값을 내려주면서 컴포넌트를 구성해보고 이후에 적용하여 왜 RTK를 사용하는지를 더 잘 느끼게 되었다. 전역 상태관리를 통해 props drilling..
Randomly 프로젝트 - 카테고리별 균등 분배 기능 구현
드디어 카테고리 기능을 구현하였다!!! ✔️ 기능 설명 이 기능이 필요한 사용자는 다음과 같다. - 질문의 종류가 여러개인경우 (ex. React , Js, CS...) - 위 질문들을 무작위로 받는 것이 아닌 각 종류마다 균등하게 분배받고자 하는 사용자들 활용 예시는 다음과 같다. ex) 팀원 A, B, C는 기술면접 스터디를 진행하고자 한다. 등록한 질문은 React 관련 질문 3개, Js 관련 질문 3개, CS 관련 질문 3개로 총 9개의 질문이 등록되어있다. 스터디 진행시 질문을 각자 3개씩 분배하게 하였는데, 무작위 분배 기능을 사용하면 어떤 팀원이 React 질문만 3개 받아 버리는 경우가 생겼다. 각 팀원들은 이런 방식이 아닌 React, Js, CS관련 질문글을 각각 1개씩 개인마다 분배 ..
개인 프로젝트 - Randomly ( ~ 2023.02.17)
⬅️ 이전 개발 일지 https://bmy1320.tistory.com/entry/dd 개인 프로젝트 - Randomly (2023.02.13 ~) ⬅️ 이전 개발 일지 https://bmy1320.tistory.com/entry/%EA%B0%9C%EC%9D%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Randomly-20230209 개인 프로젝트 - Randomly (2023.02.09 ~) 개인 프로젝트 - Randomly (2023.02.09 ~) ⬅️ 이전 개발 일지 bmy1320.tistory.com 📖 주제 스터디를 진행하면서 필요한 기능들을 구현한 프로젝트 🏠 배포 주소 https://randomly.pages.dev/ React App randomly.pages...
개인 프로젝트 - Randomly (~ 2023.02.13)
⬅️ 이전 개발 일지 https://bmy1320.tistory.com/entry/%EA%B0%9C%EC%9D%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Randomly-20230209 개인 프로젝트 - Randomly (2023.02.09 ~) 개인 프로젝트 - Randomly (2023.02.09 ~) ⬅️ 이전 개발 일지 https://bmy1320.tistory.com/entry/%EA%B0%9C%EC%9D%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Randomly 개인 프로젝트 - Randomly 개인 프로젝트 - Randomly 📖 주제 스터디 bmy1320.tistory.com 📖 주제 스터디를 진행하면서 필요한 기능들을 구현한 프로젝..