Study

[Flutter] Flutter의 상태관리 - Riverpod

0. Riverpod란?Flutter에서 사용하는 상태 관리를 쉽게 관리할 수 있도록 하는 프레임워크 중 하나이다.상태 관리를 위해 사용하는 주요 라이브러리인 Provider의 한계를 개선한 기능을 제공하기 위한 목적으로 개발되었다.공식 홈페이지에서는 리액티브 캐싱, 데이터 바인딩 프레임워크라고 소개되어 있는데 리액티브 캐싱과 데이터 바인딩은 무엇일까? 리액티브 캐싱데이터를 비동기적으로 계산할 때 캐싱하여 해당 데이터가 필요한 모든 곳에 쉽게 접근할 수 있도록 하는 기술데이터 바인딩UI와 데이터를 결합하는 기술데이터의 변경에 따라 UI를 자동으로 변경MVVM 패턴 구현 가능 1.  Riverpod의 특징쉬운 전역 상태 관리 구현- 상태를 전역적으로 사용 가능하며 필요한 경우에만 초기화- 메모리 관리가 자..

[Flutter] Flutter의 상태관리 - GetX

0. GetX란?Provider와 마찬가지로 상태관리를 위한 패키지다. Docs에서는 GetX는 생산성, 성능, 조직화의 3가지 기본 원칙을 가지고 있다고 말한다. 생산성쉽고 친숙한 구문 사용개발 시간을 아낄 수 있으며, 애플리케이션을 최대 성능으로 제공 가능성능성능과 최소한의 리소스 소비에 중점을 둠Streams나 ChangeNotifier을 사용하지 않음조직화화면, 프레젠테이션 로직, 비지니스 로직, 종속성 주입 및 네비게이션 완전 분리 가능라우트간 전환을 하는 데에 context가 필요하지 않음위젯 트리에 독립적inheritedWidget을 통해 컨트롤러/블록에 접근하는 데에 context 미필요다중 Provider를 통해 위젯 트리에서 컨트롤러, 모델, 블록으로 주입할 필요 없음자체 종속성 주입 ..

[Flutter] Flutter의 상태관리 - Provider

0. 상태관리란?한 줄로 요약하자면 사용자의 인터페이스와 애플리케이션의 데이터가 일관되도록 유지하는 것, 이라고 한다.단순하게 생각하면 사용자가 애플리케이션을 사용할 때 사용되는 데이터, 사용자의 입력, 서버 응답,  UI 상태 등을 관리하는 방법이 상태관리인 셈이다. 그렇다면 이 상태관리라는 것이 필요한 이유는?데이터가 변경되어도 페이지가 재렌더링되지 않도록 하기 위함도 있지만, 상태들이 복잡하게 얽혀 있을 경우 UI의 변경 상태를 알 수 없기 때문이다. - 상태 (State)임시 상태: 상태 관리 기법이 필요 없는 체크 표시와 같은 것을 위젯 차원에서 해결하여 UI에 변화가 생기게 하는 데이터앱 상태: 앱의 여러 곳에서 공유되거나 세션 간에 유지하고 싶은 상태의 데이터임시 상태의 경우, State와 ..

[CSS] 수평 정렬 & 수직 정렬

수평 정렬 inline 요소 inline요소와 inline-block 요소에 가능한 방법 요소의 부모 태그에게 text-align: center; 적용 block 요소 요소에 margin: 0 auto; 적용 수직 정렬 수평 정렬과 다르게 한 번에 정렬되는 방법이 없기 때문에 여러 속성들을 함께 써서 적용해야 한다. block 요소 block 요소는 vertical-align 적용이 불가능하므로 inline-block으로 display 값을 변경 vertical-align: middle; 적용 1-1. 정 가운데에 배치 height가 100%인 를 생성 (가운데 배치를 도와 주는 가짜 요소) 이 요소에 vertical-align: middle; 적용 1-2. 요소가 밀려난다면? HTML 작성에서 사이의 ..

[CSS] Baseline (수직 정렬)

