환경변수 2

[삽질] - parcel build시 root 문제

1. 사건의 발단 기존 CRA를 사용해 만들던 프로젝트를 parcel 기반으로 수정하고 빌드 했는데, 이후 프로덕션 환경에서 경로 관련 문제가 발생했다. 1-1. 아무것도 보이지 않았다. 로컬 환경에서는 문제 없이 실행되던 프로젝트를 빌드 후 github pages에 배포했는데 github.io/~~~~ 같은 프로덕션 환경에서 로드 되지 않았다. 1-2. 이미지 파일 엑박 로컬 환경에서는 문제 없이 로드 되던 이미지 파일들이 프로덕션 환경에서 엑박을 시전했다. 2. 문제의 원인 2-1. index.html 파일 내 번들 된 xxx.css, xxx.js 의 경로가 올바르지 않았다. CRA로 생성한 프로젝트에서는 빌드 시 다음과 같이 자동으로 index.html 파일 내 코드의 경로들이 수정됐었다. 하지만 ..

react - public폴더 이미지 절대경로로 사용하는 법

하위요~ 요즘 혼자 만들고있는 쇼핑몰에 이것저것 개발한다고 뜸합디다. 어느정도만 만들어두고 또 새로운것을 배우고 싶은데... 하나 만들면 또 하나가 눈에 보이니... 멈출수가 읍쒀부러잉~~ 각설하고 쇼핑몰 프로젝트 진행중 여러 상품들의 Component를 수정하는 과정에서 이미지의 경로에 대한 문제가 생겼숨다. 자~ 오느룬 public폴더 이미지 절대경로로 사용하는 법을 알아보겠숨다. 기억하면 좋을 내용임과 동시에 구글에 검색해도 몇개 나오지 않는 주제라서 한번 써봅니다. 1. 무지성 import를 사용할 때 .ssul 평상시 저는 src 폴더에 img 폴더를 만들어서 모든 이미지 파일을 import로 때려박아서 사용했습니다. 이런 식으로여~ 그러다가~~~ 어느날 쇼핑몰 가다를 잡아가면서 "오늘은 상품 ..

Frontend/React 2021.08.07