본문 바로가기

Language & Library/JS & TS7

(TypeScript) 조금 더 우아하게 Union Literal Types 체크 방법 👋 개요 현직장에서 프로젝트가 바쁘다는 핑계로 미루어 두었던 포스팅을 해보려고 합니다. (벌써 1년이나;;) 현재 개발 중인 FE 서비스는 NextJS와 TypeScript를 기반으로 개발 중 입니다. TypeScript에서는 특정 상수를 타입으로 정의 하는 방법이 몇가지 있고 그 중 다른 언어들과 같이 열거형(ENUM)을 지원해 주지만 저는 Literal Types Union을 사용하는 것을 선호합니다. (그 이유에 관한 글 첨부합니다. TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.) 🤨 Literal Types을 Union하여 사용하는 경우 type UserStatus = 'NORMAL' | 'WITHDRAW' | 'UNKNOWN'; // 일.. 2022. 7. 26.
[Deno Study 1] Getting Started Deno는? Deno는 V8 엔진을 사용하는 Javascript / Typescript를 위한 런타임 입니다. (Rust로 제작됨!) 한마디로 node의 상위 버전이라고 할수있다 Deno의 4가지 특징 안정성(Safety)을 가짐. 사용자가 명시하지 않는 이상 파일, 네트워크 또는 환경에 접근 불가능함. 기본적으로 TypeScript 지원 단일 실행 파일만 제공 의존성 검사(deno info), 코드 포맷터(deno fmt)가 내장되어있음 Deno의 기본 모듈들 (deno.land/std@0.84.0) 설치 MAC만 취급하려고 했는데 윈도우도 설치 쉽더라 # Mac brew install deno # windows in powershell iwr https://deno.land/x/install/inst.. 2021. 1. 25.
[TypeScript] 재귀적인 타입 선언 (recursive type) 아래와 같은 재귀적인 데이터 구조를 원했다. const data = [ { label: '기본', value: 'basic' }, { label: '시간', sub: [ { label: '월별', value: 'month' }, { label: '주별', value: 'week' }, { label: '일별', value: 'day' }, ], }, { label: '지역', sub: [ { label: '시별', value: 'si' }, { label: '군/구별', value: 'gun-go' }, { label: '동별', value: 'dong' }, ], }, { label: '유형', value: 'kind' }, ] 이러한 재귀적인 구조에는 아래와 같이 type을 선언해주면 된다. type.. 2020. 12. 10.
[JavaScript] Vanilla JS로 React 만들기 시작하기 전에... Vanilla JS로 Virtual DOM을 랜더링 하는 간단한 유사 React를 만들어보려고 한다. 우아한 테크러닝 3기 (TypeScript & React)에서 김민태님의 강좌를 참고하였습니다. 글을 보기 전에 Virtual DOM, JSX에 대한 개념을 익히고 읽기를 권장 합니다. 기본 React App 만들기 우측의 결과를 가져오는 React Example App을 작성하였습니다. (github commit 바로가기) JS로 우측 앱을 React의 Virtual DOM을 구현하면서 출력하는 프로그램을 작성해 보겠습니다. React Virtual DOM 분석 위 사진은 React Component를 console.log로 출력한 결과 입니다. 해당 결과를 기반으로 virtualD.. 2020. 9. 9.
[JavaScript] Vanilla JS로 상태 관리 모듈(redux) 만들기 개요 Vanilla JS로 hot한 상태 관리 모듈 redux를 만들어보려고 한다. 우아한 테크러닝 3기 (TypeScript & React)에서 김민태님의 강좌를 참고하였습니다. 해당 문서에는 redux의 기본 패턴인 Flux 패턴에 대한 기본적인 개념이 있어야 합니다. 본문 기본 Store 생성 함수 만들기 상태를 관리하는 객체 store를 만들어 줍니다. redux.js에서 기본 store 생성 함수 정의 Reducer 만들기 & Reducer를 통한 상태 업데이트 reducer는 상태를 업데이트 해주는 주최 입니다. dispatch는 store의 상태를 업데이트 하는 주최 입니다. 상태 값의 구독자 등록 함수 & 출판 함수 만들기 subscribe 함수는 상태 값이 업데이트되면 수신할 객체를 등록.. 2020. 9. 4.
[JavaScript] Safari에서 iPad 판단 하는 방법 (UserAgent, Navigator) 이 글로 버그 잡았으면 !!!! 댓글 하트 구독 박으세요 어서 보통 JavaScript에서 접속한 단말의 종류(ex. 데스크탑, 모바일)를 판단하는데 UserAgent라는 값을 참고함. 아니 근데 이런 양아치 애플님들이 작년부터 iPad의 데스크톱화를 말하면서 Safari에서 Mac Desktop 모델들과 같은 UserAgent 값을 보내주기 시작했다. 위와 같이 Google Chrome 착한 친구들은 브라우저에서 알아서 iPad인지 판단해서 User Agent 값을 넣어주더라... iPad Pro's UserAgent by Chrome iPad: CPU OS 13_6 like Mac OS X MacBook Pro's UserAgent by Chrome Macintosh, Intel Mac OS X 10.. 2020. 8. 21.
[JavaScript] clearTimeout / setTimeout 함수와 Singleton 패턴을 이용한 딜레이 함수 구현 개요 JavaScript의 setTimeout 함수를 이용하면 N초 뒤에 callback 함수를 실행 시킬 수 있다. 그런데 이때 기존에 실행된 callback 함수를 취소하고 다시 실행 시키고 싶을때는 어찌해야될까? 아래 예제는 clearTimeout / setTimeout 함수를 이용해서 singleton 패턴으로 중복 없는 delayed callback 함수의 예제이다. 본문 추가적으로 테스트 함수와 사용예제를 추가한 github 링크이다. https://github.com/minemanemo/js-example/tree/master/delayed-function 2020. 8. 21.

티스토리툴바