프로그래머​

프로그래머라는 직업은 뭘까?

• 구분하기 좋아하는 사람들은 코더, 디벨로퍼, 엔지니어로 부를 것이고
• 모르는 사람에겐 돈을 많이 벌게 보이거나, 달라는대로 돈을 줘야하는 직업일 것이고,
• 고용주에겐 mechanic 으로 보일 것이다.

나에게 이 직업은 뭘까?

• 단기기억이 장기기억으로 전환되는 시점에 불현듯 모든 걸 해결할 아이디어가 생각나 키보드를 잡거나
• 경사하강법에 스스로를 던져 아침 새소리가 들릴 때까지 의자에서 일어나지 못하거나
• 코딩이 너무 하고 싶은데 교양과목만 수강해야해서 가질 않았던 전공일 것이다.

요즘 나는 이렇게 이야기를 하고 다닌다.

전 인터넷에 집 짓는 사람이에요.

• 프론트엔드요? 그거 인터리어하는 거에요.
• 백엔드요? 그거 공구리 치고 내장공사 하는 거에요.
• 데브옵스요? 그거 땅파고 철근 박는 거에요.
• 보안이요? 그거 단지 내에 못 들어오게 하는거에요. 복도식 요즘 싫어하잖아요.

프로그래밍은 현실세계의 개념들을 차용해 사람이 하던 걸 자동화하기 위함인데, 이걸 깨닫는데까지 너무 오래 걸린 것 같다.

이제야 왜 많은 교수님들이 현업에서는 짬이 찰수록 기본기가 중요하다. 라고 침이 마르게 이야기를 했는지 알 것 같다.

프로그래밍​

GPT로 모든 게 다 될 것 같은 시대에 프로그래밍 스킬이 중요할까?

내 대답은 아니오였다. 서비스의 아이디어가 기술 스택보다 중요한 시점이 왔다. 클로드 섀넌을 처음 듣는 사람들도 서비스를 만들 수 있게 되었고, 그 코드를 배포할 수 있는 엣지 컴퓨팅이 성행한다.

이렇게 가면 언젠가 무너질거에요 라고 설득할 수 없다. 무너지고 나서 이렇게 될 거라고 했잖아요 라고 불난 집에 기름을 부울 수도 없다.

사회 분위기가 더 그렇게 만들고 있다.

기술 스택​

모든 기술은 트레이드오프이다.

새로운 것은 항상 큰 비용이 발생한다. 구성원의 숙련도와 유지보수의 관점에서 바라봐야한다.

난 여긴 학원이 아니야, 새로운 걸 쓰고 싶다면 개인 시간을 써서 일주일 안에 프로토타입을 보여줘. 라고 말하지만, 지금 누굴 위해 공부하고 있는데 라고 생각하는 사람도 태반이다.

소프트웨어 공학이 중요한 이유이다.

이상향​

그렇다면 내가 싫어했던 건 뭘까, 부실공사인지도 모르는 건 괜찮다. 모를 수도 있지.. 하지만 부실공사라 말하지 못 하게 하는 건 내 몸에 과부하를 준다.

스트레스를 받지 않기 위해서 이상향 체크리스트를 관리하려고 한다.

• 코드 오너 기능이 있는가? 특정 코드를 수정하면 파일별 오너에게 코드리뷰를 받을 수 있는 문화 조성이 되었는가?
• 코드 리뷰의 평균 코멘트 수는 어느정도 되는가?
• 브랜치 전략은 어떻게 되는가?
• 유닛테스트가 파이프라인에서 실행되는가? 그렇다면 커버리지는 몇 퍼센트인가?
• 실제 데이터 기반으로한 통합 테스트가 파이프라인에서 실행되는가? 그렇다면 통합 테스트에 포함하는 기준은 무엇인가?
• E2E 테스트가 주기적으로 실행되는가? 그렇다면 관리 주체는 누구인가?
• 테스트 드리븐으로 가기위해 케이스를 구현할 수 있는 시간을 충분히 주는가?
• 외부 요인에 대한 카오스 테스트를 진행하는가? 재해복구에 대한 필요성을 알고 있는가?
• 오픈소스의 관리는 어떻게 하는가? 소프트웨어의 버전 관리는 특정 사이클로 돌아가고 있는가?
• 도커 파일과 디플로이먼트를 개발자가 직접 관리하는가? 그렇지 않다면 관리 주체는 누구인가?
• Private network 구성을 위한 지원을 시스템팀으로부터 받을 수 있는가? 그렇지 않다면 VPC를 구성가능할 수 있는 환경이 제공되는가?
• 코드의 퀄리티 유지를 위해 기계적으로 어떤 것을 돌리고 있는가? 린트와 정적분석 등을 진행하는가?
• 장애 발생시 해당 장애를 모두에게 공개하고 장애보고서를 작성하는가?
• 구성원 모두가 서비스에 대해 오너쉽을 가지고 있는가?
• 대표하는 서비스의 SLA가 어느정도 되는가? OOM 장애 빈도 또는 500번대 장애 빈도가 어느정도 되는가?
• SLA가 인사고과의 표준이 되는가?
• 오너의 방향성이 모든 구성원에게 공개되는가?
• 데이터 기반의 의사결정이 진행되는가? 로그 수집을 위한 툴은 어느 것을 사용하고 있는가?
• 로깅 포맷은 Open Telemetry로 표준화 되어있는가? 그렇지 않다면 어떤 포맷으로 관리하고 있는가?
• 웹 메트릭을 수집하고 있는가?
• A/B 테스트로 기능 도입이 가능한 기반이 있는가? 그렇지 않다면 기획의 인사고과는 어떻게 하고 있는가?
• 디자인시스템을 사용하고 있는가?
• 스토리북을 같은 레파지토리 내에 관리하고 있는가?

