티스토리

Cog Factory

검색하기

블로그 홈

Cog Factory

clownhacker.tistory.com/m

Cog Factory 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

Netlify에 React 배포 package.json { "scripts": { "start": "react-scripts start", "build": "CI=false react-scripts build", "deploy": "gh-pages -d build", "predeploy": "yarn run build" } "homepage": "", } package.json에 필요한 코드다. "build"에 CI=false를 해줘야 성공적으로 배포할 수 있다. netlify는 warn같은 에러 아닌 경고에도 배포를 하지 못 하게 막는다.. 참고 자료 노마드 코더의 React 멤버쉽 강의 Netlify 소스 코드 Add CI=false to 'scripts':'build' 공감수 0 댓글수 0 2021. 5. 9.
React - Create Detail Container and Presenter Components/Poster.js import styled from "styled-components"; import PropTypes from "prop-types"; import { Link } from "react-router-dom"; const Container = styled.div``; const Image = styled.div` background-image: url(${(props) => props.bgUrl}); width: 100%; height: 180px; background-repeat: no-repeat; background-size: cover; background-position: center; transition: opacity 0.1s linear; `; const.. 공감수 0 댓글수 0 2021. 5. 9.
React - Search Container and Presenter Search/SearchContainer.js import { moviesApi, tvApi } from "api"; import React from "react"; import SearchPresenter from "./SearchPresenter"; export default class extends React.Component { state = { movieResults: null, tvResults: null, searchTerm: "", loading: false, error: null, }; handleSubmit = (event) => { event.preventDefault(); const { searchTerm } = this.state; if (searchTerm !== "") { th.. 공감수 0 댓글수 0 2021. 5. 9.
React - Create TV Container and Presenter TV/TVContainer.js import { tvApi } from "api"; import React from "react"; import TVPresenter from "./TVPresenter"; export default class extends React.Component { state = { loading: true, airingToday: null, topRated: null, popular: null, error: null, }; async componentDidMount() { try { const { data: { results: airingToday }, } = await tvApi.airingToday(); const { data: { results: topRated }, } =.. 공감수 0 댓글수 0 2021. 5. 9.
React - Create MoviePresenter Movie/MoviePresenter.js import Helmet from "react-helmet"; import styled from "styled-components"; import PropTypes from "prop-types"; import Loader from "Components/Loader"; import Poster from "Components/Poster"; import Section from "Components/Section"; const Container = styled.div` padding: 10px; `; const MoviePresenter = ({ nowPlaying, upcoming, popular, error, loading }) => ( Movies | Nomf.. 공감수 0 댓글수 0 2021. 5. 9.
React - Create Loader.js Components/Loader.js import React from "react"; import styled from "styled-components"; const Container = styled.div` height: 100vh; width: 100vw; display: flex; justify-content: center; font-size: 28px; margin-top: 20px; `; export default () => ( ⏰ ); Movie/MoviePresenter.js import Loader from "Components/Loader"; import Helmet from "react-helmet"; const MoviePresenter = ({ nowPlaying, upcoming.. 공감수 0 댓글수 0 2021. 5. 9.
React - Create MovieContainer Movie/MovieContainer.js import { moviesApi } from "api"; import React from "react"; import MoviePresenter from "./MoviePresenter"; export default class extends React.Component { state = { loading: true, nowPlaying: null, upcoming: null, popular: null, error: null, }; async componentDidMount() { try { const { data: { results: nowPlaying }, } = await moviesApi.nowPlaying(); const { data: { results.. 공감수 0 댓글수 0 2021. 5. 9.
React Life cycle Methods Life Cycle Methods class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } render() { return ( Hello, world! It is {this.state.date.toLocaleTimeString()}. ); } } componentDidMount() Component가 생성되면 다음과 같은 순서대로 실.. 공감수 0 댓글수 0 2021. 5. 9.
React create Header.js Components/Header.js import { Link, withRouter } from "react-router-dom"; import styled from "styled-components"; const Header = styled.header` position: fixed; top: 0; left: 0; height: 50px; width: 100%; background-color: rgba(20, 20, 20, 0.8); z-index: 10; box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.8); `; const List = styled.ul` display: flex; `; const Item = styled.li` width: 80px; height: 5.. 공감수 0 댓글수 0 2021. 5. 9.
React GlobalStyles.js Components/App.js import Router from "Components/Router"; import React from "react"; import GlobalStyles from "./GlobalStyles"; class App extends React.Component { render() { return ( ); } } export default App; styled-components 설치 $ npm i styled-components 개요 CSS 효과를 입히려면 html에 class를 추가해야 한다. 이 때 생기는 문제점은 html의 역할에 맞게 class를 naming 하는 것과 다른 영역과 css가 충돌하지 않도록 이름을 설정하는 것이다. 또한 개발자는 해당 html의 css .. 공감수 0 댓글수 0 2021. 5. 9.
React api.js TMDB API TMDB에서 로그인을 하면 API 키를 발급 받을 수 있다. React Netflix app을 만들기 위해 서버와 DB는 The Movie Database API를 사용하기로 했다. 이 중 Movies, Search와 TV API를 사용할 것이다. src/api.js 큰 프로젝트가 아니라서 api.js 라는 한 개의 파일만을 만들고 이 안에 moviesAPi와 tvApi를 모아뒀다. import axios from "axios"; const api = axios.create({ baseURL: "https://api.themoviedb.org/3/", params: { api_key: process.env.REACT_APP_TMDB_API, language: "en-US", }, }); .. 공감수 0 댓글수 0 2021. 5. 9.
React Container and Presenter Pattern 개요 React app을 어떻게 만들것인지에 대한 디자인 패턴이다. 하나의 파일 안에 데이터를 처리하는 비지니스 로직과 Container 어떻게 동작하는지와 비지니스 로직과 관련된 코드가 있다. api를 수행하고 state를 조작해서 Presenter에게 넘겨준다. Presenter 사용자가 직접 보고, 조작하는 컴포넌트다. Container가 넘겨준 props를 가지고 html을 구성한다. state 조작은 Container가 다 하기 때문에 Presenter는 state를 조작하지 않는다. Movie Movie Directory Movie page의 directory 구조다. Container와 Presenter 디자인 패턴을 설명하기 위해 완성 본을 가져왔다. index.js import Movie.. 공감수 0 댓글수 0 2021. 5. 9.
React Router 설정 with react-router-dom react-router-dom 설치 $ npm install react-router-dom react-router-dom은 BrowserRouter, HashRouter, Route, Switch, Redirect, Link 등으로 React app의 페이지 이동을 도와준다. src/App.js src/App.js에는 React app을 크게 좌우할 수 있는 것들을 둔다. 는 페이지들을 Routing하는 component다. Components/Router.js BrowserRouter Router는 BrowserRouter와 HashRouter가 있다. 보통 선언할 때 as Router 로 선언한다.HTML5 history API(pushState, replaceState와 popState event).. 공감수 0 댓글수 0 2021. 5. 2.
Cloning Netflix settup 파일 삭제 지금 focus가 된 파일들은 실질적으로 react를 사용하는데 있어서 필요 없는 파일이므로 삭제를 해준다.(삭제를 안 해도 상관은 없다.) 그리고 App.js와 index.js에서 해당 파일들을 import 했는데, import 문도 지워주자. react 구조 설명 실행 명령 npm 명령어들은 package.json의 scripts에 쓰여있다. app 실행 명령어는 npm start이다. 동작 방식 public/index.html의 html code다. 안에 내용물은 없고 31 line에 만 있을 뿐이다. react는 실제롤 html source code를 짜지 않는다. 대신 jsx 방식을 사용한다. jsx 방식이란 JS를 이용하여 UI를 구성하는 방식이다. src/index.js 파일에서 .. 공감수 0 댓글수 0 2021. 5. 2.
What is React? 설명 웹 프론트를 만드는 JS Framework로 Single Page Application 기술이다. 모바일 앱을 사용하다 보면 다른 페이지로 넘어갈 때, 페이지가 reload 되지 않고 바로 바로 넘어가는 좋은 UX를 제공하는 것을 느낄 수 있다. 하지만 브라우저에서는 다른 페이지를 link를 통해서 넘어가게 되면 페이지가 항상 reload 되는데, SPA 기술은 이것을 방지해준다. 즉 페이지가 넘어갈 때 필요한 구성 요소만 변경해주기 때문이다. React는 Component라는 것을 만들고, component들을 조합하여서 페이지를 구성한다. 설치 React를 설치하는 명령어로 npm i create-react-app 이 있다. create-react-app은 react로 작업하기 위한 모든 환경을.. 공감수 0 댓글수 0 2021. 5. 2.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.