Ideveloper's software blog

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..

Webpack:Webpack 0부터 CRA 까지 | 웹팩 사용전번들러 (browserify)reload (browser sync)transform (babel, babelify(browserify 와 연결))| 웹팩 사용후번들러 (webpack)reload (webpack dev server)transform (babel-loader)웹팩이 cache를 사용해 속도를 향상 시킴.hot module: 바뀐 위치에 다른 모듈을 끼어넣음module: 모든것이 모듈이다. browserify (오직 js 빌드) 웹팩(모든 파일을 빌드) | 바벨6->바벨7babel-preset-env -> @babel/preset-env.babelrc-> babel.config.js | 웹팩3->웹팩4webpack-dev-serv..

일상:주니어 개발자의 Open Source 컨트리뷰트 내역 정리 | 시작하기에 앞서, 아직은, 웹개발을 회사에서 시작한지 7개월차가 되어가는 미천한 주니어 개발자이기에 (핑계), 각 오픈소스들의 작은 이슈들을 처리해보거나, 다른 사람들이 올렸다가 reject 당한 이슈들을 다시 부족한점을 고쳐 수정해 pr을 올리는 등등, 오픈소스의 core한 부분은 아니지만 작은 부분들을 기여를 해보고있다. 오픈소스를 기여했을 때 생긴 왠지모를 자신감이나(자만은 금지), 성취감등등을 얻었기 때문에 지속적으로 해나가고 있는 것같다. 앞으로도 기여를 하면 이 포스팅 글에 정리해 박제할 예정이다. > React facebook의 React repo https://github.com/facebook/react/pull/1316..

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) 문제점..

Machine Learning :특성교차, 정규화:단순성 1. 특성교차 | 시작하기에 앞서 선형문제: 여러 변수에 따라 항목을 구분하도록 선을 긋는 것 (ex: 스팸 or 스팸x) 그림1. 선형문제파란색 점은 병든나무 주황색 점은 건강한 나무위 예제에서는 병든나무와 건강한 나무를 깔끔하게 구분하는 선을 그릴 수 있음. 이 선을 기준으로 나무의 상태를 적절히 예측 가능 그림2. 하나의 선으로 두 클래스를 구분 할 수 없음. 위 그림에서 볼 수 있듯이, 병든 나무와 건강한 나무를 깔끔하게 구분하는 직선 하나를 그릴 수 없음. 따라서 이 문제는 비선형 문제. 어떤 선을 그려도 나무의 상태 예측 불가! | 교차 곱( 특성교차) 그림 2와 같은 비선형 문제를 해결하려면 특성 교차를 만들어야 함.특성 교차는 두개 ..

Webpack :웹팩 4 뽀개기 (개발하기 sourcemap,서버 setting(webpack dev server ) 이 글은 웹팩 4 공식사이트를 번역하여 정리한 글입니다. 피드백 환영합니다! | Using source maps웹팩이 코드를 번들링할때, 에러를 원래파일에서 트래킹하기가 어려워집니다.예를 들어, a.js ,b.js c.js라는 세가지 파일을 bundle.js라는 하나의 파일로 번들링했을때, 하나의 파일이 에러를 나타내면 에러는 단지 bundle.js파일에 에러가 있다고만 말할것입니다. 이것은 정확히 어디서 에러가 났는지 확인하지 못하게 합니다.쉽게 에러를 트래킹하기 위해서, 자바스크립트는 source map이라는 것을 제공합니다. 컴파일 된 코드를 원래 소스코드로 맵핑을 해주는 역할을 합..

일상:일일커밋 100일 회고 https://milooy.wordpress.com/2015/10/08/daily-commit/ https://blog.outsider.ne.kr/1141 를 참고 했습니다. :) 우연찮게 일주일동안 일일커밋을 하게되서 ㅎㅎ.. 이왕 이렇게 된김에 일일커밋을 되는데까지 해보자!라는 생각으로 한 일일커밋이 100일을 훌쩍넘겼다 (정확히는 103일..ㅎㅎ) 100일이 넘으니, 하루에 한번은 꼭 (주말이나 공휴일이더라도) 코드를 작성하거나 학습하여 커밋을하는 습관이 몸에 벤거 같다.커밋은 아래와 같이 구성된것 같다. 1. Side project2. TIL3. 오픈소스 컨트리뷰트(컨트리뷰트한게 매우 작은부분이라 부끄럽긴 하지만 ㅎㅎ..)4.나만의 리액트 boilerplate 만들기5..