Frontend ๊ฐœ๋ฐœ์ž - hyo.loui

(React) WIL - 9์ฃผ์ฐจ ํšŒ๊ณ  ๋ณธ๋ฌธ

WIL

(React) WIL - 9์ฃผ์ฐจ ํšŒ๊ณ 

hyo.loui 2023. 1. 2. 02:38

๐Ÿ“ WIL: Weekly I Learned

 


Work done this week

์ด๋ฒˆ ์ฃผ ๋๋‚ธ ์ผ!

  1. ํ‹ฐ์Šคํ† ๋ฆฌ ํฌ์ŠคํŒ… = ๋งค์ผ TIL ์ผ์ง€ (๋ชฉํ‘œ, ์˜ค๋ฅ˜, ์ •๋ฆฌ๋กœ ์„ธ๋ถ„ํ™”)
  2. Project : helprogrammer = ํ”„๋กœ์ ํŠธ ์™„์„ฑ ( ๋ฐฐํฌ >> ๋ฐœํ‘œ )
  3. React Native ๊ฐ•์˜ ๋ฐ ์‹ค์Šต = Todo-List (Local >> FireStore)

 


Project review

 

๋ฆฌ๋•์Šค๋ฅผ ํ™œ์šฉํ•ด ํ”„๋กœ์ ํŠธ๋ฅผ ํ•ด๋ณด๋‹ˆ

๋”์šฑ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ถ€๋ถ„์ด ์ค‘์š”ํ•˜๋‹ค๊ณ  ๋Š๊ผˆ๋‹ค..

 

๋ฐ์ดํ„ฐ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ƒ๊ฒผ๋Š”์ง€, ์–ด๋–ค์ƒํƒœ์ธ์ง€ ๋ณธ์ธ์ด ์ž˜ ํŒŒ์•…ํ•˜๊ณ  ์žˆ์–ด์•ผ

์›์ธ ๋ชจ๋ฅผ ์—๋Ÿฌ ์—†์ด ์ž˜ ๋™์ž‘ํ•  ๊ฒƒ์ด๋‹ค

 

๊ทธ๋ž˜์„œ redux-devTool ์„ ์‚ฌ์šฉํ•˜๋Š”๋ฐ, 

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ devTool ์‚ฌ์šฉ์„ ๊ฐ„๊ณผํ•˜๊ณ ,

๋‚ด๊ฐ€ ๋งก์€ ์‚ญ์ œ ๋ถ€๋ถ„์—์„œ ์˜ค๋ฅ˜๊ฐ€ ๋‚ฌ๋‹ค.

 

ํ•ด๋‹น ๋ถ€๋ถ„์ด ๊ธด๋ฐ•ํ•œ ์ƒํ™ฉ์ด๋ผ ๋”ฐ๋กœ TIL ์„ ๋‚จ๊ธฐ์ง€ ๋ชปํ–ˆ์ง€๋งŒ,

๋‹ค์Œ ์ฃผ๋ง์—” ๋‹ค์‹œ ํ•œ๋ฒˆ ๋ณด๋ฉด์„œ ๋ฆฌ๋ทฐ๋ฅผ ํ•ด์•ผ๊ฒ ๋‹ค!

 

๋˜ Redux๋ฅผ ๊ณ„์† ๋‹ค๋ฃจ๋ฉด์„œ ์ต์ˆ™ํ•ด์ง„๋‹ค๋ฉด

์ •๋ง ์ž˜ ์“ธ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค! ๐Ÿ‘€

 

์ง€๊ธˆ๊นŒ์ง€,

์šฐ๋ฆฌ๋ฅผ ์ด๋Œ์–ด์ค€ ํŒ€์žฅ๋‹˜๊ณผ,

๋ฌต๋ฌตํžˆ ํŒ€์›๋“ค ์ž˜ ๋„์™€์ค€ ์˜*๋‹˜๊ป˜ ๋„ˆ๋ฌด๋„ˆ๋ฌด ๊ฐ์‚ฌ๋“œ๋ฆฌ๋ฉฐ

 

๋ชจ๋‘ ํž˜์„ ํ•ฉ์ณ ํฐ ๋ฌธ์ œ ์—†์ด ํ”„๋กœ์ ํŠธ ์™„์„ฑํ•œ

