이롭게 현명하게

목차 vite 다운그레이드 시 생긴 오류 [Vite 다운그레이드 시 생긴 오류]Create-React-App 지원을 종료한다는 소식을 듣고 CRA를 사용하던 입장에서 어떤 방식으로 React 개발 환경을 구성해야 할지 막막했다.그러던 중 여러 문서를 찾아보며 vite라는 빌드 도구를 알게 되어 간단하게 사용해 봤었다.그 당시에는 vite 6.3.5 버전으로 환경 구성을 하고 실행까지 잘 되는 것까지 확인하였다. 프로젝트 진행을 하기 위해 vite를 사용해 react 환경을 구축하는 과정에서 오류가 발생했다.최신 버전인 vite 7.0.0에서 node의 버전이 맞지 않아 설치가 불가능했다.node를 업그레이드하기보다는 안정성을 위해 vite를 조금 낮은 버전이 6.5.0로 설치해 보자는 결론을 내렸다.이..

목차vite 환결설정 오류vite 환경설정 오류 원인vite 환경설정 오류 해결다운그레이드 시 생긴 오류 [vite 환경설정 오류]vite를 사용해 react 개발 환경을 세팅하고 있었다.npm create vite@latest 설정이 잘 되었는지 확인하기 위해 서버를 실행했다.npm run dev 다음과 같은 오류가 발생했다.error when starting dev server:TypeError: crypto.hash is not a functionat getHash (file:///C:(생략)/workspace/vite-project/node_modules/vite/dist/node/chunks/dep-Bsx9IwL8.js:2834:21) 글을 쓰면서 다시 보니 이미 npm install에서 경고..

목차 create-react-app 지원 종료vite를 사용하는 이유vite 시작하기 https://devyihyun.tistory.com/168 [React] 리액트 시작하기 / 리액트 설치 / 개발환경목차 작업환경 준비하기Node.js 설치하기yarn 설치하기vscode 설치하기git for windows 설치하기리액트 환경설정 리액트 환경을 설치하는 CRA가 2025년 2월 14일에 종료되었습니다.npx create-react-app 대신 vitedevyihyun.tistory.com [Create-React-App 지원 종료]npx creat-react-app은 리액트를 시작하게 해 준 간편한 도구였다.복잡한 설정 없이도 바로 개발을 시작할 수 있게 해 줬고 초보자에게는 진입 장벽을 낮춰주는 역할..

목차오류 내용원인해결방법 [오류 내용]캠핑장 안내 프로젝트를 진행하면서 api에 있는 캠핑장의 이미지를 사용자에게 제공하기로 했다.API를 연결 후 이미지를 화면에 출력하던 중 Warning이 발생했다. WARNING : img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text[번역]경고 : img 요소는 의미 있는 텍스트가 포함된 대체 소품 또는 장식 이미지 jsx-a11y/alt-텍스트를 위한 빈 문자열을 가져야 합니다 [원인] 웹 표준에 따라 img 태그에는 alt를 작성해야 한다. [해결 방법] 잘못된 정보는 댓글에 남겨주..

목차 EmailJS란?EmailJS 사용법참고사항 [EmailJS란?]개인 웹 포트폴리오나 회사 사이트에서 사용자가 문의사항을 남기는 이메일 폼 양식을 본 적이 있다. 이 폼을 보고 내 웹 포트폴리오에 적용하면 좋을 거 같다는 생각이 들었다.Contact 페이지에 적용시키기 위해서는 EmailJS를 사용하면 된다.EmailJS는 javascriptAPI를 사용해 웹에서 메일을 바로 전송할 수 있도록 지원한다.EmailJS를 사용하면 내 이메일 주소는 공개하지 않으면서 내 포트폴리오에 접속한 사람으로부터 메일을 받을 수 있는 기능이다.*  githubPage는 정적 페이지만 지원한다. 데이터베이스 등을 활용하여 백엔드에서 메일을 보낼 수 없다.그렇기 때문에 githubPage에서 사용하기 충분하다. 월별 ..

목차 useReducer useReducer와 useState import [useReducer] 리액트에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 사용하는 Hook은 state이다. 공식 문서에서 언급된 것처럼 useReducer는 상태(state)를 관리하고 업데이트하는 useState를 대체할 수 있는 Hook이다. useState와 다르게 useReducer는 한 컴포넌트 내에서 상태(state)를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리되는 것을 가능하게 함으로써 코드의 최적화를 이루게 해 준다. 좀 더 복잡한 상태관리가 필요한 경우 useReducer를 사용할 수 있다. useReducer는 이전 상태와 action을 합쳐 새로운 state를 만드는 조작을 말한다. 콜백 대신..