코딩연습장

디테일페이지는 위와 같이 출연진과 비슷한 영화목록을 보여주는 박스들이 있다.이 박스들은 가로로 정렬되어있으며, 대부분이 기본 width값을 넘기 때문에 가로 스크롤이 생기도록 설정하였다.하지만 마우스를 갖다대고 휠을 아무리 내려도 우측의 기본 스크롤이 움직였다.물론 사용자가 직접 스크롤을 클릭하고 움직여도 되겠지만, 조금 더 편하게 만들기 위해 이벤트를 설정해주었다. export function addWheelEvents(id) { const $id = document.getElementById(`${id}`); function wheelEvent(e) { e.preventDefault(); $id.scrollTo({ left: $id.scrollLeft + e.del..

오늘은 디테일 페이지 반응형 작업을 진행하였다.@media를 사용하여 화면 너비에 따른 반응형 작업을 할 예정이었다.width값을 의도적으로 줄이며 작아져야 할 부분을 체크하여 진행하였다.하지만 역시나 문제가 발생했다. const backgroundImage = document.createElement("img");backgroundImage.className = "backgroundPoster";backgroundImage.src = `https://image.tmdb.org/t/p/w500${backdrop_path}`;$detailContainer.appendChild(backgroundImage);바로 배경에 깔아주는 포스터와 메인 박스에서 문제가 생긴 것이었다.문제는 메인박스에 적용되어있던 po..

웹 페이지에 영상플레이어를 넣으려면 video태그를 사용해야 하지만, 그렇게 하면 서버에 부담이 될 것이다.따라서 우리는 유튜브영상을 iframe을 이용하여 가져와 보자!원하는 영상의 공유버튼을 누르고, 모양을 누른다. 그러면 위처럼 iframe태그가 나오는데, 이를 복사해서 html에 넣으면 유튜브 비디오플레이어가 나오게 된다. 하지만 나는 원하는 영화의 예고편을 가져와야한다. 그리고 위의 src중 embed/뒷부분의 내용을 tmdb에서 지원해준다.따라서 저것만 넣어서 iframe을 만들고, 동적으로 붙여주는 작업만 하면 예고편 영상을 띄울 수 있는 것이다.디테일 페이지의 parameter에서 id값을 가져와 해당 id값을 tmdb 영상 관련 api에 요청을 한다.그러면 tmdb에서는 영화와 관련된 영..

이번 프로젝트는 팀원들의 개인 프로젝트 중 하나를 골라 업그레이드 하는 것이 목표이다.이번 mvp는 아래와 같다. 메인페이지무한스크롤로 pagenum에 따라 api 요청하기검색기능과 정렬필터 제작하기 디테일페이지영화 카드를 누르면 상세 페이지로 이동하여 내용을 보여주는것리뷰를 로컬스토리지를 활용하여 작성 및 조회하는 것 4가지 조건 중 영화카드를 상세 페이지에서 보여주는 것을 내 역할로 잡았다.위 사진의 위에 부분을 진행하는 것이다.어려운 부분이 없어 금방 끝낼 것이라고 생각하여 api에서 제공해주는 유튜브 링크로위 디테일 카드에 마우스 오버를 하면 유튜브영상이 재생되는 것을 더해볼 생각이다. 현재까지 작업상황은 위와 같다.영화 id에 따라서 해당 영화의 디테일내용을 받아오는 api를 사용했으며, 아직 ..

use client는 hydration이 필요한 컴포넌트에서 사용된다.use client가 의미하는 것은 client단에서 js가 hydrate되어야 한다는 것이다.useclient가 사용되지 않은 컴포넌트는 서버에서 보내주고 hydration이 일어나지 않는다. use client가 사용되면 client component, 사용되지 않으면 server component인 것이다.항목클라이언트 컴포넌트 (ClientComponent)서버 컴포넌트(Server Component)실행 위치브라우저 (클라이언트)서버 (Node.js 등)데이터 페칭클라이언트 사이드 데이터 페칭 방식(fetch, axios, ...)서버 사이드 데이터 페칭 방식(getServerSideProps, getStaticProps, ...

SSR : Server Side RenderingCSR : Client Side Rendering말 그대로 SSR은 서버측에서 렌더링을 하는 것이고, CSR은 클라이언트(사용자)측에서 렌더링을 하는 것이다.  CSR : Client Side RenderingSSR : Server Side Rendering1사용자가 웹 사이트를 요청함유저가 웹 사이트를 요청함2CDN이 HTML파일과 JS접근링크를 보내줌서버가 렌더가 준비된 HTML파일을 생성함3브라우저가 HTML을 다운로드하고, JS를 다운로드함단, 이때 사용자는 사이트를 볼 수 없음(빈 화면)브라우저가 HTML을 빠르게 렌더링하지만사이트는 아직 상호작용이 불가함4브라우저가 JS를 다운로드함브라우저가 JS를 다운로드함5JS가 실행되고 data를 위한 ap..

import { addEvent } from "./addEvent.js";import { isSearchedData } from "./isSearched.js";export function searchMovie() { const searchButton = document.querySelector(".searchButton"); const searchInput = document.querySelector(".searchInput"); const searchFunc = async function () { isSearchedData.isSearched = true; let movieArr = []; const options = { met..

기존에 리액트에서는 리액트 라우터를 사용하여 페이지이동을 구현했었다.router.js에서 각 페이지 컴포넌트들을 불러들이고}>이런 식으로 엔드포인트와 어떤 컴포넌트를 사용할지 정해주었던 것 같다. 하지만 NextJs에서는 폴더와 파일하나를 생성하면 자동으로 라우팅을 해준다.app폴더에 about-us라는 폴더를 만들어주고, page.tsx파일을 만들어준다.임시 리턴데이터를 넣어주고 저장하면 자동으로 연결이 된다.엔드포인트를 폴더명으로하고, 안에 UI로 작동할 page.tsx를 만들면 자동으로 연결이 되는 것이다.  about-us/company/sales/page.tsx를 생성했을때는/about-us/company/sales의 엔드포인트를 갖는 페이지가 생성되는 것이다.이때 company에는 page.t..

1. 프로젝트를 진행할 폴더를 생성한다.2. 해당 폴더를 vscode로 연다. 3. 아래 코드를 터미널에 입력하여 package.json파일을 생성한다.npm init -y 4. react, next, react-dom 설치npm install react@latest next@latest react-dom@latest 5. pakage.json 수정{ "name": "nextprac", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "next dev" }, "keywords": [], "author": "", "license": "MIT", "description": "", "d..

이러한 페이지를 만들었다.영화데이터 제공 openapi를 사용하여 페이지 진입 시 영화데이터를 불러온다.불러온 데이터 중 원하는 키워드를 검색하여 해당 키워드가 '제목'에 있는 영화들만 보이도록한다.import { getMoviesFunc } from "./getMoviesFunc.js";import { movieCardsFunc } from "./movieCardsFunc.js";import { addEvent } from "./addEvent.js";import { searchMovie } from "./searchMovie.js";import { observer } from "./observer.js";observer();getMoviesFunc().then((res) => { movieCar..