React
-
TypeScript와 React를 같이쓰는법React/TypeScript (with- React) 2019. 12. 1. 15:20
TypeScript의 코드를 쓰는방법과, 컴파일 방법은 배우지않고, 리액트와 타입스크립트를 같이쓰는 방법만을 배움 npx create-react-app typescript-react-demo --typescript typescript-react-demo는 내 프로젝트 이름 --typescript는 타입스크립트와 같이쓴다는걸 알려주는 의미 fsconfig.json의 역할 타입스크립트의 룰을 정해준다. 예를 들어 cosnt sum = (a. b) => a + b ;할시 a 와 b 에 타입이 정해지지않았다는 에러와함께 동작이 정지되는데, 이런 귀찮음을 없애주려고 fsconfig.json에 "noImplicitAny": false라고 적어주면된다.
-
TypeScript 입문..React/TypeScript (with- React) 2019. 11. 30. 16:12
TypeScript란? 자바스크립트의 superset으로, 다른 언어 위에서 동작하는 언어이다. TypeScript = 자바스크립트 + 자바스크립트엔 없는 기능 TypeScript가 하는일 개발자들이 하는 실수를 줄여주고, 더 좋은 코드를 짤 수 있게 도와준다. TypeScript의 여러 기능 // 예시1 => 개발자의 의도와는 달리 "String2"가됨 const plus = (a,b) => a + b; console.log(plus("lalala",2)) // lalala2 // 예시1 해결방안 다른 예 => if문으로 거를수있지만 번거로움 const plus = (a,b) => a + b => { if(typeof a === "string") }; console.log(plus("lalala",2)..
-
React-HelmetReact 2019. 11. 23. 15:05
브라우저 제목을 바꾸고싶다. React Helmet yarn add react react-helmet 웹 사이트의 head를 수정하기 쉬움 사용 예시 import Helmet from "react-helmet"; Loading | Nomflix DetailPresenter.js import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; import Helmet from "react-helmet"; import Loader from "Components/Loader"; const Container = styled.div` height: calc(100vh - 50px); width:..
-
DetailPresenter.js 1React 2019. 11. 23. 13:10
DetailPresenter.js 한 div태그위에 또 다른 div를 올려서 포스터를 구현 import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; import Loader from "Components/Loader"; const Container = styled.div` height: calc(100vh - 50px); width: 100%; position: relative; padding: 50px; `; const Backdrop = styled.div` position: absolute; top: 0; left: 0; width: 100%; height: 100%; ba..
-
Rendering Poster ComponentReact 2019. 11. 21. 21:27
TVPresenter.js import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; import Section from "../../Components/Section"; import Loader from "../../Components/Loader"; import Message from "../../Components/Message"; import Poster from "../../Components/Poster"; const Container = styled.div` padding: 0px 20px; `; const TVPresenter = ({ topRated, popular..
-
Poster ComponentReact 2019. 11. 21. 20:32
Poster.js import React from "react"; import PropTypes from "prop-types"; import { Link } from "react-router-dom"; import styled from "styled-components"; const Container = styled.div` font-size: 12px; `; const Image = styled.div` background-image: url(${props => props.bgUrl}); height: 180px; background-size: cover; border-radius: 4px; background-position: center center; transition: opacity 0.1s ..
-
Children이란?React 2019. 11. 19. 23:48
Section.js import React from "react"; import PropTypes from "prop-types"; import styled from "styled-components"; import Section from "Components/Section"; const Container = styled.div` padding: 0px 10px; `; const HomePresenter = ({ nowPlaying, popular, upcoming, loading, error }) => loading ? null : ( {nowPlaying && nowPlaying.length > 0 && ( {nowPlaying.map(movie => movie.title)} )} {upcoming ..
-
#6 PresentersReact 2019. 11. 19. 21:39
Presenter 구조 HomePresenter.js import React from "react"; import ProTypes from "prop-types"; import styled from "styled-components"; const HomePresenter = (nowPlaying, upComing, popular, error, loading) => null; HomePresenter.ProTypes = { nowPlaying: ProTypes.array, upComing: ProTypes.array, popular: ProTypes.array, error: ProTypes.string, loading: ProTypes.bool.isRequired }; export default HomeP..