티스토리

doonii 님의 블로그

검색하기

블로그 홈

doonii 님의 블로그

doonii.tistory.com/m

개발공부 연습장

구독자: 0

방명록 방문하기

주요 글 목록

프로필 변경 기능 만들기 (with AWS S3) 보호되어 있는 글입니다. 공감수 0 댓글수 0 2025. 4. 23.
Next.js 미들웨어(Middleware) 미들웨어(Middleware)요청이 처리되기 전에 실행되는 서버 측 함수요청을 가로채어 인증, 리다이렉션, 또는 사용자에 맞는 페이지를 제공하는 등의 작업을 수행할 수 있음 미들웨어의 역할사용자 인증 및 권한 검증 : 특정 페이지에 접근하기 전에 사용자가 인증되었는지 확인페이지 리다이렉션 : 권한이 없는 사용자를 로그인 페이지로 리다이렉션하거나, 다른 적절한 페이지로 안내할 수 있음요청 정보 변경 : 요청 객체의 내용을 동적으로 수정하고 추가 작업을 수행할 수 있음 Next.js 미들웨어의 주요 기능1. NextResponse 의 주요 API redirect()// 인증되지 않은 사용자를 로그인 페이지로 리다이렉트if (!isAuthenticated) { return NextResponse.redire.. 공감수 0 댓글수 0 2025. 1. 24.
최종 프로젝트 발표 및 부트캠프 수료 후 회고 지난 주 금요일 내일배움캠프를 수료했다. 이전 ~ 캠프 과정내가 선택한 과정은 매일 오전 9시 ~ 오후 9시까지 진행되었지만, 커리큘럼을 따라가기 위해서는 12시간을 넘어서 새벽, 주말까지 공부 해야했다. 중간에 지치고 힘들어 울고 포기하고 싶었던 순간도 많았지만, "취업은 모르겠고 일단 수료라도 해보자. 여기까지 왔는데 중도포기 할 수는 없다. 포기하던지는 그 이후에 생각하자" 라는 생각이 계속 들었고 결국 어떻게든 해보자는 마음으로 수료까지 달려왔다. 나는 비전공자로 개발 공부를 전혀 해본적 없었다. 이전에는 창업기업들의 국가 기업지원금을 지급하는 공기업 색깔의 업무를 했었다.기계적으로 일을 하다 보니 크게 힘들지는 않았지만 쉽게 대체가능한 직무라는 생각에 고민이 많았다. 일을 하면서 성장할 수 있는.. 공감수 3 댓글수 1 2024. 11. 26.
마우스 감도에 따른 스크롤 불일치 문제 🚨 발생한 문제 ScrollPicker 컴포넌트의 일관되지 않는 스크롤 동작 확인(데스크탑 마우스 설정에 따라 1칸씩, 3칸씩 스크롤 상이)모바일 퍼스트로 화면 드래그로 스크롤 할때는 문제가 없었으나 웹 뷰 테스트 중 해당 문제가 발생 ❓원인 사용자의 마우스 감도 설정에 따라 wheel 이벤트의 발생 빈도 차이가 발생해 다르게 동작함높은 감도 설정에서는 작은 휠 움직임으로도 여러 번의 이벤트가 발생 ✅ 해결 과정 1. isScrolling ref 사용const isScrolling = useRef(false);연속 스크롤 입력 시에도 일관된 스크롤을 보장하고 스크롤 중복 실행을 방지하기 위해 사용 2. handleWheelScroll 함수 추가스크롤 속도 최적화 (behavior: 'smooth' 시간.. 공감수 0 댓글수 0 2024. 11. 20.
일정등록 모달 구현 방식 개선 ■ 배경처음 기능을 구현할 때는 모바일 퍼스트 접근으로 달력의 일정을 클릭하면 일정을 등록하고 관리하는 화면을 모달이 아닌 날짜 값을 받는 동적 경로로 페이지를 구현했었다. 그러나 웹 디자인 시안을 검토한 결과, 일정 관리 페이지가 모달 형태로 설계되어 있었다.이에 따라, 같은 페이지 내에서 다른 경로의 URL을 어떻게 효과적으로 보여줄 수 있을지 고민하게 되었다. 일정 클릭 시 /study/[studyId]/[date]새로운 페이지로 이동 ■ 초기 접근Next.js의 Parallel Routes 또는 Intercepting Routes 기능을 활용하면 기존 페이지를 유지하면서 모달 형태로 일정 관리 화면을 구현할 수 있을 것이라고 판단했다. 이를 공부하고 적용해 보았으나, 뷰에 맞게 분기 처리하는.. 공감수 0 댓글수 0 2024. 11. 19.
Tailwind css 로 반응형 구현하기 반응형하나의 웹사이트가 데스크톱, 태블릿, 모바일 등 다양한 디바이스의 화면 크기에 자동으로 최적화되어 보여지는 디자인 방식 Tailwind css 의 반응형 디자인기본 브레이크 포인트(sm, md, lg, xl, 2xl)를 제공해 직관적이고 빠르게 적용할 수 있어 어떤 화면 크기에서 어떤 스타일이 적용될지 쉽게 파악할 수 있다.- 큰 화면의 스타일이 작은 화면에 영향을 미치지 않는다.- 모든 유틸리티 클래스에 반응형 적용할 수 있다.Tailwind css 공식문서에서 Responsive Design 탭을 보면 반응형 디자인에 대한 설명을 확인할 수 있다.https://tailwindcss.com/docs/responsive-design 커스텀 브레이크포인트 설정tailwind.confing.js 파.. 공감수 2 댓글수 1 2024. 11. 18.
favicon & og 설정하기 ■ favicon- 브라우저 탭에서 보이는 작은 로고- 북마크할 때 옆에 표시되는 사이트 대표 이미지- 보통 16x16 또는 32x32 픽셀 크기의 작은 이미지 favicon 등록시의 장점- 사용자가 여러 탭 사이에서 원하는 페이지를 쉽게 찾을 수 있다.- 모바일 기기에서 홈 스크린 바로가기 아이콘으로 활용할 수 있다.- 사이트의 첫인상을 결정하는 요소이며 완성도를 높일 수 있다. favicon 설정하기① 프로젝트 안의 public 폴더에 변경할 로고이미지 추가 및 기본 favicon 삭제요롷게 생긴 기본 favicon 을 삭제하고 변경할 로고이미지를 추가해주었다. ② Metadata 설정 변경하기layout.tsx 컴포넌트안의 Metadata 설정에서 icon - 이미지 경로를 넣어주어 설정완료!.. 공감수 0 댓글수 0 2024. 11. 14.
아키텍쳐, 다이어그램, 기능명세서 만들기 최종프로젝트의 브로슈어를 제작 중 아키텍쳐가 필요했다. 아키텍쳐활용 사이트 https://www.cloudcraft.co/ 피드백- 어떤 식으로 굴러가는지 기능별로 흐름이나 아키텍쳐를 간결하게 구조도처럼 개발자스럽게 수정하면 좋을 것 같다.- 기능 명세서도 추가하면 좋을 것 같다. 피드백 적용- 다이어그램 - 기능명세서구분주요 기능상세 기능비고홈이벤트 페이지캐러셀을 통해 스터디 관련 이벤트 확인 검색검색으로 원하는 스터디 조회 인기스터디인기스터디를 캐러셀로 확인 모집글최신순, 태그 필터링 순으로 모집글 조회 찜모집글 찜 -> 마이페이지에서 찜 리스트 조회 인증인가소셜 로그인supabase auth 소셜 로그인 연동 (카카오 / 구글) 이메일 로그인 / 회원가입 마이페이지프로필 관리프로필 이미지,.. 공감수 0 댓글수 0 2024. 11. 13.
더보기 기능 구현하기 스터디 멤버들의 회고록 데이터여서 양이 그렇게 많지 않아 데이터 전체를 불러와 클라이언트에서 더보기 처리를 하였다.만약 서버에서 많은 데이터를 불러오는 경우라면 API 호출 로직을 수정해야 할 것이다. 구현 기능- 초기에 4개의 메모만 표시되고, 더보기 버튼을 클릭할 때마다 4개씩 추가로 메모가 표시됨- 더 이상 표시할 메모가 없으면 더보기 버튼이 사라짐 구현 과정1. useState 훅을 사용해 초기값이 4인 showItems 상태를 관리const [showItems, setShowItem] = useState(4); 2. handleLoadMore 함수를 추가해 더보기 버튼 클릭 시 showItems + 4씩 증가const handleLoadMore = () => { setShowItem((.. 공감수 0 댓글수 0 2024. 11. 12.
css 우선순위 문제 🚨 문제Calendar 컴포넌트의 스타일링에서 day_today 클래스가 제대로 적용되지 않는다.오늘 날짜의 경우 글자 색상이 black 이어야하는데 반영이 안되었다.day_today: "bg-primary-50 w-7 h-7 text-black rounded-full font-bold hover:bg-white/10 hover:text-white" ❓ 원인- CSS 우선순위 문제- day 클래스의 text-white 스타일이 day_today의 text-black 을 덮어쓰고 있음day: "text-white font-medium text-[12px] caption w-7 h-7 hover:bg-white/10 rounded-full",day_range_end: "day-range-end",day_.. 공감수 0 댓글수 0 2024. 11. 11.
자체 UT 후 계획 및 버그수정 어제 최종 프로젝트의 중간발표를 마친 뒤 중간 회고를 진행했다. 🥲 아쉬웠던 점커스텀 훅, 공용 컴포넌트 사용 미숙체계적인 일정 관리가 조금 안됐던 것 같다비지니스 로직 분리가 잘 안되어서 아쉽다개발 기능에 집중 하다 보니 , 성능적인 부분이나, 구조적인 문제 개선을 하지 못했슴 + 로딩창을 거의 사용하지 못함 + 이벤트나 ui동적 요소 부족fetch 로직 겹치는 부분 정리가 잘 되지 않음 / Query, fetch 일관성 부족필요하지 않은 client 컴포넌트 / 렌더링 방식을 고려하지 않은 컴포넌트 작성 😍 좋았던 점소통이 잘 되고 피드백이 좋았음팀원들의 태도가 매우 우수함 / 감정상해죄 0오류나 어려운 부분이 있을때 서로 질문하면서 해결한 점작업하고 있는 팀원의 흐름이 깨지지 않도록 각 팀원과의.. 공감수 4 댓글수 1 2024. 11. 8.
shadcn/ui 캘린더 css 적용하기 기본으로 생성되었던 calendar 컴포넌트를 디자인 시안에 맞게 각 요소가 뭘 뜻하는지 정리하면서 하나씩 적용을 했다."use client";import * as React from "react";import { ChevronLeft, ChevronRight } from "lucide-react";import { DayPicker } from "react-day-picker";import { cn } from "@/lib/utils";export type CalendarProps = React.ComponentProps;function Calendar({ className, classNames, showOutsideDays = true, ...props}: CalendarProps) { ret.. 공감수 0 댓글수 0 2024. 11. 6.
[Refactoring] 바텀시트 재사용 컴포넌트로 분리하기 캘린더 일정 등록 시 기존에 모달로 표시되던 시간 선택 모달을 바텀시트로 변경하게되었다. 프로젝트 내 다른 페이지들에서도 스크롤 선택 형태의 기능이 바텀시트로 디자인 되어 있어, 전반적인 사용자 경험의 통일성을 높였고,기존 모달 방식에서는 모달창이선택한 시간들을 가렸었는데 바텀시트 방식으로 변경해 사용자가 이전 선택 내용을 확인하면서 새로운 시간을 선택할 수 있게 되었다. [ 이전 디자인 ][ 변경 디자인 ] 구현 과정 ① 기존 코드모달형태로 작업했던 코드인데, 시간 선택 기능을 하는 컴포넌트인 ScrollPicker 를 제외하고 별도 컴포넌트로 분리하면 좋을 것 같다고 생각했다. return ( e.stopPropagation()} > .. 공감수 0 댓글수 0 2024. 11. 5.
댓글&답글 삭제 유효성 적용하기 댓글기능에 답글 기능을 추가하고 수정, 삭제 테스트를 하는데 답글의 경우 삭제가 잘 되지만 부모인 댓글의 경우 삭제가 되지 않았다.또한 답글이 있는 부모댓글을 삭제했을때 해당 댓글과 답글까지 싹다 삭제하는지? or 댓글만 "삭제된 댓글입니다." 로 내용을 바꾸어야 할지? 혼자 판단하면 안될 것 같은 부분도 있어서 팀원과 논의하였고, 전체 삭제하기보다 부모댓글만 "삭제된 댓글입니다." 로 표시하도록 하기로 결정했다. 처음엔 mutation 함수에서 무작정 코드를 써보다가 코드가 너무나 길어져서 나조차도 자꾸 헷갈렸고, 게다가 의도한대로 동작하지도 않아서 결국 작성했던 코드들을 다 지운 뒤 댓글/답글 삭제 관련해서 일어날 수 있는 경우들을 차근차근 적어봤다. 부모댓글부모댓글 삭제 시 답글이 없는경우 → 바로.. 공감수 1 댓글수 1 2024. 11. 4.
캘린더 일정관리 - 일정 시간 중복 체크 유효성 ② 기존 등록된 일정과 추가/수정할 일정의 시간이 겹치지 않도록 로직을 짰는데, 수정모드일 경우 현재 수정중인 데이터는 비교할 데이터에서 제외해야 한다는걸 깜빡했다. 생각정리수정모드와 등록모드에서 비교할 배열을 각각 따로만들기 (수정모드만 만들면됨)Edit의 부모쪽에서 데이터 가공해서 보내주기(calendarData fiter로 !== 해서 내려줘서)수정 등록 모드별로 다르게 적용하면 안될까? → 근데 이 수정/등록 모드를 어떻게 구별해서 나눌건데? (같은 컴포넌트 사용하는 중)부모에서 각각 mode=“create” / mode=“edit” 모드를 다르게 줘서 조건문 처리 해보자 구현과정① 수정모드에서 시간 비교할 데이터 배열 만들기수정과 등록 두 부모컴포넌트 모두 calendarData 를 가지고있고 수.. 공감수 0 댓글수 0 2024. 11. 3.
캘린더 일정관리 - 일정 시간 중복 체크 유효성 ① 일정 시간 중복 체크 로직 구현하기기존 등록된 일정과 추가/수정할 시간이 겹치지 않도록 하는 로직을 구현하고자 하였다. 완성모습 구현과정 ① 기존 일정의 시간 데이터 가공하기 이전에 시작/종료시간 유효성 적용을 했을때 만든 시간 → 분 변환 함수를 활용하였다. props로 받은 "12:00:00" 형식의 시간 데이터를 사용하기 쉽게 초 부분을 자르고 분으로 변환하였다. // 시간을 분으로 변환 const convertTimeToMinutes = (time: string) => { const [hours, minutes] = time.split(":").map(Number); return hours * 60 + minutes; }; // 존재하는 일정의 시간범위 가공 con.. 공감수 0 댓글수 0 2024. 11. 1.
캘린더 일정관리 - 시작시간 / 종료시간 유효성 캘린더 일정 등록/수정 시 시간 유효성 검사 구현하기캘린더에 일정을 등록하거나 수정할 때 시작 시간이 종료시간보다 늦거나, 종료시간이 시작시간보다 빠른 것 과 같이 논리적으로 맞지 않는 시간 설정을 방지하기 위해 유효성 검사가 필요했다. 완성 모습 구현 과정1. 시간 데이터를 분 단위로 변환하는 함수 만들기시간과 분을 선택하면 "12:00" 형태로 상태에 저장되는 값들을 비교계산하기 쉽도록 분 단위로 변환하는 함수를 만들었다. // 시간을 분으로 변환 const convertTimeToMinutes = (time: string) => { const [hours, minutes] = time.split(":").map(Number); return hours * 60 + minutes; }.. 공감수 1 댓글수 0 2024. 10. 31.
모의면접 ② 진행한 질문Next.js는 어떤 장점이 있나요?말씀하신 SSR, CSR은 어느 경우에 사용하시나요?useEffect를 사용할 때 본인만의 원칙이 있으신가요? 있다면 이유도 함께 이야기 해주세요.useCallback useMemo에 대해서 설명해주세요.무분별하게 사용 시 어떤 단점이 있을까요?리액트의 훅에 대해 설명해주세요.가장 최근에 만든 프로젝트는 어떤 서비스인가요? 만들게 된 이유도 함께 설명해주세요.팀 프로젝트로 진행을 하신 것 같은데, 의견 충돌이 있진 않으셨나요?해당 프로젝트에서 어떤 기능을 구현하셨나요?TanStack Query와 shadcn을 사용하신 이유가 있을까요?진행했던 프로젝트 중 어려운 기술적 문제를 주도적으로 해결했던 경험을 이야기 해주세요.서버 액션과 라우트 핸들러에 대해 간단하.. 공감수 1 댓글수 1 2024. 10. 30.
Next.js 스크롤 방식의 Time Picker 구현하기(feat. Tailwind CSS) 배경캘린더의 일정등록 기능을 구현중에 시간을 선택하는 기능이 포함되어있는데 디자이너분이 만들어주신 와이어프레임에는 아래 사진과 같이 시간을 스크롤해서 선택하는 형태의 기능이었다.react-time-picker, Flatpickr, antd, mui/x-date-pickers 등 여러 라이브러리가 있었는데 제공하는 기본 디자인으로는 와이어프레임과 조금 다르게 시간을 선택하는 ui 였어서 비슷한걸 찾아보다가 keen-slider 를 찾게되었다. 해당 라이브러리가 기본 ui 적으로는 가장 원하는 느낌이었어서 설치를 해서 적용을 해보았지만, 내가 지정한 시간이 정확하게 출력되지않았고(아마 내가 잘못 사용하고 있었을것) 비슷한 느낌으로 하려면 스타일도 조금 변경을 해줘야하는데 어떤 값을 바꿔줘야하는지도 조금 어려.. 공감수 0 댓글수 0 2024. 10. 29.
월간 달력 출력하기 (FullCalendar / Shadcn) FullCalendarFullCalendar: 복잡한 일정 관리가 필요한 경우 (예: 회사 일정 관리, 예약 시스템)장점단점월/주/일 등 다양한 뷰 제공이벤트 표시 및 관리 기능이 풍부시간대별 일정 관리 가능드래그 앤 드롭으로 일정 이동 가능번들 사이즈가 큼초기 설정이 복잡할 수 있음스타일링 커스터마이징이 까다로움무료 버전과 프로 버전의 기능 차이 1. FullCalendar 관련 종속성 설치 명령어yarn add @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid @fullcalendar/coreFullCalendar의 핵심 기능을 제공하는 기본 패키지Calendar 클래스와 같은 핵심 기능을 포함하고 있어 캘린더를 생성하고 관리하는 데 필수적.. 공감수 1 댓글수 0 2024. 10. 28.
console.error() 와 throw error 의 차이 이전부터 함수를 작성할 때 에러처리를 위해 console.error() 와 throw error 중 한가지를 써왔었다.이번에 댓글의 답글 기능을 구현하는 중 에러가 발생했을 때 어떤 메세지가 조회되는지 확인하려고 추가하다가 아무생각없이 써왔던 두가지의 차이가 무엇인지 궁금해지면서 찾아보게되었다.// 댓글 추가 (+답글)export const useAddCommentMutation = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: async (data: { id: string; commentItem: string; parentId?: string; // 답글일 경우 부모 댓글 .. 공감수 1 댓글수 1 2024. 10. 27.
Tanstack Query - querykey queryKeyreact-query에서 데이터마다 고유하게 정하는 "이름표"쿼리 키를 통해 데이터의 일관성 있는 관리와 업데이트가 쉬워짐 중요 포인트1. 일관성 유지 - 관련된 데이터끼리 유사한 키를 사용ex) 게시물 관련 데이터가 모두 "post"로 시작하면, 특정 상황에서 관련 데이터를 한 번에 무효화(invalidateQueries) & 업데이트 가능 2. queryKey 구조 - queryKey는 단일 문자열 ("post")이나 배열 (["post", "public"]) 형태로 만들 수 있음 - 배열로 세분화하면 특정 조건이나 부분 데이터만 유효하게 유지하거나 무효화하는 데 유리 3. 고유한 키 사용- 쿼리 키는 자유롭게 이름을 붙일 수 있지만, 중복되지 않게 고유한 키를 설정하는 게 중요ex.. 공감수 0 댓글수 0 2024. 10. 25.
상세페이지 - 각 댓글별 수정 모드 🚨 문제현재 진행중인 최종프로젝트의 댓글 기능 구현 중 입력된 댓글의 수정 버튼을 눌렀을때, 개별 댓글이 아니라 댓글 전체가 수정모드가 된다. 기존코드const [commentItem, setCommentItem] = useState("");const [edited, setEdited] = useState(false);// 편집모드 const handleNicknameEdit = () => { setEdited(!edited); }; {commentList?.map((comment) => ( {edited ? ( ( { e.prev.. 공감수 0 댓글수 0 2024. 10. 24.
Tanstack Query - useMutation 오류 🚨 발생한 문제댓글 CRUD 중 useMutation으로 수정하는 로직 작성 중 useMutation은 기본적으로 하나의 인자만 받도록 되어있어서 두개의 인자를 넣어주게 될 때, 오류가 발생한다고 한다. 그래서 객체로 인자를 넣어줬으나 mutationFn 에서 형식에 할당할 수 없다는 에러 문구가 조회되었다. ✅ 해결방법useMutation의 제네릭 타입을 명시적으로 지정해주어야 했다. const { mutate: updateComment } = useMutation({ mutationFn: ({ commentId, content }) => updatePostComment(commentId, content), onSuccess: () => { queryClient.in.. 공감수 0 댓글수 0 2024. 10. 23.
[TIL] 모의면접 ① 질문들간단하게 자기소개 해주세요.저희 회사는 vue.js도 사용을 하는데, 만약 vue.js를 배워야한다면 뭐부터 시작을 하실 건가요?프로젝트에 참여한 누군가가 내 코드를 변경시킨다면 기분이 어떨 것 같으신가요?반대로 누군가의 코드를 변경시켜야 한다면 어떤 경우일까요?커리어 관점에서 10년 후 지향하는 목표와 이루고 싶은 성과에 대해 이야기해주세요.프론트엔드 개발자로서 중요한 부분이 무엇이라고 생각하시나요?그렇다면, 기술적인 부분은 별로 중요하지 않다고 생각하시는 걸까요?개발자로서의 성장이 무엇이라고 생각하시나요?프로젝트를 하다가 의사소통에 실패한 경험이 있다면 말씀해주세요. 추가질문들- 부트캠프에서 뭐 배웠어요? ✅ 피드백- 자기소개 외워서 온 느낌이 조금 강했다. 조금 딱딱한 느낌이 있어서, 대화.. 공감수 3 댓글수 1 2024. 10. 22.
최종 프로젝트 시작 어제 최종 전의 마지막 프로젝트 발표를 끝내고 이제 찐막 프로젝트 팀 편성이 되었다.한번도 같이 해본적 없는 팀원분들이지만 다들 활달하시고 느낌이 좋았다.앞으로 한달동안 진행할 프로젝트이기 때문에 주제 선정과 기획에 있어 이전에 하던 프로젝트 보다 훨씬 열띠게 의견을 공유하고 투표하고,, 반복하다가 스터디 그룹에 특화된 툴을 제공하는 서비스 앱으로 주제가 정해졌다. 주제에 맞춰 어떤 기능들이 들어가야할 지와 기한에 맞춰 구현을 끝낼 수 있는 필수기능, 시간이 된다면 추가적으로 도전해볼만한 기능들을 나누었다. 그리고 각자 맡아서 구현할 기능들을 큼직하게 분배하였는데 이 부분은 좀 더 상세하게 논의해봐야한다.이전에는 디자인 구상까지 직접 진행하였는데 이번 최종에서는 디자이너 두분이 같이 진행하게되었다.확실히.. 공감수 2 댓글수 0 2024. 10. 18.
git stash git stashModified이면서 Tracked 상태인 파일과 Staging Area에 있는 파일들을 보관해두는 장소아직 끝내지 않은 수정사항을 스택에 잠시 저장했다가 나중에 다시 적용할 수 있음(브랜치가 달라져도 가능) ❓ 사용하는 이유- 작업중 갑작스럽게 다른 작업을 진행해야 할 때- 아직 커밋하기엔 이른 경우- 다른 브랜치로 체크아웃할 때 변경사항을 유지하고 싶은 경우(나는 체크아웃 할 때 이 메세지를 가장 많이 보는 듯하다.) 💻 명령어 사용해보기파일을 하나 추가하고, 수정한 파일들을 git add 로 Staging Area 에 추가하였다. git stashgit stash 명령어를 입력하니 워킹디렉토리가 깨끗해졌다.이제 원하는 브랜치로 문제없이 이동할 수 있다. git stash li.. 공감수 1 댓글수 0 2024. 10. 17.
Vercel 배포 오류 Error: Command "yarn run build" exited with 1 🚨 프로젝트를 Vercel에 배포하는 과정에서 에러가 발생했다.에러 로그들을 읽어보며 보이는 자잘한 문제들을 하나씩 해결했는데 마지막 로그인 "Error: Command "yarn run build" exited with 1" 는 무슨 오류인지 이해하기 어려웠고,구글링을 해본 결과 종속성, 빌드 스크립트 오류 등 여러가지 이유가 있는 것 같았다. ✅ 해결방법tsc --noEmit 명령어를 입력하여 타입스크립트 타입을 체크해보았고, 매개변수가 사용되지 않는 빈 함수가 props로 내려지는 것을 발견할 수 있었다.해당 부분을 해결하고 나니 더이상 추가적인 빌드에러는 발생하지 않았고 정상적으로 배포가 완료되는 것을 확인할 수 있었다. npx tsc --noEmit 명령어 실행 테스트handleDelete .. 공감수 0 댓글수 0 2024. 10. 16.
github 잘못올라간 파일 커밋 히스토리 삭제하기 발생 배경팀 프로젝트에서 사용 중인 supabase key 값이 포함된 파일이 커밋, 푸시가 된 상태에서 pr, merge가 완료 된 불상사가 발생했다.merge가 된 파일을 각자 local 기능브랜치에 pull을 받으면서 각 브랜치에도 merge된 commit 기록이 생겼고,, 뒤늦게 발견했다. 🚨문제PR은 Revert되어 해결했으나 각자 개인브랜치에 로컬에서 머지한 커밋 기록이 생겼고 해당 커밋에서 문제의 파일을 확인할 수 있었다. ❓원인이번 프로젝트에서는 pr 규칙을 크게 설정하진 않고 화면공유를 해서 개인이 pr을 올리면 직접 merge 승인까지 했었다보니, 서로의 코드를 꼼꼼하게 살펴보지 않았던 것이 원인이었던 것 같다. ✅ 해결방법모든 커밋에서 특정 파일을 제거하고 커밋을 재작성하는 명.. 공감수 1 댓글수 0 2024. 10. 15.
supabase response data type supabase 테이블의 데이터를 가져오는 로직에서 구조분해할당한 data 의 타입을 지정해주었는데 Postgrest관련 오류가 발생했다. data를 꺼내지 않고 response 로 값을 받아서 콘솔에 출력해보고, 데이터를 가져올 테이블 명을 다르게 적어서 에러가 날 경우의 response 도 받아보았다. ❓ 원인구조분해할당을 해서 data 만 가져올 경우 에러에 대한 처리가 되어있지 않은데다가, 에러에 대한 타입이 선언한 Article(data 형태 타입) 타입에 없어서 오류를 보이고 있었다. ✅ 해결response로 값을 받아서 에러처리를 먼저 해준 뒤 사용할 데이터 값에 Article 타입을 지정해주었다. response의 타입 PostgrestSingleResponseany[]> response.. 공감수 0 댓글수 0 2024. 10. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.