본문 바로가기
Styled Component로 반응형 구축하기 2020. 5. 21. 반응형을 하려면 매번 @media (min-width: 770px) {}을 써줘야 한다. 하지만 만약 이걸 써야하는 컴포넌트가 엄청 많고, 한 컴포넌트 안에서도 내용이 많다면 이를 하나하나 치기에 번거롭고, 치다가 오타가 나서 이를 찾는데 오래 걸릴 수 있다. 따라서 전역에서 사용가능한 theme.js를 만들어 주는 것이 편하다. src > style > theme.js 어느 width에서 바뀔 것인지에 대한 break-point가 될 size에 정의해두고, theme안에 해당 사이즈로 @media안에 들어갈 내용을 정의해준다. 그 다음, 만들어진 theme.js를 전역에서 사용가능하게 index.js(혹은 메인)에 감싸준다. import { ThemeProvider } from "styled-compo..
[React/에러] 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 2020. 5. 1. 리액트를 시작하거나 git clone을 받은 후, npm install을 하고 npm start를 했음에도 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 에러가 뜰 때가 있다. 그럴 땐 npm을 업데이트를 해준 후, 다시 실행시킨다. npm update npm start 이때도 실행이 되지 않는다면, npm install -g react-scripts 를 실행하면 된다.
CRA에 ESLint와 Prettier 적용하기 2020. 4. 30. React의 코드는 최신 자바스크립트 코드로 작성하는 것이 일반적이지만, 아직 모든 브라우저에서 이를 지원해 주고 있지 않다. 따라서 웹팩이나 바벨을 설치하고 설정해야 하는데 페이스북에서 웹팩 없이 CRA를 제공해 주고 있다. CRA(Create-React-App)는 ES6 자바스크립트를 브라우저가 이해할 수 있는 ES5 코드로 변경해주는 툴이다. 리액트 초기 세팅 하기(2020/04/14 - React 초기 설치 명령어) 그럼 다시 ESLint와 Prettier가 무엇인지 알아보자. ESLint는 syntax나 code를 검사하는 도구(linting utiliy)이다. 특히 자바스크립트는 정적 컴파일을 하지 않는 인터프리터 언어이기에, 사소한 타이핑 실수로 잘못된 프로그램을 배포할 수 있다. 따라서 수..
React에서 구글맵 API 사용하기 2020. 4. 27. 구글맵 API를 사용하려면 우선 개인이 API KEY를 발급 받아야 한다. https://developers.google.com/maps/documentation?hl=ko 해당 사이트에서 'Maps JavaScript API'를 선택해 계정을 만들고, API 키를 발급받을 수 있다. 구글 정책이 바뀌면서 무료로 API를 사용하는 사람들도 결제 수단을 등록해야 지도가 정상적으로 띄워진다. API키를 발급 받았다면, 리액트에서 어떻게 쓰는지 알아보자. 먼저 구글맵 컴포넌트를 다운받아야 한다. npm install google-maps-react --save 그 후, 구글맵을 담을 컴포넌트에 아래 값을 주면 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2..
React 초기 설치 명령어 2020. 4. 14. React.js를 만들 때, 필요한 초기 세팅에 대해 알아보자. Node.js(https://nodejs.org/en/) 다운 후 버전 보기 node -v // output: v12.16.1 npm -v // output: 6.13.4 아무정보도 안뜨면 node.js 재설치 리액트 폴더 생성 // 리액트폴더를 생성하고 싶은 폴더로 가서 npx create-react-app 폴더명 cd 폴더명 npm run start Router 설치 npm install react-router-dom --save SaSS 설치 npm install node-sass --save Styled-Component 설치 npm add styled-components --save
Props, State, constructor() 2020. 4. 14. Props는 컴포넌트를 사용하는 부모에서 자식으로 전달하여 사용하고, State는 컴포넌트 내부에 존재하여 상태값을 변경한다. Props State 읽기 전용(read-only) 비동기 가능 수정할 수 없음 this.setState()로 값 변경 가능 상위에서 하위로 props 전달 하위에서 상위로 event를 통해 값 전달 모두 Object이며 화면에 보여줄 정보(상태)를 갖고 있음 Props, State 값이 바뀌면 reder()가 자동으로 호출 consturctor() (생성자 함수) - class의 instance가 생성될 때 항상 호출되는 함수 - 사용할 목적이 없다면 작성하지 않아도 됨 - this.props의 정의를 위해 super(props) 호출 필수 - 초기화 할 값들을 this.sta..
Default Export, Named Export 2020. 4. 13. 리액트는 각 컴포넌트마다 export 를 해줘야 다른 곳에서 사용할 수 있다. 이때 export의 방식은 두 가지가 존재한다. import React, { Component } from 'react'; 여기서 React가 default, { Component }가 named export이다. Default Export 컴포넌트 당 하나의 default export가 존재한다. default export로 변수, 객체, 함수, 클래스 모두 올 수 있으며, 해당 컴포넌트의 제일 마지막 줄에 작성하면 된다. export default 클래스명 Named Export 반면 named export는 식별자를 통해 import가 가능하다. 위에 있는 { Component }도 react 안에 이름이 저장되어 사용할..
React Lifecycle(생명 주기) 2020. 4. 12. 리액트의 컴포넌트가 어떻게 실행되고, 어떤 순서로 호출되는지에 대해 알아보겠다. 생명주기 도표를 보면 더 자세히 볼 수 있다. 컴포넌트는 '생성 => 업데이트 => 제거'의 생명 주기를 갖고 있다. 아래 목록에서 자주 사용되는 생명주기 메소드는 색을 표시하겠다. 나머지는 상대적으로 덜 사용된다. 마운트(생성) 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다. - consturctor() - static getDerivedStateFromProps() - render() - componentDidMount() 업데이트 props나 state가 변경되면 렌더(갱신)가 진행되며 순서대로 호출된다. - statis getDerivedStateFromProps() - shouldCompone..

티스토리툴바