배포

배포할때, SPA 새로고침 오류를 방지하기위하여 설정을 추가해준다.

vercel.json
{
  "routes":[
    {"handle":"filesystem"},{"src":"/(.*)", "dest":"/index.html"}
  ]
}

그런데, 이렇게하면 배포서버에서는 괜찮지만 로컬서버에서는 오류가 남.
이때 vite서버에서 주소를 수동으로 바꿔주어야한다.

//vite.config.ts
...
  server:{
    proxy:{
      '/api':{target:'http://localhost:3000'}
    }
  }

이 옵션을 추가해준 뒤, npm run vite(dev)로 비트 로컬서버를 켜준다.
그리고 vercel로컬서버를 켜주면 잘 동작함.

---

주소 입력시 Api 호출

로직을 가드에서 처리하고있었는데, v-if를 v-show로 바꾸면서 그럴 필요가 없어짐.
=> v-show는 아예 없애는게 아니라 display:hidden이기때문에 이전 글 처럼 무한반복 렌더링에 빠지지 않음.
따라서 각 컴포넌트에서 api호출을 처리해주고싶었는데, 고민하다가 route.params를 감시하면 어떨까? 하고 생각하게됨

watch(()=> route.params, ()=>handleFetch());

이런식으로 params가 바뀔때마다 요청함.
또한 created시점에도 무조건 한번 호출하여 검색 후 첫 렌더링시 호출도 맞춰줌.

이렇게 하니까 잘된다!

역시 생각을 계속 해봐야한다.
이제는 에러처리를 어디서 할건지 결정해봐야하는데...고민이 많다.

---

OpenGraph

오픈그래프는 프로토콜이다. 어떠한 라이브러리인줄 알았는데..ㅋㅋ
index.html의 메타데이터를 기반으로 한 프로토콜이다. 메타데이터는 문서를 설명하는 태그임.

<meta property="og:description" content="안녕하세요 설명입니다">

이런식으로 property항목에 open graph의 종류를 적어주고, content에 값을 넣어주면 뚝딱이다

오예!

---

axios로 쿼리스트링(파라미터) 보내고 서버리스함수로 받기

어디선가 잘못보고 단순히 영화 정보를 가져오는 api호출을 post로 하고있었다.
정확히는 서버리스 함수에다가 POST요청을 보내고 서버리스함수가 GET요청을 보냄.
query, params를 어떻게 다뤄야할지 생각못해서 그냥 body에 넣어서보냈는데..
팀원분이 서버리스함수에 대해 물으셔서 POST로 하라고 대답드렸다가 이건 아닌데? 라는 생각이 들어서 다시 찾아봤다.

   const res: AxiosResponse<movieResponse> = await axios({
          method: 'GET',
          url: `/api/getMovie`,
          params: {
            imdbID,
            plot
          }

axios는 이런식으로 params를 보내줄수있다. 그러면 vercel 서버리스 함수에서는
req.query로 파라미터들을 받아올수있음!