๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

์ „์ฒด ๊ธ€

(154)
Pagination Pagination ๋งŽ์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถ€๋ถ„์ ์œผ๋กœ ๋‚˜๋ˆ  ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ธฐ์ˆ  ํŠน์ง• - ์ฟผ๋ฆฌ์— ํ•ด๋‹น๋˜๋Š” ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ๋ฒˆ์— ๋‹ค ๋ถˆ๋Ÿฌ์˜ค์ง€ ์•Š๊ณ  ๋ถ€๋ถ„์ ์œผ๋กœ ์ชผ๊ฐœ์„œ ๋ถˆ๋Ÿฌ์˜จ๋‹ค - ํด๋ผ์šฐ๋“œ ์‹œ์Šคํ…œ์€ ๋ฐ์ดํ„ฐ ์ „์†ก์— ๋ˆ์ด ๋“ ๋‹ค - ๋ˆ์ด ์•ˆ๋“ค๋”๋ผ๋„ ์ˆ˜ ์–ต๊ฐœ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ๋ฒˆ์— ๋ณด๋‚ด๋ฉด ๋ถ„๋ช… ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ํ„ฐ์งˆ ๊ฒƒ์ด๋‹ค - ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ํ„ฐ์ง€์ง€ ์•Š๋”๋ผ๋„ ๋ฐ์ดํ„ฐ ์ „์†ก์— ์ƒ๋‹นํžˆ ์˜ค๋žœ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆด ๊ฒƒ์ด๋‹ค Page Based Pagination - ํŽ˜์ด์ง€ ๊ธฐ์ค€์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ž˜๋ผ์„œ ์š”์ฒญํ•˜๋Š” Pagination์ด๋‹ค - ์š”์ฒญ ๋ณด๋‚ผ ๋•Œ ์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ ๊ฐฏ์ˆ˜์™€ ๋ช‡๋ฒˆ์งธ ํŽ˜์ด์ง€ ๊ฐ€์ ธ์˜ฌ์ง€ ๋ช…์‹œํ•œ๋‹ค - ํŽ˜์ด์ง€ ์ˆซ์ž ๋ˆ„๋ฅด๋ฉด ๋‹ค์Œ ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ€๋Š” ํ˜•ํƒœ์˜ UI์—์„œ ๋งŽ์ด ์‚ฌ์šฉ๋œ๋‹ค - Pagination ๋„์ค‘ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ๋ฐ์ดํ„ฐ ์ถ”๊ฐ€๋˜๊ฑฐ๋‚˜ ์‚ญ์ œ๋  ๊ฒฝ์šฐ ์ €์žฅ๋˜๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ๋ˆ„๋ฝ๋˜๊ฑฐ..
Session, Token, JWT, Access Token, Refresh Token Session ์œ ์ €์˜ ์ •๋ณด๋ฅผ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์ €์žฅํ•˜๊ณ  ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜๋Š” ๋„๊ตฌ - ์„ธ์…˜์€ ํŠน์ˆ˜ํ•œ ID๊ฐ’์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค - ์„ธ์…˜์€ ์„œ๋ฒ„์—์„œ ์ƒ์„ฑ๋˜๋ฉฐ, ํด๋ผ์ด์–ธํŠธ์—์„œ ์ฟ ํ‚ค๋ฅผ ํ†ตํ•ด ์ €์žฅ๋œ๋‹ค - ํด๋ผ์ด์–ธํŠธ์—์„œ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ ์„ธ์…˜ ID๋ฅผ ๊ฐ™์ด ๋ณด๋‚ด๋ฉด ํ˜„์žฌ ์š”์ฒญํ•˜๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋ˆ„๊ตฌ์ธ์ง€ ์„œ๋ฒ„์—์„œ ์•Œ ์ˆ˜ ์žˆ๋‹ค (์š”์ฒญํ•  ๋•Œ๋งˆ๋‹ค ์•„์ด๋””์™€ ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ฌผ์–ด๋ณผ ํ•„์š” ์—†๋‹ค) - ์„œ๋ฒ„์— ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๊ฐ€ ์ €์žฅ๋˜๊ธฐ ๋•Œ๋ฌธ์— ํด๋ผ์ด์–ธํŠธ์— ์‚ฌ์šฉ์ž ์ •๋ณด๋ฅผ ๋…ธ์ถœํ•  ์œ„ํ—˜์ด ์—†๋‹ค Session ๋‹จ์  - ์„ธ์…˜ ID๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์ €์žฅ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์š”์ฒญ ์žˆ์„ ๋•Œ๋งˆ๋‹ค ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ํ™•์ธํ•ด์•ผ ํ•œ๋‹ค - ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์„ธ์…˜์„ ์ €์žฅํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— Horizontal Scaling์ด ์–ด๋ ต๋‹ค Token ์œ ์ €์˜ ์ •๋ณด๋ฅผ Base64๋กœ ์ธ์ฝ”๋”ฉ๋œ String ๊ฐ’์— ์ €์žฅํ•˜๋Š”..
Tab bar, DefaultTabController, Bottom Navigation Bar DefaultTabController() ์‚ฌ์šฉ์‹œ Controller์—†์ด Controller ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค ์ผ๋ฐ˜์ ์œผ๋กœ ํƒญ๋ฐ” ์‚ฌ์šฉํ•˜๋Š” ์ƒํ™ฉ์—์„œ๋Š” DefaultTabController()๋กœ Controller๋ฅผ ์ž๋™์œผ๋กœ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ์‹๋ณด๋‹ค๋Š” Controller๋ฅผ ์ง์ ‘ ๋„ฃ์–ด์„œ ์ œ์–ดํ•˜๋Š” ์ƒํ™ฉ์ด ํ›จ์”ฌ ์žฆ๋‹ค tab controller๋ฅผ ์ง์ ‘ ๊ตฌํ˜„ํ•  ๋•Œ์˜ ์žฅ์  : ์ข€ ๋” ์ž์œ ๋„ ๋†’๊ฒŒ tab ๊ตฌํ˜„ ๊ฐ€๋Šฅํ•˜๋‹ค ํŒŒ๋ž€์ƒ‰ ๋ธ”๋Ÿญ์€ ์ด์ „ ์˜ˆ์ œ์™€ ๊ฐ™์€ ์Šคํƒ€์ผ๋ง ๋ถ€๋ถ„์ด๋‹ค Bottom Navigation Bar
๋ฏธ์„ธ๋จผ์ง€ ์ธก์ • ์•ฑ #2 - Hive Hive NoSQL ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฉด์„œ ๋™์‹œ์— ์ธ๋ฉ”๋ชจ๋ฆฌ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋‹ค ๋ฐ์ดํ„ฐ๋ฅผ ํŒŒ์ผ์— ์ €์žฅํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์•ฑ์˜ ์ƒ๋ช…์ฃผ๊ธฐ์™€ ๊ด€๊ณ„์—†์ด ๋ฐ์ดํ„ฐ๊ฐ€ ์œ ์ง€๋˜์ง€๋งŒ ์•ฑ์ด ์‹คํ–‰๋˜๋Š” ์ˆœ๊ฐ„ ํŒŒ์ผ์— ์ €์žฅ๋ผ ์žˆ๋˜ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๊ฐ€ ๋ฉ”๋ชจ๋ฆฌ์— ์˜ฌ๋ผ์˜จ๋‹ค -> ๋น ๋ฅธ ์†๋„ ์ž๋ž‘! import 'package:hive_flutter/hive_flutter.dart'; ํ”Œ๋Ÿฌํ„ฐ ํ•˜์ด๋ธŒ๋ฅผ import ํ•ด์ค˜์•ผ ๋” ๋งŽ์€ ๊ธฐ๋Šฅ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค void main() async { await Hive.initFlutter(); main.dart์—์„œ ํ•˜์ด๋ธŒ ์ดˆ๊ธฐํ™” Hive box SQL์˜ ํ…Œ์ด๋ธ”์ฒ˜๋Ÿผ ๋˜‘๊ฐ™์€ ํƒ€์ž…์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ชจ์•„๋‘๋Š” ๊ณต๊ฐ„์ด๋‹ค ํŠน์ • ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ฐ•์Šค๋ฅผ ์—ด์–ด์•ผ ํ•œ๋‹ค ๋ฐ•์Šค๋ฅผ ์—ด ๋•Œ๋Š” ์–ด๋–ค ํƒ€์ž…์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ• ์ง€, ๋ฐ•์Šค ์ด๋ฆ„์„ ์ง€์ •ํ•ด์ค€..
SQL, NoSQL, Hive SQL (Structured Query Language) ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ ์ •ํ˜• ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐ์— ์ตœ์ ํ™”๋˜์–ด ์žˆ๋‹ค ๋ฐ์ดํ„ฐ ์Šคํ‚ค๋งˆ๋ฅผ ๋ฏธ๋ฆฌ ์ •์˜ํ•˜๊ณ , ๋ฐ์ดํ„ฐ์˜ ๊ตฌ์กฐ๊ฐ€ ๊ณ ์ •๋˜์–ด ์žˆ๋‹ค ๋ฐ์ดํ„ฐ ์ผ๊ด€์„ฑ ACID (์›์ž์„ฑ, ์ผ๊ด€์„ฑ, ๊ณ ๋ฆฝ์„ฑ, ์ง€์†์„ฑ) ํŠธ๋žœ์žญ์…˜์„ ์ง€์›ํ•˜์—ฌ ๋ฐ์ดํ„ฐ ์ผ๊ด€์„ฑ์„ ๋ณด์žฅํ•œ๋‹ค ์ด๋Š” ๋ฐ์ดํ„ฐ์˜ ๋ฌด๊ฒฐ์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋œ๋‹ค ์Šค์ผ€์ผ๋ง ์ˆ˜์ง ์Šค์ผ€์ผ๋ง์ด ์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋ฉฐ, ์„œ๋ฒ„๋ฅผ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜์—ฌ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚จ๋‹ค ์ˆ˜ํ‰ ์Šค์ผ€์ผ๋ง์€ ๋” ๋ณต์žกํ•˜๊ณ  ๋น„์šฉ์ด ๋งŽ์ด ๋“ ๋‹ค ์ฟผ๋ฆฌ ์–ธ์–ด SQL ์ฟผ๋ฆฌ ์–ธ์–ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์กฐ์ž‘ํ•˜๋ฉฐ, ๋‹ค์–‘ํ•œ ์กฐ์ธ ๋ฐ ์ง‘๊ณ„ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค NoSQL (Not Only SQL) ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ ๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐ ํ˜•์‹์„ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์Šคํ‚ค๋งˆ๊ฐ€ ์œ ์—ฐํ•˜๋‹ค ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ๋ฅผ ๋‚˜์ค‘์— ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค ๋ฐ์ดํ„ฐ ..
HTTP, REST API, RESTful API HTTP (Hypertext Transfer Protocol) ๊ธฐ๊ธฐ ๊ฐ„ ํ†ต์‹ ํ•˜๋Š” ๋ฒ•์— ๋Œ€ํ•œ ์ผ์ข…์˜ ์•ฝ์† ์›น์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ํ”„๋กœํ† ์ฝœ์ด๋‹ค ํด๋ผ์ด์–ธํŠธ(์ผ๋ฐ˜์ ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ €)์™€ ์„œ๋ฒ„ ๊ฐ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๊ณ  ์‘๋‹ตํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋œ๋‹ค ์ฃผ๋กœ ๋‘ ๊ฐ€์ง€ ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค GET (๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด) POST (๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ๋ณด๋‚ด๊ธฐ ์œ„ํ•ด) ์˜ˆ๋ฅผ ๋“ค์–ด, ์›น ํŽ˜์ด์ง€๋ฅผ ์—ด๋ฉด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์›น ์„œ๋ฒ„๋กœ GET ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ํ•ด๋‹น ํŽ˜์ด์ง€์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์‹ ํ•œ๋‹ค URL ์ฃผ์†Œ์™€ URL Query๋กœ ์ด๋ฃจ์–ด์ง Body Header ์š”์ฒญ์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ REST API (Representational State Transfer API) HTTP๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฒ•์— ๋Œ€ํ•œ ์ผ์ข…์˜ ์•ฝ์† REST๋Š” ์›น ์„œ๋น„์Šค ์•„ํ‚คํ…์ฒ˜ ์Šคํƒ€์ผ ์ค‘ ํ•˜๋‚˜๋กœ, ..
๋ฏธ์„ธ๋จผ์ง€ ์ธก์ • ์•ฑ #1 - ๋ ˆ์ด์•„์›ƒ ๋„ˆ๋ฌด ๊ท€์—ฌ์šด .. ๋ฏธ์„ธ๋จผ์ง€ ์ธก์ • ์•ฑ ๐Ÿ’˜ ์•„์ง ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ ๋ฐ›์•„์˜ค๊ธฐ ์ „์ด๋ผ ์ž„์˜๋กœ ๊ตฌ์„ฑํ•ด์ฃผ์—ˆ๋‹ค ํฐ๋จธ๋ฆฌ ์ด๋ชจ์ง€์— ํ†ตํ†ต ํŠ€๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋„ฃ์–ด๋„ ์ข‹์„ ๊ฑฐ ๊ฐ™๋‹ค (ํ”Œ๋Ÿฌํ„ฐ์—์„œ ๊ฐ€๋Šฅํ•œ ๋ถ€๋ถ„์ด๋ ค๋‚˜?) ์—ฌ๊ธฐ์„œ๋ถ€ํ„ฐ ์ฃผ์š” ์ฝ”๋“œ๋งŒ ์‚ด์ง์ฟต.. drawer (์„œ๋ž)์„ ๊ตฌ์„ฑํ–ˆ๋‹ค ๋ฉ”์ธ์ด ๋˜๋Š” ๋ถ€๋ถ„์€ ์•ฑ๋ฐ”๋กœ ๊ตฌ์„ฑํ–ˆ๋‹ค ์•ฑ๋ฐ” ์•„๋ž˜์— CategoryCard์™€ HourlyCard๊ฐ€ ์ˆœ์„œ๋Œ€๋กœ ์œ„์น˜ํ•œ๋‹ค DrawerHeader์™€ ListTile๋กœ ๊ฐ๊ฐ ๋งŒ๋“ค์–ด์ค€๋‹ค ํ”Œ๋Ÿฌํ„ฐ์— ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ตฌํ˜„๋˜์–ด์žˆ๋Š” ๊ธฐ๋Šฅ๋„ ์ด๋ฏธ ์„ธ๋ จ๋˜์–ด ๋ง˜์— ๋“ ๋‹ค ์กฐ๊ธˆ๋งŒ ์†๋ด์ฃผ๋ฉด ๋จ.. LayoutBuilder( builder: (context, constraint) { LayoutBuilder๋ฅผ ์ด์šฉํ•˜๋ฉด constraint๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์„œ width: constraint.max..
RefreshIndicator RefreshIndicator ์•„๋ž˜๋กœ ์Šคํฌ๋กค ๊ฐ€๋Šฅํ•œ ํ•˜์œ„ ํ•ญ๋ชฉ์ด ์˜ค๋ฒ„์Šคํฌ๋กค๋˜๋ฉด ์• ๋‹ˆ๋ฉ”์ด์…˜ ์›ํ˜• ์ง„ํ–‰๋ฅ  ํ‘œ์‹œ๊ธฐ๊ฐ€ ์‚ฌ๋ผ์ ธ์„œ ํ‘œ์‹œ๋œ๋‹ค ์Šคํฌ๋กค์ด ๋๋‚  ๋•Œ ํ‘œ์‹œ๊ธฐ๊ฐ€ ์™„์ „ํžˆ ๋ถˆํˆฌ๋ช…ํ•ด์งˆ ๋งŒํผ ์ถฉ๋ถ„ํžˆ ๋“œ๋ž˜๊ทธ๋œ ๊ฒฝ์šฐ onRefresh ์ฝœ๋ฐฑ์ด ํ˜ธ์ถœ๋œ๋‹ค ์ฝœ๋ฐฑ์€ ์Šคํฌ๋กค ๊ฐ€๋Šฅ ํ•ญ๋ชฉ์˜ ๋‚ด์šฉ์„ ์—…๋ฐ์ดํŠธํ•œ ํ›„ ๋ฐ˜ํ™˜๋˜๋Š” Future๋ฅผ ์™„๋ฃŒํ•  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋œ๋‹ค ์ฝœ๋ฐฑ์˜ Future๊ฐ€ ์™„๋ฃŒ๋œ ํ›„ ์ƒˆ๋กœ ๊ณ ์นจ ํ‘œ์‹œ๊ฐ€ ์‚ฌ๋ผ์ง„๋‹ค https://api.flutter.dev/flutter/material/RefreshIndicator-class.html RefreshIndicator class - material library - Dart API A widget that supports the Material "swipe to refresh" idio..

Tiny Star