RYUJI

Next.js에서 Image 컴포넌트를 사용할 때 발생하는 `fetchPriority` prop 오류 해결 방법

Warning: React does not recognize the `fetchPriority` prop on a DOM element.이 문제는 최근 버전의 react와 react-dom에서 발생하는 버그다. 관련된 문제는 Stack Overflow와 GitHub 이슈에서도 찾아볼 수 있다.  문제의 원인React의 18.3.1에서 `fetchPriority` prop이 DOM 요소에서 인식되지 않는 버그가 있다. 이로 인해 Next.js의 Image 컴포넌트가 올바르게 동작하지 않고 오류가 발생한다.  해결 방법react와 react-dom의 버전을 18.2.0으로 롤백하면 된다. 1. package.json 파일 수정{ "dependencies": { "react": "18.2.0", ..

GitHub Organization Repository를 GitHub Actions를 사용하여 Vercel에 무료 배포하기

1. GitHub에서 일반 Public Repository 생성 2. Vercel에 방금 만든 Repository 연동 3. Organization Repository 루트 경로로 build.sh 파일 생성, [team-repo-name] 부분에 Organization Repository 이름 입력#!/bin/shcd ../mkdir outputcp -R ./[team-repo-name]/* ./outputcp -R ./output ./[team-repo-name]/4. Organization Repository에 secret 변수 등록- Settings -> Security -> Secrets and variables -> Actions -> Repository secrets- GIT_EMAIL에는 G..

Next.js의 Image 컴포넌트와 관련된 경고 메시지 해결하기

Next.js 프로젝트에서 이미지를 사용하면서 발생한 첫 번째 경고 메시지// 이미지를 렌더링할 때 width나 height 중 하나만 변경된 경우 발생하는 경고 메시지Image with src "/imgs/index-1.png" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.경고가 발생한 코드import { TextImageProps } from "@/types/interfaces/indexInterface..

Yarn 으로 Vite 설치하기

Vite와 Create React App(CRA)은 모두 React 개발 환경을 구축하기 위한 도구다.Vite- ES 모듈을 사용한 빠른 개발 서버- Rollup 기반 빌드 시스템- 매우 빠른 초기 빌드 속도Create React App- Webpack 기반 빌드 시스템- 초기 빌드와 큰 프로젝트의 경우 상대적으로 느림   Vite 설치1. 프로젝트 디렉터리 생성 및 이동mkdir my-vite-appcd my-vite-app 2. Yarn을 사용하여 Vite 설치yarn create vite아래 코드처럼 프로젝트 이름을 입력하고 사용할 템플릿(Vue, React 등)을 선택할 수 있다.yarn create vite my-react-app --template react 3. 의존성 설치yarn 4. 개발..

만든 프로젝트를 git에 연동하기

1. 만들어 놓은 프로젝트 폴더 경로 안에서 git 초기화git init 2. git repo 만들기- README 파일을 만들면 커밋 후에 파일 기록이 달라서 오류가 발생시키므로 체크하지 않는다. 3. git repo와 연결과 확인// 연결git remote add origin git@github.com:[아이디]/[프로젝트 이름].gitgit remote add origin git@github.com:XXXXX/example-project.git// 확인git remote -v 4. 커밋하기git add .git commit -m 'chore: 초기 프로젝트 설정'git push origin main

최소금액으로 보험 가입하기

보험을 가입할 때 참고하려고 블로그에 메모해 두려고 한다. ① 기본적인 의료비를 보장하는 실손의료보험 ② 조기사망에 대비한 정기보험 ③ 아이를 가지면 어린이(태아)보험 ④ 노후를 위한 연금저축보험, 연금보험(여유자금이 있다면..) ⑤ 건강악화를 대비한 3대질병보험 등 건강보험 https://www.banksalad.com/contents/%EC%97%B0%EB%A0%B9%EB%8C%80%EB%B3%84-%EA%B0%80%EC%9E%85%ED%95%B4%EC%95%BC-%ED%95%A0-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84-%ED%95%84%EC%88%98-%EB%B3%B4%ED%97%98-094f 연령대별 가입해야 할 우선순위 필수 보험 | 뱅크샐러드 www.banksalad..