프로젝트

Remind - 인플루언서 체험단/협찬 관리 서비스 프로젝트

Remind - 인플루언서 체험단/협찬 관리 서비스 프로젝트 📖 주제 인플루언서 체험단/협찬 활동에 대한 일정을 관리해주는 서비스 🛠️ 사용 기술 Vite React Redux-Toolkit React-Query TypeScript Style-Components Firebase Vercel 🏡 깃허브 https://github.com/soohyun-dev/Remind GitHub - soohyun-dev/Remind: 🗓️ 인플루언서 체험단/협찬 관리 프로젝트 🗓️ 인플루언서 체험단/협찬 관리 프로젝트. Contribute to soohyun-dev/Remind development by creating an account on GitHub. github.com 🛫 배포주소 https://remind-g..

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 프로젝트 - 새 기능 생성 (질문별 카테고리) 에 대하여

Randomly 프로젝트에 새로운 기능을 생성하려고 한다!!! 무엇?! ✔️ 질문 별 카테고리 기능! 해당 기능이 왜 필요할까? 스터디 팀원들과 질문을 주고받는 방식을 이제 변경해보고자 한다. 기존까지의 질문 방식은 구분없이 20개의 질문중에서 랜덤으로 분배하여 질문을 할당하던 방식이였다. 하지만, 이후로 적용할 방식은 JS 5개, React 5개, CS 5개 ... 이런식으로 질문들을 선별하여 각 개인마다 분류별로 하나씩 뿌려줄 예정이다. 해당 기능을 프로젝트에서 사용하려면 등록된 질문들이 어떤 분류의 질문인지를 알아야한다. 그래야지 중복없이 하나씩 뿌려줄 수 있기 때문이다. 어떻게 구현할건데? 고민이 많이된다. 단순하게 생각했는데, 추가할때만 생각하면 안되고 질문을 수정,삭제 때도 생각해야한다. 그럴..

Randomly 프로젝트 - ErrorBoundary 적용

Randomly 프로젝트 - ErrorBoundary 적용 프로젝트에서 예기치 못한 에러가 발생할 때 사용자에게 빈화면을 노출시키는 것이 계속 신경쓰였다. 이런 불편함을 최소화하고자하는 방법을 찾던 도중 ErrorBoundary라는 것을 알게 되었다. ErrorBoundary 란? ErrorBoundary를 사용하면, 리액트를 사용하면서 발생되는 컴포넌트의 에러를 핸들링할 수 있게된다. 다음을 보자. 위 화면처럼 컴포넌트에서 어떠한 오류가 발생하면 렌더링이 중단되고 빈화면을 노출시킨다. 이 상황에서 빈화면 대신 사용자가 정의한 화면을 보여지게 유도할 수 있다. 방법 ErrorBoundary는 원래 클래스형 컴포넌트에서만 사용가능하다. 하지만, 나는 함수 컴포넌트를 사용하고 있기때문에 다른 방법이 필요하다..