webpack 공식문서에서 guide를 보며 정리해야할 것들을 기록으로 남기려합니다. 삽질하고, 헷갈리고, 중요 컨셉을 중점적으로 정리해보겠습니다.이미지나 폰트같은 자원들은 웹팩에 내장되어있는 로더를 사용합니다.로더를 정의하는 부분에서 type 을 정의해주는데요. as

이번 시간에는 모듈 패턴에 대해 알아보겠습니다. IIFE(즉시 함수 표현식) 또는 모듈패턴이라고 불리는 디자인 패턴은 즉시실행함수, 클로저, 스코프에 대한 개념을 알고계시다면 금방 이해하실 수 있습니다.즉시 실행함수의 호출이 끝나더라도 반환된 객체에서 여전히 x 변수

안녕하세요. 이번 시간에는 디자인패턴, 싱글턴에 대해 알아보겠습니다. 싱글턴은 말 그대로 하나뿐인 객체를 의미합니다. 자바스크립트에서는 객체 리터럴을 사용하면 싱글턴을 구현한 것입니다.하지만 이 객체는 캡슐화되어있지 않기 때문에 결합도가 커지며 데이터를 보호하는데 문제

...작성중

...작성중

비동기 제네레이터와 이터러블 객체에 대해 알아봅시다.

https://redux.js.org/assets/images/ReduxDataFlowDiagram-49fa8c3968371d9ef6f2a1486bd40a26.gif위의 이미지가 redux 동작원리의 전부입니다. (미들웨어가 빠졌지만 이는 뒤에서 설명하겠습니다

Next.js에서 unit testing을 위해 jest, testing-library를 활용하여 테스트 환경을 구축해봅시다.설치해야할 패키지들은 아래와 같습니다.루트 경로에 babel.config.js를 생성한 뒤 아래의 코드를 작성하세요. next/babel pre

자바스크립트의 classs는 앞서 배운 prototype에 기반을 두고 있습니다. 먼저 코드를 소개하고 설명을 해보죠.Rabbit은 함수이며 생성자 함수인 constructor는 Rabbit 함수의 본문에 해당됩니다. 그리고 sayHi 메서드는 Rabbit의 proto

\[prototype]과 proto 의 차이를 알아보겠습니다. 자바스크립트에서는 객체의 숨김 프로퍼티로 \[prototype]를 가지고 있습니다. 어떤 프로퍼티를 찾으려고 할때 만약 객체에 이 프로퍼티가 존재하지 않는다면 \[prototype] 프로퍼티가 참조하는 다

Mobx 공식 docs를 보면 리액트와 결합하는 방법은 총 세가지입니다. mobx store를 컴포넌트의 props로 넘긴다.import해서 전역 객체로 사용한다.React의 context API를 활용한다.이 중에 3번째 방법이 공식 문서에서 추천하는 best pra

오늘은 객체로서의 함수와, 기명 함수표현식에 대해서 알아보겠습니다.자바스크립트에서는 함수도 객체입니다. 따라서 함수에 프로퍼티를 설정할 수가 있죠. 말보단 코드죠. 먼저 아래의 코드를 확인해보세요.이렇게 함수에 프로퍼티를 설정할 수 있습니다. 데이터를 캐싱할 때도 쓸

오늘은 등 운동을 조지고 자기 전에 lazy loading을 구현하는 2가지 방법을 정리해보려고 합니다. 방법은 아래와 같습니다.scroll eventIntersection Observer먼저 html파일 구조를 확인하세요.index.htmlwindow 객체에 스크롤

데코레이터는 함수를 인자로 받는 함수입니다. 인자로 받은 함수의 로직에 기능을 추가하거나 행동을 변화시키는 역할을 하는 것이 바로 decorator입니다. 백문이 불여일견이겠죠. 바로 코드예제를 봅시다.데코레이터로부터 반환된 함수를 래퍼(wrapper)라고 하며 이 함

babel.config.js에 경로를 추가합니다.tsconfig.json에 경로 추가해서 vscode가 인식할 수 있게 만들어줍니다.metro server 캐시를 리셋해줍니다. (이것 때문에 삽질함)src/components 디렉토리를 절대경로로 추가해보겠습니다.roo

iOS 또는 android에서 storybook을 띄우는 방법을 알아보겠습니다.아래 코드를 보면 STORYBOOK_START이라는 flag가 있습니다. 참인 경우에는 storybook/index.js에 있는 설정 파일을 내보내며, 거짓인 경우에는 App 컴포넌트를 내보

iterable은 말 그대로 반복 가능한 객체를 의미합니다. 대표적으로 배열, 문자열 등등이 있습니다. 이러한 개념을 활용하면 어떤 객체든 iterable하게 만들 수 있습니다.iterable한 객체를 만들기 위해서는 Symbol.iterator 메서드를 활용합니다.

오늘은 버튼 hover시에 유저에게 멋진 애니메이션을 보여주도록 만들어봤습니다.online tutorial 유튜브 강의를 참고했습니다.이 인터페이스를 만들기 위한 키 포인트는 다음과 같습니다.애니메이션이 일어나는 4개의 border를 자식 span 4개로 구현한다.ho

이 포스팅은 javascript.info를 참고했습니다. 위크맵을 왜 사용할까요? 이를 이해하기 위해서는 가비지 컬렉션을 알아야합니다. 추후에 가비지 컬렉션에 대해서 포스팅을 해보겠습니다. 일단 여기서는 간단하게 "도달 가능한 값을 메모리에 유지한다." 라고 생각하면

자바스크립트라는 언어를 끝장을 보려합니다. 새로 알게된 자바스크립트 문법 사이트를 알게 됐는데 내용이 매우 알차고 고급 개념에 대해서도 잘 정리되어있는 것 같습니다. 앞으로 이 사이트를 활용해 자바스크립트에 한 걸음 더 다가가려 합니다.맵은 key가 있는 데이터를 저장