๐Ÿงฉ Expo๋กœ Today's ToDoList ๋งŒ๋“ค๊ธฐ(2)- ๊ธฐ๋ณธ ํ‹€ ์žก๊ธฐ

eassyยท2020๋…„ 8์›” 11์ผ
0

React-Native

๋ชฉ๋ก ๋ณด๊ธฐ
3/7
post-thumbnail

์‚ฌ์‹ค, ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๊ธฐ ์ด์ „์— ๋จผ์ € todo-list๋ฅผ ๋งŒ๋“ค์–ด๋ดค์—ˆ๋‹ค.
expo ๊ด€๋ จํ•˜์—ฌ ์ •๋ณด๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด ๊ตฌ๊ธ€๋ง์„ ํ•˜๋˜ ๋„์ค‘ ์ฐพ์€ ๋ธ”๋กœ๊ทธ์—์„œ
ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ๋งŒ๋“œ๋Š” ๋ฒ• ์„ ์ž์„ธํžˆ ์„ค๋ช…ํ•ด๋†“์œผ์‹  ๋ถ„์ด ๊ณ„์…”์„œ
๊ทธ ๊ธ€์„ ๋”ฐ๋ผ์„œ ์‹œ๋„ํ•ด๋ดค๋Š”๋ฐ
์–ด๋””์„œ๋ถ€ํ„ฐ ๊ผฌ์ธ๊ฑด์ง€ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ... ์ง„์งœ ๋˜‘๊ฐ™์ด ๋”ฐ๋ผํ•œ ๊ฒƒ ๊ฐ™์€๋ฐใ… ใ… 

์•„์ง ์ฝ”๋“œ์— ๋Œ€ํ•ด์„œ๋„ ์ต์ˆ™ํ•˜์ง€๊ฐ€ ์•Š์•„์„œ ์ด๊ฒƒ์ €๊ฒƒ ๊ฐ™์ด ํ•ด๋ณด๋ฉด์„œ
๋งŒ๋“ค์–ด๋ณธ ์ฒซ๋ฒˆ์งธ todolist๋Š”... ๋ญ๊ฐ€ ๋ฌธ์  ์ง€
์ž๊พธ state.todos.concat์„ ์ฐพ์„ ์ˆ˜ ์—†๋‹ค๋ฉฐ
๋ชฉ๋ก ์ถ”๊ฐ€ํ•˜๋Š” ๊ธฐ๋Šฅ์—์„œ ์ž๊พธ๋งŒ ์˜ค๋ฅ˜๊ฐ€ ๋‚ฌ๋‹ค...

์™ ์ง€ ๊ฐ™์ด ์‚ฌ์šฉ๋œ Modal์—์„œ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธด ๊ฒƒ ๊ฐ™์€๋ฐ ์™„์ „ ์‚ฌ์šฉ ์ฒซ๋‹จ๊ณ„์ธ ๋‚˜๋Š”
๋ฌธ์ œ ํ•ด๊ฒฐ์„ ํ• ๋งŒํ•˜์ง€๊ฐ€ ๋ชปํ•ดใ… ใ… 
๊ทธ๋ž˜์„œ ๋‹ค๋ฅธ ๊ธ€์„ ์ฐพ์•„์„œ ๋‹ค์‹œ ์‹œ๋„ํ•˜๊ธฐ...
์ด๋ ‡๊ฒŒ ์ฃผ์ ˆ์ฃผ์ ˆ TMI ๋!

1. ์Šค์ผ€์น˜ ๊ทธ๋ฆฌ๊ธฐ

