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) ...

Reference https://velog.io/@k7120792/Model-View-ViewModel-Pattern

Observable State mobx에서 observable 을 만드는 방법은 세 가지가 있다. makeObservable makeAutoObservable observable makeObservable makeObservable을 사용하여 하나씩 notation하는 방법 import { makeObservable, observa...

Actions action은 state를 변경하는 코드이다. 원칙적으로 action은 항상 어떠한 이벤트에 의해 일어나게 된다. 예를 들면, 버튼 클릭, 인풋 변경, 웹소켓 메시지 도착 등등의 이벤트에 대한 응답으로 action이 일어나게 된다. makeAutoObservable을 사용하는 경우는 예외지만, 그 외에는 action임을 MobX에게 알...