끄적끄적

Enum을 사용하며 다양한 형태로 리스폰스에 응용할 방법을 기록해 두고자 한다. Enum타입을 지정해두고 그냥 리스폰스를 내리면 대체적으로 foo: "A" 란 값으로 이넘의 명이 떨어지기 때문에 요구사항에 맞춰 내려줄 경우가 많다. 첫번째 @JsonValue는 아래와 같이 필드에 넣어 내가 뽑고자 하는 필드에 대한 값을 반환해준다. @AllArgsConstructor @Getter public enum Foo { A("a", "에이"), B("b", "비"); @JsonValue private String code; private String desc; } 결과 {foo: "a"} 두번째 @JsonFormat(shape = Shape.OBJECT) 객체 형태로 전체값 리턴해주기 @JsonFormat(sh..

트리쉐이킹 트리쉐이킹이란 말을 처음 들어보는 사람도 있을 것이다. 말 뜻 그대로 풀이하면 나무 흔들기.. 나무를 흔들어 죽은 나뭇잎을 떨어뜨리는 것처럼 필요없는 코드들을 제거해주어 번들파일의 크기나 번들링의 시간을 줄여주는 작업을 트리쉐이킹이라고 한다. 대체적으로 어떠한 작업들이 이루어질까? ES6 이상의 모듈 구문은 정적 구조에 의존한다. import, export... 이를 가지고 의존성을 보고 해당 소스들을 번들링 하는데 webpack4에서 sideEffects가 추가 되었고, 설정을 false로 프로퍼티를 표시하여 사용하지 않는 export는 제거해도 괜찮다는 것을 webpack에 알려줄 수 있게 되었다. 또는 아래와 같은 형식으로 제거되는 것을 방지할 수 있다. "sideEffects": ["...

인텔리제이를 쓰며 개발을 하다보면 그래들에 의존되어 있는 패키지들의 초기화가 제대로 되지않아 같은 패키지가 중복되어 제대로 동작하지 않거나 여러에러가 나곤한다. 개인적으로 굉장히 자주 사용하게 되어 기록에 남겨두려고 한다. 첫번째 방법이다. 우측에 코끼리 모양 gradle버튼을 누르고 화살표로 원처럼 생긴것을 누르면 gradle project reimport를 실행한다. Shift 두번을 누르면 아래와 같은 창이 뜬다 거기에서 Invalidate Caches / Restart... 부분을 검색하여 엔터를 누르면 roject와 관련된 dependency들을 초기화하고 재시작시켜준다. 개인적으로는 이 방법을 제일 많이 쓴다. 다른방법으로는 그래들에 리플래쉬를 직접 명령어로 초기화 시키는 방법이 있다. 왠만하..

뷰에서 타입스크립트를 쓰다보면 스토어에 대한 타입정의가 애매할경우가 많다.. 오늘은 뷰와 타입스크립트 환경에서 내가 쓰고 있는 아키텍처에 대해 정리해두려고 한다. 아무래도 호불호가 갈리는 스타일일수도 있겠다란 생각을 한다. 개인적으로는 현재 방식이 마음에 든다.. 일단 개인환경은 vue, vuex, vuex-class, vue-property-decorator 를 쓰고있다. 먼저 스토어에 액션쪽에 있는 파일을 하나까보면 이렇게 되어 있다. // HomeAction.ts class HomeAction implements HomeActionImpl { [HomeType.GET_MOCK_LIST] = ({ commit }: { commit: Commit }, payload: MockListRequest): P..

eslint + prettier를 세팅하고 간혹 Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function 위와같은 내용의 에러가 뜨는 경우가 많다. 본인도 회사나 개인프로젝트에 린트 설정을 하고 Run~ 돌렸을 때 위와같은 내용의 에러를 몇번 접하다보니 정리해 두려고 한다. 사실.. 위와같은 에러는 복잡하게 생각할 필요없다. 여러가지 삽질할 필요가 없다. 현재 프로젝트에 세팅된 eslint의 버전을 확인해보자 처음 이와같은 에러를 마주 쳤을때 버전 때문인 것 같았다.. 위와같은 에러를 만날때는 대체로 하위버전의 세팅을 그대로 쓰거나 아니면 기존 프로젝트의 설정을 보일러 플레이트로 만들어 두고 쓰는 ..

가끔 맥에서 개발을 하다보면 본인은 터미널로 깃에 푸시하거나 소스트리로 푸시를 하곤한다.. 그냥 터미널에 손가락이 가면.. 터미널로하고 소스트리를 보고 있으면 소스트리로 하고 하는데.. 간만에 고생한 기억을 정리해 두려한다. The requested URL returned error: 403 이리저리 삽질해보다가 계정 정보도 변경해보고.. 깃 리모트 주소도 변경해보고.. 하다가 해결한 방법은 아래와 같다 Command + shift = 맥 Spotlight검색창을 키고 키체인 접근 검색 좌측 메뉴중 로그인 클릭 우측에 github.com Access Key for username부분 삭제(눌러봣을때 위치가 SourceTree로 되어잇는 것) 그리고 다시 소스트리에서 Push를 해보면 다시 패스워드 입력창..

먼저 버전에 문제가 있을수 있으니 nvm을 통해 최신버전으로 변경해 주세요. https://nodejs.org/ko/ nvm install v14.17.1 vue-sfc-rollup 설치 npm install -g vue-sfc-rollup sfc-init 실행 $ sfc-init ✔ Which version of Vue are you writing for? › Vue 2 ✔ Is this a single component or a library? › Library ✔ What is the npm name of your library? … ts-class-enum ✔ Will this library be written in JavaScript or TypeScript? › TypeScript ✔ Ente..

Vue + Typescript로 개발할때 Class based component에 유용한 라이브러리들에 대해 소개해보고자 합니다. 개인적으로 타입스크립트기반의 뷰를 만들때 필수적으로 사용하고 있는 라이브러리들입니다. vue-decorator-property(https://github.com/kaorun343/vue-property-decorator) vue-class-component기반에 라이브러리로 클래스 컴포넌트 스타일로 개발하기 쉽게 도와주는 데코레이터입니다. Setup npm i -S vue-property-decorator Example @Component export class MyComponent extends Vue { @Prop() age!: number; @PropSync('name'..