호돌맨의 블로그

작은 스타트업에서 프론트, 백엔드, 인프라를 담당하고 있습니다. 백엔드만 개발하는 사람에 비해 이직시 경쟁력이 떨어지는것 같아요. 어떻게 해야 좋을까요? 이런 질문을 몇 번 받았다. 그럴 때마다 머릿속에 악마가 방문했다. 그 악마는 본질을 흐트러트리며 내가 문제를 쫓아가지 못하게 단어를 마구 던졌다. '스타트업, 여러 개, 백엔드, 경쟁력 등등..' 결국 난 언제나 제대로 된 조언을 드리지 못했다. 항상 마음에 아쉬움이 남아있었다. 나는 학생 때부터 여러 개의 기술을 넓고 얕게 공부했다. 사실 그때는 공부가 아니었다. 프로그래밍이 재미있었고, 만들고 싶은 프로그램이 있으니 거기에 맞는 필요한 기술들을 조금 익힌 것뿐이었다. 그리고 '여러 개'도 아니었다. 개발자로 취업을 하려면 당연히 알아야 하는 건 줄..

모든 결정은 크든 적든 인생에 전환점을 준다. 그런데 2022년은 어느 해 보다 큰 의미를 갖는 일들이 많았다. 목표도 대부분 이루어냈다. 여러 이유로 회고까지는 아니고.. 호돌맨 2022년 총결산을 해보려고 한다. 1. 반려생활 현재 반려생활은 서버 개발자 1명(나), 프론트엔드 개발자 1명으로 이루어져 있다. 프론트 개발자분은 ReactNative를 담당하고 계신다. 좋지 않은 DX에서도 열심히 일 해주시는 프론트 개발자 분에게 고맙다. 나는 백엔드, 프론트엔드 웹을 포함해 다양한 일을 하고있다. 물리적 한계 탈피, 다양한 비즈니스 확장을 위해 2023년에는 백엔드, 웹 프론트엔드 개발자를 추가 모집하지 않을까 예상한다. 2022년 초에는 대부분의 인프라를 AWS로 통합했다. 기존에는 개발서버가 국내..

맥 세팅 M2 노트북으로 바꾸고 세팅과정을 정리해봤다. 키보드/단축키 설정 karabiner 설치: https://karabiner-elements.pqrs.org/ For all devices > right_command 를 f18로 매핑 개인 키보드(Realforce 87)에서 아래와 같이 키 변경 left_command > left_option left_option > left_command right_option > f18 맥 키보드 설정 키보드 → 키 반복 빠르게로 변경 단축키 → Spotlight → Spotlight 검색 보기, Finder 검색 윈도우 보기 단축키 제거 단축키 → 입력 소스 → 이전 입력 소스 선택을 F18 (right_command)로 설정 효율성 앱 크롬: https:/..

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..