본문 바로가기

전체 글84

🧠 무한 스크롤, 가상 리스트, 그리고 Lazy Rendering 프론트엔드 개발을 하다 보면 리스트 렌더링 관련 고민은 늘 빠지지 않죠. 특히 "많은 데이터를 어떻게 사용자에게 빠르게, 부드럽게 보여줄 것인가?"는 모든 서비스에서 중요한 문제입니다.최근 저는 구성원 정보를 보여주는 테이블 UI를 리뉴얼하면서 이 문제를 직접 겪었고, 그 해결을 위해 IntersectionObserver 기반 Lazy Rendering을 선택했습니다. 오늘은 그 여정과 실무 적용 포인트를 공유해보려 합니다.🧩 기존 구조의 한계: 페이지네이션에서 무한 스크롤로기존 구성원 정보 페이지는 페이지네이션 기반이었습니다. 사용자는 1페이지, 2페이지를 넘기며 데이터를 봐야 했고, UX 측면에서 꽤 불편했습니다. 이에 따라:✅ 더 자연스럽게 데이터를 탐색할 수 있는 무한 스크롤로 변경❗ 하지만 무.. 2025. 4. 8.

함수형은 왜 함수지향형이 아닌 함수형 프로그래밍이라고 할까? 함수형 프로그래밍, 왜 '함수지향형'이 아닐까?객체지향 프로그래밍은 'Object-Oriented Programming'의 번역이다. 여기서 'Oriented'가 '지향'으로 번역되어 우리는 '객체지향'이라 부른다. 그런데 'Functional Programming'은 왜 '함수지향형'이 아닌 '함수형'일까?갑자기 든 의문인데, 처음에는 단순히 번역의 차이라고 생각했다. 하지만 이를 찾아보면서 흥미로운 내용들을 발견할 수 있었다.차이점'지향'의 의미'지향(指向)'은 "어떤 목표로 뜻이나 방향을 향함"을 의미한다.객체지향은 프로그래밍의 중심을 '객체'에 두고, 이를 향해 나아가는 방법론이다.'형'의 의미'형(型)'은 "생김새나 모양"을 의미한다.함수형은 수학적 함수를 바탕으로 한 프로그래밍의 한 '형태'를.. 2024. 7. 2.

Ref를 좀 더 잘 써볼까? (forwardRef와 useImperativeHandle) 들어가며: React의 Ref 전달 문제 React의 컴포넌트에서 ref를 전달하려고 하면 문제가 발생한다.// 🚨 동작하지 않는 코드const Input = (props) => { return ;};// 부모 컴포넌트const Parent = () => { const inputRef = useRef(null); return ; // ref가 전달되지 않음};이는 React가 기본적으로 ref를 일반 prop으로 전달하지 않기 때문입니다. 이런 제한이 있는 이유는:1. 캡슐화 유지: 내부 구현 세부사항을 보호2. 예측 가능한 데이터 흐름 보장3. 불필요한 노출 방지 forwardRef: React의 공식적인 ref 전달 메커니즘React 공식 문서에 따르면, `forwardRef`는 다음과 같은 .. 2024. 6. 28.

scale up과 scale out 👀TL; DR 스케일 업과 스케일 아웃의 차이 인증서버를 스케일 아웃한다고 하는 이유는 무엇일까 여러 사용자가 동시 로그인을 요구할 때, 스케일 아웃으로 처리하는 게 적합 스마일게이트 데브캠프를 하면서 많이 듣고, 하는 얘기 중에 하나가 scale out 과 scale up이다. 이전에도 많이 들었지만, 사실 그냥 둘다 확장한다는 말로 받아들이고 별 생각이 없었던 것 같다. 하지만, 이번에 발표 준비를 하면서 인증을 담당하는 서버 개발자가 '인증 서버와 유저 서버를 분리할지'에 대한 고민을 많이 했다. 이 고민을 많이 듣고, 결론을 내리길 -> '인증서버와 유저서버를 분리하고, 이후에 인증 서버를 scale out 할 수 있도록 설계한다' 였다. 별 생각 없다가 이때 왜 scale up이 아니라 scal.. 2024. 1. 16.

너 setTimeout, setInterval 로 시간 보장한다고 할 수 있어? 어떻게? 타이머를 구현하다가 문득 그런 생각이 들었다. 아무 생각 없이 setTimeout 과 setInterval을 사용하면서 얘네는 어떻게 돌아가는거지? 얘네를 믿고 써도되는건가? 과연 setTimeout과 setInterval이 시간을 보장해주는 게 맞나? 그래서 공부하게 됐다. 👀TL; DR setTimeout, setInterval의 차이점 지연 간격이 보장되나? 시간을 측정해야되는 타이머라면 Date가 해결책이 될수도..? setTimeout 지정해준 시간이 지난 후에 1회 특정 코드를 실행하는 방법 비동기 함수 setTimeout이 비동기처리가 가능한 이유는 JS엔진이 아니라 WebAPI에서 처리를 한다. 이를 통해서 싱글스레드인 JS에서 비동기적인 처리가 가능하게 된다. setInterval 지정해.. 2024. 1. 16.

styled-components무새의 tailwind CSS 도입기 - 1 👀TL; DR 원래는 styled-components를 주로 사용했다. 디자인시스템 구축을 하며 styled-components의 한계를 느꼈다. tailwind CSS를 도입했다. 아직은 혼란스럽다.. tailwind CSS를 '잘 쓰는' 방법을 모색중이다 styled-components를 사용했던 이유 스타일드 컴포넌트를 사용했던 이유는 '컴포넌트화'에 있었다. 컴포넌트화하는 걸 좋아하기도 했고, 컴포넌트 이름을 명시하면서 명확히 해당 태그의 역할이 드러난다는 점도 좋았다. 이 점은 버그 픽싱에도 굉장히 간편함을 느끼게 해줬다. (문제의 원인을 찾는 부분에서 명시성의 장점) 그리고 props로 조건부 스타일링의 장점도 매우 좋았다. 반복되는 컴포넌트에서 색깔만 바뀌는 경우를 많이 봤고, 반복되는 코드.. 2024. 1. 8.

이전 1 2 3 4 ··· 14 다음

티스토리툴바