조건 분기부터 운영 효율화까지
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 유효성 검사 실패 일관되게 처리하기
HTTP 통신은 성공했지만 서버 유효성 검사에 실패한 응답을 예외로 변환하고, 에러 코드와 메시지를 공통화해 TanStack Query mutation의 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년의 기록.
2022년 마지막 프로젝트의 회고 5 — The rest
HTML 포커스, React ref, TypeScript, CSR·SSR·SSG·ISR을 익히며 남긴 프로젝트 회고.
2022년 마지막 프로젝트의 회고 4 — Lighthouse, 웹 접근성 이야기
Lighthouse를 통한 성능 개선과 WAI-ARIA 기반 웹 접근성 향상을 다룬 프로젝트 회고.
2022년 마지막 프로젝트의 회고 3 — React Context, next/dynamic
React Context와 Next.js Dynamic Import를 사용해 상태와 로딩을 다룬 프로젝트 회고.
2022년 마지막 프로젝트의 회고 2 — Atomic Design, CSS Module
아토믹 디자인, CSS Module, Tailwind CSS를 적용하며 경험한 장단점을 정리한 프로젝트 회고.
2022년 마지막 프로젝트의 회고 1
Lazy loading과 Suspense를 적용하며 컴포넌트 분리와 아키텍처의 필요성을 배운 프로젝트 회고.
Warning: A title element received an array with more than 1 element as children… in Next.js
Next.js title 요소가 여러 자식 노드를 받는 경고의 원인과 해결을 다룬 기록.
Env variables are undefined in Next.js
Next.js에서 클라이언트가 환경 변수에 접근하도록 NEXT_PUBLIC_ 접두사를 사용하는 방법.
Property ‘client’ does not exist on typeof ‘globalThis’.
Next.js와 Prisma에서 전역 클라이언트를 선언할 때 발생하는 globalThis 타입 오류 해결 기록.
Render Twice in Next.js
Next.js 개발 환경의 이중 렌더링과 reactStrictMode 설정을 확인한 기록.
Error: Abort fetching component for route: “…” in Next.js
Next.js 라우터의 중복 호출과 StrictMode로 인한 컴포넌트 로드 중단 오류 해결 기록.
error - Failed to load env from /… /.env
Next.js 환경 변수 값에 포함된 달러 기호를 이스케이프하여 로드 오류를 해결한 기록.
Generic Arrow function in .tsx
TSX 파일에서 제네릭 화살표 함수를 선언할 때 extends나 후행 쉼표를 사용하는 방법.
ReferenceError: crypto is not defined in Next.js
Next.js에서 crypto 모듈의 randomUUID 호출 시 발생한 ReferenceError 해결 기록.
React의 <div>에서 onKeyDown 이벤트가 작동하지 않을 때
React의 div 요소에서 키보드 이벤트를 처리하고 tabIndex와 ref로 포커스를 관리하는 방법.
Exceptional Violation: Duplicate atom key …
Recoil의 Duplicate atom key 오류와 당시 시도한 해결 방법을 정리한 기록.
TypeScript Error: Not all code paths return a value.
TypeScript 함수의 모든 실행 경로에서 반환값을 처리하는 방법과 noImplicitReturns 옵션.
TypeScript Error: Could not find a declaration file for module ‘redux-persist/lib/storage’.
redux-persist의 storage 모듈 타입 선언 오류를 삼중 슬래시 지시문으로 해결한 기록.
상태 관리 라이브러리 Redux를 사용할 이유
Redux의 상태 관리 구조와 도입이 유용한 상황을 정리한 글.
타입스크립트에서 DOM에 접근하기
TypeScript에서 DOM 요소와 이벤트 대상에 접근할 때 타입 단언과 instanceof를 사용하는 방법.
Redundant alt attribute.
이미지 alt 속성의 중복 표현 경고와 스크린 리더를 고려한 대체 텍스트 작성.
The above error occurred in the </> component.
React 컴포넌트 렌더링 오류를 데이터 로딩과 JSX 조건부 렌더링 과정에서 해결한 기록.
Double Rendering of React
React StrictMode에서 컴포넌트가 두 번 렌더링되는 현상과 개발 모드의 동작을 확인한 기록.
SyntheticEvent of React
React의 SyntheticEvent와 네이티브 이벤트의 관계, 브라우저 호환성과 이벤트 처리 구조를 살펴본 기록.