React 프로젝트 환경을 쉽게 구성할 수 있게 해주는 CRA 보일러 플레이트는 webpack 설정 등의 설정 파일을 숨김으로써 귀찮고 두려운 webpack 세팅에서 벗어날 수 있다는 이점을 가지고 있다. (기술 부채를 덮어둔다면) 다만 webpack 설정을 숨기게 되면서, hot-loader와 같이 webpack 설정과 긴밀하게 연결된 일부 의존성 모듈의 적용에 있어 제약을 가지게 된다. 이러한 문제는 eject(ejection: 숨겨진 설정 파일 창고 대방출) 명령어를 통해 설정 파일을 추출 후 직접 관리하여 해결할 수 있으나, 이 경우 CRA의 모든 설정을 직접 유지보수하게 되면서 CRA의 장점인 one Build Dependency를 잃게 된다. (cra eject는 되돌릴 수 없다는 게 큰 마음..

JS에서 비동기 http 통신을 위한 방법은 대표적으로 3개(Ajax, Axios, fetch)가 있다. 이 중 내가 실제로 사용해본건 Ajax와 fetch뿐인데, 문득 각 방법별로 장단점이 뭔지 궁금해서 이번 기회에 정리해두려 한다. Ajax Asysnchronous JavaScript And XML의 약자로, 자바스크립트에서 백그라운드 HTTP통신이 가능하게 만든다. http통신의 response와 request를 자바스크립트에서 비동기적으로 다룰 수 있다. 사실 뜻 자체가 비동기 자바스크립트라서, 근래엔 비동기 통신을 하는 자바스크립트 자체를 Ajax로 통칭하기도 한다. 새로고침이 필요 없다는 점 때문에 Google Gmail, Map에서 사용되어 주목받기 시작했다. Ajax라 함은 보통의 상황에서..

/* In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects. */ JS에서 함수는 객체로 취급된다. 이유는 객체가 가지고 있는 속성, 기능을 모두 가질 수 있기 때문이다. Callback이란 Observer 디자인 패턴에서 나온 개념으로, 객체의 상태변화(이벤트) 발생시에 이 사실을 함수로 전달하는 데 사용되었다. 알게 모르게 이미 많이 사용했..

JS는 함수형 프로그래밍 언어처럼 주로 사용된다. 물론 ES6부터 js class등이 도입되는 등 객체지향 언어의 장점을 취하려는 여러 변화들이 있었고 앞으로도 있을테지만, 기본적으로는 그렇다는 말이다. 여태까지 내가 접했던 java나 python은 모든 것이 객체를 기반으로 동작한다. js는 완벽한 함수형 프로그래밍 언어는 아니지만 함수형 프로그래밍 언어 스타일을 사용하고 있다. 함수형 프로그래밍의 원칙은 다음과 같다. - 입출력이 순수해야 함 (순수함수) - 부작용(부산물)이 없어야 함 - 함수와 데이터를 중점으로 생각 입출력이 순수하다는 것은, 파라미터로 하나 이상의 인자(파라미터)를 받고, 받은 인자를 처리해서 반드시 결과를 return해야 한다는 뜻이다. 받은 인자를 제외한 다른 변수는 사용하지..

프로젝트 내에서 웹 프론트엔드 포지션을 맡고, 처음 한 과제 중 하나는 howto 페이지였다. 과제 목표는 inteliJ 페이지처럼 만드는 것. IntelliJ IDEA overview - Help | IntelliJ IDEA IntelliJ IDEA overview IntelliJ IDEA is an Integrated Development Environment (IDE) for JVM languages designed to maximize developer productivity. It does the routine and repetitive tasks for you by providing clever code completion, static code analysis, a www.jetbrains...

Array.sort(정렬함수) JS에서 임의의 Array를 정렬할 때 sort 메소드를 사용한다. 정렬함수는 정렬 순서를 결정하는 데 사용되는 함수로, 정렬함수가 없는 기본값 상태에서는 오름차순, ASCII 문자 순서대로 정렬된다. 배열 안의 요소를 ASCII 순서대로 정렬하다 보니, 숫자 크기 순서대로 정렬이 될 것 같지만 실제 결과는 다르다. var arr = [1, 2, 10, 9, 4, 2]; var sort_default = arr.sort(); console.log(sort_default); 실제 숫자의 크기가 아닌, ASCII 값으로 정렬되어 이 부분이 문제가 될 수 있다. 즉, 직관적이지가 않다. 이 문제를 해결하기 위해 정렬 함수를 정의해서 사용해야 한다. 정렬함수에 인수를 넣고 아래의 ..