개요​

• Yarn berry 가 최고라고 유행이 돌았다.
• 써본 결과 문제가 상당히 많았고, 결국 pnpm 을 선택하는 이유이다.

문제점​

zipfs​

• 패키지를 모두 저장하고 디프도 모두 기록된다. 레파지토리 사이즈를 올리는 주범이다. 1GB 미만으로 이미지 관리가 어렵다.
• typescript 가 올라가는 경우 yarn berry 버전을 올려줘야한다. 타입스크립트의 최신 문법을 바로 사용하고 싶으나 따라갈 수가 없다.
• typescript, eslint, prettier 를 올릴 때마다 yarn dlx @yarnpkg/sdks vscode로 실행스크립트를 업데이트 해줘야한다.
• 20명 이상의 프론트엔드 개발자가 붙어야하는 프로젝트에서는 이를 일일히 강제하기가 어렵다.
• 패키지 내부 소스를 잠깐 수정해서 테스트해보는 것은 불가능하다.

opensource​

• turbo 와 같은 모노레포 툴과, prism 과 같이 postinstall 훅이 걸려있거나, create-* 과 같이 프리셋을 구성하는 환경은 node_modules 를 직접 참조한다.
• 실행조차 안 되는 경우가 많은데, 그러면 각 레포의 열려있는 이슈를 기다려야한다. yarn berry 의 pnp 스크립트를 분석하려고 쓰는건 아니니까.
• 이럴 경우 nodeLinker를 주고 yarn 1 버전을 쓸 때와 똑같이 사용을 해야하는데, 아무런 어드밴티지가 없다.

workspaces​

• yarn workspaces 기능은 멋지고 yarnpkg/berry 에 그 완벽한 예시가 있다.
• 그러나 node.js 라이브러리만을 개발할 때만 멋지다. 프론트엔드용 라이브러리는 번들러가 필요한데 그 레퍼런스가 없다.

벤치마크​

• 벤치마크 성적은 데일리로 Pnpm 에서 관리한다.
• 파이프라인 캐시랑 락 파일 켜면 감수할만한 느림이다. 일회성 느림이지 요청/응답에 대한 느림이 아니니까 어차피 프로브로 처리 가능하다.

결론​

• yarn berry 의 플러그인 기능들은 멋지지만, 의존성관리에 스트레스가 더 쌓인다.

개요​

• 이제는 질문을 어떻게 하느냐와 그 결과가 맞는지 틀린지 판단을 빨리하는 사람이 살아남을 것 같다.
• 개발 관련된 팁 말고 현장에 바로 쓸만한 레파지토리들을 정리해본다.

aicommits​

• Nutlope/aicommits: 커밋 자동화
• #32 Add support for conventional commits가 해결되면 바로 사용할 예정
• 개인적으로는 아래 프롬프트를 바꿔줘야할 것 같은데, 어떻게 개선할지도 궁금하다.
• #177 feat: enable Conventional Commits standard as flag 곧 머지될 것 같다.

const promptTemplate =
  "Write an insightful but concise Git commit message in a complete sentence in present tense for the following diff without prefacing it with anything:";

• #81 Quick improvement suggestion: Reduce diff size with --ignore-all-space도 흥미롭다.
• Openai API가 토큰 수로 과금이 되니 최대한 디프를 줄일 예정인듯 하다.

node chatgpt​

• transitive-bullshit/chatgpt-api
• openai: docs
• completionParams 를 적절하게 활용해줘야할 것 같다.
• 여러 서드파티를 확인해봤지만 temperature를 1로 주는 경우는 없었다.

