분류 전체보기
-
마치 React에서의 관심사 분리와 비슷하게 Flutter에도 관심사 분리를 어떻게 적용시킬지를 정하는 디자인 패턴이 있다. Flutter로 앱 개발을 하게되면 앱의 확장성과 유지보수의 편의성을 고려해 적용하는 여러가지 디자인 패턴이 있다. 개발하기에 앞서 어떤 디자인 패턴이 있는지 알아보자. MVC MVC 패턴은 인터페이스, 데이터 데이터 제어에 사용되는 소프트웨어 디자인 패턴이다. Model, ViewModel, View는 각자의 역할을 한다. 만약, 한 페이지 안에 변수, 함수, 위젯을 한 번에 선언하게 되면 가독성과 효율이 매우 좋지 않으므로, 코드를 작성하고 수정할 때 많은 시간이 소요될 것이다. 이러한 문제를 해결하기위해 각 Model, ViewModel, View로 분리한다면 필요한 부분만을..
[Flutter] Design Pattern - MVC & MVP마치 React에서의 관심사 분리와 비슷하게 Flutter에도 관심사 분리를 어떻게 적용시킬지를 정하는 디자인 패턴이 있다. Flutter로 앱 개발을 하게되면 앱의 확장성과 유지보수의 편의성을 고려해 적용하는 여러가지 디자인 패턴이 있다. 개발하기에 앞서 어떤 디자인 패턴이 있는지 알아보자. MVC MVC 패턴은 인터페이스, 데이터 데이터 제어에 사용되는 소프트웨어 디자인 패턴이다. Model, ViewModel, View는 각자의 역할을 한다. 만약, 한 페이지 안에 변수, 함수, 위젯을 한 번에 선언하게 되면 가독성과 효율이 매우 좋지 않으므로, 코드를 작성하고 수정할 때 많은 시간이 소요될 것이다. 이러한 문제를 해결하기위해 각 Model, ViewModel, View로 분리한다면 필요한 부분만을..
2023.11.15 -
Flutter는 위젯으로 시작해서 위젯으로 끝난다. 화면에 표시된 모든 요소가 위젯이며, 눈에 보이지 않지만 화면을 구성하는 레이아웃도 위젯이다. 위젯은 크게 StatelessWidget과 StatefulWidget으로 분류할 수 있다. StatelessWidget 말그대로 상태를 가지고 있지 않은 위젯이다. 어떠한 상태값도 가지고 있지 않기 때문에 StatelessWidget은 화면에서 특정 움직임이나 변화가 없이 정적이다. 화면에는 표시되지만, 사용자와 어떠한 인터렉션도 하지 않으며, 어떠한 움직이나 변화를 가지고 있지 않다. StatefulWidget StatelessWidet과는 반대로 어떠한 상태값을 가지고 있으며, 상태값에 의해 화면에 움직임이나 변화를 표현할 때 사용한다. 사용자의 인터렉션에..
[Flutter] StatelessWidget, StatefulWidget and Life CycleFlutter는 위젯으로 시작해서 위젯으로 끝난다. 화면에 표시된 모든 요소가 위젯이며, 눈에 보이지 않지만 화면을 구성하는 레이아웃도 위젯이다. 위젯은 크게 StatelessWidget과 StatefulWidget으로 분류할 수 있다. StatelessWidget 말그대로 상태를 가지고 있지 않은 위젯이다. 어떠한 상태값도 가지고 있지 않기 때문에 StatelessWidget은 화면에서 특정 움직임이나 변화가 없이 정적이다. 화면에는 표시되지만, 사용자와 어떠한 인터렉션도 하지 않으며, 어떠한 움직이나 변화를 가지고 있지 않다. StatefulWidget StatelessWidet과는 반대로 어떠한 상태값을 가지고 있으며, 상태값에 의해 화면에 움직임이나 변화를 표현할 때 사용한다. 사용자의 인터렉션에..
2023.11.08 -
Flutter는 다음과 같이 일반적으로 사용되는 기본 Widget이 제공된다. Text 스타일이 지정된 텍스트를 생성할 수 있다. Row, Column 웹의 Flexbox 레이아웃 모델을 기반으로하여, Row, Column 방향 모두에서 유연한 레이아웃을 만들 수 있다. Stack 선형 방향(수평 또는 수직) 대신 Stack 위젯을 사용하여 페인트 순서에 따라 위젯을 서로 포개어 배치할 수 있다. Container 컨테이너는 배경, 테두리, 그림자 등으로 장식될 수 있고, 여백(margin), 안쪽 여백(padding) 및 크기에 대한 제약 조건이 적용될 수 있다. 또한 컨테이너는 행렬을 사용하여 3차원 공간에서 변환될 수 있다. 기본 사용법 import 'package:flutter/material.d..
[Flutter] Basic Widsgets & 기본 사용법Flutter는 다음과 같이 일반적으로 사용되는 기본 Widget이 제공된다. Text 스타일이 지정된 텍스트를 생성할 수 있다. Row, Column 웹의 Flexbox 레이아웃 모델을 기반으로하여, Row, Column 방향 모두에서 유연한 레이아웃을 만들 수 있다. Stack 선형 방향(수평 또는 수직) 대신 Stack 위젯을 사용하여 페인트 순서에 따라 위젯을 서로 포개어 배치할 수 있다. Container 컨테이너는 배경, 테두리, 그림자 등으로 장식될 수 있고, 여백(margin), 안쪽 여백(padding) 및 크기에 대한 제약 조건이 적용될 수 있다. 또한 컨테이너는 행렬을 사용하여 3차원 공간에서 변환될 수 있다. 기본 사용법 import 'package:flutter/material.d..
2023.11.07 -
프로젝트 시작 프로젝트 생성 > flutter create toonflix > cd toonflix > code . vscode 확장 설치 dart flutter 프로젝트 초기화 "main.dart" 파일의 void main() 함수 아래부분을 모두 지워주자. 그리고 main 함수 안의 runApp 함수를 확인해보면 아래와 같다. runApp() Function flutter에서 main함수는 필수이며 그 안에 들어가는 runApp 함수는 앱의 시작점, 루트라고 생각할 수 있다. runApp함수는 Widget 매개변수를 받고있는데, flutter는 모두 Widget으로 이루어진다고 생각할 수 있다. 마치 레고블럭과 같이 Widget들을 합치고 조립하여 하나의 앱이 완성된다. 공식 위젯은 아래 링크에서 확..
[Flutter] Flutter 프로젝트 폴더 구조프로젝트 시작 프로젝트 생성 > flutter create toonflix > cd toonflix > code . vscode 확장 설치 dart flutter 프로젝트 초기화 "main.dart" 파일의 void main() 함수 아래부분을 모두 지워주자. 그리고 main 함수 안의 runApp 함수를 확인해보면 아래와 같다. runApp() Function flutter에서 main함수는 필수이며 그 안에 들어가는 runApp 함수는 앱의 시작점, 루트라고 생각할 수 있다. runApp함수는 Widget 매개변수를 받고있는데, flutter는 모두 Widget으로 이루어진다고 생각할 수 있다. 마치 레고블럭과 같이 Widget들을 합치고 조립하여 하나의 앱이 완성된다. 공식 위젯은 아래 링크에서 확..
2023.11.06 -
1. homebrew 설치 2. flutter 설치 brew install --cask flutter cask 옵션은 flutter를 application으로 넣어주기 위함 만약 dart가 설치되어있다면, 삭제하고 flutter로 다시 설치 (dart가 같이 설치된다) 3. 필수사항 확인 flutter docter 위 명령어로 flutter를 사용하기위해 필요한 것들을 확인해보자. 4. xcode 설치 1. app store에서 xcode 검색 후 설치 2. 아래 명령어 입력 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch 3. cocoapods 설치 - 링크 brew i..
[Flutter] m1 mac flutter 초기 환경설정1. homebrew 설치 2. flutter 설치 brew install --cask flutter cask 옵션은 flutter를 application으로 넣어주기 위함 만약 dart가 설치되어있다면, 삭제하고 flutter로 다시 설치 (dart가 같이 설치된다) 3. 필수사항 확인 flutter docter 위 명령어로 flutter를 사용하기위해 필요한 것들을 확인해보자. 4. xcode 설치 1. app store에서 xcode 검색 후 설치 2. 아래 명령어 입력 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch 3. cocoapods 설치 - 링크 brew i..
2023.10.11 -
평소 리액트를 사용하면서 Styled-Components를 주로 사용해왔다. css를 사용하면 class name의 중복을 고려하며 개발 해야하고, 특정 스타일 코드를 찾기 어려운 단점 때문이었다. CSS in JS CSS-in-js는 자바스크립트 코드로 CSS를 작성하는 방식이다. 2014년 처음 나오게 됐고, 다음과 같은 문제를 해결하기 위해 나온 기술이다. Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요 Dependencies: CSS간의 의존 관계를 관리 Dead Code Elimination: 미사용 코드 검출 Minification: 클래스 이름의 최소화 Sharing Constants: JS와 CSS의 상태 공유 Non-deterministic Resolution..
[NextJS] Next에서의 CSS in JS평소 리액트를 사용하면서 Styled-Components를 주로 사용해왔다. css를 사용하면 class name의 중복을 고려하며 개발 해야하고, 특정 스타일 코드를 찾기 어려운 단점 때문이었다. CSS in JS CSS-in-js는 자바스크립트 코드로 CSS를 작성하는 방식이다. 2014년 처음 나오게 됐고, 다음과 같은 문제를 해결하기 위해 나온 기술이다. Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요 Dependencies: CSS간의 의존 관계를 관리 Dead Code Elimination: 미사용 코드 검출 Minification: 클래스 이름의 최소화 Sharing Constants: JS와 CSS의 상태 공유 Non-deterministic Resolution..
2023.09.04 -
프리온보딩 인턴십 과제인 facebook/react 이슈 목록을 가져오는 프로젝트에 필요하다고 생각되는 기능을 추가하고 더 많은 학습을 위해서 Next로 마이그레이션하고자 한다. https://wonillism.tistory.com/318 [NextJS] NextJS 13 예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각 wonillism.tistory.com Next 13에 대해 간단하게 소개했던 포스팅인데, 12에서 13버전으로 대규모 업데이트한 이유에는 생각보다 더 깊은 이해도를 필요로 하는것같다. 위 포스팅은 계속해서 업데이트할 예정이..
[GitHub API] react에서 next로 마이그레이션프리온보딩 인턴십 과제인 facebook/react 이슈 목록을 가져오는 프로젝트에 필요하다고 생각되는 기능을 추가하고 더 많은 학습을 위해서 Next로 마이그레이션하고자 한다. https://wonillism.tistory.com/318 [NextJS] NextJS 13 예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각 wonillism.tistory.com Next 13에 대해 간단하게 소개했던 포스팅인데, 12에서 13버전으로 대규모 업데이트한 이유에는 생각보다 더 깊은 이해도를 필요로 하는것같다. 위 포스팅은 계속해서 업데이트할 예정이..
2023.09.02 -
기존 프로젝트에서는 무한스크롤을 구현하면서 특정 타깃이 감지되면 query param에 page값을 증가시켜서 api 요청하고, issue list를 상태로 관리하여 새로 패칭되는 issue list를 상태에 계속 붙여주었다. 이번에는 react-query의 useInfiniteQuery 함수를 사용하여 구현해보자. react-query 공식문서 - useInfiniteQuery useInfiniteQuery | TanStack Query Docs const { fetchNextPage, tanstack.com useInfiniteQuery ...result와 ...options 부분의 값은 useQuery 와 같다. react-query 공식문서 - useQuery useQuery | TanStack ..
[GitHubAPI] useInfiniteQuery를 이용한 무한스크롤 그리고 throttle기존 프로젝트에서는 무한스크롤을 구현하면서 특정 타깃이 감지되면 query param에 page값을 증가시켜서 api 요청하고, issue list를 상태로 관리하여 새로 패칭되는 issue list를 상태에 계속 붙여주었다. 이번에는 react-query의 useInfiniteQuery 함수를 사용하여 구현해보자. react-query 공식문서 - useInfiniteQuery useInfiniteQuery | TanStack Query Docs const { fetchNextPage, tanstack.com useInfiniteQuery ...result와 ...options 부분의 값은 useQuery 와 같다. react-query 공식문서 - useQuery useQuery | TanStack ..
2023.08.31