본문 바로가기

TIL

 (100)
자체 UT 후 계획 및 버그수정 어제 최종 프로젝트의 중간발표를 마친 뒤 중간 회고를 진행했다. 🥲 아쉬웠던 점커스텀 훅, 공용 컴포넌트 사용 미숙체계적인 일정 관리가 조금 안됐던 것 같다비지니스 로직 분리가 잘 안되어서 아쉽다개발 기능에 집중 하다 보니 , 성능적인 부분이나, 구조적인 문제 개선을 하지 못했슴 + 로딩창을 거의 사용하지 못함 + 이벤트나 ui동적 요소 부족fetch 로직 겹치는 부분 정리가 잘 되지 않음 / Query, fetch 일관성 부족필요하지 않은 client 컴포넌트 / 렌더링 방식을 고려하지 않은 컴포넌트 작성 😍 좋았던 점소통이 잘 되고 피드백이 좋았음팀원들의 태도가 매우 우수함 / 감정상해죄 0오류나 어려운 부분이 있을때 서로 질문하면서 해결한 점작업하고 있는 팀원의 흐름이 깨지지 않도록 각 팀원과의..
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..
[Refactoring] 바텀시트 재사용 컴포넌트로 분리하기 캘린더 일정 등록 시 기존에 모달로 표시되던 시간 선택 모달을 바텀시트로 변경하게되었다. 프로젝트 내 다른 페이지들에서도 스크롤 선택 형태의 기능이 바텀시트로 디자인 되어 있어, 전반적인 사용자 경험의 통일성을 높였고,기존 모달 방식에서는 모달창이선택한 시간들을 가렸었는데 바텀시트 방식으로 변경해 사용자가 이전 선택 내용을 확인하면서 새로운 시간을 선택할 수 있게 되었다. [ 이전 디자인 ][ 변경 디자인 ]  구현 과정 ① 기존 코드모달형태로 작업했던 코드인데, 시간 선택 기능을 하는 컴포넌트인 ScrollPicker 를 제외하고 별도 컴포넌트로 분리하면 좋을 것 같다고 생각했다. return ( e.stopPropagation()} > ..
댓글&답글 삭제 유효성 적용하기 댓글기능에 답글 기능을 추가하고 수정, 삭제 테스트를 하는데 답글의 경우 삭제가 잘 되지만 부모인 댓글의 경우 삭제가 되지 않았다.또한 답글이 있는 부모댓글을 삭제했을때 해당 댓글과 답글까지 싹다 삭제하는지? or 댓글만 "삭제된 댓글입니다." 로 내용을 바꾸어야 할지? 혼자 판단하면 안될 것 같은 부분도 있어서 팀원과 논의하였고, 전체 삭제하기보다 부모댓글만 "삭제된 댓글입니다." 로 표시하도록 하기로 결정했다. 처음엔 mutation 함수에서 무작정 코드를 써보다가 코드가 너무나 길어져서 나조차도 자꾸 헷갈렸고, 게다가 의도한대로 동작하지도 않아서 결국 작성했던 코드들을 다 지운 뒤 댓글/답글 삭제 관련해서 일어날 수 있는 경우들을 차근차근 적어봤다. 부모댓글부모댓글 삭제 시 답글이 없는경우 → 바로..
캘린더 일정관리 - 일정 시간 중복 체크 유효성 ② 기존 등록된 일정과 추가/수정할 일정의 시간이 겹치지 않도록 로직을 짰는데, 수정모드일 경우 현재 수정중인 데이터는 비교할 데이터에서 제외해야 한다는걸 깜빡했다. 생각정리수정모드와 등록모드에서 비교할 배열을 각각 따로만들기 (수정모드만 만들면됨)Edit의 부모쪽에서 데이터 가공해서 보내주기(calendarData fiter로 !== 해서 내려줘서)수정 등록 모드별로 다르게 적용하면 안될까? → 근데 이 수정/등록 모드를 어떻게 구별해서 나눌건데? (같은 컴포넌트 사용하는 중)부모에서 각각 mode=“create” / mode=“edit” 모드를 다르게 줘서 조건문 처리 해보자 구현과정① 수정모드에서 시간 비교할 데이터 배열 만들기수정과 등록 두 부모컴포넌트 모두 calendarData 를 가지고있고 수..
캘린더 일정관리 - 일정 시간 중복 체크 유효성 ① 일정 시간 중복 체크 로직 구현하기기존 등록된 일정과 추가/수정할 시간이 겹치지 않도록 하는 로직을 구현하고자 하였다. 완성모습 구현과정 ① 기존 일정의 시간 데이터 가공하기    이전에 시작/종료시간 유효성 적용을 했을때 만든 시간 → 분 변환 함수를 활용하였다.    props로 받은  "12:00:00" 형식의 시간 데이터를 사용하기 쉽게 초 부분을 자르고 분으로 변환하였다. // 시간을 분으로 변환 const convertTimeToMinutes = (time: string) => { const [hours, minutes] = time.split(":").map(Number); return hours * 60 + minutes; }; // 존재하는 일정의 시간범위 가공 con..
캘린더 일정관리 - 시작시간 / 종료시간 유효성 캘린더 일정 등록/수정 시 시간 유효성 검사 구현하기캘린더에 일정을 등록하거나 수정할 때 시작 시간이 종료시간보다 늦거나, 종료시간이 시작시간보다 빠른 것 과 같이 논리적으로 맞지 않는 시간 설정을 방지하기 위해 유효성 검사가 필요했다.  완성 모습 구현 과정1. 시간 데이터를 분 단위로 변환하는 함수 만들기시간과 분을 선택하면 "12:00" 형태로 상태에 저장되는 값들을 비교계산하기 쉽도록 분 단위로 변환하는 함수를 만들었다. // 시간을 분으로 변환 const convertTimeToMinutes = (time: string) => { const [hours, minutes] = time.split(":").map(Number); return hours * 60 + minutes; }..
모의면접 ② 진행한 질문Next.js는 어떤 장점이 있나요?말씀하신 SSR, CSR은 어느 경우에 사용하시나요?useEffect를 사용할 때 본인만의 원칙이 있으신가요? 있다면 이유도 함께 이야기 해주세요.useCallback useMemo에 대해서 설명해주세요.무분별하게 사용 시 어떤 단점이 있을까요?리액트의 훅에 대해 설명해주세요.가장 최근에 만든 프로젝트는 어떤 서비스인가요? 만들게 된 이유도 함께 설명해주세요.팀 프로젝트로 진행을 하신 것 같은데, 의견 충돌이 있진 않으셨나요?해당 프로젝트에서 어떤 기능을 구현하셨나요?TanStack Query와 shadcn을 사용하신 이유가 있을까요?진행했던 프로젝트 중 어려운 기술적 문제를 주도적으로 해결했던 경험을 이야기 해주세요.서버 액션과 라우트 핸들러에 대해 간단하..

티스토리툴바