조건 분기부터 운영 효율화까지
Predicate 조합과 i18n 키-값 매핑으로 콘텐츠 운영 비용을 줄여보기
Publications
클라이언트에서 서버 스파이크를 늦출 수는 없을까
서버 스파이크 상황에서 클라이언트가 할 수 있는 일은 없을까? 클라이언트도 서버와 인프라를 도울 수 있지 않을까?
상태 리듀서 패턴(State reducer pattern)
상태 리듀서 패턴을 컴포넌트 로컬 상태 머신의 전이 지점을 외부에 노출하는 확장 패턴으로 해석한다. React의 control props, render props, Redux, Vue Directive와 비교하며 이 패턴이 해결하는 문제와 트레이드오프를 정리한다.
클라우드 이전에 온프레미스가 있었다
클라우드에 매몰되지 않기.
[번역] 왜 우리는 React의 useEffect를 금지했는가
Why we banned React's useEffect의 번역글
Native Currency, Wrapped Token, ERC-20
NFT 등으로 취급되는 종류의 토큰을 제외하고, 기본적으로 EVM 호환 네트워크에서의 토큰은 크게 3개 종류로 분류할 수 있다.
Vite로 HTML에서 환경 변수 불러오기
Vite의 특수 구문으로 HTML 파일에서 환경 변수를 불러오는 방법.
색상 모델과 프론트엔드
RGB, HEX, HSL, LCH, OKLCH 색상 모델의 차이와 프론트엔드 성능 관점.
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년의 기록.