Baseline 보통 사람들은 요소의 끝을 baseline이라고 생각하지만, 글자의 바로 밑 라인을 baseline이라고 한다. 크기가 큰 글자와 작은 글자를 두고 보면 아래가 맞춰 있는 모습을 볼 수 있는데 그 선이 baseline이 되는 것이다. 텍스트 뿐만 아니라 이미지, inline 요소도 마찬가지이다. 또한, vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화시키는 곳에 위치한다. vertical-align inline 요소와 inline-block 요소를 수직 정렬할 때 사용한다. block 요소에는 적용되지 않는다. 요소 자체만 정렬하며, 내용에는 영향을 미치지 않는다. table cell에 적용할 때는 제외된다. vertical-align은 정렬하려는 요소를 다른 inli..

[CSS] Display

Display 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 언제 보이는가를 결정하는 속성이다. 모든 요소들은 단 하나의 display 값을 가진다. 여러 종류의 값이 있지만 대부분의 요소들은 inline과 block 중 하나를 가진다. 물론 원래의 기본 값을 CSS를 통해 바꿀 수 있다. inline block inline-block flex list-item none inline inline-level 요소의 기본 값이다. 이 속성이 적용되면 해당 요소는 width와 height를 부여하더라도 적용되지 않는다. 하나의 단어나 강조 구문처럼 인식되므로, 태그 다음의 요소는 줄 바꿈 되지 않는다. (수평 정렬) 값 기본 display 값이 inlin..

[SCSS] 상위 셀렉터 참조

상위 셀렉터 참조 SCSS/SASS 문법은 특수 문자 &를 이용하여 자신이 포함된 상위 셀렉터를 참조할 수 있습니다. 안녕하세요. 내용을 적어보겠습니다. 다른 내용을 적어보겠습니다. p { font-size: 20px; color: black; &.second {/* &.second = p.second */ color: red; } } 스타일 덮어쓰기 이러한 문법은 특정 클래스 안에서 스타일을 덮어쓰는 작업을 할 때, 유용하다. Hello? .page p { color: orange; .container & { /* .container & = .container .page p */ color: green; } }

[CSS] CSS 구체성 단위 (우선 순위)

CSS 구체성 단위 (우선 순위) 다양한 셀렉터들이 같은 요소를 가리키면 순위가 정해져야 한다. 이것을 구체성 단위라고 부르는데, 각 요소들은 정해진 점수가 있다. 그 점수가 높은 순서대로 우선 순위로 정해진다. 명시 방법 점수 TAG 1 Class 10 Id 100 HTML 태그의 style 속성 사용 (Inline Style) 1000 Inline Style 셀렉터에 Id가 많은 경우 셀렉터에 class, 속성(attribute), 가상 클래스(pseudo-class)가 많은 경우 일반적인 요소 또는 가상 요소가 많은 경우 /** 예시 **/ div.bbs_content { /* tag 1 + class 1 = 11점 */} body > div#container > div#header {/* tag ..

[CSS] CSS 상속

CSS 상속 CSS에는 상속이라는 개념이 있는데, 부모 요소의 속성을 자식 요소에게 넘겨 주는 것을 말한다. 그러나, 태그와 속성에 따라 상속이 되지 않는 경우가 있기도 한다. 상속되는 속성들 보통 글자, 정렬과 관련된 CSS 태그들은 그대로 상속된다. 예외적으로 태그에는 color 속성이 상속되지 않는다. color font-family font-size font-weight font-height line-height list-style text-align visibility 상속되지 않는 태그에 상속을 받아오는 방법 상속이 되지 않는 태그에 상속을 받기 위해서는 속성 값에 inherit를 사용해 주면 상속을 받을 수 있다. .div a { color: inherit; }

[CSS] 가상 클래스 (pseudo-class)

가상 클래스 (pseudo-class) 의사 클래스라고도 칭하며, 셀렉터에 추가하는 키워드로, 선택하고자 하는 HTML 태그가 특별한 상태일 때 사용한다. history, 컨텐츠의 상태, 마우스의 위치 등과 같은 외부 인자와 관련된 경우에도 스타일 적용이 가능하다. 가상 클래스의 문법 가상 클래스의 이름은 대소문자를 구분하지 않는다. 셀렉터: 의사 클래스 이름 {속성: 속성 값;} class에 사용하는 경우 셀렉터.클래스이름: 의사 클래스 이름 {속성: 속성 값;} ID에 사용하는 경우 셀렉터#아이디이름: 의사 클래스 이름 {속성: 속성 값;} 가상 클래스의 종류 가상 클래스의 종류는 동적 가상 클래스, 상태 가상 클래스, 구조 가상 클래스, 기타 가상 클래스로 나뉜다. 동적 가상 클래스 사용자의 움직임..