![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/SNdVM/btsHJTL1CvC/bU8Qf4EACRFCkepsQaOxVK/img.png)
자바스크립트 입문자 또는 문법에 그리 관심이 존재하지 않는 분들 위해서 해당 글에서는 알면 자바스크립트에서 유용하게 사용될 수 있는 문법들에 대해 소개합니다. 옵셔널 체이닝 (Optional Chaining) 객체나 배열에서 특정 속성이나 요소에 접근할 때, 해당 속성이나 요소가 존재하지 않아도 별도의 예외를 발생시키지 않고 undefined를 반환하는 기능을 제공하는 연산자입니다. 참고로 해당 연산자는 다트에서도 존재하며 별도의 null-safe 로직을 생략할 수 있는 특성때문에 많이 애용되는 연산자 중 하나입니다. 해당 연산자의 예시 코드를 보도록 하겠습니다.const child = parent?.child;child 속성이 nullable이라는 가정하에 속성 값을 참조하는 경우 . 대신 ?. 연산자..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bebJqI/btsHIUJuvCs/zkdXh0HS2Lb6KXJzhmMC8K/img.png)
타입스크립트는 정적 타입 검사 기능 외에도 다양하고 유용한 기능들을 제공합니다. 하지만 많은 개발자들이 이러한 기능들을 잘 모르고 사용하지 않는 경우가 많습니다. 해당 글에서는 타입과 관련된 다양한 유틸리티 기능들을 살펴보도록 하겠습니다. 유틸리티 타입 (Utility Types)타입스크립트는 타입 보장 및 검사 기능 뿐만 아니라 그와 관련된 다양한 유틸리티 타입을 제공하여 기존 타입을 기반으로 새로운 타입을 쉽게 만들 수 있도록 도와줍니다. 쉽게 말하자면 마치 레고 블럭처럼, 타입스크립트에서는 이미 존재하는 타입들을 조립해서 새로운 타입을 만들 수 있는 편리한 도구들을 제공하는데, 이걸 "유틸리티 타입"이라고 부릅니다. 여기에선 몇 가지 자주 그리고 널리 사용되는 유틸리티 타입들을 소개하겠습니다. P..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dVuhf6/btsHGvK8Z3Y/WgncBgS6We4VazkyHJFOqK/img.png)
데코레이터(Decorator) 패턴, 혹시 한 번씩은 들어보시거나 기억나시나요? 해당 패턴은 기존 객체의 기능을 동적으로 추가하거나 덮는 식으로 전체적인 기능에 변화를 주거나 하는데 널리 사용되는 패턴 중 하나입니다. 더보기해당 패턴에 대해 더 자세히 알고 싶다면 https://mttankkeo.tistory.com/19 참고해주세요. 앞서 데코레이터 패턴을 언급한 이유는 바로 여러분에게 소개할 믹스인과 그 사용 목적이 매우 유사하기 때문입니다. 물론 데코레이터 패턴과 믹스인 개념에 이미 익숙한 분들도 계시겠지만, 믹스인은 주로 단일 상속만을 지원하는 Dart나 Javascript 같은 언어에서 사용되는 개념입니다. 다중 상속을 지원하는 C++ 같은 언어에서는 믹스인의 필요성이 크지 않습니다. 또 한 가..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/eCf16o/btsHDcc6pjw/AqTKtAPCA2R45UxwrwZYG1/img.png)
해당 글은 이어서 GoF의 구조 패턴(Structural Pattern)을 이어서 다루겠습니다. 데코레이터 (Decorator)해당 패턴은 기존 인터페이스를 수정하지 않으면서 추가적인 기능을 확장하기 위해 주로 사용됩니다. 얼핏 들어보면 기존에 배웠던 어댑터 패턴과 목적성이 비슷해 보일 수 있습니다, 이는 여러분들이 기존 패턴들을 잘 숙지하고 이해했다는 뜻이기도 합니다. 당연히 기존 인터페이스를 변경하지 않고 기능을 추가한다는 점에서 어댑터 패턴과 유사해 보일 수 있습니다. 하지만 데코레이터 패턴은 호환성보다는 확장성에 초점을 맞춥니다. 현실 세계의 패턴 예시어댑터 패턴이 마치 전혀 다른 언어를 사용하는 사람끼리 대화하기 위해 통역사를 필요로 하는 상황이라면, 데코레이터 패턴은 이미 같은 언어를 사용하는..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/olR3a/btsHxGs24HS/6Wm4OPUtwTkZdXyqTMiC51/img.png)
해당 글은 이어서 GoF의 구조 패턴(Structural Pattern)을 다루겠습니다. 어댑터 (Adapter)어댑터, 말 그대로 무언가를 다른 것에 맞게 변환해주는 존재입니다. 마치 콘센트 모양이 맞지 않을 때 사용하는 어댑터처럼 말이죠. 이는 프로그래밍 세계에서도 마찬가지입니다. 특히, 기존에 만들어진 코드, 특히 수정하기 어렵거나 아예 손댈 수 없는 코드들을 다룰 때 어댑터 패턴이 유용합니다. 오래되고 복잡한 레거시 코드라던가 외부 라이브러리 사용 그리고 프레임워크 또는 SDK를 예시로 들 수 있습니다. 이런 코드들은 분석하고 수정하는 것 자체가 굉장히 힘든 경우가 많습니다. 하지만 어댑터 패턴을 이용하면 이런 골칫거리 코드들을 새로운 시스템에 맞게끔 연결해주는 다리 역할을 할 수 있습니다. 즉..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/b3vphB/btsHwsHY0av/B7g9q4WAxBGKuFuJm8nZ21/img.png)
우리는 객체지향 프로그래밍을 기반으로 협업과 오픈소스 라이브러리 개발에서 발생하는 여러 문제를 사전에 미리 해결하기 위해 여러 디자인 패턴들을 사용합니다. 이들의 주요 목적은 코드의 구조를 체계적으로 분리하여 개발, 유지보수, 테스트를 용이하게 하는 것입니다. 사실 이러한 사실들을 거의 대부분의 개발자가 인지하고 있을 것입니다, 하지만 해당 글에서는 이러한 패턴들을 사용했을 때 기존 코드와의 차이점, 대비되는 여러 예시들 그리고 여러 장점, 단점들을 자세히 살펴볼 예정입니다. 해당 글은 GoF의 생성 패턴(Creational Pattern)을 다룹니다. 싱글톤 (Singleton)어떠한 클래스의 인스턴스를 전역적으로 관리하기 위해서 널리 사용되는 디자인 패턴 중 하나입니다, 이 패턴을 사용하면 클래스의 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/K5xSl/btsHtggsmjj/udtFnKhvORdt4DzC0eTdpk/img.png)
객체지향 언어를 사용하여 개발을 수행할 때, 객체들을 어떻게 조합하고 구성하느냐에 따라 내부 보수성, 가독성 및 성능이 크게 달라질 수 있다는 점은 대부분의 개발자가 잘 알고 있을 것입니다. 그러나 이러한 사실을 알고 있더라도, 입문자가 객체지향 언어를 완전히 활용하기란 쉽지 않을 수 있습니다. 따라서 이 글에서는 입문자들이 객체지향 문법을 쉽게 공부할 수 있도록 돕기 위해 몇 가지 예시를 통해 객체지향 프로그래밍의 기본 개념을 풀어보려고 합니다. 유전 그리고 부모 클래스부모 클래스(parent class 또는 super class)는 특성을 물려받기 위해 상속한 클래스를 지칭합니다, 예시로 사람의 경우 공통된 특성 그리고 물려받은 특성은 동물 또는 생물체와 같습니다. 입문자의 경우, 클래스의 원리를 이..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cBPGju/btsHuQ8CCfJ/leSpf6EC7uKOzp4FAeUbr1/img.png)
자바스크립트를 이용하여 웹 개발 또는 객체지향화된 클래스를 개발하는 과정에서 흔히 발생할 수 있는 문제 중 하나는 콜백 함수를 등록할 때 발생하는 인스턴스 자신을 가리키는 참조 변수인 this를 참조할 수 없는 문제입니다. 예를 들어, 다음과 같이 class A를 선언하고 setTimeout 함수를 이용해 인스턴스의 메서드를 호출하는 경우가 있습니다. (이는 가장 간단한 예시들 중 하나일 뿐입니다) class A { constructor(value) { this.value = value; setTimeout(this.handle, 100); } handle() { console.log(this.value); }} 위 코드에서는 setTimeout 함수에 this...
- Total
- Today
- Yesterday
- canvas animation
- 타입스크립트
- Animatable
- 추상 팩토리
- 최대 오프셋
- js animation
- 안드로이드 개발
- AutomaticKeepAliveClientMixin
- 조건부 타입
- JavaScript
- conditional types
- 디자인 패턴
- Factory Method
- 현재 오프셋
- npm package
- utility types
- jetpack compose
- omit
- touch slop
- Structural Pattern
- NestedScrollConnection
- android
- animatable-js
- 팩토리 메서드
- Flutter
- nested scrolling
- 객체 지향
- TypeScript
- 문자열 템플릿
- 안드로이드
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |