Ideveloper's software blog

React:확장성을 이용한 React 고차 컴포넌트 HOC | 시작하기에 앞서 다른 컴포넌트에서도 공통적으로 사용할 약간의 기능을 기존 컴포넌트에도 적용하려면 어떻게 해야할까? 이는 개발확장성의 문제다. 코드베이스가 늘어날때 코드의 확장성 문제를 해결 할 수 있는 리액트의 기능과 패턴이 있다. 예를들어 고차 컴포넌트는 컴포넌트의 기능을 향상 시킬수 있다. 고차 컴포넌트를 활용해, 효율적인 작업을 할수 있게 된다.| 코드 재사용을 위한 리액트 고차 컴포넌트 생성하기 예를 들어 각 개발자는 버튼,이미지,링크에 같은 기능을 수행하면서 서로 다른 시각적표현을 적용하려고 한다. 아마도 메서드를 만든후 이벤트 핸들러에서호출할 수 있게 하면 되는데, 고차컴포넌트가 더 우아한 해결책이 된다.고차 컴포넌트를 이용하면 컴..

Webpack :웹팩 4 뽀개기 (Concepts) 이 글은 웹팩 4 공식사이트를 번역하여 정리한 글입니다. 피드백 환영합니다! | 개념(Concepts) 웹팩은 자바스크립트 application의 static 모듈 번들러 이다. 웹팩이 application을 처리할때 내부적으로 모든 모듈들이 프로젝트에서 어디에서 필요한지의존성 그래프를 바탕으로 하나 또는 더 많은 수의 bundle을 만들어낸다. 4.0버전 이후에 웹팩은 프로젝트를 bundling할때 configuration 파일이 필요하지 않게 되었다. 그럼에도 불구하고 configuration 작업은 필요에 맞게 작업을 하기 위해서는 필요하다. 시작하기에 앞서 중요한 개념들을 알아야한다.EntryOutputLoadersPlugins| Entry 엔트..

Machine Learning:Google MLCC 1주차 (일반화: 과적합의 위험, 데이터 분할) | 과적합과적합 모델은 학습하는 동안 손실이 적지만 새 데이터를 잘 예측하지 못한다. 현재 샘플에 적합한 모델에서 새 데이터를 잘 예측할 것이라고 신뢰할 수 있는가?필요 이상으로 복잡한 모델을 만들면 과적합이 발생한다. 머신러닝의 근본적인 과제는 데이터 적합도를 유지하는 동시에 최대한 단순화하는 것이다.머신러닝의 목표는 숨겨진 실제 확률 분포에서 추출되는 새 데이터를 잘 예측하는 것이다. 하지만 모델에서는 모든 데이터를 볼 수 없으며 학습 데이터 세트에서만 샘플을 추출할 수 있다.14세기의 수도사이자 철학자인 William of Occam은 과학자는 복잡한 것보다 간단한 공식이나 이론을 선택해야 한다고 생..

Machine Learning -1주차 :손실줄이기 아래 내용은 구글 머신러닝 단기집중과정을 학습하고 발췌한 내용입니다. | 반복방식 머신러닝에서는 반복을 통해 손실을 줄인다.최적의 모델을 가능한 한 가장 효율적으로 찾는 것이 중요하다.그림 1. 반복방식의 모델 학습 위의 그림은 알고리즘이 모델을 학습하는 데 사용하는 반복적인 시행착오 과정을 보여준다.반복전략은 주로 대규모 데이터 세트에 적용하기 용이하여 머신러닝 에서 널리 사용 되고 있다.이 '모델'은 하나 이상의 특성을 입력하여 하나의 예측(y')을 출력한다. 쉬운 이해를 위해, 하나의 특성을 가지고 하나의 예측을 반환하는 모델을 생각해 보자,y′=b+w1x1b와 w1의 초기값은 무엇으로 설정해야 할까? 선형 회귀 문제에서는 초기값은 별로 중요치 않..

Machine Learning -1주차 :(ML소개, ML문제로 표현하기, ML로 전환하기 ) | ML 소개 소프트웨어 엔지니어로서 세가지를 잘할 수 있게 된다.1. 먼저 프로그래밍 시간을 줄일 수 있는 도구를 얻게 된다.( 짧은 시간에 더 안정적인 프로그램을 만들수 있다.)2. 제품을 맞춤 설정하여 특정 집단의 사용자에게 더 잘맞는 제품을 제공 할 수 있다.3. 머신러닝을 사용하면 프로그래머로서 수동으로 할 방법이 없어 보이는 문제를 해결할수 있다. 머신러닝은 문제에 관해 생각하는 방법을 바꾼다.수리과학에서 자연과학으로 초점이 바뀐다. 불확실한 세계를 관찰하고 실험을 하고 논리가 아닌 통계를 사용하여 실험 결과를 분석한다. | ML 문제로 표현하기 (지도) 머신러닝 ML 시스템은 입력을 결합해 이전에 ..

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코드로 바꾸기 | 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 관련 플러그인 설..