전체 글
-
리액트 withRouter를 활용한 현재 페이지 인식React 2019. 11. 11. 07:30
withRouter withRouter 로 컴포넌트를 감싸면 컴포넌트에 props안에 history,location등등의 오브젝트들이잇어서 이놈들을 이용해서 앞페이지 뒷페이지 왔다갔다 할수있음 현재 어떤 페이지에 있는지 체크할수있게됨 언제나 current = true임 import React from "react"; import { Link, withRouter } from "react-router-dom"; import styled from "styled-components"; // withRouter덕분에 어떤 컴포넌트와도 연결할 수 있게됨 const Header = styled.header` color: white; position: fixed; top: 0; left: 0; width: 100%;..
-
리액트 withRouter를 활용한 현재 페이지 인식React 2019. 11. 9. 20:43
withRouter withRouter 로 컴포넌트를 감싸면 컴포넌트에 props안에 history,location등등의 오브젝트들이잇어서 이놈들을 이용해서 앞페이지 뒷페이지 왔다갔다 할수있음 현재 어떤 페이지에 있는지 체크할수있게됨 언제나 current = true임 import React from "react"; import { Link, withRouter } from "react-router-dom"; import styled from "styled-components"; // withRouter덕분에 어떤 컴포넌트와도 연결할 수 있게됨 const Header = styled.header` color: white; position: fixed; top: 0; left: 0; width: 100%;..
-
React에서 CSS 작업React 2019. 11. 9. 15:42
짚고 넘어가기.. 리액트를 사용하는 가장 핵심은 어플리케이션 캡슐화다. 한 컴포넌트에 html, javascript, css등을 다 가지는.. 리액트에서 CSS 작업 방법 create-react-app 덕분에 Header.module.css 이런식의 css파일 이름 설정이 가능 전역으로 className을 사용하는게 아닌, 로컬로 사용하게끔 설정해준것임 (한 파일에 한css라고 생각) Header.css => Header.module.css import "./Header"; => import styles from "./Header.module.css"; css Import 형식에서 js Import 형식으로 전환 임의로 클래스이름이 정해짐 jsx에서 사용예시: import React from "react..
-
리액트 라우터 2부React 2019. 11. 9. 15:38
BrowserRouter HashRouter와는 다른 방식인 BrowserRouter이다. (URL에 # 표시가안됨) BrowserRouter는 컴포넌트를 동시에 가질수있다. import { BrowserRouter as Router, Route } from "react-router-dom"; exact를 사용하지 않을시 /tv와 /tv/popular 경로가 서로 매칭되어 둘이 같은 화면에 보여짐 /tv/popular 경로로 가면 tv와 popular이 동시에 나타남 import React from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; import Home from "Routes/Home"; import T..
-
리액트 라우터 1부React 2019. 11. 9. 15:35
리액트 라우터? React App에게 어떤 경로에서 시작하고 어떤경로로 어떻게 이동해야한다는걸 알려주기위해 사용(Ex. home에서 시작..) react-router-dom yarn add react-router-dom 코드 HashRouter를 사용 (url에 #이 표시된다는 단점이있다.) App.js Fragments는 내가 원하는 만큼 컴포넌트를 리턴할 수 있게 해줌 라우터는 원래 하나밖에 리턴이안됨! import React from "react"; import Router from "Components/Router"; function App() { return ( // Fragments ); } export default App; Router.js HashRouter은 react-router-do..
-
리액트 프로젝트 설정React 2019. 11. 9. 15:18
프로젝트 설정 create-react-app 설치 yarn global add create-react-app, create-react-app => 계속해서 업데이트를 해줘야한다는 단점이있어서 나온게 npx! npx yarn로 install yarn global add npx npx create-react-app npm으로 install npm i npx -g npx create-react-app npx는 npm 처럼 create-react-app같은 모듈을 사용할 수 있게 하는 작은 모듈이다. npx는 최신 버전의 create-react-app을 다운 받아서 실행하고, 끝나면 컴퓨터에서 삭제해줌 한마디로 사용하지 않는 오래된 버전의 것들을 내 컴퓨터에 저장하지 않게 해줌 Ex) npm i npx -g ,..
-
11월.. 블로그를 옮기다.TIL(Today I learned) 2019. 11. 9. 14:52
기존 블로그 (https://wjdwndtlr.github.io/tags/#TIL(Today%20I%20learned) Tags 개발과 일상을 담는 공간입니다. wjdwndtlr.github.io 9월.. jekyll과 깃허브를 연동해서 사용한 블로그를 만들었다. 여러 시행착오를 겪으며 하루 하고도 이틀을 꼬박새며 만들었을때의 그 기분을 잊지못한다. 10월.. TIL을 열심히 작성하며, 배운것을 기록해 나갔다. 11월.. 원인모를 오류에 블로그에 글이 올라가지 않았다.. jekyll build --verbose 로 코드오류를 분석해보고 스텍오버플로에서 원인을 알아봤지만 해결법이 마땅치않았다. 좀더 붙잡고 해결을해볼까도 해봤지만, 마침 기존 블로그에대해서 회의감을 느끼고있을때라 (블로그에 코드를 기록하고,..