분류 전체보기
-
React GlobalStyles.jsProject using React/Cloning Netflix 2021. 5. 9. 06:03
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 ..
-
React api.jsProject using React/Cloning Netflix 2021. 5. 9. 06:00
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", }, }); ..
-
React Container and Presenter PatternProject using React/Cloning Netflix 2021. 5. 9. 05:26
개요 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..
-
React Router 설정 with react-router-domProject using React/Cloning Netflix 2021. 5. 2. 10:56
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)..
-
Cloning Netflix settupProject using React/Cloning Netflix 2021. 5. 2. 10:54
파일 삭제 지금 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 파일에서 ..
-
What is React?Project using React/Cloning Netflix 2021. 5. 2. 10:08
설명 웹 프론트를 만드는 JS Framework로 Single Page Application 기술이다. 모바일 앱을 사용하다 보면 다른 페이지로 넘어갈 때, 페이지가 reload 되지 않고 바로 바로 넘어가는 좋은 UX를 제공하는 것을 느낄 수 있다. 하지만 브라우저에서는 다른 페이지를 link를 통해서 넘어가게 되면 페이지가 항상 reload 되는데, SPA 기술은 이것을 방지해준다. 즉 페이지가 넘어갈 때 필요한 구성 요소만 변경해주기 때문이다. React는 Component라는 것을 만들고, component들을 조합하여서 페이지를 구성한다. 설치 React를 설치하는 명령어로 npm i create-react-app 이 있다. create-react-app은 react로 작업하기 위한 모든 환경을..
-
Deploy django app on AWS EC2Project using python/Cloning Airbnb 2021. 4. 24. 22:57
AWS EC2(Amazon Elastic Computing Cloud)는 호스트에게 컴퓨팅을 대여해주는 클라우드 서비스다. 원하는 시스템과 컴퓨팅 파워를 선택하고 그에 해당하는 요금만 지불하면 된다. On-premise 서버보다 좋은 점은 저렴한 비용으로 서버를 탄력적으로 운용할 수 있다. EC2 생성 AWS Console 사이트에서 서비스 nav bar에서 EC2를 선택하자. 좌측에서 EC2를 선택하자. 우측에 '인스턴스 시작'을 클릭하자. 여러 가지 OS가 있는데 이 중 Ubuntu Server 20.04 LTS version을 선택한다. 각자 원하는 사양을 선택해도 좋은데, 나는 프리티어 버전인 t2.micro를 선택하겠다. '다음:인스턴스 세부 정보 구성'을 선택하자. 인스턴스 세부 정보 구성 단..
-
django create-message by FBVProject using python/Cloning Airbnb 2021. 4. 23. 17:19
url 설정 config/urls.py urlpatterns = [ path("conversations/", include("conversations.urls", namespace="conversations")), ] conversations/urls.py from django.urls import path from . import views app_name = "conversations" urlpatterns = [ path( "conversation-list/", views.conversationList, name="conversation-list", ), ] templates pages/conversations/conversation_detail.html {% extends 'base.html' %..