xtring.dev

JavaScript 프로젝트를 하게 되면 외부 모듈(라이브러리)을 많이 이용하게 됩니다. 라이브러리를 받기 위해서 npm intstall 과 같은 명령어를 많이 보셨을거에요. 그런데 --save 옵션을 봤지만 정확한 이유를 몰랐습니다. save? 저장을 도와주는 옵션인가 정도로 예측할 수 있겠죠? 그러나 우리는 알지도 못하고 마음대로 사용해서는 안되잖아요! 먼저, npm(Node Package Manager)은 프로젝트에 필요한 라이브러리를 다운로드 또는 관리 할 수 있도록 해주는 프로그램입니다. 우리가 일반적으로 npm을 사용하게 되면(npm init 시) package.json 파일을 프로젝트 폴더 바로 아래에서 생성하여 모듈과 해당 모듈의 버전을 관리합니다. 요즘 CLI를 통해서 프로젝트를 생성하게..

React에서 중요한 개념 중 하나인 컴포넌트에 대해서 알아보겠습니다. React를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러가지의 컴포넌트(Component)로 구성되어 있습니다. 예를 들어 페이스북의 게시물 하나에 제목, 글과 사용자 정보, 이미지, 입력창, 버튼 등 모두 하나의 컴포넌트입니다. 그리고 게시물 하나에 들어가는 컴포넌트 수만해도 백가지 이상 들어간다고 합니다! 이러한 예시만 보아도 컴포넌트를 잘 만들게 되면 하나의 유기체(컴포넌트의 집합)를 구성하는데 효율적인 구조를 만들 수 있습니다. 컴포넌트의 기능 컴포넌트의 기능은 단순한 템플릿 이상입니다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주는 것 라이프사이클(Lifecycle) API를 이용하여..

Arrow function Expression function 표현에 비해 구문이 짧고 자신의 this, argument, super 또는 new.target을 바인딩하지 않습니다. Arrow function은 항상 익명이며 이 함수 표현은 메소드 함수가 아닌 곳에 적합합니다. 그래서 생성자로서 사용할 수 없습니다. ​ ​ Arrow(화살표) function은 => 문법을 사용하는 축약형 함수입니다. 표현식의 결과값을 반환하는 표현식 본문(expression bodies)뿐만 아니라 상태 블럭 본문(statement block bodies)도 지원합니다. ​ ​ 일반 함수의 자신을 호출하는 객체로 가리키는 dynamic this와 달리 arrows 함수는 코드의 상위 스코프(lexical scope)를 ..

함수선언은 Function Statement라고도 하며 해석 그대로 함수 문장라는 뜻이다. 이는 곧 실행가능한 코드블럭이 아니며 함수의 정의를 나타내는 문장으로 해석된다. 따라서 코드해석에 따른 수행결과가 존재하지 않는다는 것을 의미한다. ​ 여기서 Statement 라는 개념을 잘 집고 넘어가야 한다. 함수 선언문은 Statement 이며 즉, 코드블럭 자체는 실행가능 코드가 아니라는 것이다. 따라서 코드 블럭을 콘솔에서 실행하여도 어떠한 결과도 return 되지 않는다. 그렇기 때문에 함수선언문을 Class와 동일한 개념으로 이해하여도 무방하다. // Function Declarations function foo() { console.log('hello'); } 이러한 statement는 consol..

함수 표현은 Function Literal(익명 함수; anonymous function) 이다. 이는 실행 가능한 코드로 해석 되어진다거나 변수나 데이터구조에 할당되어지고 있음을 의미한다. 즉, 해당 코드블럭이 실행코드로서 해석되어지며 동시에 코드실행에 따른 결과값을 가지거나 특정 변수에 할당된 값으로 존재한다. ​ ​ 이처럼 함수표현은 '함수 리터럴로 특정변수에 할당'되거나 '즉시 실행가능한 코드 블럭으로서 존재하는 함수'를 의미하는 것이다. 함수표현이 실행코드로서 해석되기 위해서는 ()를 이용하여 감싸주어야 한다. 이것을 자기호출함수(self invoking function) 라고도 한다. 자기호출함수는 재귀함수와는 다른 개념이다. 재귀함수는 함수 안에서 자신을 호출하는 형식이지만 자기호출함수는 해..

인터프린터가 JavaScript 코드를 해석함에 있어 Global 영역의 선언된 코드블럭을 최상의 Scope로 끌어올리는 것을 호이스팅(hoisting)이라 한다. ​ ​ Global 영역에 선언된 변수 또는 함수는 JavaScript 엔진이 가장 먼저 해석하게 된다. 단 할당 구문은 런타임 과정이 이루어지기 때문에 hoisting되지 않는다.(?) ​ 선언문은 항시 JavaScript 엔진 구동시 가장 최우선으로 해석한다고 이해하면 쉽다. 즉, 인터프린터가 JavaScript 코드를 해석하면서 코드작성 순서에 상관없이 global 영역에 선언되어 있는 변수나 함수의 선언문들을 먼저 수집하여 전역객체의 속성으로 등록시켜 둔다는 것이다. 그렇기 때문에 전역변수와 전역함수는 JavaScript 코드의 어떠한..

Currying은 JavaScript에 대한 깊은 이해를 제공합니다. Arrow funtion과 함께 어떻게 수행되는지 알아봅시다! ​ ​ What is Currying? Haskell B. Curry이 제시한 ES6의 새로운 Function 정의방법으로 기존의 Function 정의 시에 한번에 여러 개의 argument 불러오는 방식에서 argument 1개만으로 Function을 정의하는 방식입니다. ​ ​ Currying은 lamda calculus를 통해 하나 이상의 인수를 가진 함수로 하나 이상의 인수를 가진 함수를 줄이는 프로세스입니다. 말로만 설명하기에는 한번에 알기 어려운 개념인 것 같습니다. 아래 코드를 보겠습니다. curryedMultiply = (n) => (m) => n * m cu..

2019년. 개발자의 삶을 살기 시작했다. 올해부터는 개발자로서 인생 이야기를 남기기로 해서 올해에 대한 회고를 작성하게 되었다. 취업준비 기간 2월 학교를 졸업하고의 취업준비는 내가 더 낮아지는 시간이였다. 성실하게 준비했다고 생각했지만 공부를 할 수록 이 분야에서 뭔가를 할 수 있을까라는 의심을 가졌고 자신감은 한없이 낮아졌다. 솔직히 지금 생각해보면 내가 긍정적이지 못하고 스스로 계속 핑계 거리를 만들어왔던 것같다. 좀더 집중해서 할 수 있는 공부를 스트레스 받는 이유로 적당히(?) 해버리고 말았다. 어쩌면 나 스스로 계속해서 자신감을 떨어뜨려왔다고 생각했고 힘든 시간이였지만 나를 알아갈 수 있는 시간이였다고 생각한다. 개발자가 되었다. 9월 뜨거운 여름, 학교를 졸업한지 7개월이 지난 시점에서 취..