'์‚ฌ์‹ค์€ ๋ง์ด์กฐ'
๋„ˆ๋ฌด ๊ณ ์ƒํ•˜์…จ์Šต๋‹ˆ๋‹ค! 

 

์šฐ๋ฆฌ ์„œ๋น„์Šค๋ฅผ ์ž˜ ํ™œ์šฉํ•˜๋ฉด ์ƒ์—…์ ์œผ๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•  ๊ฒƒ ๊ฐ™๋‹ค๋Š” ํŠœํ„ฐ๋‹˜์˜ ํ”ผ๋“œ๋ฐฑ์—

์ž์‹ ๊ฐ์„ ์–ป์—ˆ๋‹ค

 

๊พธ์ค€ํžˆ ๋ฐฐ์šฐ๊ณ , ๋…ธ๋ ฅํ•˜๊ณ , ๊ธฐ๋กํ•˜์ž


 

Study review

 

๋‚ด๊ฐ€ ์ •๋ง ํฅ๋ฏธ๋กญ๊ฒŒ ์ƒ๊ฐํ–ˆ๋˜ React Native ๋ฅผ ๋ฐฐ์šฐ๋‹ˆ

๋„ˆ๋ฌด ์žฌ๋ฏธ์žˆ์–ด์„œ ์‹œ๊ฐ„ ๊ฐ€๋Š” ์ค„ ๋ชจ๋ฅด๊ณ  ์ •์‹ ์—†์ด ๊ณต๋ถ€ํ–ˆ๋‹ค

 

ํ•œํŽธ์œผ๋กœ๋Š”, ๋‹ค๋ฅธ ํ•™์Šต์—์„œ ์ด ์ •๋„๋กœ ์ง‘์ค‘ํ–ˆ๋‹ค๋ฉด..

'์ฝ”๋”ฉ๊ดด๋ฌผ์ด ๋˜์—ˆ์„ ํ…๋ฐ'๐Ÿ˜“ ์•„์‰ฝ์ง€๋งŒ,

 

๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์Šต๋“ํ•˜๋ฉด์„œ ๋‚ด ์‚ฌ๊ณ ์˜ ํญ์ด ๋” ๋„“์–ด์ง€๊ณ ์žˆ์Œ์„ ๋Š๋‚€๋‹ค

๊ทธ๋ฆฌ๊ณ  ๋ฐฐ์šฐ๋Š” ์†๋„๋„ ํ›จ์”ฌ ๋นจ๋ผ์ง€๊ณ  ์žˆ๋‹ค.

 

๋‹จ์ˆœํžˆ todo-list ๋ผ์„œ ๋‹ค๋ฅธ ์ˆ˜๊ฐ•์ƒ๋“ค์€ ์ง€๋ฃจํ•จ์„ ํ† ๋กœํ•˜๊ณค ํ•˜์ง€๋งŒ,

๊ทธ๋งŒํผ ๊ธฐ๋ณธ๊ธฐ๊ฐ€ ๋‹ด๊ฒจ์žˆ๋Š” ํ”„๋กœ์ ํŠธ๋ผ๋Š” ์ƒ๊ฐ์ด ์Šค์ณค๋‹ค..

 

์™œ๋ƒ ๋‹ค๋ฅธ ์„œ๋น„์Šค๋ฅผ ๋“ค์–ด๊ฐ€๋„ ๋ชจ๋‘ CRUD์˜ ์ง‘ํ•ฉ์ด์˜€๋‹ค..

 

๊ฒฐ๊ตญ ๋ชจ๋“  ๋‚ด์šฉ์€ todo-list ๋กœ์ง๊ณผ ๊ฐ™์ง€ ์•Š์„๊นŒ(?)

ํ•˜๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋‹ค

 

๋” ๊ณต๋ถ€ํ•˜๊ณ , ์‹ค๋ ฅ์„ ์Œ“์•„์„œ

๋” ํฐ ํ”„๋กœ์ ํŠธ์— ๊ธฐ์—ฌํ•˜๊ณ ์‹ถ๋‹ค!

 


 

์•„์ง ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์„ ๊ฝ‰ ์ฑ„์šฐ๊ณ ์‹ถ์€ ์š•๊ตฌ๊ฐ€ ์žˆ์Œ์— ๊ฐ์‚ฌํ•œ๋‹ค๐Ÿ˜„

