TIL

최근 채용 트렌드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개의 단계에서 받은 데이터가 잘 들어왔는 지 확인 후 수퍼베이스에 전송 🚨문제발생위 기획 단계를..

next.js / typeScript 사용 1. 체크된 상품의 productId 저장 const [checkItem, setCheckItem] = useState([]); 2. 체크박스의 체크상태를 관리 (초기에 모든 체크박스 상태는 ture) const [isChecked, setIsChecked] = useState(true); 3. 체크박스의 상태가 변경될 때 호출되는 함수 const handleCheckedBoxChange = (e: React.ChangeEvent) => { setIsChecked(e.target.checked); handleSingleClick({ checked: e.target.checked, productId: productId! }); }; e.target.value를 통..

cmder 이용 1. 초기 파일 만들기 yarn create react-app 파일이름 --template typescript 2. react router dom 설치하기 yarn add react-router-dom 타입스크립트를 이용함으로 types-react-router-dom 설치 필요 yarn add --dev @types/react-router-dom

1. cmder 이용해 폴더 만들기 yarn create next-app 파일이름 --typescript 마지막에 @/* 를 활성화 시킬때는 tap키를 눌러주면 활성화 가능

function object({a,b}:{a:number; b:number}): string { return `${a+b}` } 객체로 넘겨줄때 {객체 명시} : {객체 타입 명시} : return 타입 명시 1. 비동기함수에서 사용해 보기 async funciton getPerson() { const res = await fetch(`http://localhost.5000/people`); if(!res.ok) { throw new Error(); } return res.json(); } getPerson().then((res) => console.log(res)) 아래의 객체를 받는다고 했을때 [ {id:1, age:20, height:180}, {id:2, age:28, height:170}, {i..