Algoroot's space

3. 클로저의 이해 지난 포스팅에서는 고차함수가 개발자로 하여금 일반적인 문제를 추상화로 만들 수 있게 어떻게 도와주는지 살펴보았습니다. sortBy라는 고차함수 예제를 들면서 고차함수이면서 클로저패턴을 가지고 있다고 하고 마무리를 하였습니다. 이번 포스팅에서는 클로저가 무엇인지 예제를 통해 살펴보고 활용하는 방안을 소개해드리려고 합니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 클로저의 가장 기본적인 개념은 외부 함수 내에 중첩된 내부 함수라는 것입니다. 그리고 스코프 레벨에 접근할 수 있다는 특징이 있는데요. 자체 선언 내에서..

안녕하세요 자바스크립트에서의 함수를 다룬 지난 포스팅에 이어서 이번 포스팅에서는 고차함수에 대해 다뤄보겠습니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 2. 고차함수 지난 포스팅의 내용을 정리해 보면 자바스크립트에서 함수는 데이터형이기 때문에 저장되고 전달되고 반환하는 예시를 살펴볼 수 있었습니다. 예시에서는 인자로서 다른 함수를 취하는 함수까지 있었지만, 다른 함수를 반환하지는 않았는데요. 함수를 인자로 받고 또 반환하며 이를 출력하는 고차함수에 대해 알아보겠습니다. 고차함수란 1. 다른 함수를 인자로 받거나 2. 다른 함수를..

안녕하세요 오늘은 자바스크립트에서 지원하는 클로저에 대해 설명해 보고자 합니다. 해당 글은 사내 프런트엔드 세션 발표자로 참여해 준비한 세션 내용을 담았습니다. 총 5개의 섹션이 있을 예정입니다. 주제를 선정하게 된 계기 최근 함수형 프로그래밍 책을 읽으며 클로저가 생각보다 깊게 자리하고 있고, 이미 유용하게 쓰이고 있지만 잘 모르고 있었다는 것을 깨닫게 되었습니다. 지난 토요일에 진행한 feconf 2023 컨퍼런스에 참여해 메모리 누수 디버깅 가이드를 들은 후 전역변수를 참조해 의도적으로 누수를 발생시킨 예제를 보며 잘못된 클로저의 사용이 성능 저하의 원인 중 하나일 것이라는 생각이 들었습니다. 이 포스팅을 통해, 클로저와 고차함수와 같은 어렴풋이 알고 있던 개념을 명확하게 이해시켜 드리고자 합니다...

안녕하세요 오늘은 무한스크롤 데이터를 다루는 InfinityList 컴포넌트를 생성한 경험을 소개해보고자 합니다. 리액트 네이티브의 FlatList 를 아시나요? 리액트 네이티브의 FlatList는 데이터가 많을 때 사용되는 컴포넌트로, 화면에 보여지는 부분만 렌더링하는 기능을 제공합니다. 이 컴포넌트를 사용하면 대규모 데이터 목록을 효율적으로 처리할 수 있습니다. 이전 글에서는 리액트 네이티브의 FlatList와 무한스크롤 API를 React Query를 활용하여 InfinityFlatList 컴포넌트를 만드는 과정에 대해 다룬 바 있습니다. [React Native] React Native에서 useInfiniteQuery를 사용하여 무한 스크롤 구현하기: InfinityFlatList 안녕하세요. ..

안녕하세요 오늘은 피그마 플러그인의 토큰스튜디오 설정법과, 프런트엔드에서 토큰을 활용한 스크립트 생성법에 관해 공유하고자 합니다. Sematic Token Semantic token 은 디자인 시스템을 구축하고 유지하는데 필수적인 요소입니다. 개발을 할 때 자주쓰이는 패턴과, 상수를 따로 변수로 저장하는 것 처럼, 색상 또한 임의의 어떠한 변수로 색상 코드를 지정할 수 있습니다. Chakra UI에서는 유저의 시스템모드에 따라서 토큰에 맞는 컬러값을 지정해주는 기능을 제공합니다. 이를 Semantic token이라고 하며 아래와 같은 패턴으로 저장하고 Semantic token에 적용시키면 됩니다. import { ChakraProvider, extendTheme } from '@chakra-ui/rea..

안녕하세요, 오늘은 Left Navigation Bar (LNB)에 있는 리스트에 적용한 Tooltip이 스크롤시에도 사라지지 않는 문제를 해결한 과정을 공유하려 합니다. 이 글에서는 Intersection Observer API를 활용한 방법이니 익숙하지 않으신 분들은 아래의 글을 참고해주세요! [Web] IntersectionObserver API 안녕하세요, 오늘은 Web API 중 하나인 Intersection Observer API에 대해 알아보는 시간을 갖겠습니다. 현대의 웹 개발은 사용자 경험을 개선하고 페이지 성능을 최적화하는 것이 매우 중요합니다. 이를 algoroot.tistory.com 소개 이 문제를 설명하자면 다음과 같았습니다. LNB의 아이템에 호버 액션을 취하면 해당 아이템의 ..

안녕하세요, 오늘은 Web API 중 하나인 Intersection Observer API에 대해 알아보는 시간을 갖겠습니다. 현대의 웹 개발은 사용자 경험을 개선하고 페이지 성능을 최적화하는 것이 매우 중요합니다. 이를 위한 다양한 기술 중 하나가 바로 "Intersection Observer API"입니다. IntersectionObserver he Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. Intersection Obser..

안녕하세요. 오늘은 React Native의 FlatList를 통한 무한스크롤을 구현하는 방법을 소개하고자 합니다. React Native에서 제공하는 FlatList에서 무한 스크롤 기능을 갖춘 InfinityFlatList 컴포넌트를 만들었습니다. (네이밍은 제 마음대로..) 이 컴포넌트는 FlatList와 유사한 기능을 제공하면서 React Query useInfiniteQuery의 Properties과 병합해 사용자가 리스트의 끝까지 스크롤할 때 추가 데이터를 자동으로 로드하는 기능을 갖추고 있습니다. 이 글에서는 InfinityFlatList 컴포넌트의 구현 과정을 안내하고 React Native 프로젝트에서 어떻게 사용할 수 있는지 설명하겠습니다. 시작하기 먼저, InfinityFlatList..