공부/프로젝트 (18) 썸네일형 리스트형 ESLint import, export, object 정렬 자동화 하기 - eslint-plugin-perfectionist 활용 프로젝트에서 코드 스타일을 유지하는 것은 협업과 유지보수에 있어서 매우 중요하다고 생각합니다.특히 import 순서, 객체 속성 정렬 등은 개발자가 직접 정렬하는 경우가 많아 실수하기 쉽습니다.이런 반복적인 정렬 작업을 ESlint로 자동화하는 방법에 대해 소개해보려고 합니다.eslint-plugin-perfectionist 사용 이유 ✨기존 eslint 플러그인 중에서도 import 정렬을 도와주는 것들이 있습니다.근데 `eslint-plugin-perfectionist`는 import, export, 객체, 인터페이스 정렬까지 지원해주고 Custom Grouping과 다양한 정렬 기준을 지원합니다.그중에서도 제가 제일 필요했던 줄 길이에 따른 정렬을 지원한다는 점에서 `eslint-plugin-per.. KINS 프로젝트 초기 세팅 초기 세팅의 중요성 📖프로젝트 초기 세팅은 개발의 방향을 결정짓는 중요한 작업입니다.특히 협업 환경에서 코드 스타일과 퀄리티를 일관되게 유지하는 것이 필수적입니다.이번 글에서 프로젝트 세팅에서 사용된 주요 파일과 설정들을 하나씩 살펴보려고 합니다. ✨ 잘 몰라서 기록용으로 한 줄씩 해석해보려고 합니다!ESLint 설정 📖ESLint는 코드 방식을 일관성 있게 구현할 수 있도록 도와주는 도구입니다. 1. 모듈 가져오기const { FlatCompat } = require('@eslint/eslintrc');const tsParser = require('@typescript-eslint/parser');const tsPlugin = require('@typescript-eslint/eslint-plugi.. [모아 프로젝트] 버전 관리와 사용자 피드백을 통한 꾸준한 개선 서비스를 개발하고 배포하는 과정에서 중요한 요소 중 하나는 사용자 피드백을 수용해 지속적으로 제품을 개선하는 것입니다.이번에는 `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.. 이전 1 2 3 다음