ํ•ญ์ƒ ๋ฐฐ์šฐ๊ณ ์‹ถ์€ ๋งˆ์Œ์ด ์•ž์„œ์ง€๋งŒ, ์–ธ์  ๊ฐ€ ์Œ“์ด๊ณ  ์Œ“์—ฌ์„œ

 

์ •๋ง ํƒ„ํƒ„ํ•œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋  ๊ฒƒ ๊ฐ™๋‹ค!

 

์ง€๊ธˆ ๋‹น์žฅ์€ ์ด๊ฒƒ์ €๊ฒƒ ์—ฌ๋Ÿฌ ๋ถ„์•ผ๋ฅผ ๋ฐฐ์šฐ๋‹ค ๋ณด๋‹ˆ๊นŒ ๋จธ๋ฆฟ์†์—์„œ

์ •๋ฆฌ๊ฐ€ ์•ˆ๋˜๋Š” ๊ฒƒ ๋ฟ์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.. ๋‹ค๋ฅธ ์ˆ˜๊ฐ•์ƒ๋„ ๋‚˜์™€ ๊ฐ™์€ ๊ณ ์ถฉ์„ ๊ฒช๊ณ ์žˆ๊ณ 

์„ ๋ฐฐ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค์€ ์ด ๋˜ํ•œ ๋‹ค ๊ฒช๊ณ  ์ง€๋‚˜๊ฐ„ ๊ณผ์ •์ด๊ธฐ์— ์ถฉ๋ถ„ํžˆ ๋‚˜๋„ ํ•  ์ˆ˜ ์žˆ๋‹ค!

 

๋ฒŒ์จ ๋‚ด๋ฐฐ์บ  ์‹œ์ž‘ํ•œ์ง€ 2๋‹ฌ์ด ์ง€๋‚ฌ๊ณ ,

์ ˆ๋ฐ˜ ๊ฐ€๊นŒ์ด ํ–ˆ๋‹ค

 

์˜ฌํ•ด๋„ ๋ฐฐ์šฐ๋Š” ๋ชจ๋“  ๊ฒƒ์„ ๋‚˜์˜ ์ง€์‹์œผ๋กœ ์Šต๋“ํ•˜๊ณ  ํ™œ์šฉํ•˜์ž

2023 ์˜ฌ ํ•œํ•ด๋„ ๋ชจ๋“  ๊ฒƒ์„ ์Ÿ์•„ ๋ชฐ์ž… ํ•ด๋ณด์ž!

 

๐Ÿฆพ ๋น ์ดํŒ…๊ทธ.

 


 

2022๋…„ 12์›” 1 week 2 week 3 week 4 week (project)
ํ•™์Šต ๋‚ด์šฉ
(ํ”„๋กœ์ ํŠธ)
๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ๊ฐ•์˜ ์ˆ˜๊ฐ•ํ•˜์—ฌ (component, props, state) ์‹ฌํ™”๊ฐ•์˜ ์ฒญ๊ฐ• ์ค‘(redux ๋“ฑ)

๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ(ํˆฌ๋‘๋ฆฌ์ŠคํŠธ) ์™„๋ฃŒ
๋ฆฌ์•กํŠธ ์ˆ™๋ จ๊ฐ•์˜ ์™„๊ฐ•(redux, router, styled-component)

๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ2(ํˆฌ๋‘๋ฆฌ์ŠคํŠธ) ์™„๋ฃŒ
๋ฆฌ์•กํŠธ ์‹ฌํ™” ๊ฐ•์˜ ์ฒญ๊ฐ•์ค‘ (redux-toolkit / axios / thunk)


ํŒ€ ํ”„๋กœ์ ํŠธ ( helprogrammers )
React : redux-toolkit / axios / thunk ํ™œ์šฉํ•œ
ํŒ€ ํ”„๋กœ์ ํŠธ ( helprogrammers ) ์™„๋ฃŒ >> ๋ฐœํ‘œ
์‚ฌ์šฉ ํˆด
defalut : VS code
React, yarn, styled-components React, yarn, styled-component, Redux, Router styled-component, Redux, Router, redux-toolkit, axios, json-server, thunk styled-component, Redux, Router, redux-toolkit, axios, json-server, thunk