가비아 도메인 vercel 연결

가비아 도메인 vercel 연결 가비아에서 도메인 주소를 구매 vercel 나의 프로젝트의 domain 으로 들어가서 내가 구매한 도메인 주소 추가 가비아에서 내가 구매한 도메인 관리 > DNS 정보 > DNS 관리 > 설정 > 레코드 수정 에 추가하면 된다. 레코드에는 vecel에서 준 레코드를 똑같이 입력하면 된다. 이후 저장하면 vecel에서 정보가 등록되면 완료.

2025-10-12

FC Info

FC Info 개인 개발 리포트(2인) - 임정빈 배포 주소: https://www.fcinfo.kr 깃허브 주소: https://github.com/jbinyim/fconline-record-next 1. 프로젝트 개요 FC 온라인 전적검색 사이트는 EA SPORTS FC 온라인 이용자들의 경기 데이터를 쉽고 빠르게 조회할 수 있도록 만든 웹 서비스입니다. 사용자는 닉네임만 입력하면 공식경기와 클래식 1대…

2025-09-03

Moving - 무빙

무빙 개인 개발 리포트(7인) - 임정빈 사이트 주소: https://moving-web.site/ko 깃허브 주소: https://github.com/jbinyim/6th-Moving-4Team-FE, https://github.com/jbinyim/6th-Moving-4Team-BE 1. 프로젝트 개요 Moving…

2025-08-18

공부의 숲

임정빈 개발 리포트(7인) 배포주소: https://6-studyforest-phytoncide-fs.netlify.app 깃허브 주소: https://github.com/Jam1eL1/6-studyforest-phytoncide-FS 개발 리포트 작성 항목…

2025-04-11

Next 배우기 v.02

Next 배우기 v.02 1. fetch server component에서 next가 fetch한 것을 기억해서 프론트에서 로딩이 되지 않는다. 데이터가 도착해야 사용자가 화면을 출력 받을 수 있다. Server Component fetch data 백엔드 리소스에 접근 시 중요한 정보 서버에 보관 시(API key, access token ..) 클라이언트 측 JS 코드 줄여야 할 때 Client Component…

2024-09-26

Next 배우기 v.01

Next 배우기 v.01 1. next / react / react-dom 설치 2. 페이지 라우팅 위와 같이 next에서는 app으로 된 폴더 안에 page를 생성해야 하고 app 폴더에 있는 page.tsx는 기본 시작 페이지다. 파일명이 url주소이고 실질먹인 페이지는 page.tsx이다. 폴더명에 (소괄호)을 사용하면 url주소와 상관없이 폴더로 파일을 정리할 수 있다. Dynamic Routes…

2024-09-24

컴패션 클론코딩

컴패션 클론코딩(개인) 배포주소: https://compassion-clone.web.app/ 깃허브 주소: https://github.com/jbinyim/compassion-clone 📅 작업기간 2024-07-11 ~ 2024-08-12 📍 주요기술 react typescript react-query 🔦 상세기술 기존 컴패션 사이트를 클론 코딩한 사이트입니다. react-router-dom…

2024-08-14

react 페이지 이동시 스크롤 맨 위로 이동

react 페이지 이동시 스크롤 맨 위로 이동 스크롤 페이지를 하나 만들어 useEffect와 useLocation을 이용해 맨위로 이동하도록 만든다. 페이지 라우터 파일에서 추가해주면 된다.

2024-07-22

style-components 기본 설정

style-components 기본 설정 먼저 style-components의 타입정의 설치하고 가야한다. 전역 스타일 설정 styled-components에서 전역적으로 사용할 변수를 지정하는 방법. (theme.ts) styled-components의 자동완성을 위해서 아래와 같이 타입 정의를 수정해야 한다. (styled.d.ts) 이미지를 불러올때는 아래와 같이 변수를 지정해야한다. (imgages.d.ts…

2024-07-12

react scroll 이벤트 (header)

react scroll 이벤트 (header) useState을 이용하여 스크롤 위치를 관리한다. onScroll 함수는 스크롤 이벤트가 발생할때 마다 호출하게 된다. 2-1. window.scrollY를 이용하여 현재 스크롤 위치를 가져오고, sePosition을 통해 업데이트를 한다. useEffect를 통해 마운트가 실행될때마다 window.addEventListener || removeEventListener…

2024-06-28

tanstack-query 기능

tanstack-query 기능 refetchOnWindowFocus: false : 기본적으로 react-query는 사용자가 브라우저 창을 벗어났다가 다시 돌아오면 자동으로 데이터를 다시 가져온다. 이를 기능을 refetchOnWindowFocus라고 한다._ (사용자가 브라우저 창을 벗어났다 다시 돌아올때 데이터를 다시 가져오지 않음)_

2024-06-28

mbti

mbti (개인) 배포주소: https://jb-mbti.firebaseapp.com 깃허브 주소: https://github.com/jbinyim/EZENCLASS/tree/master/240425-mbti/01-mbti 📅 작업기간 2024-04-25 📍 주요기술 react 🔦 상세기술 자신의 mbti를 확인해 볼 수 있는 사이트입니다. useState를 사용하여 현재 질문 번호와 총 점수를 관리합니다. MBTI…

2024-04-25