슬기로운 땅콩 마을

객체지향 언어를 사용하여 개발을 수행할 때, 객체들을 어떻게 조합하고 구성하느냐에 따라 내부 보수성, 가독성 및 성능이 크게 달라질 수 있다는 점은 대부분의 개발자가 잘 알고 있을 것입니다. 그러나 이러한 사실을 알고 있더라도, 입문자가 객체지향 언어를 완전히 활용하기란 쉽지 않을 수 있습니다. 따라서 이 글에서는 입문자들이 객체지향 문법을 쉽게 공부할 수 있도록 돕기 위해 몇 가지 예시를 통해 객체지향 프로그래밍의 기본 개념을 풀어보려고 합니다. 유전 그리고 부모 클래스부모 클래스(parent class 또는 super class)는 특성을 물려받기 위해 상속한 클래스를 지칭합니다, 예시로 사람의 경우 공통된 특성 그리고 물려받은 특성은 동물 또는 생물체와 같습니다. 입문자의 경우, 클래스의 원리를 이..

자바스크립트를 이용하여 웹 개발 또는 객체지향화된 클래스를 개발하는 과정에서 흔히 발생할 수 있는 문제 중 하나는 콜백 함수를 등록할 때 발생하는 인스턴스 자신을 가리키는 참조 변수인 this를 참조할 수 없는 문제입니다. 예를 들어, 다음과 같이 class A를 선언하고 setTimeout 함수를 이용해 인스턴스의 메서드를 호출하는 경우가 있습니다. (이는 가장 간단한 예시들 중 하나일 뿐입니다) class A { constructor(value) { this.value = value; setTimeout(this.handle, 100); } handle() { console.log(this.value); }} 위 코드에서는 setTimeout 함수에 this...

Webpack을 사용하는 주요 목적은 비동기 요청을 최소화함으로서 발생하는 지연시간 최소화입니다.이는 모듈화된 파일을 번들링하여 하나의 파일로 병합하는 것을 의미합니다. 이렇게 함으로서 사용자는 물리적으로 서버에게 요청하고 응답 받는 횟수를 줄여 정적 리소스를 빠르게 다운로드할 수 있게 합니다, 이는 사용자 경험을 획기적으로 높일 수 있는 주요 방법 중 하나입니다.(불필요한 요청과 동시 소켓 연결은 서버에 부담을 주고 성능을 저하시키는 주요 요인 중 하나입니다. 비동기로 요청한다 치더라도 서버는 여러 요청을 처리하기 위해 자원을 할당해야 하며, 불필요한 요청이 많아질수록 처리해야 할 작업량이 늘어나고 성능이 저하됩니다, 만약 그렇지 않더라도 사용자는 물리적으로 데이터가 서로 왕복하는 시간을 피할 수 없습..

그래프를 만들거나 여러 복잡한 구조들이 빠르게 렌더링되어야 할 때 cavnas 요소를 사용하여 js에서 이를 제어합니다. 이러한 특성 덕분에 js에서 제어하는 canvas 요소 특정상 css 속성을 사용하지 못합니다.해당 개발 환경에서 선형 또는 감속/가속(curved) 애니메이션을 구현할 때 매우 유용한 패키지를 만들었습니다. NPM animatable-jsThis package allows easy and light implementation of linear or curved animation in javascript. `Especially suitable in a development environment on web components or canvas.`. Latest version: 1.0...

Jetpack Compose에서 사용자의 경험을 풍부하게 하고 앱의 스타일에 부합하는 유연한 AppBar 동작을 구현하는 것은 매우 중요한 일입니다.애초부터 Jetpack compose는 이러한 커스텀 동작들을 구현하는 데 특화되어 있습니다. 본론으로 들어가자면 Jetpack Compose는 하위 컴포저블 요소에서 전파하는 스크롤 동작을 감지할 수 있는 Modifier.nestedScroll 이라는 기능을 제공합니다.  Modifier.nestedScroll은 NestedScrollConnection 인터페이스를 매개변수로 받습니다.해당 인터페이스는 하위 컴포저블 요소에서 발생시키는 스크롤 동작을 자신의 동작으로 치환할 수 있는 기능을 제공합니다. 먼저 매우 간단한 예제를 살펴보도록 하겠습니다.// 하위..

Jetpack compose에서는 기본적으로 LazyColumn이라고 하는 컴포저블 요소를 사용하여 아이템들을 렌더링합니다. 해당 컴포저블 요소를 사용하여 작업을 하다보면 몇가지 문제점들이 생기게 됩니다. 바로 LazyListState을 참조할 수 있는 상태에서도 스크롤의 현재 오프셋을 직접적으로 참조할 수 없다는 것이 가장 큰 문제로 다가오죠. (물론 스크롤이 위 또는 아래로 진행 가능한지 불가능한지의 여부는 참조할 수 있다만 저는 이러한 기본적인 기능을 제공해주지 않는다는 것 자체는 좀 단점이 될 수는 있다고 생각이 됩니다.) 플러터에서는 최대로 스크롤될 수 있는 범위와 현재 위치를 내부적으로 모두 계산해주지만(근사치), Jetpack compose에서는 아직 이를 계산하여 반환해주는 Getter를 ..

플러터에서 애니메이션을 구현하는 기반 클래스는 Ticker입니다. Ticker는 프레임이 업데이트될 때마다 등록한 콜백 함수를 호출하고 프레임이 업데이트되기까지 경과한 시간을 정의해주는 역할을 하는 녀석입니다. 하지만 우리는 대부분 티커의 인스턴스를 직접 생성하지는 않습니다.(물론 인스턴스를 생성하여 사용할 수도 있습니다.) TickerProvider라는 공급자 역할을 하는 클래스에 의해 Ticker를 생성합니다. (아마 Ticker와 관련된 위젯이나 기능들이 dispose되면 자동으로 함께 dispose될 수 있도록하기 위한 관리 용이성 때문인듯 합니다) 위젯 상태 내에서 애니메이션을 구현한다면 주로 SingleTickerProviderStateMixin 또는 TickerProviderStateMixi..

Stateful 위젯은 화면 상에서 사라지거나 위젯 트리 상에 존재하지 않으면(관용적으로 dirty widget이라고 부릅니다.) 위젯의 상태가 Dispose(폐기)되어 아무런 조치를 취하지 않는다면 상태를 유지할 수 없습니다. 해당 위젯을 다시 빌드하려고 한다면 기존에 존재하던 상태가 아니라 초기 값을 지닌 상태를 기반한 위젯이 빌드될 것입니다. 이렇게 되는 원인은 "메모리 관리와 효율성을 위해서"입니다. 모든 위젯의 상태들이 위젯 트리에 없더라도 메모리에서 불필요하게 존재한다면 생각만 해도 이는 굉장히 비효율적인 상황인 것이죠. 하지만 예외의 상황은 항상 있는 법, 이를 방지하는 방법은 매우 간단합니다.위젯의 상태 클래스를 AutomaticKeepAliveClientMixin로 확장하여 이를 해결할 ..