공부/프로젝트 (16) 썸네일형 리스트형 [모아 프로젝트] 버전 관리와 사용자 피드백을 통한 꾸준한 개선 서비스를 개발하고 배포하는 과정에서 중요한 요소 중 하나는 사용자 피드백을 수용해 지속적으로 제품을 개선하는 것입니다.이번에는 `Release 1.0.0` 첫 배포 이후 사용자 피드백 기반으로 기능 추가와 버그 수정 과정, 버전 관리의 중요성에 대해 공유해보려고 합니다. 1. Release 1.0.0 첫 배포! 📖초기 목표서비스를 초기 사용자에게 선보이기 위해 핵심 기능에 집중했습니다. `핵심 기능` : 스탬프 관리, 지도, 앨범, 추천 관광지 2. 사용자 피드백 기반 개선 과정 📖Release 1.0.1🔥 fix 수정된 문제폰트 오류: 특정 브라우저에서 글꼴이 올바르게 표시되지 않는 문제를 해결했습니다.스와이퍼 중앙 정렬 오류 : 콘텐츠 정렬이 어긋나는 문제를 수정해 UI를 강화했습니다.비로그인 .. [팀 프로젝트] issue daily issue daily 📰Open News API를 이용하여 최근 뉴스들을 카테고리별로 확인할 수 있는 사이트입니다. 배포 링크 : https://issue-daily.vercel.app/깃허브 링크 : https://github.com/smu06030/issue-daily 프로젝트 구조 📂 📦src ┣ 📂app ┃ ┣ 📂(auth) ┃ ┃ ┣ 📂login ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂reset-password ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂signup ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂update-password ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📜auth-layout.tsx ┃ ┃ ┗ 📜loading.tsx ┃ ┣ 📂(roo.. [팀 프로젝트] Go 캠핑! Go 캠핑! 🏕️지도, 고캠핑 API를 활용해 전국의 캠핑장 위치와 상세정보를 제공해 주고, 날씨 API와 유튜브 API를 활용해 캠핑 관련 추가 정보를 제공해 주는 캠핑 정보 사이트입니다! 배포 링크 : https://go-camping-pi.vercel.app/깃허브 링크 : https://github.com/doo1b/Go_Camping 파일 구조 🗂️📦src┣ 📂api┣ 📂assets┃ ┣ 📂header┃ ┣ 📂indexpages┃ ┣ 📂region┣ 📂components┃ ┣ 📂detailpage┃ ┣ 📂guidepage┃ ┣ 📂layout┃ ┣ 📂mainpage┃ ┗ 📂searchresultpage┣ 📂hooks┣ 📂pages┃ ┣ 📂debugpage┃ ┣ 📂d.. [리팩토링] 커스텀 훅을 활용한 날씨 데이터 관리 구조 개선 최근 프로젝트에서 날씨 정보를 사용자들에게 제공하기 위해 행정 구역 데이터와 오늘, 이번 주 날씨 데이터를 가져와 화면에 표시하는 기능을 구현했습니다. 이 과정에서 UI와 데이터 관련 로직을 효과적으로 분리하기 위해 커스텀 훅을 도입했습니다. 구조 변경 이유 ✨데이터 요청, 포맷팅, 상태 관리 등의 로직이 컴포넌트 내부에 존재해서 UI와 데이터 로직이 혼합되어 가독성이 떨어지고, 유지보수가 어려운 상황이 발생했습니다.분리했을 때 이점`가독성 향상` : 컴포넌트가 UI에만 집중할 수 있어 코드의 가독성이 높아졌습니다.`유지보수 용이` : 데이터 로직을 커스텀 훅으로 분리하여, 각 기능을 독립적으로 수정하거나 확장할 수 있습니다.`재사용성` : 커스텀 훅을 다른 컴포넌트에서도 재사용할 수 있어 코드 중복을 .. [개인 프로젝트] MBTI 테스트 MBTI 테스트 📔본인의 MBTI를 테스트해 볼 수 있는 사이트입니다. 배포 링크 : https://mbti-test-app-six.vercel.app/깃허브 링크 : https://github.com/smu06030/mbti-test-app 파일 구조 🗂️📦src┣ 📂assets┣ 📂api┣ 📂components┃ ┣ 📂Header┃ ┣ 📂Layout┃ ┣ 📂Result┃ ┗ 📂Test┣ 📂constants┣ 📂mock┣ 📂pages┃ ┣ 📂private┃ ┗ 📂public┣ 📂queries┣ 📂routes┣ 📂store┣ 📂utils┣ 📜App.jsx┗ 📜main.jsx 주요 기능💡구현 사항✅ 회원가입, 로그인, 프로필 관리 기능 구현JWT 인증 서버를 사용하여.. [개인 프로젝트] MBTI 테스트 - useQuery, useMutation 커스텀 훅 리팩토링 리팩토링 이유 📖Tanstack Query를 사용하면서 여러 컴포넌트에서 중복되는 로직이 발생해 유지보수가 어렵다는 생각이 들었습니다. 그래서 `useQuery`와`useMutation`을 커스텀 훅으로 리팩터링 하고 `queryKey`를 상수화 해 코드의 가독성과 재사용성을 높인 방법에 대해서 공유해보려고 합니다. 기존 코드 📖useQuery, useMutation기존에는 `useQuery`와 `useMutation`을 각 API 호출마다 직접 사용했는데, 여러 컴포넌트에서 중복되는 로직이 많아지고 가독성이 떨어 지는 문제가 있었습니다.const { data: results, isLoading } = useQuery({ queryKey: ["results"] queryFn: getTestResu.. [팀 프로젝트] 방콕 스타일 회고 Keep (현재 만족하는 부분) 😁새로운 시도기능 구현을 다 했더라도 어떻게 하면 더 좋은 코드가 될 수 있을까 고민하고 시도를 해보면서 발전하려고 하는 모습이 좋았습니다! 서로의 장점서로의 코드를 보면서 잘 작성한 코드는 보고 배울 수 있다는 점에서 좋았습니다! 의견 공유PR과정에서 서로의 의견을 공유하고 개선점이 있다면 반영해 좋은 PR을 작성하려고 노력했습니다! Problem (불편하게 느꼈던 부분) 😥마이크 음량마이크 음량이 작아서 소통하는 데 다소 어려웠던 부분이 살짝 아쉬웠습니다. 소극적질문, 의견 제시 과정에서 다소 소극적이었던 부분이 살짝 아쉬웠습니다. Try (해결책, 실행 가능한 것) 😊질문을 두려워하지 않기이해를 못 했을 때 주저하지 말고 적극적으로 질문하기! 회고 🧐다음 .. [팀 프로젝트] 방콕 스타일 팀 프로젝트 소개 📖방콕 스타일방콕 스타일은 재택근무, 원격 수업 등 집에서 나가지 않고도 스타일리시한 OOTD를 완성할 수 있는 패션 뉴스피드 서비스입니다. 배포 링크 : https://bangkok-style.vercel.app/깃허브 링크 : https://github.com/smu06030/bangkok-style파일 구조 🗂️📦src┣ 📂assets┃ ┣ 📂fonts┃ ┗ 📂images┣ 📂components┃ ┣ 📂Layout┃ ┣ 📂MyPage┃ ┗ 📂UI┣ 📂constant┣ 📂Context┣ 📂hooks┣ 📂modules┣ 📂pages┃ ┣ 📂private┃ ┣ 📂public┣ 📂routes┣ 📂services┣ 📂styles┣ 📂utils┣ 📜Ap.. 이전 1 2 다음
