성장기록/프로젝트

React, Next 배포와 배포 자동화 A부터 Z [1주차] [GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)]

React, Next 배포와 배포 자동화 A부터 Z [1주차] [GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)] 실습 참고 CloudFront, S3 쉽게 배포하기 GitHub Action에서 React 지속적 전달 구현하기 (CF, S3) 이번 1주차에 진행했던 내용은 GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)에 대한 내용이였습니다. 이번 주차에서 중점으로 배웠던 항목은 다음과 같습니다. GitHub Action의 특성 CI/CD 개념 aws cli, terraform GH CLI 이번 주차의 과정을 진행하면서 얻고자하는 역량은 무엇일까요? 구매한 도메인을 AWS를 통해 배포를 하는 것 뿐..

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..

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 프로젝트 - 팀원 피드백 기능, 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 프로젝트 - Storybook 적용기

Randomly 프로젝트 - Storybook 적용기 개발을 하면서 jest로 만든 함수들을 유닛테스트 하였는데, 컴포넌트 단위로 테스트를 할 수 있는 Storybook도 추가적으로 알게 되었다. 이 storybook을 사용하면 내가 만든 컴포넌트들을 개별적으로 테스트해볼 수 있어 내 코드의 품질을 더 높일 수 있을 것이라 생각되었다. 그렇다면, 이 Storybook에 대해서 한 번 알아보고 도입해보자! 🧐 Storybook 넌 누구냐? Storybook은 UI 컴포넌트를 개발하고 테스트하는 도구로 개발자들이 UI 컴포넌트의 개발과 디버깅을 더욱 쉽게 할 수 있도록 돕는 오픈 소스 도구이다. Storybook을 사용하면 UI 컴포넌트를 개별적으로 테스트하고 독립적으로 개발할 수 있으며, 빠른 개발과 디자..

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개씩 개인마다 분배 ..