배경 최근에 서버와 프론트의 공통 타입을 관리하면 좋을것같다는 얘기를 들었다. 예전부터 이런 생각을 했지만 서버와 프론트의 pacakge.json을 합치면 너무 방대해질것같아서 적용하지는 않았었다. 생각해보기 타입스크립트와 프리티어, 린트정도를 전체 패키지에서 설치를 하고 서버와 클라이언트에서 각각의 패키지를 설치하면 괜찮을 것 같다. 즉흥에서 얘기했지만 괜찮은 방법이라고 생각한다. 나의 경우에 프리티어는 공통 타입으로 관리하고 린트와 타입스크립트는 설정이 다르다. 그러면 전체 패키지에서 중복되는 프리티어, 린트, 타입스크립트를 설치하고 프리티어만 패키지에서 관리하면 된다. 그리고 타입스크립트를 공통 타입을 위해 사용되기 때문에 기본이 되는 tsconfig를 설정해주고 프론트 서버에서도 tsconfig를..
배경 사실 이전에도 글을 올렸었다. 그런데 많이 부족한 내용이였고 버그도 많이 있었다. 이번에 기회가 있어서 새롭게 간단한 프로젝트를 만들었는데 저번보다 훨씬 괜찮게 만들었다고 생각해서 다시한번 글을 올리게 되었다. 그리고 황준일님의 블로그를 참조했다. 리액트 동작 살펴보기 먼저 spa 라이브러리 중 가장 유명한 리액트를 생각해보자. 훅스는 비교적 만들기가 더 어렵다. 기본 useState, useEffect의 경우는 클로저를 이용해 간단하게 만들수 있지만(쉽지는 않다) 프로젝트 전체에 적용하는데는 더 많은 시간과 비용이 필요하다. 그래서 일단은 추상 클래스를 만들것이다. 리액트에서는 setState로 state를 변경하고 render, componentDidMount, componentDidUpdate..
배경 바닐라 자바스크립트 또는 타입스크립트로 라이브리리, 프레임 워크없이 꽤나 많은 프로젝트를 했다. 그리고 리액트와 비교했을 때 여러가지 어려운 점이 있었지만 jsx를 사용하지 못하는 것도 조금 아쉬웠다. 그런데 리액트없이 바벨 플러그인 하나를 설치하면 jsx를 사용할 수 있다는 것을 알게 되었다. 그래서 한번 적용해보려고 한다.(사실 리액트 없이 jsx 세팅하는 것 보다 그냥 만드는 게 편하다) 웹팩 설정 나는 바벨을 웹팩에서 같이 설정하는 것을 선호한다. 물론 나눠도 상관없다. yarn add -D @babel/plugin-transform-react-jsx로 플러그인을 설치하고 바벨 플러그인에 @babel/plugin-transform-react-jsx 를 넣어주면 된다. 바벨을 따로 설정하는 분..
최근에 과제 테스트를 했는데 클래스의 타입을 지정하기가 어려워서 그냥 any를 썼다가 지적을 받았다. 자주있는 일은 아니지만 가끔 생성자 함수 또는 클래스(클래스는 생성자 함수의 syntax sugar)의 타입을 지정해줘야 할 일이 있다. 생각해보면 함수앞에 new만 적어주면 된다... 왜 나는 몰랐을까 이걸.. 그럴때는 아래와 같이 사용하자 interface ClassContructor { new (target: HTMLElement, props?: TState): void; }