시작하는 중

webpack 웹팩은 무엇이고 왜 사용할까? 웹팩은 모듈 번들로로써 가장 많이 사용되는 모듈 번들러 중 하나이기도 하다. 모듈 번들링은 하나의 웹 어플리케이션을 구성하는 여러 자원들을 하나의 파일로 병합해주는 동작이다. 웹팩을 왜 써야할까? 성능 압축을 통해 크기를 줄이고, 이를 다운로드해야하는 클라이언트가 이를 더 빠르게 다운로드할 수 있기 때문이다. 즉, 성능적인 부분 때문에 사용해야한다고 볼 수 있다. 다운로드가 빠르다면, 페이지 로딩 속도가 빠르다는 것이고 UX적인 측면에서 더 많은 체감을 한다는 것이다. 동일 변수명의 오염 1.js에서 a를 1로 정의하고 있고, 2.js에서 b를 2로 정의하고 있다면, 저 console.log(a)는 어떻게 될까? 2가 출력된다. 이렇듯 변수명이 겹쳐서 스코프 ..

유인동님의 함수형 프로그래밍 기본편 유인동님의 함수형 프로그래밍 응용편 쏙쏙 들어오는 함수형 코딩 9일부터 지금까지 팀 프로젝트 + 강의 두개 + 책 한권을 읽느냐고 포스팅도 못한 것 같다.. 라우터도 만들어봐야하고 리액트 쿼리도 정리해야하고 취준도 해야하는 바쁜 시간인데, 너무 재밌어서 좀 빠진 것 같다. 코드와 프로그래밍에 대한 고민을 많이 했던 시간인 것 같다. 함수형 프로그래밍이 왜 필요한가, 어떤 패러다임인가를 생각해볼 수 있었다. 그리고 프로그래밍에 대한 시각을 하나 더 생성하는 인사이트를 기른 시간인 듯 싶다. 책에서 말하는 함수형 프로그래밍의 패러다임 함수형 프로그래밍은 함수를 순수 함수로써 데이터를 다루고자 함이다. 하지만, 현재 프로덕트들에서는 온전한 순수함수들만 존재할 수가 없다. H..

글의 목적웹팩 공부 전에 모듈, 번들러, 모듈 번들러의 개념과 등장한 이유에 대해 살펴보려고 한다.ES6 이전의 자바스크립트모듈이 있기 전의 JS는 다음과 같이 파일들을 관리했다.이런식으로 관리하였고, A라는 JS 파일을 분할하기 위해서는 꽤나 그럴 듯 해보이지만, 스크립트를 로드한 브라우저 자체의 전역 컨텍스트에서 각 모듈 간의 충돌이 발생했다. 예를 들어, A1.js에서 "a"라는 변수명을 사용하고 있었고, A2.js에서도 "a"를 사용하고 있다면, 충돌이 일어났다.// A1.js var a = 1; // A2.js var a = 2; 즉, 모듈 간의 스코프가 구분되지 않았고, 다른 파일을 오염시키는 경우가 발생했다. 그래서 다른 파일이더라도 오염을 방지하기 위해서 변수명을 모두 다르게 만들고, 자바..

iterable 객체 iterable은 영어 뜻 그대로라면, "반복 가능한", "반복 가능"이라는 뜻이다. mdn의 내장 iterable 타입 문서에 따르면, String, Array, TypedArray, Map and Set 는 모두 내장 iterable이다. iterable 객체는 iterable protocol을 따른다. iterable protocol 1. 이 타입들은 for ... of 구문을 사용할 수 있다는 특징이 있다. 2. 전개 연산자 [...]을 사용할 수 있다. 3. 또한, [Symbol.iterator]를 적용할 수 있다는 것이다. Symbol.iterator는 mdn의 문서에서다음과 같이 설명하고 있다. object를 반환하는, arguments 없는 function. itera..