[poompoom] 트러블슈팅

header 여러개 사용가능하다.

 

header

main

footer

 

내부에 section잡고

div로 양옆 마진 잡고

그 다음 콘텐츠 딱맞게 크기 조율.

 

 

---

 

 

axios Instance 생성 후 AT 확인

일반적으로는 헤더 설정에 

Authorization 속성에 `Bearer ${accessToken}`을 값으로 넣음.

근데 종설할 때는 왠지 모르게 헤더 속성에 접근이 안돼서 사설 속성 access를 사용함.

access 속성에 직접 accessToken을 넣었음.

// 요청 인터셉터
axios.interceptors.request.use(
  (config) => {
    const accessToken = localStorage.getItem('accessToken');
    if (accessToken) {
      // config.headers.Authorization = `Bearer ${accessToken}`;
      config.headers.access = accessToken; // 헤더에 access 속성 추가
    }
    console.log('Axios Request Headers: ', config.headers); // 요청 헤더를 로그에 출력
    return config;
  },
  (error) => Promise.reject(error),
);

 

---

프로필 라우팅

 

useLocation

<Routes></Routes>

/profile/*

 

---

 

PostFilter 고정

position: fixed

 

---

 

atoms

가장 작은 크기의 컴포넌트

 

---

 

GitHub Pages 배포 시

public폴더를 기준으로 삼음.

 

yarn build : 빌드 폴더 생성

yarn deploy: 빌드 폴더 생성 및 깃허브 페이지 배포.

 

feature 브랜치에서 빌드 폴더를 생성 후,

main 브랜치에 병합하기.

그러면 github pages 동작함.

 

 

---

 

폰트

구글 폰트: <style></style>

나머지: https://noonnu.cc/index

눈누

 

---

 

Mixed Content 오류

HTTPS와 HTTP 통신은 보안상 막힘.

 

해결방안

1. 백엔드의 HTTP 통신을 HTTPS로 마이그레이션.

=> 로드밸런싱과 SSL 인증서 등 추가 비용 발생.

2. CORS 설정

=> 배포된 github pages URL로부터 오는 HTTP 사용자 요청을 임의로 허용해줌.

3. Netlify 사용

=> github pages와 같은 웹호스팅 서비스지만, 리다이렉션 기능이 있음. (서버리스)