개발자
류준열
게시글 전체 보기
Array 메소드는 비동기를 기다려주지 않는다.
회사에서 리포트 발행 기능을 만드는데, 리포트 페이지가 뒤죽박죽으로 발행되었다.
Utterances 이용한 댓글 기능 추가
이제 댓글을 달 수 있어요!
함께 자라기
팀을 성장시키는데 중요한 요소는 심리적 안전감이다. 심리적 안전감은 일상에서 조금씩 쌓아가는 상호간의 존중에 기반한다. 우리팀을 최고의 팀으로 만들기 위해 내가 지금 바로 할 수 있는 행동은 동료를 존중해주는 것이다.
동시성 렌더링
동시성 렌더링은 두가지 일을 동시에 하는게 아니라 우선순위를 조정해서 동시에 하는 것 처럼 보여주는 것이다.
Git Flow 만든 사람이 Git Flow 쓰지 말라 한 거 아세요?
현재의 소프트웨어 개발 방식은 Git Flow가 구상될 당시와 다르다. 만약 지속적 배포를 통해 고객에게 제품을 전달한다면 더 간단한 workflow를 추천한다. 하지만 다양한 버전들이 고객들에게 제공된다면 여전히 Git Flow가 적합할 수 있다.
내가 생각하는 비제어컴포넌트 이상의 react-hook-form
리렌더링을 줄이니 어쩌니 하는게 중요한게 아니다. Form을 Form답게 관리할 수 있는 것이 중요한거다.
pnpm create mf-app 프로젝트에서 url 접근시 404 뜨는 버그
module federation을 사용하는 프로젝트는 각 어플리케이션들이 자체적으로 라우팅을 처리 할 수 있도록 모든 경로를 index.html로 리다이렉트 시키지 않는다.
Next 환경변수의 비밀: 빌드타임 환경변수
Next.js에서의 환경변수는 빌드타임에 등록된다. 쿠버네티스에서 환경변수는 컨테이너 이미지가 빌드된 후 런타임에 주입된다. 그래서 쿠버네티스+Next.js 조합에서는 둘중에 하나를 변경해주어야 한다.
마이크로 프론트엔드끼리 빌드된 타입 정보 공유
Module federation을 통해 두 마이크로 프론트엔드를 공유할때 타입스크립트에서 타입을 인지하지 못하는 문제가 있었다. 이럴땐 @module-federation/typescript를 이용하여 빌드된 타입정보를 각 마이크로 프론트엔드 간에 공유 할 수 있다.
Module Federation을 이용한 Micro Frontend 예제
회사에서 각 기능들을 모듈별로 관리하기로 했다. 하나의 제품안에 있는 여러 기능 모듈들을 효율적으로 그리고 안정적으로 관리하기 위해 Micro frontend를 도입하기로 결정했다.
next.js에 다국어 기능 넣기
useTraslation 훅을 통해 언어를 관리하는 경우 새로고침이나 링크 공유시에 언어가 초기화 되는 이슈가 있었다. 페이지 구조를 엎어야 했다.
npm의 유령의존성
개발자의 의도와 무관한 패키지들이 node_modules에 설치되고 제거된다면 어떤 버그들이 생길지 알 수 없다. 말 그대로 유령이다
i18n을 위해 Excel을 JSON으로 전환하는 서비스
번역할 내용이 추가 될 때 마다 JSON을 수동으로 만들어야 하는가? 에 대한 고민이 있었는데 excel을 i18n에 적합한 JSON으로 변환하는 간단한 html을 만들었다.
code spliting으로 블로그 성능 소폭 개선
게시글 페이지의 page.js에서 highlight 라이브러리를 분리하여 lighthouse 점수를 78 -> 85 로 증가시켰다.
코드스테이츠 정규직 확정되고 썼던 글 (22.4.14)
여튼 어느 주간회의날, 대화를 하다가 어느 단어에 꽃혀서 순간 감정적으로 PM 동료분께 '일을 주말에 하지 않으면 못끝낼 정도로 일을 주고 있다.' 라고 이야기를 했다. '못하겠다고 해도 괜찮으니까 이제 벅차면 얘기하세요.' 라고 말씀해주셨다.
복잡한 비즈니스로직을 프론트에서 구현해야 하는 경우
비즈니스로직이 프론트에 포함된 경우 의존대상과 세부구현을 분리하는 방식에 대해 설명
429에러와 토큰버킷알고리즘
써드파티 라이브러리에 의존하여 작업을 하다보면, 지나치게 낮은 request limit때문에 빈번하게 429 에러를 만날 수 있다. 이는 토큰 버킷 알고리즘으로 request limit에 도달하기 직전에 요청을 지연시켜서 해결 할 수 있다.
setTimeout의 한계와 reqeustAnimationFrame
setTimeout의 delay를 0.5초로 설정하였는데 0.5초가 지나도 call stack이 처리되지 않으면 setTimeout의 callback은 실행되지 않는다. 이렇게 setTimeout이 씹히게 된다.
소프트웨어 장인 독후감
하지만 이것들 보다 가장 중요한건 개발자 개개인이 '소프트웨어 장인 정신'을 갖는 것이다. 소프트웨어 장인 정신이 없다면 나머지는 다 껍데기다.
컴포넌트 라이브러리 npm 배포 (vite,pnpm)
컴포넌트 라이브러리를 npm 배포하는 방법
하이빌리지 : 위치기반으로 가까운 관광지 보여주는 서비스
주말에 어디 놀러갔다 오고 싶어서 구글에 여행지를 검색하면 티스토리 광고글이 가장 상단에 있는 경우가 많다. '시각적으로 한눈에 가까운 관광지를 볼 수 있으면 좋겠다' 라는 생각이 들었다. 그래서 내 주변 가까운 관광지를 보여주는 서비스를 만들었다.
사파리에서 클립보드 복사 이슈
사파리에서는 보안상의 이유로 유저 액션을 통해서만 클립보드 복사가 동작한다.
SSR에서 고려해야 할 것들
next는 SSR을 할 수 있는 리액트 프레임워크이다. JSX문법으로 렌더링 할 코드를 작성하면, next 서버에서 html을 만들어주고 그 이후 hydration이 진행되면서 리액트(CSR)이 진행된다.
자동저장 기능 구현시 고려해야 할 것
지원선발 시스템에서 제출한 설문지의 모든 답변이 초기화 되는 이슈가 있었는데, 재현이 되지 않았다. 나중에 알고보니 다중탭 문제였다. 또한 setInterval이 react 라이프 사이클과 맞물려 작동하지 않는 이슈도 있었다.
도메인 주도 설계란 무엇인가? (Domain Driven Design Quickly)
개발자가 일하는 방식이 지난 십수년간 많이 변화했지만, 동료들과 함께 제품을 만든다는 사실은 변하지 않는다. CTO님께서 이 책은 DDD의 시작에 불과하다고 말씀해주셨다.
블로그 제작기
티스토리에서 블로그를 운영하고 있지만 프론트엔드 개발자가 쌩으로 만든 블로그 하나는 갖고 있어야 하는것 아닌가? 하는 생각에 블로그를 만들게 되었다.
메모이제이션이 필요한 순간
메모이제이션은 자주 쓰이는 값(or 함수)를 캐싱하여 리렌더링시 새로 만들지 않게 하는 것이다. 리액트에서는 `useMemo`, `useCallback`, `memo` 를 통해 구현할 수 있는데 여기서 굳이 설명하지는 않는다.
UI 시스템
UI 시스템의 효과는 두가지이다. 개발자 작업 시간 단축, 디자이너 작업 시간 단축 서로가 서로를 배려하다보니 아무 발전도 하지 못한 지난 1년이었다. 갈등은 더 심각한 갈등을 피하기 위한 것이다. 갈등이 없으면 아무 발전도 없다.
Next App router에서 use client가 CSR을 뜻하지는 않는다.
분명히 서버컴포넌트로 렌더링되는건 아닌데,, use client를 사용하면 CSR로 된다는 뜻이 아닌가? 하고 공식문서를 보았다. 공식문서에서 클라이언트 컴포넌트 (use client) 가 어떻게 렌더링 되는지 잘 작성되어 있다.
개발자 류준열 이력서
안녕하세요 류준열입니다. 현재는 (주)자이온아이티에스에 재직하고 있습니다. '일이 되게 하는 사람'이 되고 싶고 그런 사람처럼 일하려 합니다. 감사합니다.