Javascript Tips (33) 썸네일형 리스트형 screen, page, offset, client차이를 잘 보여주는 그림 mouseEnter&mouseLeave와 mouseOver&mouseOut의 차이 [mouseEnter&mouseLeave] import { useState } from "react";import './EventCompare.css'const EventCompare = () => { const [result, setResult] = useState(''); const handleIn = e => setResult(r => `${r}Enter: ${e.target.id}`); const handleOut = e => setResult(r => `${r}Leave: ${e.target.id}`); return ( 외부 (outer) 내부(inner) )}export default EventCompare; react 소스를 보면 outer.. React - 이미지경로를 src에 바로 넣으면 안되는 이유 local에서 돌리던 static 파일들은 이미지를 잘 불러왔다 그런데 빌드만 하면이미지를 불러오지 못하는데 그 이유는 아래 사진을 보면 알 수 있다. 빌드 후에는파일명들이 해시값으로 변한다.따라서 Img에 선언한 파일명은 build time 이후에도 상대경로로 해당 파일명을 찾으려고 한다. build를 하게 되면 dist 디렉토리 하위에 빌드 파일들이 모인다. 아래 태그를 보면 dist 디렉토리에서 image.png를 찾으려고 한다. 빌드 후에는file-loader에 의해 파일명이 해시값으로 바뀌어서파일명이 같지 않다. 추가로 위의 img태그는public 디렉토리 아래에 있는 이미지를 바라보고 있다. 빌드 시점 이후에해당 이미지가 사라지거나파일명이 바뀐다면 찾을 수 없게 될 수 있다. 따라서 .. react-router-dom 라이브러리 갑자기 에러나는 현상 기존에 프로젝트에서react-router-dom:^6.23.1 버전만 사용하고 있었고 react-router-dom 내부에서react-router를 의존하고 있어서 인지는 몰라도 react-router 패키지를 install하지 않았음에도 사용할 수 있었다. webpack으로 소스 수정 건이 있어서수정 후에 서버를 키니 갑자기 이런 에러가 떴다. 아무리 봐도 react-router-dom에 대한 사용과라이브러리에 대한 오류는 없는 것 같아서 골치 아팠다. git log를 확인해 계속 과거로 커밋 하나씩 되돌아가며 체크를 했는데 react-router를 install한 시점부터 안되었다. 해당 라이브러리 홈페이지에 갔더니react-router 버전 7부터는react-router-dom이 포함되었.. react - spa nginx 배포 후 새로고침시 흰화면 index.html에 다음과 같이 설정하면 된다. head 태그 사이에 넣어주면 됨 react - og tag 생성 후 체크 1. 메타태그 생성 index.html메타태그에 open graph의 약자인 og 태그를 생성합니다. [index.html] 2. 각 메타태그 내용og:title -> 제목og:description -> og태그 설명란og:image -> 대표이미지 og:url -> url vue devtool inspector 안 켜질 때 npm install 에러 (ERESOLVE could not resolve) 오래된 프로젝트를 받아서 서버를 켜보기 위해패키지를 받으려고 "npm install" 을 했는데 dependency 에러가 발생하는 경우yarn install을 이용하여 패키지를 받으면 해결될 수 있다. yarn의 경우에는dependency가 맞지 않으면맞춰서 가져와준다. 또 이미 설치된 dependency는 받지 않는다. 여러 경우에서 패키지관리자를 'npm' 보다는 'yarn' 사용을 지향한다. 이전 1 2 3 4 5 다음
