도리쓰에러쓰

[TIL] 프리온보딩 13일차 - 220515 본문

Project/원티드 프리온보딩 프론트엔드 코스

[TIL] 프리온보딩 13일차 - 220515

강도리 2022. 5. 15. 23:28

오늘은 배포와의 뜻하지 않은 전쟁....😂 빨리 배포하고 자려고 했는데 에러가 고쳐지지 않아 뜻하지 않은 날밤을 샜다..

 

 

1️⃣ git pages에 배포하였는데 마주한 흰 화면..

git pages로 배포한 페이지가 흰 화면으로 나왔다. 원인을 파악해보니 router로 프로젝트를 만들었고 경로가 달랐기 때문에 흰 화면이 출력된 것 같았다. 그래서 Router basename에 process.env.PUBLIC_URL을 추가하려고 했는데 process를 찾을 수 없다고 나왔다. 열심히 구글링했지만 에러는 해결되지 않았고 몇시간 사투 끝에 해결됐다!

🔓 eslintrc.js 파일에서 아래 코드처럼 node: true 추가하기 ! (eslintrc.js 파일 들어가보니 module에서 에러나고 있었다는..)

"env": {
    "browser": true,
    "es2021": true,
    "node": true
}

 

 

2️⃣ mixed content 에러

위 내용을 수정하고 다시 git page에 배포하였지만 이번에 다른 에러가 나를 맞이해줬다.

바로 'mixed content' 에러... 원인은 암호화된 https 페이지에 암호화되지 않은 http를 통해 요청할 때 발생한다고 한다.

그래서 public > index.html의 <head> 부분에 코드를 추가하였다.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

 

 

3️⃣ 다른 Router에서 새로고침 했을 시에 생기는 404 에러..

git pages가 SPA를 지원해주지 않기 때문에 메인이 아닌 다른 Router에서 새로고침 했을 시에 404 에러가 났다.

추후에 방법은 생각해봐야겠지만 일단 지윤님이 공유해주신 아래 블로그 글을 참고하여 새로고침 시에 404.html로 우회하여 에러를 나지 않게 하였다.. (감사합니다....🙇🏻‍♀️)

 

Songlog

Javascript, Typescript, Angular, React, RxJS, etc.

iamsjy17.github.io

 

 

 

💡 오늘의 소소하지만 알찬 꿀팁

- user-select: none으로 css 설정하면 드래그 안됨

- html <li> 태그에 draggable 설정하면 드래그 안됨

- import 순서 : 외부 -> 내부 모듈

- backdrop-filter:blur(1px)로 css 설정하면 블러 처리됨

- --webkit-line-clamp: 2 콘텐츠를 지정한 줄 수만큼 제한할 수 있음

- aspect-ratio: 16 / 9 로 하면 16 : 9 비율로 이미지 등을 출력하게 할 수 있음 (반응형에 유용)

- 개발할 때는 모바일에서 데스크탑 순으로 !

저작자표시 비영리 변경금지

'Project > 원티드 프리온보딩 프론트엔드 코스' 카테고리의 다른 글

[TIL] 프리온보딩 15일차 - 220517  (0) 2022.05.17
[TIL] 프리온보딩 14일차 - 220516  (0) 2022.05.16
[TIL] 프리온보딩 12일차 - 220514  (0) 2022.05.15
[TIL] 프리온보딩 11일차 - 220513  (0) 2022.05.13
[TIL] 프리온보딩 10일차 - 220512  (0) 2022.05.13
'Project/원티드 프리온보딩 프론트엔드 코스' Related Articles more
Comments