Front-End
제네릭 & 타입 가드
제네릭?타입을 마치 클래스나 함수 등에서 파라미터처럼 사용하는 것을 의미한다.class ArrayOfNumbers { constructor(public collection: number[]) {} get(index: number): number { return this.collection[index]; }}class ArrayOfStrings { constructor(public collection: string[]) {} get(index: number): string { return this.collection[index]; }}number 타입, string 타입인거를 제외하면 나머지 부분은 전반적으로 동일하다. number 배열, string 배열을 생성자에서 매개변수로 받고 그 중에서 특..
타입스크립트 클래스 & 인터페이스
클래스객체를 어떤 필드(값)와 메서드(함수)로 표현하여 만들기 위한 설계class Vehicle { drive(): void { console.log('run run'); }}const vehicle = new Vehicle();vehicle.drive(); // run run;// 상속 (inheritance)// 부모가 자식에게 부모 클래스의 필드나 메서드에 속성을 물려주는 개념class Car extends Vehicle { // 자식 클래스에서 상속받은 메서드를 새롭게 재정의 할 수 있다 => 오버라이딩(overriding) drive(): void { console.log('car drive'); }}const car = new Car();car.drive(); // car drive 클래스..
타입 어노테이션 & 추론
타입 어노테이션?어떤 값이 어떤 타입을 참조하고 있는지 타입스크립트에게 알려주는 코드를 의미한다.개발자가 타입을 작성 해 주는 것을 의미하기도 한다.let name: string = 'Owen';let age: number = 30;let isMarried: boolean = false;let haveNothing: null = null;let nothing: undefined = undefined;// built in objectlet now: Date = new Date();// arraylet animals: string[] = ['cat', 'dog', 'cow'];// classclass Car {}let car: Car = new Car();// object literallet point: {..
타입스크립트란 무엇인가
✔️ 타입스크립트 언어가 무엇인지, 그리고 동작 원리에 대해 살펴보자 ☑️ 타입스크립트란?JavaScript With Syntax For Types. JavaScript With Syntax For Types.TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.www.typescriptlang.org타입스크립트 ⇒ 자바스크립트 + 타입 시스템☑️ 타입 시스템?개발 과정에서 에러를 잡을 수 있게 도와준다.자바스크립트는 느슨한 언어이기 때문..
React 동작 방식
💡 Vanilla Javascript로 DOM을 그릴 때와 React로 DOM을 그릴 때에 대해 간단히 짚어 보자 (1) Vanilla JS로 만든 간단한 카운터 예제 이해를 돕기 위한 코드로 destroy에 대한 부분은 정의하지 않고 간단하게 만들었다. DOM을 그리는 부분은 다양하게 구현이 가능하다. (insertAdjacentHTML, innerHTML 등) 0 Increment Decrement const counterElement = document.getElementById('counter'); const incrementButton = document.getElementById('incrementButton'); const decrementButton = document.getElementB..
Vanilla JavaScript로 React Hooks 구현하기
Hook은 React 16.8부터 도입된 기능으로, 기존의 class component에서 벗어나 functional component로 상태를 관리하고 react의 다른 기능을 사용할 수 있게 한다. 하지만 어떤 원리로 동작하는 걸까? 어떻게 컴포넌트가 계속 리렌더링되고 변경되는 것과 무관하게 상태를 관리하고 가져올 수 있는 걸까? 답은 Closure!! JavaScript Closure lexical environment와 함수의 조합으로 함수 내부의 lexical scope에서 정의한 변수는 함수 바깥에서는 직접적으로 참조하거나 수정할 수 없다 [JavaScript] Closure (클로저) Vanilla JavaScript로 useState 구현 기본적인 구조는 useState를 사용하는 컴포넌트..
프로토타입 (Prototype)과 객체지향 프로그래밍
function Work(indicator) { this._indicator = indicator ?? 0; } Work.prototype.start = function () { setInterval(() => { this._indicator += 10; this._draw(); }, 1000); } Work.prototype._draw = function () {} function WorkA() { Work.call(this, 0); } WorkA.prototype = Object.create(Work.prototype, {}); WorkA.prototype._draw = function () { /* linear progress drawing logic */ }; function WorkB() { W..
[Flutter] 구글 플레이 스토어 배포 과정
Flutter 앱 어플을 구글 플레이 스토어 배포 과정을 밟아보자.. 다음과 같은 두 단계를 따라준다. 안드로이드 어플을 abb로 빌드 구글 플레이 콘솔에 프로젝트 올리기 참고 https://wp.swing2app.co.kr/knowledgebase/playstore-apprelease/ https://samgupsal.tistory.com/35 https://velog.io/@adbr/2-3.-Google-play-store에-앱-출시 https://velog.io/@anna_developer/열심히-만든-어플을-구글-플레이-스토어에-배포-해-보자 안드로이드 어플을 abb로 빌드 먼저 안드로이드 어플을 배포할 수 있는 형태로 빌드 안드로이드 스튜디오 메뉴에서 Build → Flutter → Build ..
[Flutter] 유용한 패키지
photo_view https://pub.dev/packages/photo_view Pinch 제스쳐라고 해서 손가락 두개 이용해서 사진을 줌인 기본적인 갤러리, 캐러셀 UI도 쉽게 쓸 수 있게 제공 simple_animations https://pub.dev/packages/simple_animations (예시) https://github.com/felixblaschke/simple_animations/blob/main/example/example.md#stateless-animation 플러터에서 기본 기능만으로 애니메이션을 만들려면 대부분 StatefulWidget, Animation, Tween, Controller가 필요 이거 다 해결할 수 있는 패키지 flutter_launcher_icons..
[Flutter] 반응형
앱을 반응형으로 고려하지 않고 만들면 폰이 아니라 아이패드나 다양한 기기에서 볼때 끔찍한 상황이 발생한다. 그래서 큰 화면에서는 다른 레이아웃을 보여주고 싶다면 화면 사이즈에 따른 반응형 레이아웃을 만들면 된다. 💡 현재 기기의 스크린사이즈를 출력하고 싶으면 MediaQuery.of(context).size.width; //폭 (LP단위) MediaQuery.of(context).size.height; //높이 (LP단위) MediaQuery.of(context).padding.top; //기기의 상단바 부분 높이 (LP단위) MediaQuery.of(context).devicePixelRatio; //이 기기는 1LP에 픽셀이 몇개 들어있는지 MediaQuery.of(context).highContra..