이안의 평일코딩

헤더 스크롤 시 디자인 변경 Vue에서 제작한 코드를 React로 변환하는 작업 중인데 코드가 달라서 리액트 버젼으로도 올려본다. iancoding.tistory.com/216 [Vue] 스크롤 시 헤더 색 변경 1. 먼저 data에 scrollPosition을 null값으로 넣어준다. 2. updateScroll()이라는 메소드를 통해 현재 윈도우의 스크롤 위치를 scrollPosition에 저장한다. 3. mounted를 통해 위의 updateScroll()이 발생하도록.. iancoding.tistory.com Vue는 위의 블로깅을 참조. Header.js import React, {useState, useEffect} from 'react'; import "./css/Header.css"; fu..

react-reveal 꽤 유용한 사이트다. 간편하게 애니메이션을 구현할 수 있다. www.react-reveal.com/ Home - React Reveal React Reveal React Reveal is high performance animation library for React. It's MIT licensed, has a small footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll effects. Scroll down to see it in action. www.react-reveal.com 먼저 터미널에 아래와 같이 입력하여 설치한다. npm in..

리액트 이미지 경로 보통 public에 이미지들을 다 집어넣고 쓰는 편인데 정말 간편한 방법이 있어 공유하고자 한다. 먼저 public에 img라는 폴더를 만들어준다. 그리고 src에서 작업하는 곳에서 이미지를 불러올 때 경로를 img/를 넣으면 아주 쉽게 불러온다. import React from 'react'; import "./Card1.css"; function Card1() { return ( ) } export default Card1; 간단하쥬?

리액트 IE11 크로스 브라우징 문제 해결 Vue3로 신나게 개발을 완료하니 갑자기 익스플로러에서는 babel, polyfill을 이용해도 지원을 안해준다는 청천벽력같은 소리에 다시 React 고향으로 돌아왔다. react-app-polyfill 먼저, 터미널에 react-app-polyfill을 설치한다. (개인적으로 yarn이 더 안정적이고 오류가 덜 떠서 추천) yarn add react-app-polyfill 또는 npm install react-app-polyfill package.json development에 "ie 11"을 추가해준다. index.js react-app-polyfill/ie11과 /stable을 import해준다. import 'react-app-polyfill/ie11';..

리액트 초기 셋팅 최근 Vue를 계속 사용하다보니 리액트 초기 설정을 까먹어서 다시 기억하기 위해 써본다. 분명히 업로드한 것 같은데 블로깅이 안되어 있어서 다시 씀. 먼저, Nodejs 최신버전이 필요하다. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 그리고 터미널(Mac) 또는 명령 프롬프트(Windows)에 아래와 같이 입력한다. npx create-react-app 프로젝트명 그리고 IDE에서(나는 vscode) 프로젝트명으로 만든 폴더를 open한 뒤 아래와 같이 입력하면 실행된다. npm run start 또는 yarn start (vue에서는 주구..

client/src index.js import 'react-app-polyfill/ie9'; import 'react-app-polyfill/ie11'; import 'core-js'; import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; import * as serviceWorker from './serviceWorker'; import { BrowserRouter } from "react-router-dom"; import Reducer from './_reducers'; import { Provider } from 'react-redux';..

지난 블로깅에서는 state를 저장하고 사용하는 방법만 알아보았고, 이번시간에는 데이터 수정하는 방법에 대해서 알아보도록 하자. reducer 함수 state 데이터의 수정방법을 미리 정의하는 함수이다. state 초기값과 데이터 수정방법을 넣는다. function reducer(state = 초기값, 액션) 1. '수량증가'라는 데이터 수정방법 이름을 작명해서 넣어준다. (액션.type === 수정방법이름) 2. if문 안에 '수량증가'라는 요청이 들어올 경우 else if문에는 '수량감소'라는 요청이 들어올 경우 수정방법 정의. 3. else문 안에는 둘 다 안들어온 경우 기본 state를 결과값으로 가져올 것을 수정방법 정의. index.js let 초기값 = [ {id: 0, name: '멋진신발..

Redux란? Redux라는 라이브러리는 모든 컴포넌트 파일들이 같은 값을 공유할 수 있는 저장공간을 생성가능케 해주고 state 데이터를 관리하는 기능을 가지고 있다. Redux를 쓰는 여러가지 이유 중 하나는 props 전송없이 모든 컴포넌트가 state를 가져다 쓰는 것이 가능하기 때문에 컴포넌트가 매우 깊숙히 있다면 state를 전달하기 위해 props를 수십번 써야하고 귀찮은데 redux를 세팅하면 Context API와 같이 props를 수십번 쓸 필요없이 바로 꺼내쓸 수 있게 해준다. 설치방법 터미널에 yarn add redux react-redux 를 쳐서 2개의 라이브러리를 설치한다. (또는 npm install redux react-redux) 세팅하기 index.js에 를 import..