Vue로 영화 검색 페이지 만들기 학습을 하며 어려웠던 점 모음

https://omdbapi.com/위 사이트의 API를 이용해 영화 검색 웹을 만들고 있는 중이며 어려웠던 점을 하나씩 기록하려 한다.Key 은닉을 위해 서버리스 함수 사용을 위해 vercel이용!만약에 key 은닉을 하지 않는다면....network를 살펴보면 내가 사용한 key가 그대로 드러남을 알 수 있다.. 😭원래는 서버에서 처리를 해줘야하지만 현재로선 서버에서 처리해줄 수 없기 때문에 vercel을 대신 사용했다.이때 나는 axios 사용을 했다.get에 데이터를 전송해야했기 때문에 처음엔 get에 데이터를 어떻게 넣지...? 하며 아무것도 모르는 상태라 검색을 해봤더니params를 이용해 전송함을 알고 적용해보았다.완성된 코드는 아래와 같다.//src/store/movie.vueimport..

• format_list_bulleted 프로젝트/기타 (프로젝트)
• · 2024. 8. 7.
• textsms

Vue로 영화 검색 페이지 만들기 회고(+ TS 사용 후기)

DemoGithub한 주 동안 무엇을 했는가?월요일, 화요일 : vue 강의 듣기수요일, 목요일, 금요일, 토요일, 일요일 : vue 강의를 들으며 영화 검색 페이지 제작 과제프로젝트 접근 순서1. 의욕만 앞선 ["일단 강의를 다 듣자!"] 결심-> 일단 강의를 먼저 듣기 시작했고 점점 조급해져오는 마음에 일단 구현 먼저 하고 필요할 때마다 강의를 보자는 생각을 함vite를 이용해 기초 세팅 먼저 하고 무대포로 일단 코드를 짜기 시작처음에 검색페이지를 만들고 하는것 까진 좋았으나......기본 요구사항에 존재하는클라이언트(브라우저)에서 API Key(7035c60c)가 노출되지 않아야 합니다! 항목은 무시한채 그대로 Network에서 고스란히 보여줘버리기!이 문제를 해결하기 위해선 서버가 필요하다는 것을..

• format_list_bulleted 프로젝트/기타 (프로젝트)
• · 2024. 8. 6.
• textsms