Create a new repository

git repository를 생성 Private한 공부용 저장소를 만듬.
git clone 한 상태에서 npm init -y 를 통해 package.json 생성

create react app

로컬에서 create react app을 통해 리액트+타입스크립트(react typescript)환경을 만듬.

package.json파일을 빼고

git clone된 환경에 create react app으로 생성된 환경을 옮김.
package.json에는 script, devDependencies에 대한 세팅만 옮김.
세팅이 끝났다 싶어서 신난다 하며 react-scripts start을 실행.

의도치 않게 localhost:3000/의도하지않은/경로가/들어가있다 로 화면이 띄워진다.

실행되어 브라우저가 띄워졌지만 의도하지않은 경로가 들어가있고, 수동으로 localhost:3000으로
입력하였지만 화면이 나오지 않는다.
실행된 화면을 개발자 도구로 보니 파일에도 /의도하지않은/경로가/들어가있다

무엇인가 잘못되었다.

public 폴더 내 index.html 파일을 연다.
%PUBLIC_URL% 로 설정되어있는 부분이 잘못된 것을 인지하고 cra로 생성시에 PUBLIC_URL경로에 대해 검색하기 시작했다.

해결책

1. cross-env를 통해 localhost:3000을 강제로 입력하게 한다

start : cross-env PUBLIC_URL="localhost:3000" react-scripts start

원하는대로 localhost:3000로 실행되지만 찝찝하다.

2. package.json 내 homepage 삭제

"homepage": "https://github.com/의도하지않은/경로가/들어가있다"

github에서 repository를 생성한 후 npm init -y를 하게되면 homepage에 대한 정보가 자동으로 들어가게되어있다. 나는 따로 설정을 하려고 진행하던 과정에서 빠르게 진행하기위해 cra으로 진행하여 설정을 옮기게 되었고, 이 과정에서 homepage 주소를 인식해서 public_url에 적용되어 나타난 이슈였다.

#오늘의 삽질 : 프론트 환경을 진행함에 있어서 나오는 bug에 대해 기록하려고한다.