728x90 분류 전체보기204 무한스크롤에서 가상스크롤까지 (가상스크롤편) 목차가상스크롤 알아보기가상스크롤 만들기설계하기무한스크롤과 비교하기더 생각해보기요소 높이와 스타일링라이브러리 사용하기참고 가상스크롤 알아보기이번에는 가상 스크롤에 대해 알아보겠습니다. 지난 편에서는 화면에 많은 요소가 있는 상황을 가정하며 가상 스크롤을 소개했고, 대표적인 예로 SNS에서 콘텐츠 목록을 끊임없이 스크롤하는 경우를 들 수 있습니다. 그러나 실제로 사용자가 보는 요소는 전체 중 극히 일부에 불과합니다. 이러한 점을 활용해 가상 스크롤은 보이는 요소만 렌더링하는 방식을 무한 스크롤 기법에 적용한 기술입니다. 먼저 화면에 많은 요소가 표시된 상황을 구현해 직접 그 느낌을 체험해보겠습니다. 이를 위해 이전에 구현했던 무한 스크롤의 목록을 대폭 늘려보겠습니다.현재 40만 개의 DOM 노드를 렌더링해.. 2024. 11. 24. 무한스크롤에서 가상스크롤까지 (무한스크롤편) 목차무한스크롤 알아보기배경GPT에게 물어보자무한스크롤 만들기설계하기코드더 생각해보기스크롤 위치 기억하기보이는 요소만 그리기무한스크롤 알아보기배경회사는 현재 서비스 개발 환경을 개선하기 위해 RN에서 Next.js로 전환 중입니다. 이 과정에서 흩어져 있던 컴포넌트를 모아 공통 컴포넌트를 추출하고 구현하는 작업도 함께 진행하고 있습니다. 그 중 제가 담당한 무한 스크롤 개발을 하면서 알게 된 내용을 정리해 이 글을 작성하게 되었습니다.GPT에게 물어보자무한 스크롤이란 무엇이며, 어디서부터 시작된 걸까? GPT에게 물어봤더니 용어 설명과 배경뿐만 아니라 특징과 추가로 고려해야 할 점까지 답변해주었다. 이 글에서는 먼저 무한 스크롤의 개념과 배경을 알아보고, 특징과 더 생각해볼 부분은 구현 후에 따로 살펴보겠.. 2024. 10. 13. 클래스 컴포넌트에서 함수 컴포넌트로 전환기 목차 전환 배경 상태 변이 콜백 함수 Context Api 마무리 참조 배경 사내 코드에 아직 클래스 컴포넌트로 이루어진 프로젝트가 있습니다. 현재 그 프로젝트는 정상적으로 동작하고 간단한 기능 추가 및 유지보수에는 문제 없습니다. 하지만 서비스가 고도화 될수록 복잡한 기능 구현하기 위해 hook으로 지원하는 라이브러리를 자유롭게 사용하지 못했습니다. 고차 컴포넌트(HOC)를 이용하여 사용하는 방법이 있긴 하지만 매 라이브러리마다 고차 컴포넌트를 만드는 것은 유지보수 비용을 더 크게 만드는 것 같다고 판단하여 함수 컴포넌트로 전환하기로 결정했습니다. 이 전환 과정에서 고려해야하는 점들이 있어서 글로 작성하였습니다. 상태 변이 콜백 함수 클래스 컴포넌트의 상태변이는 콜백을 지원합니다. 이 콜백함수는 상태가.. 2024. 3. 17. 테크니컬 라이팅에 고민이 있다면 목차 개요 단계별 글쓰기 업무와 관련된 예시 후기 개요 우리는 업무를 하며 글쓰는 상황을 마주하게 된다. 동료에게 간단한 메시지를 작성하거나 사내외로 보여질 문서를 작성하는 등 다양한 경우가 있다. 필자는 글이 발행되어도 마음이 쉽게 놓이지 않는다. 왜냐하면 독자가 글을 읽고 동일한 생각을 하길 바라기 때문이다. 그래서 한눈에 이해하도록 여러가지 방법을 적용해본다. 글머리 기호를 이용하여 목록으로 작성하기도 하고, 예시를 들어서 추가 설명하기도 한다. 하지만 결국 되물어보는 응답이 발생한다. 무엇이 문제일지 가늠이 되지 않아서 글쓰기 역량이 부족한지 성찰하게 된다. 이와 비슷한 고민이 들면 기술블로그로 알아보는 테크니컬 라이팅 강의로부터 많은 도움받을 수 있어서 추천한다. 필자는 아래 강의에서 받은 도움.. 2024. 3. 3. 이전 1 2 3 4 ··· 51 다음 728x90
