조건 분기부터 운영 효율화까지
Predicate 조합과 i18n 키-값 매핑으로 콘텐츠 운영 비용을 줄여보기
Archive
클라이언트에서 서버 스파이크를 늦출 수는 없을까
서버 스파이크 상황에서 클라이언트가 할 수 있는 일은 없을까? 클라이언트도 서버와 인프라를 도울 수 있지 않을까?
상태 리듀서 패턴(State reducer pattern)
상태 리듀서 패턴을 컴포넌트 로컬 상태 머신의 전이 지점을 외부에 노출하는 확장 패턴으로 해석한다. React의 control props, render props, Redux, Vue Directive와 비교하며 이 패턴이 해결하는 문제와 트레이드오프를 정리한다.
생각해보니 그땐 그랬었다
개발자의 이름으로 처음 지나오며는 몰랐던, 이제 지나와보니 느껴지는 것들.
클라우드 이전에 온프레미스가 있었다
클라우드에 매몰되지 않기.
마술 공학
프론트엔드, 그 마술과도 같은 공학에 대해
[번역] 왜 우리는 React의 useEffect를 금지했는가
Why we banned React's useEffect의 번역글
brew upgrade 중 pyenv rehash 락 이슈
평소처럼 맥에서 터미널을 열었음에도 오랜 시간이 지나야만 zsh이 켜지고, 그 전까지는 아무 응답 없는 bash shell만 올라온다.
GPT로부터
GPT 모먼트로부터.
Source of Truth
사내 위키 관리는 중요하지도 않아보이지만, 제대로 이루어지지 않는다면 구성원들에게 병목으로 돌아온다.
질의-문서의 상호작용 방식
RAG 구축을 하며 등장하는 질의-문서의 상호작용의 종류에 대해 알아본다.
벡터 표현 방식
RAG 구축을 하며 등장하는 벡터 표현의 종류에 대해 알아본다.
AI Native Era
Wonder, Suspcious, Meta Cognitive, Execution, Resilience.
지속 가능한 지적 유희
왜 가르치는 직업은 있는데 배우는 직업은 없는가
AI로 변모하는 근래의 모습에 대해
최근의 AI와 그로 인해 개발 생태계가 변해가고 있는 모습에 대한 생각과 사견.
일을 위한 일
결국 엔지니어들은 '일을 위한 일'에서 스트레스를 받는다는 거고, 이건 조직과 구조의 비효율적인 프로세스에서 기인하는 게 큰 것 같다.
도메인 지식 생각으로부터 반 년
당시 도메인 지식이 중요하다고 생각했던 이유는 뭐였을까.
AI가 없었다면
AI가 없었다면 하기 어려웠던, AI로 인해 하게된 것은 어떤 게 있을까?
Native Currency, Wrapped Token, ERC-20
NFT 등으로 취급되는 종류의 토큰을 제외하고, 기본적으로 EVM 호환 네트워크에서의 토큰은 크게 3개 종류로 분류할 수 있다.
Vite로 HTML에서 환경 변수 불러오기
Vite의 특수 구문으로 HTML 파일에서 환경 변수를 불러오는 방법.
하드 스킬, 소프트 스킬, 도메인 지식
AI가 보조하는 시대에 대체하기 어려운 역량을 돌아본다.
색상 모델과 프론트엔드
RGB, HEX, HSL, LCH, OKLCH 색상 모델의 차이와 프론트엔드 성능 관점.
Recap 2024
엔지니어가 된 첫 해의 제품·기술·개인적인 변화를 돌아본다.
sticky 요소의 stuck 상태 별 동적 스타일 적용하기
ResizeObserver와 getBoundingClientRect()로 sticky 요소의 상태에 따라 스타일을 적용하는 방법.
Client State Management in Modern Web Front End and React
모던 웹 프론트엔드와 React 생태계의 클라이언트 상태 관리 도구 및 발전 과정.
커스텀 이벤트로 다른 컴포넌트에서 이벤트 트리거하기
어떤 컴포넌트가 갖고 있는 함수나 메서드를 다른 컴포넌트에서 트리거시키는 것은 쉽지 않다.
iOS 환경에서 Safari 브라우저 디버깅하기
Mac과 iPhone·iOS Simulator에서 Safari 개발자 도구를 연결해 웹 페이지를 디버깅하는 방법.
Nuxt에서 커스텀 404 페이지 보여주기
Nuxt 프레임워크는 내부적으로 자체적인 404 페이지를 제공한다. 꽤 깔끔한 디자인이지만, 애플리케이션의 404 페이지 컴포넌트를 예쁘게 만들어 두었다면 굳이 사용하고 싶지 않을 것이다.
Tanstack Query Mutation 유효성 검사 실패 편하게 처리하기
TanStack Query mutation에서 서버 유효성 검사 실패를 Error와 onError 흐름으로 일관되게 처리하는 방법.
인 앱 브라우저의 Google OAuth 로그인 우회기
인앱 WebView에서 차단되는 Google OAuth 로그인을 외부 브라우저로 우회하는 구현 방법.
Unresolved reference: web
Kotlin과 Spring Boot에서 Unresolved reference: web 오류를 Gradle 의존성 설정으로 해결하는 방법.
‘v-model’ directives cannot update the iteration variable ‘…’ itself.
React.js 에서는 map, forEach같은 함수를 이용해 여러 요소를 같은 컴포넌트로 편하게 렌더링할 수 있고, Vue.js 프레임워크에서는 v-for directive를 이용해 여러 요소를 같은 컴포넌트로 쉽게 렌더링할 수 있다.
Not Short Retrospective 24 Q1.5
구직과 면접, 개인적인 변화를 기록하며 프론트엔드 엔지니어가 되기 전 2024년 상반기를 돌아본다.
zsh: brew not found
회사에서 개발 환경 구축을 위해 MacOS의 패키지 매니저인 Homebrew를 설치하고, 설치를 확인하고자 위의 명령어를 입력했지만 찾을 수 없다는 오류가 발생했다.
Typescript + styled-components를 사용할 때 타입 정의를 인식하지 못하는 경우
TypeScript와 styled-components에서 테마 타입 자동 완성이 동작하지 않을 때 선언 파일 이름으로 해결하는 방법.
Property ‘toBeInTheDocument’ does not exist on type ‘Matchers<any>’
Jest와 React Testing Library에서 toBeInTheDocument 타입 오류를 설정 파일로 해결하는 방법.
OpenAI API 모델 및 버전 마이그레이션
구형 OpenAI Completions API와 모델 지원 종료에 맞춰 API와 모델 버전을 마이그레이션한 기록.
Replay 2023
취업 준비와 학습, 프로젝트로 채운 2023년을 월별 기록으로 되돌아본다.
react-router-dom의 useNavigate 및 Link를 사용하는 컴포넌트의 테스트 에러
react-router-dom의 useNavigate와 Link를 사용하는 컴포넌트를 Router 컨텍스트에서 테스트하는 방법.
AWS Lightsail Bitnami 스택에서 SSL 갱신하기
AWS Lightsail Bitnami 스택에서 bncert-tool로 Let's Encrypt SSL 인증서를 수동 갱신하는 방법.
urworkhelper 서비스 개발 회고
OpenAI GPT-3.5 기반 취업 코칭 서비스 urworkhelper의 기획·개발·운영 회고.
Node 환경에서의 KoGPT 사용기
Node.js 환경에서 카카오 KoGPT API를 호출하고 JSON 요청 본문을 구성하는 방법.
덤덤한 상반기 되돌아보기
학습·프로젝트·취업 준비를 통해 얻은 2023년 상반기의 변화와 생각을 기록한다.
SSR, react-draft-wysiwyg, 그리고 ‘window is not defined.’
SSR 환경에서 react-draft-wysiwyg의 window is not defined 오류를 동적 import로 해결하는 방법.
Cannot find module … in Github Actions (ubuntu/latest)
GitHub Actions Ubuntu 환경에서만 Cannot find module 오류가 발생할 때 파일명 대소문자와 경로를 점검하는 방법.
포트폴리오 프로젝트 회고
퍼블리싱 역량을 보이기 위해 진행한 프론트엔드 포트폴리오 프로젝트의 목표와 회고.
Convert to JSON, from JSON
웹 데이터 교환 형식인 JSON의 구조와 JavaScript에서 JSON을 직렬화·역직렬화하는 방법.
Difference HTTP Keep Alive & WebSocket
HTTP Keep-Alive와 WebSocket의 연결 방식, 통신 특성, 사용 사례를 비교한다.
Configure TypeScript Dev Environment (w/ Code, npm)
npm과 VS Code를 사용해 바닐라 TypeScript 개발 환경을 처음부터 구성하는 방법.
2022년 돌아보기
목표·학습·번아웃을 지나며 개발자로서 방향을 찾았던 2022년의 기록.