Sumin's Blog

FireBase 아주 빠르게 무언가를 시작할 수 있도록 도와줌(아이디어를 구상중일 때 많이 사용, 비즈니스 용으로는 많이 사용하지 않음) Securing the Keys react app에서 환경변수를 설정하려면REACT_APP_으로 시작해야함 key들을 .env에 저장 에 저장하는 이유? file에 .env를 작성한다면 .env에 쓴 키들은 git에 올라가지 않음 -> 보안상의 이유로 key,URL 들은 비공개 하지만 React application을 실행하면 서비스를 위해 빌드하고 웹사이트를 띄우면 create-react-app은 이 코드들을 실제 값들로 변환시켜 공개됨(단순히 github에 key를 업로드하지 않기 위함) Router Setup Fragment ( ): 많은 요소들을 render하고..

React Hooks Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줌 1.0 Introduction to useState class component로 작성한 코드class Appugly extends React.COmponent{ state={ item:1 } render(){ const{item}=this.state; return( Hello CodeSandbox {item} Start editing to see some magic happen! Increment Decrem..

#1 셋업 import React,{Component,Fragment} from "react"; import "./App.css"; class App extends Component{ render(){ return ( Hello; Hello; ); } } export default App; class명 2개 사용 안좋음 .button{ border-radius:50px; padding:5px; min-width:120px; color:white; font-weight:600; -webkit-appearance:none; cursor:pointer; } .button:active, .button:focus{ outline:none; } .button--success{ background-color:#2ec..

6.4 Redirecting function Detail({location}){ console.log(location); return Hello ; } 문제 location의 props들이 console에 나타나지만 poster를 눌러서 movie-detail에 들어간 경로가 아닌 url에 /movie-detail이라고 쳐서 들어간 경우, state가 undefined라고 뜸 해결 방법 import React from 'react'; class Detail extends React.Component{ componentDidMount(){ const{location,history}=this.props; if(location.state===undefined){ history.push("/");..

6.3 Sharing Props Between Routes route props function About(props){ console.log(props); } About console에서 4개의 props를 볼 수 있음 (history, location, match, staticContext) 아직 about으로 전송되지 않은 react-router에 의해서 넣어진 props들 Route에 있는 모든 router들은 props를 가짐 function Movie({year,title,summary,poster,genres}){ return ( {% raw %}{% endraw %} {title} {year} {genres.map((genre,index)=>( {genre} ))} {summary.slic..

6.2 Building the Navigation 목표 : 네비게이션 (버튼) 만들기 할 일 import Navigation from "./components/Navigation"; 추가 function App 안에 추가 import React from "react"; function Navigation(){ return Home About } // href는 HTML로 페이지를 새로고침시킴 // Home 과 About을 눌러보면 페이지가 새로고침됨 // 리액트가 죽고 새 페이지가 새로고침 export default Navigation; link를 사용해야함 페이지 새로고침 대신 About과 Home페이지 들어가짐 Link를 사용할 경우, Link는 라우터 안에 있어야함 import React from ..

6.0 Getting Ready for the Router react-router dom : 네비게이션을 만들어주는 패키지 npm install react-router-dom -components 폴더에 , 넣기 routes 폴더에 ,, 넣기 코드 로 옮기기 import React from 'react'; function App(){ return something; } export default App; something이라는 문자만 나옴 react-router dom을 통해 와 에 접근하는 방법 알아야함

6.1 Building the Router 라우터 : url을 확인하고 우리가 라우터에게 무엇을 명령했느냐에 따라 알맞은 component를 불러옴 import { HashRouter,Route} from "react-router-dom"; 추가 import { HashRouter,Route} from "react-router-dom"; import Home from "./routes/Home"; import About from "./routes/About"; function App(){ return ; } HashRouter 먼저 만들고 Route 넣어줌 Route에는 스크린을 넣어주는 것 , 원하는만큼 path를 만들 수 있음 기본 url 들어오면 Home component 보여줌 path about..

5.0 Deploying to Github Pages gh-pages 설치 npm i gh-pages 웹사이트를 guthub의 github page 도메인에 나타나게 해줌 에서 home page 추가 "homepage":"https://suminRoh.github.io/movie_app_2021/"} scripts에 deploy 추가 "deploy":"gh-pages " 명령어 만들기 deploy : build 폴더를 upload predeploy: npm run build 에서 title 바꾸기 -Movie App https://suminroh.github.io/movie_app_2021/ 링크로 내가 만든 Movie app 사이트 접속 가능 !! 5.1 Are we done? state를 갖기 위해 ..

4.4 Styles Timelapse * { box-sizing: border-box; } body { margin: 0; padding: 0; background-color: #eff3f7; height: 100%; } html, body, #potato, .container { height: 100%; display: flex; justify-content: center; } .loader { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-weight:300; } .movies { display: flex; justify-content: space-between; align-item..