On this page

2021년07월14일

문서 생성 2021-07-14 13:16:50 최근 수정 2021-07-14 22:25:55

On this page

Note

초기 진입 페이지 리다이렉팅

routes: [
  {
      path: '/',
        redirect: '/login',
    }
]

없는 페이지 접근시 라우터 처리

routes: [
  {
      path: '*',
        component: () => import('@/view/PageNotFound.vue'),
    }
]

history mode에 대하여
- vue.js에서 url에 #이 붙은 이유는 #을 이용해 서버가 새로운 페이지라고 인식하지 못하게 하기 위함이다.
  - #이 붙으면 페이지 내 이동으로 인식
- 만약 #이 제거되면 서버입장에선 새로운 페이지로 인식하기 때문에 개발중이 아닌 서비스 운영시에는 서버가 새로운 페이지라고 인식하지 못하도록 클라이언트 레벨 라우팅 처리가 필요하다.
- https://router.vuejs.org/guide/essentials/history-mode.html

API 결과값이 원하는 것이 나오지 않았을 때는 바로 백엔드 개발자에게 요청하는 것이 아닌, Network 패널 확인, Response에 어떤 값을 받아왔는지 확인 후, 백엔드 개발자와 얘기하는 것이 협업할 때 중요하다.

axios.create를 이용해 API 설정을 공통화할 수 있다.

const instance = axios.create({
  baseURL: 'http://localhost:3000',
});
function createPage(pageData) {
  instance.post('write', pageData);
}

.env, .env.development, .env.production
- 세 가지 파일로 공통, 개발용, 배포용 환경변수 설정이 가능하다.

em
- 대문자 M의 너비를 1em으로 표현한 것, 16px이 1em에 해당
- 웹 페이지를 표시하는 모니터 해상도에 따라 px의 크기가 달라지기 때문에 정확하게 글씨를 표현하기 위해 상대적 단위인 em을 사용하는 것이 좋다.
rem
- em은 자신의 부모 박스에 글자 크기가 지정되어 있을 경우 자식 박스에게 글자 크기가 상속된다.
- rem은 최상위, 웹 문서 시작인 <html> 태그를 기준으로 한다.
vw, vh, vmin, vmax
- vw(viewport width)
  - (vw 단위를 적용할 글자 크기값 X 브라우저의 너비값) / 100 = 크기값
  - ex) 글자 크기가 5vw면, 웹 브라우저의 너비는 100을 기준으로 하기 때문에 5%가 된다. 웹 브라우저 너비가 1280이라면 (5*1280)/100 해서 64px이다.
- vh(viewport height)
  - 웹 브라우저의 높이를 100을 기준으로 해서 크기를 결정하는 단위
  - ex) 글자 크기가 5vh면, 웹 브라우저의 높이가 1024px인 경우 (5*1024)/100해서 51.2px이다.
- vmin(viewport minimum)
  - 웹 브라우저 너비와 높이 중 짧은 쪽을 기준으로 크기를 결정
- vmax(viewport maximum)
  - 웹 브라우저 너비와 높이 중 큰 쪽을 기준으로 크기를 결정
이미지와 영상을 가변적으로

img, video {
  width: 100%;
    max-width: 100%;
}

TDZ (Temporal Dead Zone, 임시 사망 지역)
- ECMAScript에서 정의한 것은 아니고, TDZ에선 ReferenceError가 발생
- let이나 const로 변수를 선언했을 때 선언 전까지 해당 변수에 접근할 수 없는 것
let과 const는 실행 컨텍스트가 시작될 때 변수명만 가져오고 undefined를 할당하지 않는다. hoisting은 하는 것.