์‚ฌ์‹ค ๋งค์ผ๋งค์ผ ์‹ค์ฒœํ•˜์ง€๋Š” ๋ชปํ•˜๋”๋ผ๋„ ๊ณ„ํš์„ ์„ธ์šฐ๋Š” INFJ์ธ ๋‚˜๋Š”
์•„์ดํฐ ๋ฉ”๋ชจ์žฅ์„ ์ž˜ ํ™œ์šฉํ•˜๊ณค ํ•œ๋‹ค.
์ฒดํฌํ•˜๋Š” ๊ธฐ๋Šฅ์ด ์žˆ์–ด์„œ ๊ทธ๋Ÿฐ์ง€ ๊ณ„์† ํ™œ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋Š”๋ฐ
์ด๋ฒˆ์— ์ด๋ ‡๊ฒŒ ์•ฑ์„ ๋งŒ๋“ค๊ฒŒ ๋˜๋ฉด์„œ ์‹ค์ œ๋กœ ์•ฑ์ด ์žˆ์Œ ํŽธํ•˜๊ฒ ๊ตฌ๋‚˜- ์‹ถ์€ ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.
( ์ด๋ฏธ '๋ฏธ๋ฆฌ์•Œ๋ฆผ'์ด๋ผ๋Š” ์•ฑ์ด ์•„์ดํฐ ๋‚ด์— ์žˆ๊ธด ํ•˜์ง€๋งŒ ์ž˜ ์•ˆ์”€... )

๊ทธ๋ž˜์„œ ๋ฉ”๋ชจ์žฅ ์Šคํƒ€์ผ์„ ๋ณธ๋œฌ todo-list๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ธฐ๋กœ..!
์ด์ „ ์ž‘์—…์—์„œ ํ–ˆ๋˜ ์Šคํƒ€์ผ์„ ๋ณธ๋– ์„œ
์ƒˆ๋กœ์šด ์ž‘์—…์— ์Šคํƒ€์ผ์„ ์ถ”๊ฐ€ํ•ด๋ณผ ์˜ˆ์ •์ด๋‹ค.
์ฒซ ์ž‘์—…์ธ ๋งŒํผ ๊ทธ๋ƒฅ ๊น”๋”ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด๋ณผ ์˜ˆ์ •!
๊ธฐ๋Šฅ๋“ค๋งŒ์ด๋ผ๋„ ์ œ๋Œ€๋กœ ์ž‘๋™๋งŒ ํ•ด์คฌ์Œ ์ข‹๊ฒ ๋‹ค.,,

๐Ÿ“ฑ ๊ธฐ๋Šฅ์„ค๋ช…

1) ํ•  ์ผ ์ถ”๊ฐ€ ๋ฒ„ํŠผ +

Header ๋งจ ์˜ค๋ฅธ์ชฝ์— ์žˆ๋Š” +๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ์„œ ํ•  ์ผ์„ ์ถ”๊ฐ€ํ•œ๋‹ค.
๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํ•˜๋‹จ์— modal์ฐฝ(TextInput)์ด ๋œจ๊ณ ,
์ด ์ฐฝ์— ํ•  ์ผ์„ ์ž…๋ ฅํ•ด์„œ ์—”ํ„ฐ๋ฅผ ๋ˆ„๋ฅด๋ฉด ์ถ”๊ฐ€๊ฐ€ ๋œ๋‹ค.

์ด ์ฐฝ์ด ๋œจ๋ฉด ๋‹ค๋ฅธ ๊ธฐ๋Šฅ๋“ค์€ ์ž‘๋™ํ•˜์ง€ ๋ชปํ•˜๊ฒŒ ๋˜๋ฉฐ,
๋’ท ๋ฐฐ๊ฒฝ์„ ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด ๋ชจ๋‹ฌ์ฐฝ์ด ์‚ฌ๋ผ์ง€๊ฒŒ ๋œ๋‹ค.

2) ํ•  ์ผ ๋ชฉ๋ก๋‚ด์—์„œ์˜ ์ฒดํฌ๊ธฐ๋Šฅ โœ…

