TIL

새로운 프로젝트를 만들기 위해 next.js를 이용해 초기 셋팅중에 Hydration Error를 마주했다.Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error layout(navbar, footer) 를 모든 페이지에서 보여주되, 로그인페이지에서는 로그인 페이지만 보여줄 수 있도록 하기위해그룹라우터를 이용했고, 그룹라우터 안에서 page와 layout을 만들어주었다. ❓Hydration error가 발생한 이유최상단 layout에 html과 body가 있기..

cmder 이용해 폴더 만들기yarn create next-app 파일이름 --typescript 마지막에 @/* 를 활성화 시킬때는 tap키를 눌러주면 활성화 가능!!tankstact-query- yarn add @tanstack/react-queryreact-toastify- yarn add react-toastifyreact-icons- yarn add react-icons// jwt 토큰 셋팅 도와주는 라이브러리js-cookie- yarn add --dev @types/js-cookie // jwt 디코딩 도와주는 라이브러리jsonwebtoken- 설치 명령어: - yarn add --dev @types/jsonwebtoken - 설치 명령어: - yarn add jsonwebtoken사용해보고 ..

'use client';import { useReserveStore } from '@/store/reserveClassStore';import { PaymentWidgetInstance, loadPaymentWidget } from '@tosspayments/payment-widget-sdk';import { useRouter, useSearchParams } from 'next/navigation';import { useEffect, useRef } from 'react';import { useAsync } from 'react-use';const clientKey = 'test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm' as string;export default function ..

🚨 문제 발생Vercel 배포를 위해 프로젝트를 빌드하던중 빌드 에러가 발생몇몇은 에러 메세지를 통해 바로 잡았으나, 메세지를 통해 문제의 원인이 바로 나타나지않는 에러들이 존재. 🛠️ 문제 해결 과정소거법을 이용해 폴더, 파일, 코드들을 하나씩 비활성화 하면서 문제 원인 분석 🔥 찾아낸 문제점1. Next.js는 빌드 타임에 모든 페이지를 사전에 렌더링(SSR) 하기 때문에 서버에서 컴포넌트를 HTML 형태로 렌더링 진행.✔️ 이 시점에서 클라이언트 사이드 전용 객체를 참조하면 오류가 발생 ➡️ 서버에는 window나 document 같은 객체가 존재하지 않음2.Session storage 나 useSearchParams 같은 URL 매개변수 훅은 빌드 시점에서 빌드 에러가 발생✔️ next.js..

최근 채용 트렌드1. 지원서 작성의 간소화2. 나만의 매력 보여주기 잘 읽히는 이력서와 안 읽히는 이력서이력서란 "나를 표현하는 하나의 프로덕트"💡가독성💡읽는 사람 입장에서 생각하기 매력적인 이력서의 조건- What? (무엇을 했는지)- How? (어떻게 했는지)- Growth (꾸준히 성장가능할 ) 이력서 작성 꿀팁- 이력서는 자율제출이더라도 PDF로 제출하기! (모든 컴퓨터환경에서 다른 파일들을 다 열람하기 어려울 수 있다.)- 1-3장으로 간결하게! (디테일한 내용은 포토폴리오 주소링크를 첨부하면 좋다)- 직무 관련 경험(프로젝트, 스터디 )- 지원화는 회사의 흥미와 로열티 (기술 스택 및 채용 요건, 채용사이트, 기업블로그 등, 기술에 대한 탐구)- 포트폴리오(개인DB_notion, git, ..

error.js 파일을 만들어 에러 발생 시 나올 페이지와 에러처리 로직 작성해보기로!!(use client) error.js 는 react Error Boundary 를 생성해 중첩된 경로에서 런타입 오류를 처리할 수 있도록 도와준다고 한다. ❓원리중첩된 하위 세그먼트와 해당 하위 항목을 자동으로 래핑해 React Error Boundary를 생성하고 오류가 발생하면 해당 세그먼트로 격리되서 나머지 앱은 정상적으로 동작  error 페이지 경로app/global-error.tsx 또는 그룹라우팅 안에 (page)/error.tsx'use client'; // Error components must be Client Componentsimport { useEffect } from 'react';impor..

'use client';import Image from 'next/image';import banner1 from '@/assets/images/bannerImage1.png';import banner2 from '@/assets/images/bannerCookie.png';import clrmTextImage from '@/assets/images/loginTextImage.svg';import bannerMeeting from '@/assets/images/bannerMeeting.png';import bannerText from '@/assets/images/bannerText.svg';import Link from 'next/link';import { useCallback..

배포 시 코드 useEffect(() => { const scrollToBottom = () => { endOfMessagesRef.current?.scrollIntoView({ behavior: 'smooth' }); }; scrollToBottom(); }, [readChatRoomMessages]); 채팅창에 새로운 메시지가 들어오면 스크롤이 가장 하단으로 내려갈 수 있도록 구현해두었다. yarn dev에서 문제없이 새로운 메시지가 들어오는 경우 하단으로 스크롤이 잘 이동되었다. 그리고 배포를 했는데 왠걸 새로운 메시지가 들어와도 스크롤이 자동으로 하단으로 내려가지 않았다. 또 아래와 같은 에러메시지가 나타난다 호출하지않았는데 왜 자꾸 호출이 되는건지 알다가도 모르겠다.. 어려워 너란 녀슥.. 진짜..

supabase에 이메일 값 전달 import { getLoginUserType } from '@/types/authUser/authUserTypes'; import { supabase } from '../supabase/supabase'; export const getUserIdByEmail = async (email: string): Promise => { const { data, error } = await supabase // //테이블 이름 .from('users') // 컬럼 .select('user_id') //필터 .eq('email', email as string) .single(); if (error || !data) throw error; return data; }; 쿼리를 이용해 e..

처음 로그인 페이지 기획 시 로그인 단계는 총 3단계로 구현하기로 기획하였습니다.(next.js 사용) DB > supabaseauth > nextAuth모달 > paraller, InterCepting Routes 1단계 모달 : 선생님 또는 수강생선택2단계 모달 : 선생님 선택 시 2단계 모달로 이동되며 직업, 분야를 추가로 받기3단계 모달 : 실제 회원가입 창 (이메일, 소셜로그인) 구현 방법1. zustand를 이용해 각각의 단계(1단계 2단계)에서 받은 내용을 스토어를 이용해 저장2. 3단계에서 소셜 회원가입 버튼을 누르면 각각의 소셜에서 주는 유저의 정보를 담아 스토어에 저장3. 유효성을 이용해 3개의 단계에서 받은 데이터가 잘 들어왔는 지 확인 후 수퍼베이스에 전송 🚨문제발생위 기획 단계를..