분류 전체보기 검색 결과

해당 글 777건

redux toolkit with typescript

회사에서 chrome extension 관련 개발을 하면서 redux를 redux toolkit으로 교체하고 typing까지 해주어야 할 일이 생겼다. 결론적으론 기존 redux보다 훨씬 코드량이 줄어서 만족중. 코드 전문을 보자면 다음과 같다. const initialState = {} const rootReducer = combineReducers({ firebase: firebaseReducer, firestore: firestoreReducer, dropdown: dropdownReducer, shortcutAction: shortcutActionReducer }) const store = configureStore({ reducer: rootReducer, middleware: getDefaul..
State Management/⚛ Redux 2021. 8. 7. 21:30

never 타입은 대체 왜 있는 거임? : Exhaustive Type Checking

대표적으로 switch 문에서, 모든 case에 대한 처리가 이루어지지 않아서 default로 빠지게 되는 경우가 있다. typescript에서는 이러한 케이스를 방지할 수 있다. 아래와 같은 케이스를 살펴보자. interface Circle { kind: 'circle' radius: number } interface Square { kind: 'square' sideLength: number } type Shape = Circle | Square function getArea (shape: Shape) { switch (shape.kind) { case 'circle': return Math.PI * shape.radius ** 2 // 실수로 shape가 Square인 부분을 handling 하지 ..
Programming Language/🟦 Typescript 2021. 8. 7. 20:55

type narrowing(type guard)와 Type Predicates(타입 명제)

type guard가 왜 필요한가 아래의 경우 유니언 타입으로 잡아주었기 때문에 공통적인 프로퍼티만 사용할 수 있습니다. 만약 intersection을 사용하면 정의 자체를 name, age, skill을 전부 넣어줘야 하니 의도한 방식이 아닙니다. interface Developer { name: string; skill: string; } interface Person { name: string; age: number; } function introduceSelf(): Developer | Person { return { name: "darren", age: 23, }; } // Developer | Person 이므로 공통 특성인 name만 사용할 수 있음. const daren = introduc..
Programming Language/🟦 Typescript 2021. 8. 7. 20:35

literal type과 const assertion

literal type literal type은 간단히, 특정 값을 타입으로 고정시키는 것이다. 물론 특정 값을 type 선언해서 사용할 수도 있긴 하다. deprecated라고 뜰 뿐이지... type name = 'Darren' const me: 'Darren' = 'Darren' const cloneMe: name = 'Darren' // deprecated literal template 어따 써먹지라는 생각을 할 수도 있지만 아래와 같이 종종 유용하게 사용된다. interface widthOption { width: number } const setDivWidth = (width: widthOption | 'auto') => { return width === 'auto' ? 'auto' : `${..
Programming Language/🟦 Typescript 2021. 8. 7. 17:47

clipboard API와 붙여넣기 이벤트에 대해서

paste 이벤트와 클립보드 검사는 다른거다! paste 이벤트에서 읽어온 클립보드 데이터 (pasteEvent.clipboardData) - 웹에서 저장한 이미지의 이름은 무조건 name: "image.png"임. 크로 브라우저 기준으로, 이미지를 클립보드에 복사하면 이름은 무조건 image.png, MIME type도 image/png임. - 반면 로컬에서 복사한 이미지들은 이름 그대로 잘 저장함. 특정 이벤트와 상관없이 클립보드에서 읽어온 데이터 (navigator.clipboard) - 마찬가지로 웹에서 복사한 이미지는 image/png를 반환합니다. 단, paste 이벤트와 다른 점은 text/html과 image/png를 같이 반환한다는 것입니다. - 자신의 로컬 환경에 있는 이미지 복사 =>..
웹 전반, 브라우저/Web API 2021. 8. 7. 16:35

Typed의 branch 운용 전략부터 코드 리뷰 문화까지

해당 글은 Typed 블로그에도 게재되었습니다. https://blog.typed.biz/tech-branch-code-review/ 처음 회사에 신입으로 입사하면 처음으로 마주하는 관문은 회사의 형상 관리 시스템, 쉽게 말해서 branch 운용 전략에 익숙해지는 것입니다. 대표적인 branch 운용 전략으로는 git flow, git-hub flow, git-lab flow 등 다양한 방법론이 존재합니다. 그러나 이러한 방법론을 실제로 사용해볼 경험은 신입으로서 드물었습니다. 입사 전의 저로서는 작게 꾸린 2~3명의 팀으로 프로젝트를 진행해본 것이 협업 경험의 전부였습니다. 기존 프로젝트를 팀원들이 fork한 후에 master branch에 곧바로 pull request를 요청하는 방법이었죠. 그러나 ..
Ops, Infra, etc/🐙 Git 2021. 7. 15. 00:25

Iframe 태그와 origin이 다른 iframe 내부 dom tree 조작에 대해서

회사에서 다른 origin을 가진 iframe 내부 dom tree에 접근해야할 일이 생겼는데, 이 때 시도해 본 여러가지 방법에 대해서 적겠습니다. 결론은 "안된다"는 겁니다. 왜 안 되는지에 대해 적어보고자 합니다. iframe과 내부에 있는 html을 단순히 확인하는 것은 가능합니다. 그러나 iframe 내부에 있는 google doc을 조작하는 것은 보안상의 문제로 불가능합니다. 그럼에도 불구하고 시도해본 것들은 다음과 같습니다. 시도 1) contentWindow을 사용하여 접근하려는 경우 contentWindow란 부모 window에서 임베디드된 을 참조할 때 사용되는 메서드입니다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameEle..
웹 전반, 브라우저/HTML, CSS 2021. 7. 11. 13:28

React에서 dnd 구현하기 (react-dnd)

web API로서의 dnd API https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API HTML 드래그 앤 드롭 API - Web API | MDN HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. developer.mozilla.org onDragStart, onDragEnter, onDragEnd 이벤트 리스너를 달아서 dnd를 구현한다. draggable 속성을 부여하면 해당 DOM은 draggable이 된다. 반면 droppable 속성은 별도로 없으며 onDragEnter로 특정 draggble이 들어왔는지, 그리고 onDragEnd로 놓아졌는지를 체크..
React, Next, Redux/⚛ React.JS 2021. 7. 6. 21:22

redux-toolkit (1) : redux와 RTK를 비교해보자

Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org 회사에서 툴킷을 써서 부랴부랴 배워보기로 했다. 0. 설치 속이 다 시원하네 // immer, redux, redux-devtools-extension 자체 내장되어 있으므로 설치 ㄴㄴ yarn add @reduxjs/toolkit react-redux 1. createStore너무 길다 => configureStore로 간편하게 기존의 redux의 createStore를 대체합니다. https://redux-toolkit.js.org/api/configureSt..
State Management/⚛ Redux 2021. 6. 27. 23:05

firebase ver 8 with React (3) Firestore

no sql이고, mongoDB랑 비슷합니다. MongoDB가 DB - 컬렉션 - 도큐먼트의 구조로 이루어져있듯, firestore도 컬렉션-도큐먼트의 구조를 가지고 있습니다. doc: https://firebase.google.com/docs/reference/js/firebase.firestore firebase.firestore() 관련 : https://firebase.google.com/docs/reference/js/firebase.firestore.Firestore Type들 문서를 보면 아래 타입들이 자주 등장합니다.(이후에 다른 기능을 써보면서 더 추가해보겠음) CollectionReference https://firebase.google.com/docs/reference/js/fireb..
GCP/🔥 Firebase 2021. 6. 27. 19:21