React :Context API란 https://velopert.com/3606 를 참고해서, 조금더 내용을 보강하여 리덕스와의 비교를 통해 느낀점을 보태 정리한 내용입니다. | 시작하기에 앞서 3월말에 리액트 16.3 이 정식 릴리즈가 되고 기존에 존재하던 Context API 가 새로워졌습니다. 이렇게, 새로워진 Context API 에 대해서, 한번 자세히 다뤄볼것입니다. | Context의 용도 주로, 애플리케이션으로 전역적으로 데이터가 사용되야 할 때 사용됩니다. 기존의 Context API 도 전역적으로 데이터를 관리하는 용도로 사용할 수는 있었지만, 사용성이 조금 불편해서 자주 사용되지는 않았다고 합니다. 주로, redux, react-router, styled-components 등이 기..
Frontend Skills:모듈, browserify, polyfill과 babel | 모듈 : model, module :라틴어 modulars에서 따왔으며, 어원이같다.js는 원래 전역객체만 있었다.ember, backbone.js 같은게 등장하면서 client 코드가 복잡해졌다. -> 모듈의 필요성 > 모듈의 전개과정 IIFE module pattern -> require.js (AMD) -> common.js / node -> import참고하면 좋을글 : JavaScript 표준을 위한 움직임: CommonJS와 AMDhttps://d2.naver.com/helloworld/12864> 모듈의 등장 js파일을 쪼개야하는경우가 있었다. 그럴땐, 각각의 스크립트를 일일히 다넣어줬다. ex) 문제점..
Webpack - 웹팩 4 뽀개기 (개발하기 sourcemap, 개발서버 setting(webpack dev server)
Webpack :웹팩 4 뽀개기 (개발하기 sourcemap,서버 setting(webpack dev server ) 이 글은 웹팩 4 공식사이트를 번역하여 정리한 글입니다. 피드백 환영합니다! | Using source maps웹팩이 코드를 번들링할때, 에러를 원래파일에서 트래킹하기가 어려워집니다.예를 들어, a.js ,b.js c.js라는 세가지 파일을 bundle.js라는 하나의 파일로 번들링했을때, 하나의 파일이 에러를 나타내면 에러는 단지 bundle.js파일에 에러가 있다고만 말할것입니다. 이것은 정확히 어디서 에러가 났는지 확인하지 못하게 합니다.쉽게 에러를 트래킹하기 위해서, 자바스크립트는 source map이라는 것을 제공합니다. 컴파일 된 코드를 원래 소스코드로 맵핑을 해주는 역할을 합..
React- 리액트교과서 8장 학습내역 (확장성을 이용한 React 고차 컴포넌트-HOC)
React:확장성을 이용한 React 고차 컴포넌트 HOC | 시작하기에 앞서 다른 컴포넌트에서도 공통적으로 사용할 약간의 기능을 기존 컴포넌트에도 적용하려면 어떻게 해야할까? 이는 개발확장성의 문제다. 코드베이스가 늘어날때 코드의 확장성 문제를 해결 할 수 있는 리액트의 기능과 패턴이 있다. 예를들어 고차 컴포넌트는 컴포넌트의 기능을 향상 시킬수 있다. 고차 컴포넌트를 활용해, 효율적인 작업을 할수 있게 된다.| 코드 재사용을 위한 리액트 고차 컴포넌트 생성하기 예를 들어 각 개발자는 버튼,이미지,링크에 같은 기능을 수행하면서 서로 다른 시각적표현을 적용하려고 한다. 아마도 메서드를 만든후 이벤트 핸들러에서호출할 수 있게 하면 되는데, 고차컴포넌트가 더 우아한 해결책이 된다.고차 컴포넌트를 이용하면 컴..
Webpack :웹팩 4 뽀개기 (Concepts) 이 글은 웹팩 4 공식사이트를 번역하여 정리한 글입니다. 피드백 환영합니다! | 개념(Concepts) 웹팩은 자바스크립트 application의 static 모듈 번들러 이다. 웹팩이 application을 처리할때 내부적으로 모든 모듈들이 프로젝트에서 어디에서 필요한지의존성 그래프를 바탕으로 하나 또는 더 많은 수의 bundle을 만들어낸다. 4.0버전 이후에 웹팩은 프로젝트를 bundling할때 configuration 파일이 필요하지 않게 되었다. 그럼에도 불구하고 configuration 작업은 필요에 맞게 작업을 하기 위해서는 필요하다. 시작하기에 앞서 중요한 개념들을 알아야한다.EntryOutputLoadersPlugins| Entry 엔트..
React - 웹앱에서 휴대폰으로 찍은 사진 업로드시 이미지 회전해서 나올때 해결방법
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..
Frontend Skills -Babel 설치하기, 그리고 spread operator es5코드로 바꾸기
Frontend Skills:Babel 설치하기, 그리고 spread operator es5코드로 바꾸기 | Babel 전역적으로 설치 npm install babel-cli -g | spread operator가 사용된 코드를 es5 코드로 바꿀 js파일 생성 # script.js window.onload = function() { var btn = document.querySelector(".btn"); var obj = { test: 1, test: 1, test: 1 }; let code; btn.addEventListener("click", function() { alert("Hello world"); code=({ ...obj }); });}; | spread operator 관련 플러그인 설..