React3 [React] 이미지 태그 src 경로 설정 | src폴더 import 사용 react로 프로젝트를 하면서 대부분을 scss에서 background-image로 설정했다가 img태그가 필요한 경우가 생겼다. 평소 하던 대로 경로를 잡았더니 계속 이미지가 나오지 않아 검색을 해본 결과 경로를 잡는 방법이 2가지가 있었다. 나는 image 폴더를 src 내부에 만들었기 때문에 import를 사용하였다. 1. public 폴더에 저장했을 경우 평소처럼 상대경로로 잡으면 된다. 2-1. src 폴더에 저장했을 경우 import로 이미지를 하나하나씩 가져와야 한다. import circle from '../../image/circle.svg'; 그 후로는 컴포넌트를 사용하던 방식으로 똑같이 사용해주면 된다. 2-1번째 방식으로 했을 경우 파일 구조가 깊을 경우../../../../ 이런 .. 2022. 1. 27. [React] 리액트에 Font Awesome 적용하기 프로젝트에 fontawesome 이 필요해서 하던 대로 html에 를 넣고 태그를 썼는데 전혀 놀랍도록 아무 일도 일어나지 않아 폰트 어썸 페이지로 가서 문서를 읽어보았다. React에는 i태그가 아니고 npm이나 yarn으로 따로 다운을 받아야 사용할 수 있었다. npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome yarn add @fortawesome/fontawesome-svg-core yarn add @fortawesome/free-solid-svg-icons yarn add @for.. 2022. 1. 24. [React] vercel 연동 오류 해결 react로 포트폴리오를 만들기 위해 vercel과 연동하였다. 기본 react파일은 별 다른 이슈 없이 잘 연동이 되었는데 어느 정도 코드를 짠 후 새로 vercel에 연동을 하려니 Treating warnings as errors because process.env.ci = true 라는 오류가 생겼다. 구글링을 해보니 크게 2가지의 방법이 있는데 하나는 결과적으로 내가 해결한 방법이고 하나는 netlify의 공식 페이지에 나와있는 해결방법을 이용하는 것이었다. (일단 나는 netlify방식으로 했을 땐 새로운 오류가 떴기 때문에 더 이상 해결방법을 찾지 않고 다른 방법을 시도) 처음 deploy하는 페이지에서 왼쪽 상단에 있는 본인 대쉬보드로 나가 오류가 난 프로젝트로 들어간다. 위 사진 처럼 se.. 2022. 1. 21. 이전 1 다음 반응형
