프론트엔드 개발자
류준열
게시글 전체 보기
핵클 개발자한테 뜬금없이 연락해서 문제 해결한 날 (22.3.5)
회사 슬랙이 핵클 커뮤니티에 참여중이었는데 핵클 개발자분께 연락해서 고민이 있다고 여쭤보고 싶은게 있다니까 흔쾌히 약속을 잡아 주셨다. 그 부분을 핵클 개발자분께 여쭤봐서 해결할 수 있었다.
4/25/2024
about
컴포넌트 아키텍처: 뷰와 api 연동부 분리
컴포넌트를 만들때 어느 기준으로 어떻게 나눠야 할까? 하는 고민들이 있었는데 오늘 뷰와 api 연동부를 나누는 것이 가장 안정성 있는 방법이라는 결론을 내렸다. 단, 테스트 코드를 작성할 경우에.
4/21/2024
component
429에러와 토큰버킷알고리즘
써드파티 라이브러리에 의존하여 작업을 하다보면, 지나치게 낮은 request limit때문에 빈번하게 429 에러를 만날 수 있다. 이는 토큰 버킷 알고리즘으로 request limit에 도달하기 직전에 요청을 지연시켜서 해결 할 수 있다.
4/20/2024
network
setTimeout의 한계와 reqeustAnimationFrame
무한스크롤을 구현하면서 스크롤 이벤트에 throttle을 걸어서 1초 간격으로 이벤트가 발생하도록 하였다. 그런데 조금 찾아보니 setTimeout기반의 throttle은 call Stack이 비는것을 대기하다가 다른 태스크에 의해 순서가 밀릴 경우 '씹힐' 가능성이 있었다.
4/20/2024
browser
소프트웨어 장인 독후감
하지만 이것들 보다 가장 중요한건 개발자 개개인이 '소프트웨어 장인 정신'을 갖는 것이다.
소프트웨어 장인 정신이 없다면 나머지는 다 껍데기다.
3/17/2024
about
컴포넌트 라이브러리 npm 배포 (vite,pnpm)
컴포넌트 라이브러리를 npm 배포하는 방법
2/10/2024
component
하이빌리지 : 위치기반으로 가까운 관광지 보여주는 서비스
주말에 어디 놀러갔다 오고 싶어서 구글에 여행지를 검색하면 티스토리 광고글이 가장 상단에 있는 경우가 많다. '시각적으로 한눈에 가까운 관광지를 볼 수 있으면 좋겠다' 라는 생각이 들었다. 그래서 내 주변 가까운 관광지를 보여주는 서비스를 만들었다.
1/13/2024
side-project
사파리에서 클립보드 복사 이슈
`navigator.clipboard.writeText`는 웹 api의 일부로 복사 기능을 제공한다. 비동기적으로 동작하면서 Promise를 반환한다. 사파리에서는 보안상의 이유로 유저 액션을 통해서만 `navigator.clipboard.writeText`가 동작한다.
11/24/2023
browser
SSR에서 고려해야 할 것들
next는 SSR을 할 수 있는 리액트 프레임워크이다. JSX문법으로 렌더링 할 코드를 작성하면, next 서버에서 html을 만들어주고 그 이후 hydration이 진행되면서 리액트(CSR)이 진행된다.
11/22/2023
browser
자동저장 기능 구현시 고려해야 할 것
지원선발 시스템에서 제출한 설문지의 모든 답변이 초기화 되는 이슈가 있었는데, 재현이 되지 않았다. 나중에 알고보니 다중탭 문제였다. 또한 setInterval이 react 라이프 사이클과 맞물려 작동하지 않는 이슈도 있었다.
11/22/2023
react
도메인 주도 설계란 무엇인가? (Domain Driven Design Quickly)
전 회사 CTO 님과의 스터디 교재이다. 백엔드 개발자들은 필참이였고 나머지는 선택참여였다. 동료 백엔드 개발자분이 개발자의 마음가짐을 바로세우는데 도움이 되는 스터디라고 추천해주셔서 나도 중간부터 참여했다.
11/21/2023
about
블로그 제작기
티스토리에서 블로그를 운영하고 있지만 프론트엔드 개발자가 쌩으로 만든 블로그 하나는 갖고 있어야 하는것 아닌가? 하는 생각에 블로그를 만들게 되었다.
11/21/2023
next
메모이제이션이 필요한 순간
메모이제이션은 자주 쓰이는 값(or 함수)를 캐싱하여 리렌더링시 새로 만들지 않게 하는 것이다. 리액트에서는 `useMemo`, `useCallback`, `memo` 를 통해 구현할 수 있는데 여기서 굳이 설명하지는 않는다.
11/20/2023
react
UI 시스템
회사에서 랜딩페이지를 자주 업데이트 하고 협업하는 디자이너분은 프로덕트 디자이너가 아닌, 마케팅팀의 브랜드 디자이너였다. 매번 높은 자유도 떄문에 컴포넌트 재사용을 생각할 수 없어서 어느순간 유지보수성을 생각하지 않고 작업하였다. 그렇게 1년간 작업하다가 마케터분들을 설득했다.
11/20/2023
component
바탕화면 구현을 위해 Draggable.tsx 만들기
Drag and Drop 기능을 만들기 위해 라이브러리들을 검색해봤는데, 바탕화면을 구현하기에 적당한 라이브러리가 없었다. 그래서 직접 만들기로 했다.
11/9/2023
react
Next App router에서 use client가 CSR을 뜻하지는 않는다.
분명히 서버컴포넌트로 렌더링되는건 아닌데,, use client를 사용하면 CSR로 된다는 뜻이 아닌가? 하고 공식문서를 보았다.
공식문서에서 클라이언트 컴포넌트 (use client) 가 어떻게 렌더링 되는지 잘 작성되어 있다.
10/10/2023
next
프론트엔드 개발자 류준열 이력서
안녕하세요. 프론트엔드 개발자 류준열입니다.
10/4/2023
about