오늘도 맑음

Vite를 사용하여 로컬 개발을 진행할 때, 모바일에서도 UI를 확인하고 싶다면 vite --host 옵션을 활용하면 된다. 이를 통해 같은 네트워크에 연결된 모바일 기기에서도 개발 서버에 접속할 수 있다. 1. Vite 서버를 모바일에서도 접근 가능하도록 설정package.json 수정"scripts": { "dev": "vite --host"} 패키지 스크립트를 수정한 이유 npm run dev를 돌린다.결과적으로 터미널에 http://localhost:5173 이외의 http://[Ipv4]:5173 주소가 아래와 같이 추가로 제공된다. npm run dev 실행 후, bash ➜ Local: http://localhost:5173/ ➜ Network: http://[아이피주소1]:5173..

원인jest는 기본적으로 css 파일을 처리할 수 있는 기본 설정이 되어 있지 않기 때문에, 추가 설정을 해야 한다.cf) 바벨도 마찬가지로 설정을 해줘야 한다. 해결https://jestjs.io/docs/webpack#handling-static-assets > 스타일시트와 이미지와 같은 정적 파일을 처리하기 위해 jest를 구성해야 한다. 보통의 경우 이 파일들은 테스트를 위하여 필요가 없기 때문에 단순히 파일을 모킹해서 사용할 수 있다. 만약 CSS Module를 사용할 경우에는 클래스네임을 보여주기 위해 프록시를 모킹하는 것이 더 낫다. 1. jest 설정모킹할 대상(이미지, css)과 모킹 파일을 매핑해준다.* ModuleNameMapper는 jest의 설정 옵션 중 하나로, 특정 모듈 이름을..

리액트에서 개발할 때 반복문(map) 을 통해 요소들을 보여줄 경우에 "key" 속성을 지정하라 이런 말을 자주 봤을 것이다.그렇다면 왜 "key" 속성을 지정해야할까? 리액트 재 렌더링리액트에서 새로운 요소가 추가될 때 render() 함수를 호출하여 새로운 리액트 가상 돔 트리를 생성한다. 이를 기존 리액트 가상 돔 트리와 비교한 후 변경된 부분만 재 렌더링을 수행한다.+ 차이를 비교하는 과정을 diffing 이라고 한다. 차이를 비교(diffing)요소를 비교하기 전에 key 값을 우선 비교한다.- 새로운 key 값인 경우, 새로운 DOM 요소를 생성하여 트리를 재구성한다.- 기존 key 값이면서 새로운 요소인 경우도 새로운 DOM 요소를 생성하여 트리를 재구성한다.- 기존 key 값이면서 기존 요..