const completionParams = {
  temperature: 0.7,
  top_p: 1,
  frequency_penalty: 0,
  presence_penalty: 0,
};

tiktoken​

• openai API를 사용하기위해 정확한 토큰 수를 구해야할 수도 있다.
• openai/tiktoken을 사용해야하지만 파이썬이다.
• dqbd/tiktoken 이미 벌써 노드 래퍼가 나왔다. 3.5 터보도 지원한다.

import { encoding_for_model as encodingForModel } from "@dqbd/tiktoken";

const encoder = encodingForModel("gpt-3.5-turbo");
const tokenLength = encoder.encode("YOUR_CHAT").length;

chatgpt-retrieval-plugin​

openai/chatgpt-retrieval-plugin

• .well-known 경로에 ai-plugin.json 이 manifest.json 의 역할
• 같은 경로의 Openapi.yaml 이 엔드포인트 명세
• 인증은 none | user_http | service_http | oauth 네 종류
• 간단한 서비스는 service_http 정도로 충분해보임, user_http 는 고객이 API key 를 입력해야하고, oauth 는 search:read 와 같은 권한 추가 필요.
• 문서 유사도 비교를 위해 벡터 DB 를 사용하는 것으로 보이나, Node.js 의 마땅한 래퍼가 없어서 레디스로 구현하면 될듯, 하지만 Redisearch 모듈은 필요.
  • datastore/providers/redis_datastore.py
  • services/openai.py

백년허리​

운동하다가 디스크가 고장나고 선물받았는데, 고장나기 전에 많은 분들이 읽어보면 좋을 것 같다. 그랬다면 L5-S1 사이 디스크가 나오기 전에 좋은 자세로 임했을텐데 아쉽다.

전반적인 내용은 척추위생을 지키기 위한 백년허리의 독후감이다.

진단​

• 척추: 경추, 흉추, 요추, 천추, 미추
  • 경추와 요추는 앞으로 휘어지는 경추전만, 요추전만 곡선 형태를 보인다.
• 허리통증의 주인공은 디스크 손상
• 디스크: 수핵, 섬유륜, 종판
  • 후방 섬유륜과 종판이 주로 손상
• 근육은 찢어진 디스크를 보호한다.
  • 디스크가 찢어질 때 근육이 굳는거는 디스크를 보호하기 위한 방어기재
  • 요통은 디스크의 구조신호
• 신전자세가 요추전만이다.
• 건강한 디스크가 요추전만을 곡선을 만들고 요추전만 곡선이 디스크를 보호한다.
• 좌골신경통은 허리디스크의 전형적인 증상이고 디스크가 탈출되었다는 것을 알려준다.

치료​

• 허리 강화운동을 강하게 해서 허리 아픈 것을 낫게해준다는 생각은 팔 부러진 사람이 팔 근육 운동을 해서 낫게한다는거랑 같다.
• 엉덩이 근육과 활배근이 중요하다.
• 운동이 허리에 미치는 영향이 어느정도인지 정확히 알고, 내 허리가 그 부담을 견딜 수 있을지 확실히 알아야한다.
• 허리를 구부리는 스트레칭은 요추전만을 무너뜨리는 아주 나쁜 운동
• 디스크 상처가 아물 때 허리가 뻣뻣해지는 것은 상처가 흉터로 변하는 과정에서 나오는 자연스러운 현상
• 자주자주 일어서서 신전동작을 통해 요추전만을 되찾는 것이 필수적
• 디스크 상처가 아물어갈 때 절대로 다시 찢지 않으려고 노력하는 것이 척추위생
• 24시간 요추전만을 유지하는 것
• 요추전만을 할때 좌골신경통이 있는 경우 신경뿌리염증을 치료하고 척추위생을 열심히하는 것이 좋다.
• 등받이나 쿠션에 기대는 것이 유리하다.
• 척추위생의 기본은 최대 요추전만, 신전동작 필요
• 신전동작을 할 때 아프면 엎드려서 자주, 5분정도씩 팔꿈치는 어깨 아래
• 서고, 앉고, 허리를 구부릴 때 요추전만이 무너지면 안 된다.
• 무릎이 골반보다 약간 낮을 때 허리가 가장 편안하다.
• 운동으로 좋아지는 허리는 없다. 허리는 좋은 자세로 좋아진다.
• 서서하는 요추전만: 허리에 손을 대고 숨 마시며 5초유지
• 당당한 가슴법: 서서 가슴을 들고 견갑을 잡는다. 오리궁둥이는 안됨
• 걷기: 양쪽 견갑을 붙히고 가슴을 열고 턱을 치켜들고,우아한 턱과 당당한 가슴
• 앉기: 골반보다 무릎이 낮아야한다. 당당한 가슴법으로 앉아야한다.
  • 화면의 높이가 충분히 높아야한다.
  • 척추에 좋은 자세로 앉았을 때 허리와 목을 충분히 구부리지 않고도 화면이 눈에 다 들어와야한다.
