DEVLOG

📖 목차 🎈 TMDB Open API 이번 프로젝트에서는 TMDB API에서 제공하는 Open API를 사용해 영화 데이터를 불러올 예정이다. API key 발급 데이터를 이용하려면 TMDB 사이트 - 설정 - api에서 api key를 발급받아야한다. https://api.themoviedb.org/3/movie/{movie_id}?api_key=&language=en-US API docs TMDB API docs에 준비되어 있는 api들을 이것저것 조회해보며 사용할 api들을 찾아냈다!생각보다 다양한 api들이 있어서 여러 기능을 가진 페이지를 만들 수 있을 것 같다. 🎈 React-Query 데이터 fetching 라이브러리로 이번엔 한번쯤 사용해보고 싶었던 react-query를 사용해보기로로 했..

📖 목차 기존에 포트폴리오 사이트를 Next.js를 사용하여 진행했는데 api 붙일것도 없고,, 안에 내용도 너무 단조로워서 Next.js 기술을 조금 더 익히기 위해 간단한 프로젝트를 진행해보기로 했다! 🎈 주제정하기 api를 붙일만한 프로젝트로 고민하다가 이전에 잠깐 사용해보았던 TMDB API에 tving사이트 디자인을 더해 영화 추천 사이트를 제작해보려고 한다! 🎈 사용기술 next.js + typescript 기반으로 페이지를 만들고 스타일 작업은 styled-components를 이용해보려고 한다. "next": "13.0.7", "react": "18.2.0", "react-dom": "18.2.0", "styled-components": "^5.3.6" 🎈 기본세팅하기 _app / _doc..

📖 목차 create-next-app 설치 먼저 Next.js를 사용한 프로젝트를 생성하기 위해서는 create-next-app을 먼저 설치해야한다. 문득 드는 생각인데,,, create-react-app을 CRA라고 부르는 것 처럼 create-next-app도 CNA라고 부를까,,?🤔 (오 그렇다고 합니다...!!!) npm install -g create-next-app 설치 완료 후 정상적으로 설치가 되었는지 다음 명령어를 통해 확인한다. $ create-next-app --version 12.1.6 create-next-app 생성 이제 위에서 설치한 create-next-app을 사용하여 아래 명령어를 실행하여 Next.js 프로젝트를 생성해보자! npx create-next-app --typ..

📖 목차 바닐라 자바스크립트로 SPA를 구현하던 중 기본세팅부터 문제가 발생했다... Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. 💡 원인 모듈을 import할 때 확장자명, 경로 지정을 제대로 입력하지 않아서 발생하는 에러다. 리액트에서는 모듈 import 시 .js, ./를 생략해도 된다. 하지만 순수 자바스크립트에서 import할 때에는 리액트처럼 하면 에러가 발생한다. 💡 해결 방법 경로, 확장자..