판교너굴맨의 개발노트

1. 웹팩이란? 웹팩은 웹 애플리케이션에서 사용하는 수많은 리소스를 하나의 파일로 병합 및 압축 해주는 모듈 번들러이다. 1-1. 자바스크립트에서의 모듈 자바스크립트에서의 모듈이란 특정 기능을 가진 코드들을 하나의 파일로 관리하는 것을 말한다. date.js export const getIosStringDate() => new Date().toISOString(); export const getNumberDate() => new Date().valueOf(); 예를들어 위 date.js는 날짜를 parsing 하는 기능들을 가진 모듈이라고 할 수 있다. 1-2. 웹팩에서의 모듈 웹팩에서의 모듈은 자바스크립트 모듈뿐만이 아니라 HTML, CSS, Javascript, Images, Font 등 웹 애플리케..

회사에서 프로젝트를 진행하는데 데이터의 값이 원하는 순서대로 들어오지 않았다. 어디서 문제가 났는지 디버그를 해보니 Object.value메서드에서 객체의 순서를 key 값의 오름차순으로 자동 변환시켰다. 객체 객체는 배열과 다르게 index(순서)가 없다. 그렇기 때문에 어떤 순서로 객체의 키 값에 접근하는지 알 수 없다. 객체의 값은 키를 통해서만 접근이 가능하다. 순서가 보장되지 않은 순회라고 한다. Object.keys() mozilla 문서 메서드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다 아래의 예시 코드를 보자 const test = { 1: { a: 1, b: 1 }, 4: { a: 4, b: 4 }, 2: { a: 2, b: ..

호이스팅 (Hoistirng) 영어를 번역하자면 '끌어 올리기'라는 뜻이 있다. mozilla문서에서는 Javascript에서의 호이스팅은 코드가 실행되기 전에 변수와 함수를 선언 전에 메모리 공간에 저장하는 과정을 말한다. 호이스팅을 설명할 땐 "변수 및 함수의 선언부가 스코프(유효범위) 최상단으로 끌어올려지는 것처럼 동작하는 것" 이라고 한다. (선언과 할당의 분리) 변수의 초기화: 변수를 선언하고 처음으로 값을 저장하는 것 (undefined) 실행 컨텍스트: 코드가 실행되는데 필요한 정보를 가진 환경(객체 형태), 코드가 실행되기 전에 변수, 함수가 객체로 저장된다. var foo = 1; // 변수의 선언 / 초기화 var foo // undefined // 할당 foo = 1 실행 단계에서 f..

컴퓨터는 0과1로 이루어진 값만 이해할 수 있다. 그리고 이 기계어를 인간이 해석하기 쉽게 만든 언어를 고급언어라 하며 우리가 자주 사용하는 c, python, java, javascript 등이 고급언어에 해당한다. 그러면 Javascript로 작성한 소스코드를 컴퓨터가 읽을 수 있도록 하려면? Javascript Engine이 필요하다. 오늘은 여러 Javascript Engine 중에서 구글에서 개발한 V8을 학습해보려고 한다. 내가 작성한 코드가 어떻게 실행되는지 정도는 알아둬야 할 것 같았다. V8 Engine 구글에서 만든 Javascript Engine이다. V8 Engine은 C++로 개발 되었다. 현재 Chrome과 Node.js에서 사용되고 있다. JIT (Just-In-Time) Co..

이터레이션 : 반복처리라는 뜻. 데이터 안의 요소를 연속적으로 꺼내는 행위를 말한다. ex) foreach 문은 배열의 요소를 순차적으로 검색하여 그 값을 파라미터로 넘긴다 const list = [1,2,3] list.foreach(d => console.log(d)) // 1, 2, 3 이 작업은 내부적으로 처리되어서 개발자는 각 단계를 제어할 수 없다. 그러나 ES6부터 추가된 이터레이터를 사용하면 개발자가 반복 처리를 제어할 수 있다. 이터러블 : 이터레이터를 리턴하는 [Symbol.iterator]() 를 가진 값 -> ( array, string, map, set ) array, string, map, set 등을 이터러블이라고 할 수 있다. 왜냐하면 이터레이터를 리턴하는 [Symbol.ite..

클로저란 간략하게 말하면 외부 변수를 기억하고, 이 외부 변수에 접근할 수 있는 함수를 클로저라고 한다. 함수와 렉시컬 환경의 조합 함수가 선언 될 당시의 렉시컬 환경을 기억한다. (외부 변수를 기억한다.) 생성 이후에도 계속 접근 가능 클로저를 알아보기 전에 먼저 렉시컬 환경(Lexical environment)에 대해 먼저 알아보자 렉시컬 환경이란 (Lexical environment) 함수, 코드 블록, 스크립트 전체가 실행되기 전에 생성되는 스코프 범위 내의 함수와 변수를 프로퍼티로 저장하는 객체이다. 실행중인 함수, 코드 블록, 스크립트 전체는 _Lexical Environment_ 라고 불리는 내부 숨김 연관 객체를 갖는다. _Lexical Environment_ 객체는 두가지로 구성 되어 있..

함수 선언식 function test(){ ... } 함수 표현식 const test = () => { ... } const test = function(){ ... } 함수 선언식과 함수 표현식의 차이 함수 선언식은 호이스팅의 대상이 될 수 있지만 함수 표현식은 호이스팅이 발생하지 않는다. 함수 표현식은 클로져로 사용할 수 있다. 함수 표현식은 다른 함수의 인자로 넘길 수 있다 (콜백으로 사용)

회사 프로젝트에서 React와 Javascript, node Js를 사용하는데 누군가 나에게 '함수형 프로그래밍이 뭐야?' 라고 물어본다면 나는 자신 있게 얘기할 수 없을 거 같다. 함수형 프로그래밍에 대해 관심을 가진 김에 바로 인프런 강의를 신청해서 공부 내용을 기록하려고 한다. 0. 함수형 프로그래밍 직장 선배의 추천으로 Robert C.Martin의 Clean Code, Clean Architecture 라는 유명한 책을 읽게 되었었다. 위의 책을 참고 해서 함수형 프로그래밍에 대해 정의를 접하게 되었다. 함수형 프로그래밍은 순수 함수를 조합하여 프로그래밍 하는 기법이다. 순수 함수 부수 효과(Side-Effect)가 없다. 외부 값을 변경하지 않는다. 같은 인자를 넣으면 항상 같은 값을 반환한다..

node.js 보다 react를 먼저 접했던 나는 Commonjs 방식 보다 ES Modules 방식이 더욱 익숙했다. 그래서 node.js도 ES Modules 방식으로 사용하기 위해 찾아본 내용을 간단하게 정리해보려고 한다. Commonjs 방식 : require / exports app.ts const test = require(./test) test.ts // 여러개 내보내기 exports.method = function () { ... } exports.method = function () { ... } // 한 개만 내보내기 module.exports.method = function () { ... } ES Modules 방식 : import / export app.ts import test ..

프로젝트 중에 mock 데이터를 여러 형태로 정렬 해보면서 다양한 방법을 사용하게 되었다. 오늘 사용한 방법들을 한 번 정리해 보려고 한다. sort 함수란 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 기본 정렬 순서는 문자열의 유니코드 포인트를 따른다. 기본 정렬 const test = ['b','a','c','g','d'] test.sort() console.log(test) // ['a','b','c','d','g'] compareFunction 파라미터 정렬의 순서를 정의하는 함수 const test = [10, 3, 8, 4, 1]; test.sort((a, b) => { console.log(a,b); return a - b; }); /* a : 3 b : 10 a : 8 b ..