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에게 알...

소스맵(Source Map) 이란? 웹팩은 흔히 여러 자바스크립트 파일을 하나로 합쳐주는 번들의 역할을 한다. 그리고 보통 서버에 배포할때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 합축하게 된다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅할 수 있을까? 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 ...

Mobx란? Mobx는 프론트엔드를 위한 애플리케이션 상태 관리 라이브러리이다. 애플리케이션 전반에서 사용하는 상태(state, 자주 변경되어 관리되는 데이터)를 손쉽게 관리하여 변경에 대한 반응을 처리해줄 수 있는 라이브러리이다. 그래서 전역 상태 라이브러리 라고 표현하기도 한다. 상태 관리는 왜 필요할까? mobx를 왜 사용해야 할까? 간단하게 ...

React(with Typescript) 프로젝트를 빌딩하면서 직접 eslintrc 파일을 설정해보며 학습했던 내용들을 한 번 정리해보려고 한다. ESLint와 Prettier 프로젝트가 커지고 개발자가 많아지면 javascript 코드 구조가 일관성을 유지할 수 없을 가능성이 커진다. 이러한 문제를 해결해주기 위한 도구들이 Eslint 와 Pret...