[React] YTS API로 영화 소개 페이지 만들기(3) - React Slick (slide)
2022. 5. 31. 02:37
공부/JavaScript
React Slick install 저번 포스팅에서 작성했지만 다시 한 번 제대로 정리해야겠다! npm i react-slick import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 설치 후 css까지 import 했다. 사용법 우선 가이드에 따르면 아래와 같이 적용한다. export default class SimpleSlider extends Component { render() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScro..
[React] YTS API로 영화 소개 페이지 만들기(2)
2022. 5. 31. 02:14
공부/JavaScript
상세 페이지 만들기 function MovieDetail( { title, genres, description, rating, runtime, bgImg, coverImg, }){ return( {title} Rating: {rating} / 10 {genres.map(item=>`${item}`).join(`/`)} Runtime: {runtime} minute {description} ) } 상세 페이지에 쓸 커버 이미지와 rating, genres, runtime을 넣어주고 하단에 줄거리를 출력하기 위해 description을 사용했다. 로딩 페이지 만들기 내가 만든 로딩 페이지는 사실상 로딩 gif를 화면에 출력하는 것 밖에 없다... import React from "react"; import ..
[React] YTS API로 영화 소개 페이지 만들기(1)
2022. 5. 31. 02:01
공부/JavaScript
YTS Movie api로 영화 소개 페이지를 만들었다. 복습할겸 다시 정리해보려고 한다. React 프로젝트 생성 CRA를 이용하여 프로젝트를 생성했다. npx create-react-app yts-movie Install React-router-dom, Import npm i react-router-dom import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' react-router-dom 설치 후 import 해주었다. 노마드코더 강의에서는 react-router-dom V5 로 진행하여 Switch를 사용하는데, V6 로 업데이트 되면서 Switch 대신 Routes로 바뀌었다. 3. 컴포넌트 생성 홈 페이지에서 상세 페..
[React] Uncaught ReferenceError: useState is not defined 해결
2022. 5. 4. 19:56
공부/JavaScript
useState를 import 해주면 된다. import React, { useEffect, useState } from "react";
[MySQL] insert, update, delete
2022. 4. 4. 21:36
공부/DB
추가(insert) insert into table_name(name,age) values('${name}',${age}) 수정(update) update table_name set age=${age} where name='${name}' 삭제(delete) delete from table_name where name='${name}'
[MySQL] ER_NOT_SUPPORTED_AUTH_MODE, errno:1251 해결방법
2022. 4. 1. 21:08
공부/JavaScript
React에서 node server를 열려고 하니 mysql에서 오류가 발생했다. code: 'ER_NOT_SUPPORTED_AUTH_MODE', errno: 1251, sqlMessage: 'Client does not support authentication protocol requested by server; consider upgrading MySQL client', 위와 같은 오류가 발생했는데, MySQL 8.0부터는 default_authentication_plugin이 mysql_native_password에서 caching_sha2_password로 변경되어서 오류가 난다. 즉, 암호화 방식이 변경되었는데 지금 그대로 사용하려고 하니 오류가 난다고 한다. 해결 방법 중 하나는 변경되기 전 ..
[React] req.body undefined 해결
2022. 3. 23. 20:19
공부/JavaScript
rest-api를 공부하는 중에 req.body에서 undefined가 뜨는 걸 확인했다. 이는 body-parser로 해결할 수 있다. 우선 body-parser를 설치해주어야 한다. npm i body-parser 나는 npm으로 설치하였고 yarn은 yarn add body-parser로 가능하다. 그리고 상단에 require을 통해 외부 메서드 모듈을 가져온다. const bodyParser=require('body-parser') app.use(bodyParser.json()) 이렇게 하면 undefined가 해결된다.
[React] Arrow 함수
2022. 3. 21. 20:20
공부/JavaScript
Arrow 함수를 사용하면 함수 바인딩을 하지 않아도 된다. 기본적으로 아래와 같이 작성한다. function=()=>{ console.log("Hello world") } 함수명 = () => {}처럼 작성하면 된다. 이렇게 되면 함수 바인딩을 따로 하지 않아도 된다.
[React] 함수 바인딩
2022. 3. 21. 19:50
공부/JavaScript
아래는 +버튼을 누르면 값이 1 증가하고, -버튼을 누르면 값이 1 감소하는 코드이다. class Counter extends Component{ constructor(props){ super(props) this.state={ num:0 } } increase(){ this.setState({ num:this.state.num+1 }) } decrease(){ this.setState({ num:this.state.num-1 }) } render(){ return( {this.state.num} + - ) } } export default Counter; 그런데 위와 같이 작성하게 되면 오류가 발생한다. 이유는 함수에 사용한 setState를 찾을 수가 없기 때문인데, 이 때 함수 바인딩을 통해서 함수..