끄적끄적

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

타입스크립트의 데코레이터에 대해서 알아보고 정리해 보고자 합니다. 타입스크립트로 개발을 진행하다보면 필연적으로 데코레이터란 것을 접하게 됩니다. 자바를 경험한 사람이라면 어노테이션과 굉장히 흡사하다고 생각이 들 정도로 비슷하게 보이더라구요 (제가...그렇습니다.) 데코레이터는 함수 라고 할 수 있습니다. 데코레이터는 말 그대로 코드 조각을 장식해주는 역할을 하며 타입스크립트에서는 그 기능을 함수로 구현할 수 있습니다. 데코레이터(decorator) 데코레이터는 클래스 선언, 메서드, 접근자, 프로퍼티 또는 매개 변수에 첨부할 수 있는 특수한 종류의 선언입니다. 데코레이터 함수에는 target(현재타겟), key(속성이름), descriptor(설명)가 전달됩니다. 메소드나 클래스 인스턴스가 만들어지는 런..

Rest API는 현업을 하고 계시는 개발자라면 누구나 한번쯤은 들어봤을 것이라 생각합니다. Rest(Representational State Transfer)규칙에 따라 개발된 API를 Rest API라고 합니다. 풀어서 이야기하면 요청시 URL를 통해 자원을 명시하고 용도에 맞는 HTTP Method를 통해 CRUD를 제공해 주는 것입니다. Rest 구성요소 자원(Resource) : HTTP URI 자원에 대한 행위(Verb) : HTTP Method 자원에 대한 행위의 내용 (Representations) : HTTP Message PayLoad Rest API 기본 규칙 HTTP Method(GET,POST,PUT,DELETE)를 통해 자원 대한 행위를 표현한다. URI에 자원에 대한 표기를 할..

java 사용해 개발하는 개발자라면 필연적으로 또는 서비스개발자로써 각종 트러블 슈팅이나 여러 상황에 직면했을때 필연적으로 마주하게 되는 JVM(Java Virtual Machine)동작원리에 대해서 정리해 보고자 합니다. 먼저 JVM, JRE, JDK에 대해서 간단하게 정리해보죠. JVM JVM은 자바가상머신(Java Virtual Machine)의 약자입니다. 자바프로그램을 컴파일 해서 나온 결과인 바이트코드를 실행시켜주는 역활을 합니다. JRE JRE는 자바런타임환경(Java Runtime Environment)의 약자입니다. JVM을 동작하는데에 필요한 자바 라이브러리들을 담고 있는 역활을 합니다. JDK JDK는 자바개발키드(Java Development Kit)의 약자입니다. JRE()와 JV..

리플로우와 리페인트? 웹개발을 하며 자연스럽게 접하게 되는 개념 중 하나일 것이라 생각합니다. 웹의 렌더링에 대한 개념이기에 웹개발자로써 기본적으로 알고 있어야 되지만 시간이 지나면 자연스럽게 이러한 이론은.. 흐려지게 되죠? 그래서 한번 정리해 두고자 합니다. 리?플로우 리?페인트란 웹 브라우저의 렌더링이 될 때 위의 그림과 같은 과정을 거치는데, 렌더트리에서 배치와 그리기 과정을 거치는 부분을 의미합니다.리플로우 배치과정이 다시 반복된다라고 보면 됩니다. 배치는 렌더트리를 구성하는 과정에서 크기, 위치등을 담당하고 display 그리고 width, height, position 등을 계산을 하게 되는데 이 부분을 재배치를 하게 되는것을 리플로우라고 합니다. 예를들어 자바스크립트의 바인딩을 이용해 동적..

의존성 주입 Dependency Injection spring 환경에 lombok을 이용한 개발을 하다보면 여러방법으로 의존성 주입을 하게 됩니다. 의존성 주입 방법에 대해 정리해보려고 합니다. 앞서 포스팅에서 IOC컨테이너와 DI에 대해 정리했는데 (객체 자체가 아니라 Framework에 의해 객체의 의존성이 주입되는 설계 패턴) 컨테이너가 빈을 생성하고 종속성 주입을 하는데 이 부분에서 프로그램 제어권을 프레임워크가 가져가는 구조라 제어의 역전(Dependency Injection)이라고 합니다. 의존성 주입하는 방법에 대해 몇 가지 정리해봅시다. @Autowired를 통한 의존성 주입 public class Example { @Autowired private InvalidFacilityInterce..

Redux에 대해 정리해보려고 합니다. React를 공부하다보면 필연적으로 접해야하고 접하게 되는 Redux는 앞서 Vue에서 Store 상태관리 라이브러리를 소개했던 Vuex와 마찬가지로 React의 상태관리 라이브러리입니다. 하지만 Vue와는 달리 React에서는 상태관리 라이브러리가 굉장히 많습니다. Redux기반의 redux-saga,redux-thunk,redux-observable,mobx 기타 등등등... 사용하는 라이브러리에 따라 추구하는 방향은 같지만 개발방법이 조금씩 달라지게 되죠. 그래서 React 프레임워크를 쓰는 회사들마다 전부 다른 상태관리 라이브러리를 쓰고 있습니다. 성향에 맞게 또는 특성에 따라 골라쓰면 될꺼같긴합니다. Redux 앞서 적었듯이 Redux는 Flux개념을 바탕..

자바스크립트의 비동기 프로그래밍에 대해서 정리해봅시다. async/await & promise & generator 각각은 문법과 특성이 있습니다. javascript는 Event Driven으로 실행되는 구조를 가지고 있습니다. 어떠한 이벤트를 감지 했을 때 실행되며 Event Driven에 의한 특징으로 콜백지옥이 생기게 되죠. 이러한 콜백지옥을 해결하기 위해 생긴것이 비동기 프로그래밍입니다. 하나하나 정리해보죠. 먼저 콜백지옥이 어떤 것이냐..? var num = 1 setTimeout(() => { console.log(`${++num}`) setTimeout(() => { console.log(`${++num}`) setTimeout(() => { console.log(`${++num}`) ....