• 허리배게는 허리끈이 오는 자리 즉, 3번 4번 요추 사이가 좋다.
• 무릎배게는 별로다.

금지 자세​

• 쪼그려앉기
• 오래앉기
• 아빠다리
• 숙이기

개요​

코딩을 해준다라는 과대광고를 집어치우고 실제로 유용하게 사용할 수 있는 유스케이스들을 정리해보았다.

정규식 추출​

보통 정규식을 만드는데에는 박음질하듯이 많은 테스트가 필요하다. 주로 regexr, regex101 사이트에 원하는 텍스트를 넣고 기억에 의존하면서 Negative/Positive Lookahead 를 맞추고, Negative/Positive Lookbehind 를 사용하다가 Negative Lookbehind가 프로그래밍 버전/언어별로 지원여부가 달라 찾게되는 경우가 많다.

이젠 ChatGPT에 물어본다. 아래 패키지 업데이트 내역에서 패키지명을 추출한다고 해보자.

Hello GPT.

Can you give me a regex pattern for getting to-be result?

as-is:
Orignal content


to-be:
Refined string #1
Refined string #2
...and so on.

알아서 가져다 줄 것이다.

코드로 문서 작성​

내 코드의 문서가 쓰고 싶다면 코드를 넣고 README.md 를 만들어달라고 하자.

Can you write a README.md with this code?

알아서 가져다준다.

인터페이스로 Object Validation Schema 만들기​

타입스크립트 인터페이스로 Joi Schema 를 만들어달라고 하자.

Raw SQL로 Query DSL 만들기​

로우 쿼리를 전달하고, 쿼리 DSL, 쿼리 헬퍼 구문을 만들어달라고 하자.

Data 로 DDL 만들기​

쿼리를 전달하고 위의 인터페이스 예시처럼 테이블 스키마 쿼리를 생성해달라고 하자.

참조​

awesome 이 생겼다. https://github.com/f/awesome-chatgpt-prompts

개요​

2016년부터 정들게 쓴 hexo는 플러그인이 많고, 테마가 많아 좋았다. 2019년도부터인가.. 다른 Static Site Generator 가 많아지면서 더 이상 hexo만의 이점이 없어졌고 테마나 플러그인 개발 등 생태계 라이브러리들의 업데이트도 줄어들었다.

ejs -> njk, less -> sass -> stylus 로 테마에 스택이 의존적이였다. 결정적으로 nodejs 기반 코어라 트러블슈팅을 올려도 리소스 낭비랄까..

Docusaurus는 1~2알파 시절 algolia 검색이 제공되지 않아 swizzle 해서 local search 커뮤니티 플러그인을 사용해서 붙혀보는 삽질이 있었고 한글이 정상적으로 동작하지 않았다.

2023년에는 2버전이 런칭했고, React 기반으로 프론트엔드 스택이 일원화되었고 등등 이 작업을 진행해도 될 것 같았다.

트러블슈팅​

SEO​

URI​

• hexo는 front-matter 구문 안에 date: 2023-01-10 09:00:00 로 날짜를 넣어준다.
• docusaurus는 nested folder 구조를 써야한다.
• md 파일의 front-matter.date 를 파싱해서 URL에 /2023/01/10/title 처럼 처리해준다.

Site Verification​

• 큰 문제없이 설정에 넣어줬다.

{
  "themeConfig": {
    "metadata": [
      // ? https://search.google.com/search-console
      {
        "name": "google-site-verification",
        "content": "g"
      }
    ]
  }
}

hexo new​

• hexo new post "title" 이 커맨드를 실행해서 포스트를 만드는데, 호환할 커맨드가 필요했다.
• 오늘날짜로 blog/2023/01/10/title.mdx 로 만들어주게 yarn cmd new title 로 생성했다.
• URL normalize 를 위한 기능으론 import { slugize } from "hexo-util"; 를 사용하면 된다.
  • slugify는 한글도 삭제된다.

archive​

• hexo의 아카이브는 Order by Created DESC 인 방면에, docusaurus는 ASC 정렬이였다.
• 이걸 플러그인 옵션으로 제공하자라는 이슈가 있지만 닫혔고, 알아서 하라가 그 답변이였다.
• 하나 만들어서 기존 컴포넌트 덮고 재정렬해서 연결해줬다.

