정적 팩터리 메서드란? 단순하게 클래스의 인스턴스를 반환하는 단순한 정적 메서드를 뜻한다. 예를 들면, 다음과 같은 코드와 같이 단순하게 인자를 받아 해당 클래스의 인스턴스를 반환하는 메서드를 뜻한다. public static Product from(String name) { return new Product(name); } ...

일반적으로 브라우저에 접속하면 해당 브라우저에서 필요한 html 파일을 네트워크를 통해 가져오고, 해당 html 파일에 명시된 자바스크립트 파일, 스타일 시트 파일들을 함께 가져오게 됩니다. 여기서!!! 하나의 애플리케이션의 번들(javascript 파일) 사이즈가 엄청 커지게 되면 초기에 웹 페이지 로딩 속도가 엄청 느려지게 될 것입니다. 당연...

하나의 애플리케이션의 번들 사이즈가 엄청 커지게 되면 초기에 웹 페이지 로딩 속도가 엄청 느려질 것이다. 당연히 실무에서는 애플리케이션의 사이즈가 점점 커져갈 수 밖에 없고 당연히 부딪히게 될 수 밖에 없는 문제가 될 것이다. 운 좋게도 팀원을 통해 코드 분할(code spliting)에 대해 먼저 접하게 되었는데, 맨 처음 들었을땐 이해가 부족하여...

webpack을 주제로 선정하게 된 이유는 프론트 개발 환경에서 가장 중추적인 역할을 하고 있기 때문입니다. 그러다보니 프론트엔드 개발자라면 한 번쯤은 깊게 학습해볼 필요가 있는 부분이라 생각하고 스스로 학습 내용을 정리할겸 주제로 선정하게 되었습니다. 1. 웹팩이란 무엇이고 왜 사용하는가? 웹팩에 대해 학습해본 사람이라면 한 번쯤 위와 같은...

모노레포란? 모노레포(MonoRepo) 는 Monolithic Repositories 의 약자로, 하나의 레포지토리에서 여러 개의 프로젝트가 구성된 것을 의미한다. 보통 하나의 레포지토리 안에 하나의 프로젝트가 들어가있는 것이 일반적인데, 이러한 일반적인 형태의 프로젝트 구성을 Multi-repo, PolyRepo 라고 한다. 모노레포를 사용하는 ...

npm이나 yarn을 사용하면 package-lock.json, yarn.lock 파일이 생성되는 것을 확인할 수 있다. 왜 그럴까? 자세한 내용은 여기에서 확인할 수 있는데 간략하게 정리해보자면 다음과 같다. 잠금 파일(lock)이 생긴 이유는 설치할때마다 동일한 패키지 버전을 보장하기 위해서이다. 왜냐하면, 시맨틱 버저닝 규칙에 따른...

javascript import 키워드로 모듈을 가져올때 일반적으로는 아래와 같이 상대 경로를 통해 해당 모듈을 가져오게 된다. import child from './store/child'; 하지만 만약 이를 절대 경로를 하고자 한다면 어떻게 해야할까? 바로 웹팩에 resolve object에 alias 설정을 해주면 된다. 실습을 위해 util...

모노레포에 대해선 여기에서 알아보았고 모노레포를 구성하는 방법 중에 yarn workspace 로 구성하는 방법을 알아보자. yarn workspace 사용법 들어가기에 앞서 yarn 의 workspace 기능을 통해서 MonoRepo 를 구성하는 방식은 아주 간단하다. 먼저 아래 커맨들를 실행하여 npm프로젝트를 초기화해주자. yarn init...

실습 내용은 깃허브 레포지토리를 통해 확인하실 수 있습니다. Storybook이란? 스토리북은 UI 컴포넌트 개발 도구이다. 스토리북은 실제 애플리케이션 외에 별도의 서버로 구동되어 화면 상에서 UI 컴포넌트들을 직접 눈으로 확인하며 조작(Controls)할 수 있다. 그리하여 Storybook을 활용하면 UI 컴포넌트를 내부 개발자들을 위해 쉽게...

1) Mobx 란? mobx는 프론트엔드에서 사용하는 애플리케이션 상태 관리 프레임워크입니다. 애플리케이션 전반에서 사용하는 상태(state, 자주 변경되어 관리되는 데이터)를 손쉽게 관리하여 변경에 대한 반응을 처리해줄 수 있는 라이브러리입니다. 보통 리액트에선 Redux와 Mobx를 많이 사용하며 INHR+는 Mobx를 사용하고 있습니다. 2) ...