Juwon

모바일 앱 개발을 하게되면 필요한 구조와 패턴이 있습니다. Andriod, iOS, Flutter 모두 최종 기능은 같습니다. 앱을 개발한다면 앱의 확장성과 유지보수의 편의성을 고려해 적용하는 아키텍처는 다양하지만 많이 쓰이는 아키텍처 MVVM을 소개하려합니다. Flutter 특성에 맞는 MVVM 디자인 패턴을 적용하여 사용하는 것이 목적입니다. Flutter MVVM (Model View ViewModel) 3가지 레이어로 구성된 패턴입니다. 각 레이어별 역활을 파악하고 Data와 Action의 흐름을 일관되게 구현한다면 확장성있고 이해하기 쉬워지며 유지보수의 편의성이 좋은 앱을 만들 수 있게 됩니다. View Layer UI/UX요소로 구성된 다양한 위젯으로 화면을 구성하는 레이어입니다. (시각적인 ..

이번 포스팅에서는 Flutter에서의 Widget의 LifeCycle에 대해 알아보겠습니다. Flutter에서 위젯 종류인 Stateless Widget과 Stateful Widget은 서로 다른 LifeCycle을 가지고 있습니다. 소스 코드와 함께 알아보겠습니다. Stateless Widget LifeCycle Stateless Widget은 단순히 화면을 구성하는 위젯이므로 단순한 생명주기를 가지고 있습니다. Stateless Widget의 Constructor flutter에서 위젯은 기본적으로 클래스를 사용하여 생성합니다. 위젯은 기본적으로 클래스로 구성이 되어있기 때문에 클래스의 생성자를 사용할 수 있습니다. 위젯의 생성자와 클래스의 생성자는 동일한 역할을 가지며 마찬가지로 해당 위젯 안에서 ..

이번 포스팅에서 알아볼 내용은 Flutter 프레임워크에서 자주 사용되는 UI Widget입니다. Stack Widget 하나의 위젯 위에 다른 위젯을 쌓아올릴 때 사용하는 위젯입니다. (겹쳐 사용할 수 있습니다.) Stack API를 이용해 화면의 경계에서 정확히 원하는 위치에 위젯을 추가할 수 있습니다. 주로 Stack Widget을 이용해 Background, 배경화면, 현재 시간 등을 그릴 수 있습니다. 위치를 지정하지 않은 child Widget을 Column이나 Row가 자식을 취급하는 것 처럼 처리합니다. (자식 위젯을 왼쪽 위 모서리로 정렬하여 나란히 놓습니다.) alignment Property로 정렬 방향을 설정합니다. ( align-content : 방향 설정과 유사합니다. ) Pos..

이번 포스팅에서 알아볼 내용은 Flutter의 Widget입니다. Flutter의 모든 위젯은 다루지는 않습니다. 하지만 필요한 위젯을 찾는 방법에 대해 학습하고 주로 사용하는 위젯을 알아볼 수 있습니다. Flutter는 위젯으로 시작하고 위젯으로 끝나는 프레임워크이며 Flutter의 위젯은 웹에서의 HTML Element로 취급한다면 간단히 이해할 수 있습니다. Widget?? Flutter는 위젯이 전부다라고 말해도 될 정도의 중요도를 가지고 있습니다. 화면에 표시되는 모든 요소가 위젯이며 눈에 보이지 않지만 화면을 구성하는 Layout도 위젯입니다. 위젯은 크게 두가지로 분류할 수 있습니다. Stateful Widget Stateles Widget 각각의 위젯을 살펴보겠습니다. Stateful Wi..

이번 포스팅에서는 Dart Factory Constructor에 대해 알아보겠습니다. factory dart의 factory 키워드는 flutter에서 모델 클래스를 만들 때 자주 사용되는 예약어입니다. JSON 직렬화 예제 코드와 함께 factory를 알아보겠습니다. // build runner에게 Human 클래스가 JSON 직렬화 로직이 구성되어야 한다고 미리 선언하는 어노테이션입니다. @JsonSerializable Class Human { final String gender; final String age; final String name; Human({required this.gender, required this.age, required this.name}); // Map에서 새로운 Huma..

이번 포스팅에서 알아볼 내용은 Flutter 3.0 버전의 변경 사항입니다. 5월 13일 Google I/O를 통해 Flutter 3.0 버전이 릴리즈 되었습니다. ( Dart도 버전업이 되었습니다. ) Flutter 3.0 버전 변경 사항 1. Apple Silicon의 Fully Native 지원 기존 Flutter에서는 Rosetta등을 통해 간접적으로 Fully 지원하였습니다. Flutter 3.0버전에서 부터는 빌드 할 때 ARM칩을 지원하는 빌드를 별도로 추가 지원하며 Flutter 프레임워크가 애플 실리콘에서 작동되기 때문에 속도도 이전 버전보다 빨라지게 되었습니다. 2. Yaru Ubuntu를 만드는 회사 Canonial에서 Yaru Design Language를 Pub.dev를 통하여 지..

이번 포스팅에서 다룰 내용은 Flutter와 Dart입니다. 🎯 Dart? 다트는 2011년 10월 GOTO 콘퍼런스에서 구글이 공개한 객체지향 프로그래밍 언어입니다. 구글이 멀티 플랫폼 상에서 동작되도록 하는 앱을 위해 디자인되었습니다. 기본적으로 C언어의 문법과 거의 유사하며 간결하고 강력한 기능을 지원합니다. Dart의 용도는 모바일, 데스크톱, 서버, 웹 앱 용도로 사용됩니다. Dart는 DVM( Dart VM )상에서 동작하거나 네이티브 컴파일링을 통해 모바일, 데스크톱, 브라우저, 서버 플랫폼 상에서 애플리케이션을 실행하고 지원합니다. Dart의 유연한 컴파일링 덕에 대상 플랫폼 및 목적에 따라 다양한 방식으로 실행할 수 있습니다. Dart Native 모바일, 데스크톱, 서버, 임베디드를 대..

NextJs는 왜 사용할까? NextJs는 React로 만드는 SSR(Server Side Rendering) 프레임워크 입니다. ( Create React App과는 다른 Create Next App 명령어를 사용합니다.) npx create-next-app@latest --typescript 클라이언트 사이드 렌더링이 특징인 SPA를 서버 사이드 렌더링을 함으로 다음과 같은 이점이 있습니다. 1. 클라이언트 사이드 렌더링의 경우에는 모든 javascript 코드를 로드하고 난 이후에 사용자는 웹을 보게됩니다. 모든 javascript 코드를 읽을 때 까지 사용자는 많은 시간을 대기해야합니다. 2. SEO(Search Engine Optimization) 문제 해결 SEO는 검색 엔진 최적화를 말합니다..

useMemo Hook과 useCallback Hook은 메모이제이션( memoization )을 활용하는 React Hook입니다. memoization이란? 어떠한 연산의 수행한 결과값을 메모리 내에 저장하여 동일한 입력이 들어오는 경우 기존에 메모리에 저장된 연산 결과를 그대로 반환해주는 프로그래밍 기법입니다. memoization은 중복된 연산을 피하기 때문에 메모리를 조금 더 사용하더라도 애플리케이션의 성능을 최적화 할 수 있습니다. 이러한 특성을 이용해 React의 Component가 동일한 입력에 대해 재렌더링 되는 상황을 막을 수 있는 유용한 Hook입니다. useMemo란?? useMemo 함수는 메모이제이션된 값을 반환하는 Hook입니다. 하위 컴포넌트에서 2개의 props 인자를 받는..

이번 포스팅에서는 React의 Design 패턴 중 하나인 Atomic Design Pattern 에 대해 알아보겠습니다. Atomic Design Pattern 다섯 단계로 구성된 Atomic Design Pattern은 개발 개념의 방식뿐만 아니라 디자인에도 적용되는 설계 패턴입니다. Atomic의 어원 그대로 작은( 원소 ) 단위의 컴포넌트를 구성하여 강력한 재사용성과 단단한 설계 바탕으로 지속적이고 점진적으로 개발하기 용이한 디자인 패턴입니다. React만이 아닌 Flutter, Vue 또한 컴포넌트 단위로 개발하기 때문에 이러한 컴포넌트 중심 설계 패턴이 더욱 주목받게 되었습니다. 단계 별로 어떤 역할을 갖고 있는지 알아보겠습니다. Atom 가장 작은 단위의 컴포넌트를 말합니다. 원자는 어떠한 ..