썸네일 [FrontEnd6] naver-movie-api를 이용하여 네이버 영화 검색 페이지 만들기 (router, naver-api, pagination, axios, query-string) 안녕하세요~ 보라해바라기입니다! 오늘은 naver 영화 검색 api를 사용하여 라우터에 따른 영화검색 페이지를 만들어보았습니다:) 1. App.js import './App.css'; import { Component } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './components/Home.js' import Search from './components/Search.js' import InputComp from './components/InputComp.js' class App extends Component { constructor(props){ super(props..
썸네일 [FrontEnd6] yts-movie-api를 사용하여 영화 리스트 만들기 (yts-api, axios, pagination) 안녕하세요~ 보라해바라기입니다:) 저는 코딩 학원 마지막 수업을 듣고 있는데요 ㅎㅎ 프로젝트를 만드는 수업이라 오늘은 제가 만든 프로젝트를 보여드리려 합니다 ㅎㅎ (아주 작긴 하지만) 대략의 내용은 axios, pagination, yts-api를 사용하여 영화 리스트를 만드는 것입니다! 1. App.js import axios from 'axios'; import { Component } from 'react'; import './App.css'; import MovieList from './components/MovieList.js' import Pagination from './components/Pagination.js'; class App extends Component { constructor..
썸네일 [React] component 요소를 이용한 게시판 구조 짜기 (페이지 넘기기, 원하는 포스팅 갯수 만큼 보이도록 하기 etc..) 안녕하세요~ 보라해바라기입니다! 요즘 저는 react를 배우고 있답니다 ㅎㅎ react의 component요소가 개발을 할 때 편리하게 작용하더군요! 이 특성을 살려 간단하게 게시판 구조를 만들어보았습니다. 1. App.js import { Component } from 'react'; import './App.css'; import SmList from './components/SmList.js' import Pagination from './components/Pagination.js' class App extends Component { constructor(props){ super(props) this.state={ smList:[ {imgSrc: 'tvxq.jpg', no:1, name:'동방신..