개발 179 [리액트] typescript, mobx 에서 private state를 처리하는 방법에 대하여 mobx 상에 store를 만들어 사용할 때 일반적으로 observable를 통해 만들게 됩니다. 간단한 예를 들어 설명하겠습니다. 일반적으로 클래스형 store에서는 간단하게 makeObservable()를 통해 간단히 만들곤 합니다. import { action, makeObservable, observable } from 'mobx' class Count { number: number = 0 constructor() { makeObservable(this, { number: observable, increase: action, decrease: action, }) } increase = () => { this.number++; } decrease = () => { this.number--; } } .. 2021. 1. 19. [리액트] 브라우저 notification 구현해보기 이번 포스트에서는 브라우저에서 notification를 push 하는 간단한 방법에 대해 알아보려고 합니다. 완성된 모습은 아래와 같습니다. 코드는 크게 App 부분과 notification 부분으로 나뉘게 되고 함수로는 useNotification이 권한을 요청하는 기능, notificiation를 만들어서 push 주는 기능을 제공합니다. import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { /* 권.. 2021. 1. 5. [자바/SQL] 동적 트리 만드는 방법에 대해서 다음과 같은 차트를 만들고 싶었다. 시도별 사고유형별 사망자수의 정보가 담긴 treemap 계층적인 구조를 만들기 위해 다른 시각화 툴을 분석해보았는데, 어김없이 트리의 구조를 쓰고 있어, 나 또한 트리 구조로 만들어보고자 했다. 트리를 만드는 내부로직은 내가 찾아볼 수 없기 때문에 직접 구현해야 했다. 데이터의 경우 다음과 같이 온다. SELECT "시도", "사고유형대분류" , SUM("사망자수") FROM "DO48" GROUP BY ROLLUP("시도", "사고유형대분류") ORDER BY "시도" DESC, "사고유형대분류" DESC SQL를 자세히 보면 각 컬럼별로 DESC 된 것을 볼 수 있다. 이유는 나중에 동적 트리를 만들면서 설명하겠다. 아무튼 계층적인 구조를 만들기 위해 SQL ROL.. 2020. 12. 4. [Github] 깃헙 프로필 꾸며보기 이번 포스팅에서는 위 화면과 같이 깃헙페이지를 이쁘게 꾸며보는 방법에 대해 알아보겠습니다. 일단 깃헙 메인 화면에서 readme 파일을 사용하려는 repository가 필요합니다. 새로운 repository를 만들러 가봅시다. repository name은 owner와 같습니다. username를 그대로 넣으면 됩는다. 저의 경우에는 이미 만들어서 already exists가 뜨고 있습니다. 문구도 나름 귀엽네요. You found a secret!! ~~ speical repository!! 이제 만들었으면 기본 해당 repo에 readme 파일이 생성되고 기본 화면에서 보이게 됩니다. 이제 readme 파일을 본인 입맛에 맞춰 꾸미면 완성입니다. 하지만 마크다운을 일일이 쳐가면서 꾸미는 건 매우 귀찮.. 2020. 12. 1. 이전 1 ··· 23 24 25 26 27 28 29 ··· 45 다음
