본문 바로가기

분류 전체보기

 (117)
월간 달력 출력하기 (FullCalendar / Shadcn) FullCalendarFullCalendar: 복잡한 일정 관리가 필요한 경우 (예: 회사 일정 관리, 예약 시스템)장점단점월/주/일 등 다양한 뷰 제공이벤트 표시 및 관리 기능이 풍부시간대별 일정 관리 가능드래그 앤 드롭으로 일정 이동 가능번들 사이즈가 큼초기 설정이 복잡할 수 있음스타일링 커스터마이징이 까다로움무료 버전과 프로 버전의 기능 차이 1. FullCalendar 관련 종속성 설치 명령어yarn add @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid @fullcalendar/coreFullCalendar의 핵심 기능을 제공하는 기본 패키지Calendar 클래스와 같은 핵심 기능을 포함하고 있어 캘린더를 생성하고 관리하는 데 필수적..
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; // 답글일 경우 부모 댓글 ..
Tanstack Query - querykey queryKeyreact-query에서 데이터마다 고유하게 정하는 "이름표"쿼리 키를 통해 데이터의 일관성 있는 관리와 업데이트가 쉬워짐  중요 포인트1. 일관성 유지 - 관련된 데이터끼리 유사한 키를 사용ex)  게시물 관련 데이터가 모두 "post"로 시작하면, 특정 상황에서 관련 데이터를 한 번에 무효화(invalidateQueries) & 업데이트 가능 2. queryKey 구조 - queryKey는 단일 문자열 ("post")이나 배열 (["post", "public"]) 형태로 만들 수 있음 - 배열로 세분화하면 특정 조건이나 부분 데이터만 유효하게 유지하거나 무효화하는 데 유리 3. 고유한 키 사용- 쿼리 키는 자유롭게 이름을 붙일 수 있지만, 중복되지 않게 고유한 키를 설정하는 게 중요ex..
상세페이지 - 각 댓글별 수정 모드 🚨 문제현재 진행중인 최종프로젝트의 댓글 기능 구현 중 입력된 댓글의 수정 버튼을 눌렀을때, 개별 댓글이 아니라 댓글 전체가 수정모드가 된다. 기존코드const [commentItem, setCommentItem] = useState("");const [edited, setEdited] = useState(false);// 편집모드 const handleNicknameEdit = () => { setEdited(!edited); }; {commentList?.map((comment) => ( {edited ? ( ( { e.prev..
Tanstack Query - useMutation 오류 🚨 발생한 문제댓글 CRUD 중 useMutation으로 수정하는 로직 작성 중 useMutation은 기본적으로 하나의 인자만 받도록 되어있어서 두개의 인자를 넣어주게 될 때, 오류가 발생한다고 한다. 그래서 객체로 인자를 넣어줬으나 mutationFn 에서 형식에 할당할 수 없다는 에러 문구가 조회되었다. ✅  해결방법useMutation의 제네릭 타입을 명시적으로 지정해주어야 했다. const { mutate: updateComment } = useMutation({ mutationFn: ({ commentId, content }) => updatePostComment(commentId, content), onSuccess: () => { queryClient.in..
[TIL] 모의면접 ① 질문들간단하게 자기소개 해주세요.저희 회사는 vue.js도 사용을 하는데, 만약 vue.js를 배워야한다면 뭐부터 시작을 하실 건가요?프로젝트에 참여한 누군가가 내 코드를 변경시킨다면 기분이 어떨 것 같으신가요?반대로 누군가의 코드를 변경시켜야 한다면 어떤 경우일까요?커리어 관점에서 10년 후 지향하는 목표와 이루고 싶은 성과에 대해 이야기해주세요.프론트엔드 개발자로서 중요한 부분이 무엇이라고 생각하시나요?그렇다면, 기술적인 부분은 별로 중요하지 않다고 생각하시는 걸까요?개발자로서의 성장이 무엇이라고 생각하시나요?프로젝트를 하다가 의사소통에 실패한 경험이 있다면 말씀해주세요. 추가질문들- 부트캠프에서 뭐 배웠어요?  ✅ 피드백- 자기소개  외워서 온 느낌이 조금 강했다. 조금 딱딱한 느낌이 있어서, 대화..
[TIL] 미들웨어(Middleware) 미들웨어(Middleware)- 요청이 처리되기 전에 실행되는 서버 측 함수- 요청을 가로채어 인증, 리다이렉션, 또는 사용자에 맞는 페이지를 제공하는 등의 작업을 수행할 수 있음 미들웨어의 역할- 사용자 인증 및 권한 검증 : 특정 페이지에 접근하기 전에 사용자가 인증되었는지 확인- 페이지 리다이렉션 : 권한이 없는 사용자를 로그인 페이지로 리다이렉션하거나, 다른 적절한 페이지로 안내할 수 있음- 요청 정보 변경 : 요청 객체의 내용을 변경하거나 추가 작업을 수행할 수 있음
최종 프로젝트 시작 어제 최종 전의 마지막 프로젝트 발표를 끝내고 이제 찐막 프로젝트 팀 편성이 되었다.한번도 같이 해본적 없는 팀원분들이지만 다들 활달하시고 느낌이 좋았다.앞으로 한달동안 진행할 프로젝트이기 때문에 주제 선정과 기획에 있어 이전에 하던 프로젝트 보다 훨씬 열띠게 의견을 공유하고 투표하고,, 반복하다가 스터디 그룹에 특화된 툴을 제공하는 서비스 앱으로 주제가 정해졌다. 주제에 맞춰 어떤 기능들이 들어가야할 지와 기한에 맞춰 구현을 끝낼 수 있는 필수기능, 시간이 된다면 추가적으로 도전해볼만한 기능들을 나누었다. 그리고 각자 맡아서 구현할 기능들을 큼직하게 분배하였는데 이 부분은 좀 더 상세하게 논의해봐야한다.이전에는 디자인 구상까지 직접 진행하였는데 이번 최종에서는 디자이너 두분이 같이 진행하게되었다.확실히..

티스토리툴바