Side Project
-
니꼬의 뽀나스 강의 조금 심심한 페이지를 react를 이용하여 좀 더 꾸며보자. navigation바를 만들기위해 react-router-dom 을 이용하자. npm install react-router-dom 파일들을 위 사진처럼 정리하자. App.js에 있는 내용들을 모두 Home.js로 옮기고 App.css를 Home.css로 변경 경로를 위와 같이 변경 후 아래를 작성하자. App.js import React from "react"; import { HashRouter, Route } from "react-router-dom"; import About from "./routes/About"; function App() { return ( ); } export default App; path라면 A..
[ReactJS로 영화 웹 서비스 만들기] 06. ROUTING니꼬의 뽀나스 강의 조금 심심한 페이지를 react를 이용하여 좀 더 꾸며보자. navigation바를 만들기위해 react-router-dom 을 이용하자. npm install react-router-dom 파일들을 위 사진처럼 정리하자. App.js에 있는 내용들을 모두 Home.js로 옮기고 App.css를 Home.css로 변경 경로를 위와 같이 변경 후 아래를 작성하자. App.js import React from "react"; import { HashRouter, Route } from "react-router-dom"; import About from "./routes/About"; function App() { return ( ); } export default App; path라면 A..
2020.07.10 -
Styling the Movies App.js와 Movies.js를 좀 html스럽게 수정해보자. App.js import React from "react"; import axios from "axios"; import Movie from "./Movies"; class App extends React.Component { state = { isLoading: true, movies: [], }; getMovies = async () => { const { data: { data: { movies }, }, } = await axios.get("https://yts-proxy.now.sh/list_movies.json"); this.setState({ isLoading: false, movies }); ..
[ReactJS로 영화 웹 서비스 만들기] 04. MAKING THE MOVIE APP 02Styling the Movies App.js와 Movies.js를 좀 html스럽게 수정해보자. App.js import React from "react"; import axios from "axios"; import Movie from "./Movies"; class App extends React.Component { state = { isLoading: true, movies: [], }; getMovies = async () => { const { data: { data: { movies }, }, } = await axios.get("https://yts-proxy.now.sh/list_movies.json"); this.setState({ isLoading: false, movies }); ..
2020.07.07 -
Fetching Movies from API 일반적으로 javascript에서 data를 가져올때 fetch를 사용한다. 하지만 여기서는 fetch가 아닌 Axios를 이용할 것이다. npm install axios 를 이용하여, axios를 설치하자. API는 YTS의 API를 이용할 건데 이곳은 토렌트 사이트이다. 그래서 재공하는 API가 매번 변하는데, 이를 해결하기 위해 니꼬가 만든 yts proxy라는걸 만들었는데 이를 이용할 것이다. YTS API API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts...
[ReactJS로 영화 웹 서비스 만들기] 04. MAKING THE MOVIE APP 01Fetching Movies from API 일반적으로 javascript에서 data를 가져올때 fetch를 사용한다. 하지만 여기서는 fetch가 아닌 Axios를 이용할 것이다. npm install axios 를 이용하여, axios를 설치하자. API는 YTS의 API를 이용할 건데 이곳은 토렌트 사이트이다. 그래서 재공하는 API가 매번 변하는데, 이를 해결하기 위해 니꼬가 만든 yts proxy라는걸 만들었는데 이를 이용할 것이다. YTS API API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts...
2020.07.06 -
Class Componant and State 앞서 했던 Food 예제는 모두 지우고, app.js 안의 app 함수를 class화 하자. import React from "react"; import PropTypes from "prop-types"; class App extends React.Component { } export default App; class는 반환하는 함수를 만들어주지 않는이상 return이 없다. 그렇다면 원하는 값을 반환하기위한 방법은 뭘까? 여기서 class를 React.Componet를 extends(확장) 하였다. 이 안에 render라는 함수메소드가 존재한다. 이를 이용하자. 리액트는 자동적으로 React.Component의 render메소드를 자동으로 실행한다. 함수대..
[ReactJS로 영화 웹 서비스 만들기] 03. STATEClass Componant and State 앞서 했던 Food 예제는 모두 지우고, app.js 안의 app 함수를 class화 하자. import React from "react"; import PropTypes from "prop-types"; class App extends React.Component { } export default App; class는 반환하는 함수를 만들어주지 않는이상 return이 없다. 그렇다면 원하는 값을 반환하기위한 방법은 뭘까? 여기서 class를 React.Componet를 extends(확장) 하였다. 이 안에 render라는 함수메소드가 존재한다. 이를 이용하자. 리액트는 자동적으로 React.Component의 render메소드를 자동으로 실행한다. 함수대..
2020.07.04 -
index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( ,document.getElementById('root') ); ReactDom.render 안의 은 컴포넌트이다. 리액트는 컴포넌트를 사용해서 HTML처럼 사용할 때 필요하다. Javascript와 HTML의 이러한 조합을 jsx라고 부른다. 그렇다면 컴포넌트를 만드는 방법은 무엇일까? src 하위에 Potato.js에 아래와 같이 작성해보자. import React from 'react'; function Potato(){ return I love potato. } jsx를 하기위해선 항상 리액트가 im..
[ReactJS로 영화 웹 서비스 만들기] 02. JSX & PROPSindex.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( ,document.getElementById('root') ); ReactDom.render 안의 은 컴포넌트이다. 리액트는 컴포넌트를 사용해서 HTML처럼 사용할 때 필요하다. Javascript와 HTML의 이러한 조합을 jsx라고 부른다. 그렇다면 컴포넌트를 만드는 방법은 무엇일까? src 하위에 Potato.js에 아래와 같이 작성해보자. import React from 'react'; function Potato(){ return I love potato. } jsx를 하기위해선 항상 리액트가 im..
2020.07.03 -
우선 npx를 이용하여 react app을 만들어보자. app을 만들 디렉토리로 이동하고 아래를 입력하자. https://github.com/facebook/create-react-app facebook/create-react-app Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub. github.com npx create-react-app movie_app_2020 package.json 파일을 열어보면 Debug 부분의 test와 eject를 지워주자. (나중에는 사용할지 몰라도, 지금은 사용하지 않는다) app을 ..
[ReactJS로 영화 웹 서비스 만들기] 01. Set up우선 npx를 이용하여 react app을 만들어보자. app을 만들 디렉토리로 이동하고 아래를 입력하자. https://github.com/facebook/create-react-app facebook/create-react-app Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an account on GitHub. github.com npx create-react-app movie_app_2020 package.json 파일을 열어보면 Debug 부분의 test와 eject를 지워주자. (나중에는 사용할지 몰라도, 지금은 사용하지 않는다) app을 ..
2020.07.02 -
_args, *_kwargs 보통의 함수에서는 매개변수를 정해둔 개수만큼만 받을 수 있다. def plus(a, b): return a + b plus(1, 2) ![image-20200612160617234](C:\Users\jeff9_gkudbgy\AppData\Roaming\Typora\typora-user-images\image-20200612160617234.png) 하지만 내장함수인 print()를 보면 무제한?으로 입력이 가능하다. print(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1) 방법은 *args와 **kwargs를 이용하는 것이다. 우선 *args를 이용하여 입력받은 모든 숫자를 더해보자. def plus(*args): return sum(args) pr..
[파이썬으로 웹 스크래퍼 만들기] 8. Get ready for Django_args, *_kwargs 보통의 함수에서는 매개변수를 정해둔 개수만큼만 받을 수 있다. def plus(a, b): return a + b plus(1, 2) ![image-20200612160617234](C:\Users\jeff9_gkudbgy\AppData\Roaming\Typora\typora-user-images\image-20200612160617234.png) 하지만 내장함수인 print()를 보면 무제한?으로 입력이 가능하다. print(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1) 방법은 *args와 **kwargs를 이용하는 것이다. 우선 *args를 이용하여 입력받은 모든 숫자를 더해보자. def plus(*args): return sum(args) pr..
2020.06.12 -
https://academy.nomadcoders.co/courses/enrolled/681401 Python으로 웹 스크래퍼 만들기 Python for Absolute Beginners academy.nomadcoders.co 드디어 2주간의 CODE CHALLENGE가 끝났다! 펑! 펑! 펑! 짧으면 짧다고 볼 수 있는시간. 2주간 니꼬쌤의 강의를 들으며 코드 챌린지를 완주했다. 토이 프로젝트를 진행하려고 고민하던 중 Python으로 웹 스크래퍼 만들기 코드 챌린지가 시작되는걸 봤다. 사실 리엑트에 입문하려고 준비중이었지만, 뭔가 동기부여가 필요하던 찰나에 딱 마주하게 됐다. 처음 기본적인 내용할땐 매일매일 주어지는 과제도 빨리 빨리 끝내고 다른것을 했지만, 하루가 지날때마다 난이도가 퐉퐉! ㅠㅜ 처..
[파이썬으로 웹 스크래퍼 만들기] 7. Nomad Coders 웹 스크래퍼 만들기 챌린지 후기https://academy.nomadcoders.co/courses/enrolled/681401 Python으로 웹 스크래퍼 만들기 Python for Absolute Beginners academy.nomadcoders.co 드디어 2주간의 CODE CHALLENGE가 끝났다! 펑! 펑! 펑! 짧으면 짧다고 볼 수 있는시간. 2주간 니꼬쌤의 강의를 들으며 코드 챌린지를 완주했다. 토이 프로젝트를 진행하려고 고민하던 중 Python으로 웹 스크래퍼 만들기 코드 챌린지가 시작되는걸 봤다. 사실 리엑트에 입문하려고 준비중이었지만, 뭔가 동기부여가 필요하던 찰나에 딱 마주하게 됐다. 처음 기본적인 내용할땐 매일매일 주어지는 과제도 빨리 빨리 끝내고 다른것을 했지만, 하루가 지날때마다 난이도가 퐉퐉! ㅠㅜ 처..
2020.06.10