전체 글
-
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)..
-
Deploying to Netlify배포 2019. 11. 28. 22:09
https://www.netlify.com/ static component를 가지고 함께 작동함(우리의 웹사이트) 깃허브페이지 배포와 마찬가지로 프론트엔드에서만 작동함(백엔드 작업시 동작X) 내 마스터에 푸쉬할때마다 자동으로 yarn build를 실행할꺼임 build폴더에 자동으로 빌드해줌! github로 배포하는것보다 편리함! pash만 해주면 알아서 모든게 자동으로! 역시나 마찬가지로 hashRouter로 해야 정상작동됨 package.js에있는 "homepage":""주소를 변경해줘야함
-
GitHub pages에 배포(Deploy)배포 2019. 11. 28. 20:56
gh-pages.. yarn add gh-pages branch를 gh-pages라 부름 어떤 HTML을 push하면 HTML은 index를 갖는데, 이렇게 되면 website는 무료로 제공됨 하지만, Branch를 만드는건 고통임 (merge,push등등..(git의 기능 용어들) 하는게 귀찮음) 그래서 gh-pages가 존재하는거임. 자동으로 돌아감. 주의할점, 깃허브에 올라간 프로젝트여야함 Scripts에 다음과 같이 작성 "deploy": "gh-pages -d build", "predeploy": "yarn run build" "homepage": "https://wjdwndtlr.github.io/nomflix", { "name": "nomflix", "version": "0.1.0", "pr..
-
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:..
-
Detail Container.js 2카테고리 없음 2019. 11. 23. 14:33
DetailPresenter.js 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%; background-image: url(${props => p..
-
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..