YONG.ZIP

기존에 알고있던 개념이 너무 무지성으로 외웠던게 아닌가 싶어서 자바스크립트 쌩기초부터 시작하고 있는데 reduce 함수 사용법을 제대로 몰랐던 것 같아서 블로그에 정리하려고 한다. 예제 1 위 사진을 보면 numbers 라는 변수에 array를 하나 넣었다. reduce를 실행할 때는 두 개의 파라미터((p, n) => p + n), 0)을 넣었다. 즉, 콜백함수는 첫 번째 파라미터, 초기값은 두 번째 파라미터다. 실행순서를 정리해보면 (1) 초기값인 0이 p에 입력된다. (2) numbers array의 첫 번째 값인 2가 n에 입력된다. (3) p + n | 즉, 0(초기값) + 2(첫번째 값)의 결과값인 2가 반환된다. (4) (3)에서 반환한 값(2)이 p에 입력된다. (5) array의 두 번째..

이제 넷플릭스 영화 트레일러 팝업을 넣어보려고 한다. 먼저 터미널에 아래에 있는 두 개의 명령어를 입력해서 패키지를 설치한다. npm i react-youtube npm i movie-trailer 이제 영화 트레일러를 유튜브에서 불러올 수 있다. 역시나 얘기가 길어져서 간단한 설명은 주석 처리로 했다. [Row.js] import React, { useState, useEffect, } from "react"; import axios from "./axios"; import "./Row.css" import YouTube from "react-youtube"; import movieTrailer from "movie-trailer"; const base_url = "https://image.tmdb.o..

이제 모든 장르를 리액트 앱에 불러올 차례다. request.js에서 가지고 왔던 장르들을 App.js에 있는 넷플릭스 오리지널과 실시간 트렌드 아래에 넣어주면 된다. 해당 코드를 작성하면 사진처럼 리액트 앱에 다양한 장르를 불러올 수 있다. 다음은 App.css다. 먼저 새로 작성하기 위해 원래 존재하던 코드를 다 지워준다. 그리고 아래 코드를 작성한다. *{ margin: 0; } 마진 0을 주는 이유는 간단하다. 브라우저마다 기본 마진 값이 다르기 때문이다. 내가 설정한 css 값이 다른 브라우저에서도 동일하게 보이기 위해 마진 값을 0으로 초기화 해주는 것이다. 이제 다시 App.js로 넘어가겠다. 넷플릭스 오리지널 row 포스터의 크기가 크고 비율이 다른 것을 해결해야 한다. [App.js] [..

[App.js] import React from 'react'; import './App.css'; import Row from './Row'; import request from './request'; function App() { return ( 안녕 난 오늘 넷플릭스 클론코딩을 해볼 거야~ ); } export default App; 쿼카.js와 Prettier을 설치해준다. 프리티어는 설치 후 확장설정에 들어가서 Editor: Format On Save 체크박스를 체크한다. src 폴더 아래 Row.css 파일을 새로 만들고 Row.js 파일에서 css를 사용하기 위해 import 해준다. [Row.js] import React, { useState, useEffect } from "react";..