20210315 27일차 배포후 에러 핸들링/메뉴얼 페이지 구현

진행 사항

• 배포 후 에러 핸들링
• 메뉴얼 페이지 구현

배포 후 에러 핸들링

1. sub 네비게이션 이미지(책모양)와 paint page의 붓모양이 사라지는 현상

font awesome 의 아이콘 이미지를 i 엘리먼트로 가져옴에 따라 배포 환경에서 이미지를 불러오는 것이 불안정해짐.

대신에 직접 이미지를 다운받아 적용.

 

2. 일기쓰기 완료 후 모달창 제거

그림이 모달창을 침범하는 현상이 발생하여, 모달창을 삭제하고 등록 메세지를 보여주는 것으로 변경.

 

3.  구글, 카카오 OAuth API의 사이트 도메인 변경

http://localhost:3000 => https://royaldiary.ml . Redirection URI 도 변경(동일)

 

4. OAuth clientID 를 .env 에 저장하여 사용

 

  환경변수 설정 규칙

 

1) 변수명은 반드시 ‘REACT＿APP­＿'으로 시작되어야한다.

create-react-app에서는 보안이 필요한 환경변수의 유출을 미연에 방지하기 위해 REACTAPP으로 시작되지 않는 환경변수는 무시한다.

 

2) .env 파일 결정 및 우선순위

package.json의 script에 따라 불러오는 .env 파일이 결정된다. 왼쪽으로 갈수록 우선 순위가 높다.

• npm start: .env.development.local, .env.development, .env.local, .env
• npm run build: .env.production.local, .env.production, .env.local, .env
• npm test: .env.test.local, .env.test, .env

반영한 코드

.env

REACT_APP_GOOGLE_CLIENTID=701055 후략
REACT_APP_KAKAO_CLIENTID=80bf209d 후략

package.json

"scripts": {
    "start": "react-scripts start .env",//npm start 하면 .env 가 최우선이 된다.
    "build": "react-scripts build",
    "test": "react-scripts test",

socialSigninModal

import dotenv from "dotenv";

dotenv.config();
const googleId = process.env.REACT_APP_GOOGLE_CLIENTID as string;
const kakaoId = process.env.REACT_APP_KAKAO_CLIENTID;
window.Kakao.init(kakaoId); 
// 카카오 init 의 위치를 html -> socialSigninModal 로 변경했는데, 이는 .env 를 사용하기 위해서다.

---

메뉴얼 페이지 구현

좌: 원본, 우: 480px 미만 미디어쿼리

 

 

 

 

 

도움받은 사이트

 

React 에서 .env 사용하기: publizm.github.io/posts/react/env