본문 바로가기
728x90

Developer21

동기, 비동기 그리고 Blocking, Non-Blocking 1편 목차들어가기동기, 비동기, Blocking, Non-Blocking동기비동기BlockingNon-Blocking결국참고  들어가기개발 공부하다 보면 동기, 비동기라는 단어가 여러 번 볼 수 있습니다. 그리고 Blocking, Non-Blocking도 종종 보이기도 합니다. 그런데 각 개념을 배우고 학습할 땐 문제 없이 이해가 되는데 막상 설명해 보면 동기랑 Blocking이 비슷한 것 같고, 비동기랑 Non-Blocking이 비슷하게 느껴집니다. 모르는 부분이 더 있는 듯 싶어서 정리 해보았습니다.  동기, 비동기, Blocking, Non-Blocking동기동기(Synchronous)란 작업이 순차적으로 진행되며 작업이 완료될 때까지 다른 작업은 대기합니다. 장점으로는 설계가 간단하며 순차적으로 진행되.. 2025. 2. 2.
크롬에서 타이머가 자꾸 멈춰요 목차느리게 가는 타이머무슨 문제일까?어떻게 해결할까?web worker 이용하기Page Visibility api 이용하기다른 브라우저는 어때?참고  느리게 가는 타이머저는 최근 프로젝트에서 예상치 못한 타이머 문제를 접하게 되었습니다. 처음에는 타이머가 멈춘 것처럼 보였는데, 사실 정확히 말하면 타이머가 느리게 작동하고 있었습니다. 이런 상황은 처음이라 당황스러웠습니다. 코드를 점검해 보았지만, 코드 자체에는 문제가 없었습니다. 이 문제를 처음 발견하신 타 부서의 직원분께서 문제를 재현하는 방법을 알려주셨습니다. 사용 중인 브라우저는 크롬이었고, 타이머를 실행한 후 해당 탭을 오랫동안 상호작용하지 않은 채 다른 탭에서 활동을 하다가 약 5분 후에 다시 타이머가 있는 탭으로 돌아왔을 때, 타이머가 5분이.. 2024. 12. 5.
무한스크롤에서 가상스크롤까지 (가상스크롤편) 목차가상스크롤 알아보기가상스크롤 만들기설계하기무한스크롤과 비교하기더 생각해보기요소 높이와 스타일링라이브러리 사용하기참고  가상스크롤 알아보기이번에는 가상 스크롤에 대해 알아보겠습니다. 지난 편에서는 화면에 많은 요소가 있는 상황을 가정하며 가상 스크롤을 소개했고, 대표적인 예로 SNS에서 콘텐츠 목록을 끊임없이 스크롤하는 경우를 들 수 있습니다. 그러나 실제로 사용자가 보는 요소는 전체 중 극히 일부에 불과합니다. 이러한 점을 활용해 가상 스크롤은 보이는 요소만 렌더링하는 방식을 무한 스크롤 기법에 적용한 기술입니다. 먼저 화면에 많은 요소가 표시된 상황을 구현해 직접 그 느낌을 체험해보겠습니다. 이를 위해 이전에 구현했던 무한 스크롤의 목록을 대폭 늘려보겠습니다.현재 40만 개의 DOM 노드를 렌더링해.. 2024. 11. 24.
무한스크롤에서 가상스크롤까지 (무한스크롤편) 목차무한스크롤 알아보기배경GPT에게 물어보자무한스크롤 만들기설계하기코드더 생각해보기스크롤 위치 기억하기보이는 요소만 그리기 무한스크롤 알아보기배경회사는 현재 서비스 개발 환경을 개선하기 위해 RN에서 Next.js로 전환 중입니다. 이 과정에서 흩어져 있던 컴포넌트를 모아 공통 컴포넌트를 추출하고 구현하는 작업도 함께 진행하고 있습니다. 그 중 제가 담당한 무한 스크롤 개발을 하면서 알게 된 내용을 정리해 이 글을 작성하게 되었습니다.GPT에게 물어보자무한 스크롤이란 무엇이며, 어디서부터 시작된 걸까? GPT에게 물어봤더니 용어 설명과 배경뿐만 아니라 특징과 추가로 고려해야 할 점까지 답변해주었다. 이 글에서는 먼저 무한 스크롤의 개념과 배경을 알아보고, 특징과 더 생각해볼 부분은 구현 후에 따로 살펴보.. 2024. 10. 13.
728x90