Frontend(42)
-
GNB LNB SNB FNB
https://www.inflearn.com/blogs/3780 알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런) - 셰리님의 블로그 - 인프런 | 커뮤니티알아두면 좋은 웹 용어! GNB, LNB, SNB, FNB (feat. 인프런) - 웹사이트에서 유저의 서비스 탐색을 도와주는 카테고리. 서비스를 찾은 유저가 원하는 것을 쉽게 찾아낼 수 있게 직관적인 UI 구성이 필요www.inflearn.com
2025.01.15 -
dp, dpi, px 차이 및 계산법
https://saucecode.tistory.com/38 DPI, DP, PX, SP 단위의 정확한 정의 DPI (Dot Per Inch) 1인치당 픽셀의 수를 표현한다. 1 inch (2.54cm)에 몇 pixel이 들어가는가를 의미한다. ldpi - Low density (120dpi) mdpi - Medium density (160dpi) hdpi - High density (240dpi) xdpi - Extra high density (320dpi) 1인치 saucecode.tistory.com
2024.04.23 -
Data Fetching과 패키지 설치
패키지 추가하기 Flutter나 Dart 패키지 pub.dev 라는 공식 패키지 보관소에서 받을 수 있음. flutter pub add 비동기와 Future 타입 Future : 미래에 일어나는 것. 유저 네트워크, 서버 메모리 문제로 느릴 수 있는 경우, 요청이 처리될 때까지 기다려야할 때. await과 같이 쓰임. 미래에 받을 결과의 타입을 알려줌. 완료되었을 때 Response 반환함. 비동기 프로그래밍(async programming) : API 에 요청한 후 응답을 반환할 때까지 기다리기. 어떤 일이 일어날 때까지 기다림. 프로그램이 side effect를 기다리도록 함. 예) 서버가 응답할 때까지 기다림. import 'package:http/http.dart' as http; class Ap..
2023.12.15 -
딥 링크, 앱 링크, 유니버설 링크
https://help.dfinery.io/hc/ko/articles/360039757433-%EB%94%A5%EB%A7%81%ED%81%AC-Deeplink-URI%EC%8A%A4%ED%82%B4-%EC%9C%A0%EB%8B%88%EB%B2%84%EC%85%9C-%EB%A7%81%ED%81%AC-%EC%95%B1%EB%A7%81%ED%81%AC-%EA%B5%AC%EB%B6%84%EA%B3%BC-%EC%9D%B4%ED%95%B4
2023.11.14 -
플러터와 Stateful Widget
Stateless vs. Stateful Stateless Widget : build 메서드를 통해 단지 UI를 출력함. Stateful Widget : 상태에 따라 변화하는 데이터를 생각함. 데이터가 변화될때마다 UI가 변경됨. 위젯에 데이터 저장후 실시간으로 데이터 변화를 볼 수 있음. 상태가 없는 위젯 그 자체 위젯의 상태로 state는 위젯에 들어갈 데이터와 UI를 넣는 곳. 데이터가 변경되면 해당 위젯의 UI도 변경됨. Stateful Widget을 만드는 법 st만 작성시 stateless 또는 stateful 위젯을 선택할 수 있음 stateless widget에서 staeful 위젯으로 변경. 코드 액션 : convert to stateful widget Stateful Widget의 특성..
2023.10.31 -
플러터 화면구성
플러터로 UI 만들기 색상 사용법 Color(0xFF 색상코드) Color.fromARGB(255, r, g, b) Color.fromRGBO(r,g,b,opacity) SingleChildScrollView로 감싸기 : 영역 바깥으로 넘치지 않도록 함 Transform.translate를 통해 offset 주거나 사이즈 조정하기 Container에 clipBehavior를 넣어 Clip.hardEdge 설정으로 overflow된 요소들 자르기 Container에 decoration값을 넣어 rounded한 박스 만들기 //main.dart import 'package:flutter/material.dart'; import 'package:toonflix/widgests/button.dart'; impo..
2023.10.31