취준생26 [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. [JavaScript] 요소의 좌표 구하기 | offset, client, page, screen 프로젝트를 진행하다 보니 element의 좌표를 구해야 하는 경우가 있다. 경우에 따라 모니터기준, 페이지 기준, 보이는 화면 기준 등이 있다. 내가 이해한대로 대충 그림을 그린 것인데 그림에는 Y좌표 기준으로 써놨지만 왼쪽 세로선을 기준으로 X좌표도 구할 수 있다. 이 중에서 나는 offset을 제일 많이 필요로 하는데 밑그림처럼 정리해보았다. 나는 네비게이션에 offset자료가 필요해 처음에 오른쪽을 기준으로 offsetRight라는 코드를 입력했는데 알고 보니 offsetRight과 offsetBottom은 없다고 한다. 오른쪽을 구하고 싶으면 offsetLeft + offsetWidth 를 더해 사용하면 되고 아래를 구하고 싶다면 offsetTop + offsetHeight를 더해 사용하면 된다. 2022. 1. 22. [React] vercel 연동 오류 해결 react로 포트폴리오를 만들기 위해 vercel과 연동하였다. 기본 react파일은 별 다른 이슈 없이 잘 연동이 되었는데 어느 정도 코드를 짠 후 새로 vercel에 연동을 하려니 Treating warnings as errors because process.env.ci = true 라는 오류가 생겼다. 구글링을 해보니 크게 2가지의 방법이 있는데 하나는 결과적으로 내가 해결한 방법이고 하나는 netlify의 공식 페이지에 나와있는 해결방법을 이용하는 것이었다. (일단 나는 netlify방식으로 했을 땐 새로운 오류가 떴기 때문에 더 이상 해결방법을 찾지 않고 다른 방법을 시도) 처음 deploy하는 페이지에서 왼쪽 상단에 있는 본인 대쉬보드로 나가 오류가 난 프로젝트로 들어간다. 위 사진 처럼 se.. 2022. 1. 21. 이전 1 2 3 4 ··· 7 다음 반응형