์™„๋ฃŒ๋œ ์ผ์€ ์ฒดํฌ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ด์„œ ํ‘œ์‹œํ•ด์ค€๋‹ค.
react๋กœ ์ž‘์—…ํ–ˆ์„ ๋•Œ์™€๋Š” ๋‹ฌ๋ฆฌ icon์„ ์‚ฌ์šฉํ•ด์„œ ๋งŒ๋“ค ๊ฒƒ์ด๋‹ค.
์Šค์ผ€์น˜์—๋Š” ์™„์„ฑ๋˜์ง€ ์•Š์€ ์ผ์—๋„ ์ฒดํฌํ‘œ์‹œ๊ฐ€ ๋˜์–ด์žˆ๋Š”๋ฐ
์‹ค์ œ๋กœ ๊ตฌํ˜„ํ•ด ๋‚ผ ํ™”๋ฉด์—์„œ๋Š”
์™„๋ฃŒ๋˜์ง€ ์•Š์€ ์ผ์€ ๋นˆ ์›์œผ๋กœ ๋งŒ๋“ค ์˜ˆ์ •.

3) ํ•  ์ผ ์‚ญ์ œ ๊ธฐ๋Šฅ ๐Ÿ—‘

์•„์ดํฐ์—์„œ ์‚ฌ์šฉํ•ด์™”๋˜ ๊ฒƒ ์ฒ˜๋Ÿผ ํ™”๋ฉด์„ ๋ฐ€์–ด์„œ ์–ด๋–ค ์ˆจ๊ฒจ์ง„ ๊ธฐ๋Šฅ์„
์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๊ตฌํ˜„ํ•ด ๋ณธ ์ ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์—
๊ธฐ๋ณธ์ ์œผ๋กœ ๊ทธ๋ƒฅ ์•„์ด์ฝ˜์„ ํด๋ฆญํ•ด์„œ ์‚ญ์ œํ•˜๊ธฐ ๋ณด๋‹ค๋Š”
์˜†์œผ๋กœ ๋ฐ€์–ด์„œ ์ˆจ๊ฒจ์ง„ ๊ธฐ๋Šฅ์„ ๋ณด์—ฌ์ง€๊ฒŒ ํ•˜๋Š” ๊ฒƒ๋„
์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์‚ญ์ œํ•  ์•„์ดํ…œ์„ ์™ผ์ชฝ์œผ๋กœ ๋ฐ€๋ฉด ์‚ญ์ œ๊ธฐ๋Šฅ์ด ๋ณด์—ฌ์งˆ ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค ์˜ˆ์ •.
'Swipable'์„ ์‚ฌ์šฉํ•ด์„œ ๋งŒ๋“ค ๊ฒƒ์ด๋‹ค.

2. ์Šคํƒ€์ผ ๋ฐ‘์ž‘์—…ํ•˜๊ธฐ

์ฒ˜์Œ์— ์ž‘์—…ํ–ˆ์„ ๋•Œ StyleSheet๋กœ๋งŒ ์ž‘์—…ํ•˜๋Š” ๊ฑธ๋กœ ์ƒ๊ฐํ•˜๊ณ 
margin์ด๋‚˜ padding์ž‘์—…์„ ํ•  ๋•Œ ๋ฐฉํ–ฅ๋ณ„๋กœ ์ผ์ผ์ด ์ง€์ •ํ•ด์ฃผ์–ด์•ผ ํ•˜๋Š”๊ฒŒ
์ฐธ ๋น„ํšจ์œจ์ ์ด๋‹ค- ๋ผ๋Š” ์ƒ๊ฐ์„ ํ•˜๊ณค ํ–ˆ๋Š”๋ฐ
react-native์—์„œ๋„ stlyed-components๊ฐ€ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š”๊ฑธ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค!
๊ทธ๋ž˜์„œ ๋‚ด๊ฒŒ๋Š” ์ต์ˆ™ํ•œ stlyed-components๋กœ ์ž‘์—…์„ ํ•ด๋ณผ ์˜ˆ์ •์ด๋‹ค.

๊ทธ๋ ‡๊ฒŒ ์šฐ์„  ์Šคํƒ€์ผ ํ‹€๊นŒ์ง€ ์™„์„ฑํ•œ ๋ชจ์Šต์€ ๐Ÿ”ป

profile
์‰ฝ๊ฒŒ ์‚ฌ๋Š”๊ฑด ์žฌ๋ฏธ๊ฐ€ ์—†๋”๊ตฐ์š”, ์ƒˆ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค๐Ÿค“

0๊ฐœ์˜ ๋Œ“๊ธ€