Algoroot's space

5. 리액트에서의 클로저 지난 포스팅에서는 클로저를 활용한 메모이제이션의 예시 까지 살펴보았습니다. 지금까지 이 흐름을 잘 따라와주셨더라면 리액트에서 클로저를 어떻게 활용하고 있는지 감이 오실 수도 있을 것 같습니다. 혹시 React hook이 떠오르지 않으셨나요? 이번 포스팅에서는 리액트가 클로저를 어떻게 활용하고 있는지에 대해 다루겠습니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 리액트가 클래스형 컴포넌트였을 때는 render() 메서드를 통해 상태 변경을 감지할 수 있었습니다. 반면 함수형 컴포넌트는 렌더링이 발생하면 함수..

4. 클로저와 메모이제이션 지난 포스팅에서는 고차함수가 개발자로 하여금 일반적인 문제를 추상화로 만들 수 있게 어떻게 도와주는지 살펴보았습니다. sortBy라는 고차함수 예제를 들면서 고차함수이면서 클로저패턴을 가지고 있다고 하고 마무리를 하였습니다. 이번 포스팅에서는 클로저가 무엇인지 예제를 통해 살펴보고 활용하는 방안을 소개해드리려고 합니다. 목차 자바스크립트에서 함수는 “값"이다. 고차함수 클로저의 이해 클로저와 메모이제이션 리액트에서의 클로저 클로저 사용 시 주의할 점 (부록) 메모리 누수 디버깅 가이드 (feconf 2023 토스플레이스 세션을 듣고) 클로저의 특성을 활용한 대표적인 예시가 메모이제이션 입니다. 값을 저장하고 달라지지 않는 이상 저장된 값을 반환하는 형태이죠. 인자에 어떤 숫자를..

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

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

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