React:create-react-app 에서 mobx 사용하는방법(+오류해결) | 순서create-react-app으로리액트 프로젝트를 만든다.yarn eject로 eject를 한다.npm install --save mobx mobx-react컴포넌트 구성#App.js import React, {Component} from 'react'; import {observer} from 'mobx-react';import Devtools from "mobx-react-devtools"; @observer class App extends Component { render() { return ( Counter{this.props.store.count} + - ) } handleDec=()=>{ this.props..
React :Context API란 https://velopert.com/3606 를 참고해서, 조금더 내용을 보강하여 리덕스와의 비교를 통해 느낀점을 보태 정리한 내용입니다. | 시작하기에 앞서 3월말에 리액트 16.3 이 정식 릴리즈가 되고 기존에 존재하던 Context API 가 새로워졌습니다. 이렇게, 새로워진 Context API 에 대해서, 한번 자세히 다뤄볼것입니다. | Context의 용도 주로, 애플리케이션으로 전역적으로 데이터가 사용되야 할 때 사용됩니다. 기존의 Context API 도 전역적으로 데이터를 관리하는 용도로 사용할 수는 있었지만, 사용성이 조금 불편해서 자주 사용되지는 않았다고 합니다. 주로, redux, react-router, styled-components 등이 기..
React:확장성을 이용한 React 고차 컴포넌트 HOC | 시작하기에 앞서 다른 컴포넌트에서도 공통적으로 사용할 약간의 기능을 기존 컴포넌트에도 적용하려면 어떻게 해야할까? 이는 개발확장성의 문제다. 코드베이스가 늘어날때 코드의 확장성 문제를 해결 할 수 있는 리액트의 기능과 패턴이 있다. 예를들어 고차 컴포넌트는 컴포넌트의 기능을 향상 시킬수 있다. 고차 컴포넌트를 활용해, 효율적인 작업을 할수 있게 된다.| 코드 재사용을 위한 리액트 고차 컴포넌트 생성하기 예를 들어 각 개발자는 버튼,이미지,링크에 같은 기능을 수행하면서 서로 다른 시각적표현을 적용하려고 한다. 아마도 메서드를 만든후 이벤트 핸들러에서호출할 수 있게 하면 되는데, 고차컴포넌트가 더 우아한 해결책이 된다.고차 컴포넌트를 이용하면 컴..
React :웹앱에서 휴대폰으로 찍은 사진 업로드시 이미지 회전해서 나올때 해결방법 (how to solve auto rotated image upload in react) | 시작하기에 앞서 휴대폰으로 찍은 사진들은 EXIF orientation 정보들을 사진에 넣게 된다. 따라서, 이미지를 웹에 업로드 했을때, 회전되어서 나오는 경우가 있는데, 이 정보들을 제거해줘야 원본사진대로 제대로 나오게 된다. 이를 해결하기 위한 라이브러리를 아래에 소개한다. https://github.com/rricard/react-exif-orientation-img | 사용방법 사용방법은 간단하다. 기존 tag 들을 컴포넌트로 바꿔주기만 하면 된다.
React :리액트 앱 배포시 cache 안남게하기 https://stackoverflow.com/questions/49604821/cache-busting-with-create-react-app 참고 아래와 같이 unregister를 해주면 serviceworker가 작동하지 않아 캐시가 남지 않는다. This is probably because of your web worker.If you look into your index.js file you can seeregisterServiceWorker(); Never wondered what it did? If we take a look at the file it got imported from we can see// In production, we r..
React:리액트 컴포넌트와 AWS S3연동해 사진 올리고 그 정보 받아오기 https://www.beforecoding.net/nodejs/fileupload 참고 [Back end] | API 서버 초기 설정 쪽 const fileUpload = require('express-fileupload'); app.use(fileUpload()); //추가 | 라우터 쪽 # router.js router.post('/v3/menus/uploadImage', menus.uploadImage); # menus.js var AWS = require('aws-sdk'); async function uploadImage(req, res) { const file = req.files.file; //아마존 S3에..
React:React에서 폼 다루기 아래 내용은 리액트 교과서를 읽고 학습한 내용입니다. | 시작하기에 앞서 폼 요소는 사용자로부터 텍스트 같은 데이터나 클릭같은 조작을 전달받는데 사용하므로 웹 개발에서 중요한 부분이다. | React에서 폼을 다루기 위한 권장 방법 일반적인 html에서 입력 요소를 다룰 때는 페이지의 DOM이 해당 요소의 값을 DOM 노드에서 관리한다. 즉 DOM을 저장소로 관리한다.전통적인 HTML의 폼 요소는 사용자 입력에 의해 상태가 변경된다. 그렇지만, React는 UI를 묘사하기 위해 선언형 스타일을 사용하므로, 상태를 적절히 반영하려면 입력이 동적이여야 한다. 폼 요소를 사용자 입력을 이벤트로 전달받아 상태와 뷰를 동기화 하는 방식으로 사용하는데, 위와 같은 방식을 단방향 ..
React:React에서 이벤트 다루기 정적인 UI를 사용하는 경우는 많지 않다. 사용자 조작에 반응 할 수 있는 영리한 UI를 만들어야 하는 경우가 대부분이다. 이벤트에 대한 지식은 7장에서 살펴볼 폼과 폼 요소를 다루는 데도 필요하다. React는 특정 이벤트만을 지원하므로 리액트가 지원하지 않는 이벤트를 다루는 방법도 살펴보자. | React에서 DOM이벤트 다루기 속성으로 사용하는 이벤트 이름은 표준 W3C DOM 이벤트를 onClick, onMouserOver 처러 카멜 표기법으로 작성한다. 다음 예제 코드에서는 React에서 사용자가 버튼을 클릭했을때 실행할 이벤트 리스너를 정의하고 있다. 이벤트 리스너에서 this를 콘솔에표시하도록 했다. 여기서 event 객체는 내장DOM이벤트객체를 개선한..