호돌맨의 블로그

React 반응형 데이터 React에서는 반응형 데이터를위해 setState를 이용한다. 그런데 클래스 인스턴스로 데이터를 관리하고싶은 경우 인스턴스 자체의 변경점이 지정되며, 인스턴스내의 데이터를 변경 하고싶은경우 spread방식을 이용하기때문에 불편하다. React에서 proxy기반의 상태(반응형)관리 해주는 Valtio라는 라이브러리를 발견했다. 해당 방법을 이용하면 쉽게 클래스 인스턴스를 관리 할 수 있다. Vue3에서 reactive (or ref)와 비슷한 느낌인것 같다. 그러면 아래와같이 직관적으로 반응형 데이터를 만들어줄 수 있고 변경또한 객체에 메시지를 전달하여 해결할 수 있다. 예제코드 import React, {useEffect, useState} from "react"; import..

문제 Nginx logrotate 수행 이후 더 이상 로깅이 안되는 문제가 발생했다. /var/log/nginx/*.log { daily dateext dateyesterday missingok ifempty rotate 90 compress create 640 nginx root sharedscripts olddir /var/log/nginx/backup postrotate if [ -f /var/run/nginx.pid ]; then kill -USR1 `cat /var/run/nginx.pid` fi endscript }설정 파일 내용은 위와 같다. 해결 권한을 잘 관리하겠다고 chmod를 빡빡하게 700으로 줬던 게 문제였다. 내부적으로 file reopen이 안되는것 같다. nginx 로그 폴더..

타입스크립트, 바벨 npm 설정 패키지 설치 테스트 관련 $ npm install --save-dev jest @types/jest 타입스크립트, 바벨관련 $ npm install --save-dev typescript NPM 셋업 설정파일 생성 설치 중간에 test command를 입력하라는 prompt가 나오면 jest로 입력한다. npm run test 명령어를 통해 테스트를 수행 할 수 있게 만들기 위한 부분이다. $ npm init 스크립트 추가 package.json { "name": "class-enum", "version": "0.0.1", "description": "class enum", "main": "index.js", "scripts": { "test": "jest", "compi..

2021년 으땠는가? 벌써 2021년의 마지막 12월 31일입니다. 이것저것 한 것 같지만 게으름에 안 한 것들이 눈에 아른거리고 열심히 산 것 같지만 돌이켜보면 아무것도 아니네요. 투자 반려생활 입사당시 목표 중 하나는 개발자로서 코드가 아닌 다른 방식으로 회사에 기여하는 것이었다. 2020년 12월 말 부터 팁스 투자를 준비했다. 우리가 갖고 있는 기술 아이템을 바탕으로 해결하려는 문제를 제시하고 서비스와 잘 연계할 수 있는 무언가를 생각해야했다. 특히 이 부분에서 고민이 많았던 것 같다. 응용 단계가 아니라 새로운 무언가를 밑바닥부터 찾았다. 우리가 이미 알고있는 기술들의 레벨을 나누어 무엇을 할 수 있는지부터 생각했다. 예를 들면 1단계 컴퓨터와 인터넷. 2단계 컴퓨터 언어와 데이터베이스, 3단계..

문제 Spring boot 2.4.5로 업그레이드 한 뒤 authentication 값이 null이다. @GetMapping("/api/users/me") public UserResponse getMe(@AuthenticationPrincipal Authentication authentication) { // ... // ... } 해결 PrincipalMethodArgumentResolver를 추가해도 되지만 그냥 @AuthenticationPrincipal annotation을 제거하면 된다. 스프링에서 문서 수정하는걸 깜빡 했나보다. 이슈 링크

Vue.js 플러그인 페이지의 로딩바를 보여주는 플러그인을 만들려고 한다. 요구사항 페이지 로딩 element는 1개만 관리하며 show/remove 한다. 페이지를 떠날때는 (뒤로가기 버튼 등) 로딩 상태를 remove 한다. (이 전 페이지로 갔는데 여전히 로딩중이면 이상하니깐~) element ui에서 제공하는 로딩 element를 이용한다. 결과물 로딩 클래스 /src/plugin/elloading/ElLoading.ts import * as $ from "jquery" export default class ElLoading { private readonly loadingElement: string private readonly elementId: string private readonly loa..

개요 Elasticsearch cloud Seoul region이 2020년 8월에 출시했다. 현재 14일 무료 plan으로 테스트해보고 있다. 아래 내용은 모두 Elasticsearch 7.8에서 테스트 했다. 인덱스 생성 샤드는 1개, 레플리카는 0개로 설정한다. PUT /$index { "settings": { "index": { "number_of_shards": 1, "number_of_replicas": 0 } } }인덱스 생성 - mapping 정보 함께 생성 mapping정보를 입력하지 않은 index에는 PUT /$index/$type/$id와 같이 데이터 입력이 가능하다. 하지만 mapping정보까지 입력한 index에 데이터 입력시 에러가 발생할 수 있다. Elasticsearch 6..

프로젝트 개발 초기에 여러 고민들이 생긴다. 그리고 결정해야 한다. 작은 문제로 치부하고 넘어가면 나중에 큰 골칫덩이가 되어 돌아오며 반대로 여러 상황을 가정하고 확장성을 고려하여 시간을 투자했다가 오버 엔지니어링과 시간 낭비로 이어질 수 있다. 특히 빠르게 의사결정하고 결과물을 만들어야 하는 회사에서는 오래 검토하고 논의할 시간(또는 동료)조차 없다. 현재 시스템에서 개발/운영하며 아쉬운 부분이 많이 생각날 수 있다. 개발자라면 누구나 "새롭게 만든다면 잘할 수 있을 텐데"라고 생각한 적이 있을 것이다. 그럼에도 정작 새롭게 만든 시스템이 완벽하게 릴리즈 되어 유지되는 케이스는 본 적 없다. 한 번 만든 시스템이 완벽하다면 개발자라는 직업은 사라지지 않았을까? 그럼에도 절대 양보할 수 없는 부분들이 있..

맥에서 zip파일 압축 해제시 오류 22 - 유효하지 않은 변수가 발생했다. 터미널에서 unzip으로 해제시 아래와 같은 오류가 발생한다. $ unzip name.zip error: cannot create -�_+�++����.txt Illegal byte sequence error: cannot create -�_+�++����.txt Illegal byte sequence윈도우쪽에서 특이하게 압축된 파일인경우 발생하는 문제 같다. 귀찮아서 정확히 찾아보지는 않았다. 아무튼 아래 명령어로 해결할 수 있다. $ mkdir result # 반드시 압축 해제할 dir을 만들어야 한다. $ ditto -V -x -k --sequesterRsrc --rsrc ./result

폰트 Consolas Droid Sans Mono Open Sans 애플리케이션 설치 Chrome Karabiner Spectacle Alfred Homebrew Iterm2 Monosnap Tableplus Kakaotalk Line Intellij Bear Charles VSCode (sublime text) adoptopenjdk Logic OneDrive FinalCut Pro SourceTree brew bash-git-prompt node npm thefuck