profile
세계 최고 수준을 향해 달려가는 프런트엔드 개발자입니다.

webpack guide 정리

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

2021년 2월 21일
·
0개의 댓글

[JavaScript] 디자인패턴 #Module

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

2021년 2월 9일
·
0개의 댓글

[JavaScript] 디자인패턴 #Singleton

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

2021년 2월 4일
·
0개의 댓글

이번 프로젝트를 진행하면서 느낀것들

...작성중

2021년 2월 4일
·
0개의 댓글

구조분해할당의 문제점

...작성중

2021년 1월 28일
·
0개의 댓글
post-thumbnail

async 제네레이터, 이터레이터

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

2021년 1월 24일
·
0개의 댓글
post-thumbnail

Redux + Redux-thunk 동작원리

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

2021년 1월 19일
·
0개의 댓글
post-thumbnail

Next.js + Jest + Testing-library 환경설정하기

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

2021년 1월 5일
·
0개의 댓글
post-thumbnail

[JavaScript] class 고급이론

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

2020년 12월 26일
·
0개의 댓글
post-thumbnail

[JavaScript] Prototype

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

2020년 12월 10일
·
0개의 댓글
post-thumbnail

[Mobx] 리액트 Context API + Mobx

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

2020년 12월 8일
·
0개의 댓글
post-thumbnail

[JavaScript] 객체로서의 함수

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

2020년 12월 5일
·
0개의 댓글
post-thumbnail

Image Lazy Loading

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

2020년 12월 3일
·
0개의 댓글
post-thumbnail

[JavaScript] Decorator

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

2020년 11월 28일
·
0개의 댓글

[babel] React Native 절대경로 추가하기

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

2020년 11월 25일
·
0개의 댓글
post-thumbnail

[Storybook] React Native iOS emulator에 storybook 띄우기

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

2020년 11월 25일
·
0개의 댓글
post-thumbnail

[JavaScript] iterable

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

2020년 11월 20일
·
0개의 댓글
post-thumbnail

Button Hover Animation

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

2020년 11월 15일
·
0개의 댓글
post-thumbnail

[JavaScript] Weak Map, Weak Set

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

2020년 11월 8일
·
0개의 댓글
post-thumbnail

[javascript] Map, Set

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

2020년 11월 8일
·
0개의 댓글