{
  "presets": [
    "classic",
    {
      "blog": {
        // 실제론 path resolving 필요
        "blogArchiveComponent": "./src/component/BlogArchiveDescendingPage.tsx"
      }
    }
  ]
}

tag​

• docusaurus 태그는 tags: [tag1, tag2] 이 형식을 만족해야한다.
• ChatGPT 에게 정규식 물어봐서 전체치환했다.

github action​

• 타겟 레포, 브랜치 세팅해준다.
• personal access token 발행하고, 두 값 적절하게 넣어준다.
• yarn build, yarn deploy 실행하면 알아서 잘 된다.

{
  "organizationName": "gracefullight",
  "projectName": "gracefullight.github.io",
  "deploymentBranch": "main",
  "trailingSlash": true
}

env:
  GIT_USER: ${{ secrets.GIT_USER }}
  GIT_PASS: ${{ secrets.GIT_PASS }}

dark only​

• 어둡게, 스위치도 삭제했다.

{
  "themeConfig": {
    "colorMode": {
      "defaultMode": "dark",
      "disableSwitch": true
    }
  }
}

code block​

• 형식이 달라서 정규식 치환해주었다.

# hexo
\`\`\`language title

# docusaurus
\`\`\`language title="title"

comment​

• 코멘트 기능은 질답할 시간이 없다.
• 과감하게 삭제하려했으나 커스터마이징해서 gitalk을 연동했다.

search​

• algolia가 오픈소스 개발문서가 아니여서그런지 무료 인덱싱을 요청했으나 티켓 상태가 변경되지 않았다.
• @easyops-cn/docusaurus-search-local를 사용했는데, 이건 모바일 지원이 안 된다.

{
  "themes": [
    "@easyops-cn/docusaurus-search-local",
    /** @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */
    {
      "indexDocs": false,
      "blogRouteBasePath": "/",
      "hashed": true,
      "language": ["en", "ko"]
    }
  ]
}

• 1주정도 지났을까 algolia 에서 회신이 왔고, 인덱싱도 성공적으로 완료되었다.

결과​

• 만족스럽다.
• 사내 문서로 쓰기엔 typesense 를 먼저 구축해야할 것 같아서 쉽진 않을듯..
• 모바일로 볼 필요가 없으면 위의 플러그인으로도 만족스러울 것 같다.

개요​

• nextjs 13버전에서 app 디렉토리가 생기면서 client/server 컴포넌트를 쉽게 사용할 수 있는 환경이 되었다.
• getStaticProps, getServerSideProps 와 같은 메소드가 사라졌고, 양쪽이 fetch 로 통합이 되었다.
• 페이지별 상태 초기화를 위한 HOC 중첩을 가져가지 않아도 될 것 같았다.

App​

Node.js + React DOM Renderer​

app 내의 모든 로직은 Node.js 이다. 따라서 이런 로직이 가능하다.

import { hostname } from "os";

export default function Main() {
  return <div>{hostname()}</div>;
}

이벤트를 바인딩할 수 없다.

import type { SyntheticEvent } from "react";

export default function Main() {
  const handleSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
    console.log("submitting");
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">submit</button>
    </form>
  );
}

Error: Event handlers cannot be passed to Client Component props.
<form onSubmit="{function}" children="...">
  ^^^^^^^^^^ If you need interactivity, consider converting part of this to a
  Client Component.
</form>

Design system​

대부분의 디자인 시스템 라이브러리는 ThemeProvider 로 테마 상태를 공유하고 Baseline StyleSheet를 전역에 넣어준다. 스타일시트를 위해 RootStyleRegistry 란 HOC 만들어 Baseline StyleSheet 를 동적으로 넣어주면 초기화는 가능하지만,

문제는 Server Component 내에서 use 을 사용할 수 없으니 ThemeProvider 로 기능동작이 불가능하다. 어찌저찌 'use-client' directive 로 Client Component 로 설정한다고 하여도 Provider 로 인해 하위 모든 컴포넌트가 Client Component 로 동작해야할 것이다.

그래서 문서에서 다음과 같이 표기가 된 것으로 보인다.

If you want to style Server Components, we recommend using CSS Modules or other solutions that output CSS files, like PostCSS or Tailwind CSS.

위 방식으로 mui/material-ui/examples/material-next-app-router-ts 예시가 추가되었지만, 이렇게 쓸바에 pages 폴더 라우트와 다를 게 없다고 생각한다.

결론​

• 아직 app 폴더를 사용하기엔 이르다.
• vercel/app-playground에 충분한 예시가 갖춰지고, 생태계가 React Server Component 를 충분히 지원할 때까지는 프로덕션에서 사용은 불가능하다고 보인다.

사견​

개인적으로는 왜 이렇게 많이 클라이언트에서 렌더링해야해? 그냥 필요한 영역만 클라이언트에서 그려주면 되잖아? 라는 접근방식은 디버깅 관점에서 마음에 들진 않는다. 웹을 하나의 Client 관점에서 본다면, 설치의 유무만 다를 뿐 앱에서 서버에서 렌더링된 HTML을 받고 일정부분만을 Server Driven UI 로 가는거와 마찬가지다. 복잡도가 크게 증가한다.

이러한 시도는 이미 Dotnet, Laravel Livewire 등 다른 언어에서 많이 진행되어왔고, Remix 에서는 이미 잘 동작 중이다. 단지 React 를 서버에서 쓰기 위해 다시 MVC 시절로 회귀하려는지 모르겠다.

개요​

벤치마킹, 툴 테스팅, 엑셀 스트리밍, 맵 리듀스 등 여러가지 테스트를 위해서 빈 레파지토리를 시작해야하는 경우가 많다. 복사해서 사용하기 위해 기록해두자.

CMD​

yarn init -2
yarn add -D typescript ts-node @types/node
yarn tsc --init

touch src/index.ts
code .

# package.json
"start": "ts-node src/index.ts"

협업 여부에 따라 commitlint, eslint, yarn plugins 등등..

패키지​

• csv/tsv: csv-parse
• zip: node zlib 로는 압축파일이 깨진다. 아래 스트리밍 unzip 라이브러리를 사용해야한다.
  • maxogden/extract-zip 👍
  • antelle/node-stream-zip
  • ZJONSSON/node-unzipper

전제조건​

• 보통 IOredis 가 퍼포먼스면에서 더 빠르다고 알고 있는데, node-redis가 4버전으로 올라오면서 바뀌었는지 궁금했다.
• 먼저 IOredis 의 벤치마크 문서 에는 node-redis 와의 비교는 없고 enableAutoPipelining 옵션을 켜라는 말만 나온다.
• 다른 참고할만한 자료는 Ably: Migrating from Node Redis to Ioredis: a slightly bumpy but faster road 인데 몇 버전의 라이브러리로 비교를 했는지는 나오지 않는다.
• 최신 node-redis 라이브러리와 비교를 해야했다.

node-redis​

• 버전 4에서 호환되지 않는 메소드가 많은데 Breaking Changes 나 v3 to v4 마이그레이션 가이드에 추가가 되어있지 않다. 😡
• 열려있는 이슈는 다음과 같다.
  • #1765: hgetall, hget, hset, hmset, setex
  • #1796: batch
• 레디스 사의 레파지토리가 맞는지 의문이 든다.

벤치마크​

• redis/node-redis/benchmark 벤치마크 폴더가 있는데 결과가 정리된 문서를 못 찾았다.
• poppinlp/node_redis-vs-ioredis 레파지토리가 있었지만 node-redis 버전이 아쉽게 3.0.2였다.
• 직접 수정해서 돌려봐야했다.

테스트​

version: "3.9"
services:
  redis:
    image: "redis:6.2-alpine"
    ports:
      - "6379:6379"

띄워놓고 진행했다. IOredis 의 options.dropBufferSupport 옵션을 켜면 퍼포먼스가 향상된다라고 나와있어서 두 경우를 모두 테스트했다.

dropBufferSuppport: true​

ioredis

• node-redis (avg): 9586.215
• ioredis (avg): 9488.689

dropBufferSuppport: false​

node-redis

• node-redis (avg): 9764.244
• ioredis (avg): 9993.67

결론​

• IOredis 를 쓰려면 dropBufferSupport: true 를 권장
• 두 라이브러리의 퍼포먼스 차이는 미미하다.
• node-redis 는 공식 라이브러리이지만 아직 문서가 완벽하지 않다.
• redis 에서 제공하는 RedisJson, RediSearch 의 확장성을 위해 node-redis 를 선택할 것 같다.
• 영속성을 위한 aof, rdb 설정은 둘 다 사용하라 문서에 나와있다.
• Redis/redis-om-node 와 RedisJson, RediSearch 를 다 사용한다면 BFF 모델을 쉽게 만들 수 있을 것 같다. 레퍼런스는 아직 없는듯...
• RedisJSON/RedisJson/Dockerfile 에 두 모듈이 모두 설치되어있다.

써본 사람은 빠져나올 수 없지만 안 써본 사람에게 필요성과 타입스크립트가 어렵지않다라는 것을 어필하기 위한 삽질기랄까..

앞서​

• 프로그래밍 언어를 잘 쓴 다는 건 그 언어에 대한 API (man)에 익숙해지고, 업데이트 이력을 꾸준히 팔로잉 하는 것이다.
• 언어는 컴퓨터공학 (운영체제, 네트워크, 자료구조) 위에 올라간 표현의 수단이니 한 언어에 익숙하다면 다른 언어가 어렵다라고 느껴지지는 않아야한다 하지만 그렇지 않은 경우가 생각보다 많다.

도입 전​

동향 관련​

• StackOverflow Developer Survey 2021: Most popular Technologies 1
• MS, Google 2
• Kakao 3, Naver 4, Toss 5

데이터​

• To Type or Not to Type: Quantifying Detectable Bugs in JavaScript: 타입스크립트 사용시 자바스크립트 프로젝트에서 발견된 버그의 15%를 컴파일 시점에 미리 방지 가능 (UCL, MS 연구) 6
• JSConf Hawaii 2019 (Airbnb): 진행된 프로젝트의 사후 분석 결과, 발견된 버그의 38%가 타입스크립트에서는 방지할 수 있었던 것 7

유지보수​

• param, return type 주석 필요 없음
• 헝가리안 표기법 필요 없음
• 타입 검증으로 컴파일시 사전 오류 제거
• 항상 최신 자바스크립트 문법 지원
  • 자바스크립트의 경우 stage 를 모니터링하고 바벨 플러그인을 유지보수 해야하나, 타입스크립트는 stage-3 이상 지원 8
  • 타입스크립트의 릴리즈노트만 팔로잉
• IDE 내에서 라이브러리 인터페이스 확인 가능 (d.ts)

도입 후​

도입 후는 항상 타입관련 문제가 많다.

tsconfig​

• noImplicityAny: true 를 켜야 말아야하나는 소모적인 논쟁이라 생각한다.
  • any 는 마이그레이션 단계에서만 허용되어야한다. 그 경우 any[], { [id: string]: any } 로 더 구체적으로 정의하는 게 낫다.
  • 모르는 타입에 대해선 unknown 으로 정의할 수 있고, 이를 사용하는 측에서 타입 단언으로 처리할 수 있다.
• strict: true 를 항상 켜야한다. 9
• target 은 es2017 이상으로 한다. 더 낮은 브라우저 지원이 필요한 경우 한 벌 더 빌드한다. 10

type vs interface​

interface 를 사용한다.

• OCP: interface 는 확장에 열려있다. 11
• 교차 타입에서 퍼포먼스적으로 좋다. 12
• 핸드북에서 권장된다. You should prefer interface. Use type when you need specific features. 13

I prefix​

인터페이스의 I prefix 는 제거한다.

• 개인적으로 이건 자바의 잔재라고 생각한다.
• typescript-eslint/recommeneded 룰에서 삭제되었다. 14
• MS/Typescript 컨트리뷰트 가이드라인에서 권장된다. 15
• Bad naming 룰이다. 16

type-only import/export​

타입을 명시적으로 import/export 한다.

• import 가 반 페이지를 넘어가다보면 어떤게 class 인지, interface 인지 한 눈에 파악하기 힘드나, type-only import 구문을 사용하면 해결 된다. 17
• 런타임 코드 사이즈를 줄일 수 있다. 18

Array<Type> vs Type[]​

typescript-eslint/array-type: array-simple 룰을 따른다.

• Array with simple type: number[]
• Array with non-simple type: Array<Foo & Bar>
• Readonly array with simple type: readonly number[]
• Readonly array with non-simple type: readonly Array<Foo & Bar> 19

as const vs enum vs const enum​

as const 를 사용한다.

• 상수 속성으로 사용하기 위한다면 as const 으로 충분하다.
  • as const 는 상수 내 재할당을 금지 (readonly property로 선언, deeply const)
  • enum 은 참조코드 생김
  • const enum 은 값이 할당

// const
export const timezone = {
  KR: "Asia/Seoul",
  JP: "Asia/Tokyo",
  VN: "Asia/Ho_Chi_Minh",
  PH: "Asia/Manila",
} as const;

// enum
export enum TimezoneAsEnum {
  KR = "Asia/Seoul",
  JP = "Asia/Tokyo",
  VN = "Asia/Ho_Chi_Minh",
  PH = "Asia/Manila",
}

// const enum
export const enum TimezoneAsConstEnum {
  KR = "Asia/Seoul",
  JP = "Asia/Tokyo",
  VN = "Asia/Ho_Chi_Minh",
  PH = "Asia/Manila",
}

// const
console.log(timezone.KR);

// enum
console.log(TimezoneAsEnum.KR);

// const enum
console.log(TimezoneAsConstEnum.KR);

// const
export const timezone = {
  KR: "Asia/Seoul",
  JP: "Asia/Tokyo",
  VN: "Asia/Ho_Chi_Minh",
  PH: "Asia/Manila",
};

// enum
export let TimezoneAsEnum;

(function (TimezoneAsEnum) {
  TimezoneAsEnum["KR"] = "Asia/Seoul";
  TimezoneAsEnum["JP"] = "Asia/Tokyo";
  TimezoneAsEnum["VN"] = "Asia/Ho_Chi_Minh";
  TimezoneAsEnum["PH"] = "Asia/Manila";
})(TimezoneAsEnum || (TimezoneAsEnum = {}));
// const
console.log(timezone.KR);

// enum
console.log(TimezoneAsEnum.KR);

// const enum
console.log("Asia/Seoul" /* KR */);

• Proposal for ECMAScript enums 이 채택될 때를 위해 enum 을 사용해야한다는 주장이 있다. 20, 21

역참조​

enums 의 역참조를 사용하는 경우는 다음과 같다.

// enum 을 역참조하는 경우
enum Color {
  RED = 0,
  ORANGE = 1,
}

// let red = Color.RED;
// Color[0] === "RED"

문자열 열거형​

JS와 TS의 동작이 달라질 수 있으므로 (런타임에서 사용방법이 달라질 수 있으므로) 리터럴의 유니온을 사용하는 게 낫다.

// type Timezone = "Asia/Seoul" | "Asia/Tokyo" | "Asia/Ho_Chi_Minh" | "Asia/Manila";
export enum Timezone {
  KR = "Asia/Seoul",
  JP = "Asia/Tokyo",
  VN = "Asia/Ho_Chi_Minh",
  PH = "Asia/Manila",
}

// getTimezone(timezone: Timezone);
// JS 에서는 정상
// TS 에서는 Asia/Seoul 형식은 Timezone 형식의 매개변수에 할당될 수 없습니다.
getTimezone("Asia/Seoul");

// import 해야 정상
import { Timezone } from "./enums";
getTimezone(Timezone.KR);

ES6 Private vs Private accessor​

Private accessor 를 사용한다.

• ES6 private 은 구현을 WeakSet 으로 해놨으므로 특별한 경우가 아니라면 (윈도우에서 접근 불가능하게 해야하는 경우) 접근자로도 충분하다.

class Test {
  // #es6Private() {}

  private accessorPrivate() {}
}

let _Test_instances, _Test_es6Private;

class Test {
  constructor() {
    _Test_instances.add(this);
  }
  accessorPrivate() {}
}

(_Test_instances = new WeakSet()),
  (_Test_es6Private = function _Test_es6Private() {});

DOM​

• 브라우저에 라이브러리를 만드는 경우나 ref 를 사용하는 경우는 위 DOM 구조를 확실히 알아야한다.
• 이벤트 핸들러를 구현할 시 인라인함수로 만들면 타입스크립트가 타입추론을 더 쉽게 할 수 있다.
• g-plane/typed-query-selector이 타입을 추가하여 DOM 엘레먼트 선택시 타입을 바로 반환받을 수 있다.

유틸리티 라이브러리​

Lodash 와 같은 유틸리티 라이브러리를 사용하자.

• 타입 흐름을 개선하고, 가독성을 높이고, 명시적인 타입 구문의 필요성을 줄이기 위해 유틸 메소드를 직접 구현하는 것보단 유틸 라이브러리를 사용하는 것이 낫다.
• Lodash 나 RxJS가 있다.

유틸리티 타입​

• 새로운 유틸리티 타입을 지정하기 전에 sindresorhus/type-fest에서 사용할 수 있는 유틸리티 타입이 있는지 확인하자.
• 왠만한 케이스는 커버가 가능하다.

export internal interface​

어차피 사용측에서 가져갈 수 있으므로 미리 내보낸다.

// 선언측
interface Name {
  first: string;
  last: string;
}

interface Employee {
  name: Name;
  joined: Date;
}

export function getEmployee(name: Name): Employee;

// 사용측
type Employee = ReturnType<typeof getEmployee>;
type Name = Parameters<typeof getEmployee>[0];

• 위처럼 사용측에서 가져갈 수 있다.
• 내부 인터페이스는 export interface 로 내보내주자.

마이그레이션​

• 의존성 관계도를 뽑아서 바텀업으로 마이그레이션한다. 첫 번째 모듈은 유틸리티 모듈일 것이다. 툴은 madge
• 자동으로 도전해보고 싶다면 airbnb/ts-migrate
• 점진적으로 진행하여 타입커버리지를 직접 확인하고 싶은 경우 plaintain-00/type-coverage

여담​

• 추가할 게 생긴다면 계속 추가해볼 예정이다.
• Typescript/Playground 로 코드를 공유하면 시간절약이 가능하다.