끄적끄적

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

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

프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 리액트를 이용해 개발을 하고 계신 분들이라면 대부분 이미 알고 계실껍니다. 이번 글을 통해 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트의 개념에 대해 정리해보고자 합니다. 프레젠테이션 컴포넌트 1. 직접적으로 보여지는 부분에 대해 담당한다. 2. Store에 의존적이지 않다. 3. props를 통해 데이터와 callback을 전달 받는다. 4. 마크업과 스타일을 가진다. 5. 데이터를 직접적으로 변경하지 않는다. 6. UI 상태값 이외에 대체로 다른 상태값을 가지고 있지 않는다. 컨테이너 컴포넌트 1. 데이터 핸들링에 대한 위주로 개발한다. 2. 마크업이나 스타일을 가지지 않는다. 3. 리덕스의 액션이나 상태 변경에 대한 로직을 담고 있고, 프레젠테이셔널 컴포넌트..

CRA란? create-react-app을 줄여 CRA라고 많이 부릅니다. CRA란 리액트를 개발한 페이스북에서 만든 리액트 프로젝트용 보일러플레이트라고 생각하시면 됩니다. 지속적인 패키지들의 버전업과 리액트의 버전업이 활발히 일어나다 보니 자신만의 보일러플레이트를 가지고 있다고해도 결국 패키지들의 업데이트에 맞춰 지속적인 관리도 해주게 되고 새로운 기술 또는 아키텍처가 생기면 구조변경을 해야하는 경우도 생기기 마련이라 금방 레거시 프로젝트가 되죠. 하지만 CRA를 쓰면 리액트의 지속적인 업데이트를 페이스북에서 주관을 하고있고, 그에 맞춰 페이스북에서 이러한 CRA 보일러플레이트를 업데이트를 시켜줍니다. 따로 관리할 필요가 없고, 물론, 자신이 쓰는 구조가 미리세팅되어 있는게 아닌 기초적인 세팅만 되어있..

리액트 훅이란? 리액트를 사용하는 개발자라면 한번쯤은 들어봤을 훅에 대해서 정리해보려고 합니다. 이미 많은 자료가 있지만 한번 정리해두면 나중에 편할 것 같아서.. Hooks 는 리액트 v16.8 에 새로 도입된 기능이며, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공해, 기존 함수형 컴포넌트에서 할 수 없었던 작업을 할 수 있게 해줍니다. 훅의 종류 1.useState useState는 가장 기본적인 Hook입니다, 함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해주며, 함수형 컴포넌트에서 상태를 관리해야 할 때 사용합니다. import React, { useState } from 'react'; 위의 예제와 ..

Vuex는 Vue의 상태관리를 도와주는 상태관리 라이브러리입니다. 스토어를 알기 전에 일단 flux에 대해 알고 가도록 합시다. Flux - 사전적 의미로 유동,흐름 등 간단하게 말하면 프로젝트 내에 state의 흐름을 의미합니다. 대규모 자바스크립트 프론트엔드개발을 하다보면 백엔드와 다르게 제한된 데이터를 가지고 개발을 하게 됩니다. 그래서 데이터에 대한 흐름을 제어할 필요가 있고, 또한 이러한 부분을 제어하면서 여러 컴포넌트에 데이터를 공급하면서, 불필요한 통신 횟수를 줄여야 하는 필요가 있겠죠? 그래서 각 컴포넌트의 상태를 스토어라는 Root를 만들어 프로젝트의 모든 상태값을 단방향으로 공급해주어 이 조건을 충족시켜줍니다, 공식 페이지를 보면 복잡하고 장황하게 설명해놨지만 데이터에 흐름을 단방향으로..

vue 프로젝트를 초기 진행할때 두가지 방법이 있습니다. cdn방식과 npm을 이용해서 하는방법 우리가 해보려는 방식은 cdn은.. 뭐 설명이 필요할 것 같지 않으므로 npm을 이용해서 vue cli를 인스톨 받아서 설정해보죠. 먼저 node버전이 깔려있다는 가정하에 터미널을 키고 $npm i -g @vue/cli 위에 명령어를 입력합니다. 그리고 vue프로젝트를 만들고 싶은 폴더를 하나 생성하여 터미널의 경로를 폴더에 맞춰줍시다. $vue create my-sample-project 위와같이 명령어를 입력하면 설정정보가 나올껍니다. 입맛에 맞는 설정대로 엔터~엔터~하면 좌르르륵 내가 만든폴더에 my-sample-project로 뷰 프로젝트가 생성됩니다. 해당 생성된 폴더로 터미널경로를 맞추고 $npm ..