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

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

WIL

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

hyo.loui 2023. 2. 25. 15:05

๐Ÿ“ WIL: Weekly I Learned

 


Work done this week

์ด๋ฒˆ ํ•œ ์ผ!

  1. Project : Codefolio = ํ”„๋กœ์ ํŠธ ์ง„ํ–‰์ค‘ ( ํด๋”๋ง, ์ค‘๊ฐ„ ๋ฐœํ‘œ, KTP ํšŒ๊ณ  )

๋ฐฐ์šด ๋‚ด์šฉ

  • ์ปดํฌ๋„ŒํŠธ ๋ณ„ ์ž‘์—… ํ›„ ํŽ˜์ด์ง€์— ์ ์šฉ
  • supabase ์—ฐ๋™ํ•˜์—ฌ ์„œ๋ฒ„ํ†ต์‹ 
  • Next์—์„œ์˜ dev dependency array

Project review

 

ํ…Œ์Šคํฌ ๊ด€๋ฆฌ, ํ”„๋กœ์ ํŠธ ํ”„๋กœ์„ธ์Šค๊ฐ€ ์ž˜ ์ง„ํ–‰๋˜๋Š” ๊นŠ์€ ํŒ€ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋”์šฑ ๋ฐœ์ „ ๋˜๋„๋ก ๊ธฐ์—ฌํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค!

 

3์ฃผ์ฐจ ์ค‘๊ฐ„ ๋ฐœํ‘œ ํŠœํ„ฐ๋‹˜ ํ”ผ๋“œ๋ฐฑ

  •  ์ตœ์ข… ๋ฐœํ‘œ์‹œ + ๋ถ€๊ฐ€์„ค๋ช…์ด ํ•„์š”.
  •  readme ๋ฐ์ดํ„ฐ ๋ชจ๋ธ๋ง ์ถ”๊ฐ€.
  •  ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ… ์•„์ฃผ ์นญ์ฐฌํ•ฉ๋‹ˆ๋‹ค.
  •  ๋ฒ„๊ทธ ๊ฐœ์„ ํ•˜์—ฌ ์ตœ์ข… ๋ฐœํ‘œ๊นŒ์ง€ ์ค€๋น„ ์ž˜ ํ•˜๊ธธ.

์ค‘๊ฐ„ ๋ฐœํ‘œ์—์„œ๋Š” ์บ ํ”„ ์ธก์—์„œ 7๋ถ„์˜ ๋ฐœํ‘œ์‹œ๊ฐ„์„ ๊ผญ ์ค€์ˆ˜ํ•ด๋‹ฌ๋ผ๊ณ  ์š”์ฒญํ•˜์—ฌ(ํƒ€ ํŒ€์›์˜ ๋ฐœํ‘œ์‹œ๊ฐ„ ๋ณด์žฅ)

์ตœ๋Œ€ํ•œ ๋‚ด์šฉ์„ ์••์ถ•ํ•˜์—ฌ ๋ฐœํ‘œ ์ค€๋น„๋ฅผ ํ–ˆ์œผ๋‚˜, ์žฅ์ ์„ ๊ฐ€๋ฏธํ•˜์—ฌ ๋ฐœํ‘œํ–ˆ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค๋Š” ํ”ผ๋“œ๋ฐฑ์ด ์žˆ์–ด ์กฐ๊ธˆ ๋” ์‹ ๊ฒฝ์จ์„œ ๋ฐœํ‘œ์ž๋ฃŒ ์ค€๋น„๋ฅผ ํ•ด์•ผ๊ฒ ๋‹ค.

 

readme ๋ฐ์ดํ„ฐ ๋ชจ๋ธ๋ง์€ ๋””์ž์ธ๊ณผ ๊ธฐํš์ด ๊ณ„์† ๋ณ€๋™๋˜์–ด ํ…Œ์ด๋ธ”์—์„œ๋„ ์žฆ์€ ๋ณ€๋™์ด ์žˆ์–ด ๋ชจ๋ธ๋ง ๋‚ด์šฉ์„ ์ œ์™ธํ–ˆ๋‹ค.

ํ•˜์ง€๋งŒ ๊ฒฐ์ •์ด ๋˜๊ณ  ๋‚˜๋ฉด ์„ธ๋ถ€์ ์œผ๋กœ ์ž‘์„ฑํ•  ์˜ˆ์ •์ด๋‹ค.

 

ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…์œผ๋กœ๋Š” ๋‹จ์ˆœํ•˜๊ฒŒ ์—๋Ÿฌ, ๋””๋ฒ„๊น…์ด ์•„๋‹Œ

์„ฑ๋Šฅ๊ฐœ์„  ๋ถ€๋ถ„์— ์ค‘์ ์„ ๋‘์—ˆ๊ณ , ์ด๋Ÿฌํ•œ ๋ถ€๋ถ„์—์„œ ์นญ์ฐฌ์„ ๋ฐ›์•˜๋‹ค.

 

์•ž์œผ๋กœ ์ด๋Ÿฐ ๋ถ€๋ถ„์„ ์ƒ๊ธฐํ•˜๋ฉฐ ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…์ด ์ด๋ฃจ์–ด์ง€๋„๋ก ์œ ์ง€ํ•ด์•ผ๊ฒ ๋‹ค.(keep going!)

 

๋ฒ„๊ทธ ๊ฐœ์„ ์€ ํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ ์•Œ์•„์ฐจ๋ฆฐ ๋ถ€๋ถ„๋„ ์žˆ๊ณ ,

์œ ์ € ํ”ผ๋“œ๋ฐฑ ๋“ฑ์—์„œ ๋‚˜ํƒ€๋‚œ ๋ฒ„๊ทธ๊ฐ€ ์žˆ์—ˆ์œผ๋‚˜

๋ฆฌํŽ™ํ† ๋ง, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๊ต์ฒด ๋“ฑ์œผ๋กœ ๊ฐœ์„  ๋  ์˜ˆ์ •์ด๋‹ค.

 

๊ฐœ์ธ์ ์œผ๋กœ,

์šฐ๋ฆฌ๊ฐ€ ๊ฐ€์žฅ ์ž˜ ํ•˜๊ณ  ์žˆ๋Š” ์ ์€

ํ…Œ์Šคํฌ ๊ด€๋ฆฌ๋ผ๋Š” ๊ฒƒ์ด๋‹ค.

 

Github์˜ project, issue ๋“ฑ ์œ ์šฉํ•œ ๊ธฐ๋Šฅ๋“ค์„ ์‚ฌ์šฉํ•˜์—ฌ

ํ…Œ์Šคํฌ(์—…๋ฌด) ๋ถ„๋‹ด์„ ํ•˜๊ณ , Assigness์— ๋‹ด๋‹น์ž๋ฅผ ์ง€์ •ํ•˜๊ณ  ์ž‘์—… ์™„๋ฃŒ ํ›„

PR๋กœ ํ•ด๋‹นํ•˜๋Š” ์ด์Šˆ๋ฅผ ์—ฐ๋™ํ•˜์—ฌ

๋– ํ•œ ๋ถ€๋ถ„์„ ํ•ด๊ฒฐํ•˜์˜€๋Š”์ง€ ์Šคํฌ๋ฆฐ์ƒท๊ณผ gif ๋“ฑ์„ ์ด์šฉํ•ด

๋”์šฑ ๊ฐœ์„ ์‚ฌํ•ญ์„ ๋ณด์—ฌ์ฃผ๊ณค ํ–ˆ๋‹ค.

 


WIL

 

๋””์ž์ธ๊ณผ ๊ธฐํš ํšŒ์˜๋ฅผ ๋งˆ์ฃผํ•˜๋ฉฐ ๊ฐ์ž๊ฐ€ ์ถ”๊ตฌํ•˜๋Š”, ๋จธ๋ฆฟ์†์— ๊ทธ๋ฆฌ๊ณ ์žˆ๋Š” mvp๊ฐ€ ์ •ํ™•ํžˆ ์ผ์น˜ํ•˜๊ธฐ๊ฐ€ ํž˜๋“ค๋‹ค๋Š” ๊ฒƒ์„ ๋Š๊ผˆ๋‹ค.

์ด ๋ถ€๋ถ„์€ ๋ช…ํ™•ํ•œ ์˜์‚ฌ์ „๋‹ฌ๊ณผ ์‹œ๊ฐ ์ž๋ฃŒ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๊ณ  ๋Š๋ผ๋ฉฐ ๊ฒฝํ—˜ํ–ˆ๋‹ค.

 

 

Page์— ๊ณต์šฉ ์ปดํฌ๋„ŒํŠธ, ์‚ฌ์šฉ ๋  ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์ ธ์™€์„œ ๋ถ™์ด๊ณ  ์กฐํ•ฉํ•˜๋ฉด์„œ ๋ฐฐ์šด ๊ฒƒ์€

๋‚ด ์ฝ”๋“œ๋ฅผ ๋ณด๊ณ  ํ•œ๋ˆˆ์— ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์ž‘์—…ํ•ด์•ผ ํ•œ๋‹ค๋Š” ๋ถ€๋ถ„์ด๊ณ ,

js doc ๊ณผ ๊ฐ™์€ ๊ธฐ๋Šฅ(์ฃผ์„) ๋“ฑ์œผ๋กœ ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์—์„œ ์ด๋ฃจ์–ด์ง€๋Š” ๋กœ์ง์„ ์งง์€ ์‹œ๊ฐ„์— ํšจ์œจ์ ์œผ๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์•ผํ•œ๋‹ค๋Š” ๊ฒƒ์„ ๋ชธ์†Œ ๋Š๊ผˆ๋‹ค.

 

๋˜ํ•œ ๊ณต์šฉ ์ปดํฌ๋„ŒํŠธ์—๋Š” ๋กœ์ง์— ์˜์กด์„ฑ์ด ์—†๋„๋ก UI์ ์ธ ๋ถ€๋ถ„๋งŒ์„ ๋‹ด๋‹นํ•ด์•ผ ์ถ”ํ›„ ๋ฆฌํŽ™ํ† ๋ง ์†Œ์š”๊ฐ€ ์ค„์–ด๋“ค๊ณ ,

๋‚˜์ค‘์— ๋ณต์žกํ•ด ์ง€์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์ด๋‹ค. ์ฒ˜์Œ ์ž‘์—…ํ–ˆ๋˜ dropdown ์ปดํฌ๋„ŒํŠธ๋Š”

์‚ฌ์šฉ๋˜๋Š” page๊ฐ€ ํ•œ์ •์ ์ด์˜€๊ธฐ ๋•Œ๋ฌธ์— prop๋งŒ ์ „๋‹ฌํ•œ๋‹ค๋ฉด type์„ ์ด์šฉํ•ด ๋กœ์ง๋„ ๊ฐ™์ด ๋‚ด๋ณด๋‚ด์ฃผ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋†“์•˜๋Š”๋ฐ.. ๋‹ค๋ฅธ ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉํ•  ์ผ์ด ์ƒ๊ธด๋‹ค๋ฉด ์ข…์†์„ฑ์„ ์ถ”๊ฐ€ํ•ด์•ผํ•˜๊ณ  ๋กœ์ง๋„ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์— ๋ถ™์—ฌ์ค˜์•ผ ํ•˜๋Š” ์†Œ์š” ๋“ฑ

๋งค์šฐ ๋น„ํšจ์œจ์ ์ธ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋˜์–ด๋ฒ„๋ ธ๋‹ค๋Š” ๊ฒƒ์„ ๋Š๊ผˆ๋‹ค.

 

supabase api๋ฅผ ์‚ฌ์šฉํ•จ์— ์žˆ์–ด์„œ ๊ฐ์ž ์ปดํฌ๋„ŒํŠธ์—์„œ get์š”์ฒญ์„ ํ•˜๋Š” ๋ถ€๋ถ„์ด ์—„์ฒญ๋‚˜๊ฒŒ ๋งŽ์•„์กŒ๋Š”๋ฐ

์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•œ๋ฒˆ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๊ณ  ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋‚ด๋ ค๋ฐ›๋Š” ๋ถ€๋ถ„์„ ํ†ตํ•ด ์„ฑ๋Šฅ๊ฐœ์„ ์„ ์ด๋ฃจ์—ˆ๋Š”๋ฐ

์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” api๋Š” util๋กœ ๋ฏธ๋ฆฌ ๋นผ๋‘๋Š” ๊ฒƒ์ด ๋” ํšจ์œจ์ ์ด๋ผ๋Š” ๊ฒƒ์„ ๋ฐฐ์› ๋‹ค.

 

next์—์„œ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ ์šฉ ์‹œ ์ฒ˜์Œ ํ•ด์•ผํ•˜๋Š” install ํ›„

์ ์šฉ์ด ์•ˆ๋˜์–ด ์‚ฝ์งˆ์„ ๊พ€๋‚˜ ํ–ˆ๋Š”๋ฐ

๊ฐœ๋ฐœ ํ™˜๊ฒฝ์ด dev์ด๋‹ค ๋ณด๋‹ˆ dev dependency๋กœ ๋ณ€๊ฒฝํ•ด์•ผ ํ–ˆ๋‹ค.

๋˜ dev์—์„œ ์ด๋ฃจ์–ด์ง€๋Š” ๊ฒƒ์€ ๋ฐฐํฌ์‹œ ์ œ์™ธํ•˜์—ฌ ์ž๋™์œผ๋กœ ๋ชจ๋“ˆํ™” ๋˜์–ด์ง„๋‹ค๋Š” ๊ฒƒ์„ ๋ฐฐ์› ๋‹ค.

typescript๋ฅผ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ธ์‹ํ•  ์ˆ˜ ์—†๋Š” ๋ถ€๋ถ„๊ณผ ์ผ๋งฅ์ƒํ†ตํ•œ๋‹ค.

 


 

์—ด์ •์ ์ธ ํŒ€์›๋“ค์˜ ๊ฐœ๋ฐœ ์†๋„์™€ ๋””์ž์ธ๋„ˆ๋‹˜์˜ ์ž‘์—… ์†๋„๊ฐ€ ์กฐ๊ธˆ ์ฐจ์ด๋‚˜์„œ

์‹ค๋ง์Šค๋Ÿฌ์šด ๋ถ€๋ถ„๋„ ์žˆ์ง€๋งŒ, ์šฐ๋ฆฌ๋Š” ๊ฒฐ๊ตญ ๋๊นŒ์ง€ ์ž˜ ํ•ด๋‚ผ ๊ฒƒ์ด๋ผ๊ณ  ๋ฏฟ๋Š”๋‹ค!

 

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

 


2023๋…„ 2์›” 1 week 2 week (project) 3 week (project) 4 week (project)
ํ•™์Šต ๋‚ด์šฉ
(ํ”„๋กœ์ ํŠธ)
Next.js ํ•™์Šต ๋ฐ ์‹ค์Šต (๊ฐ•์˜)
๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐœํ‘œ ๋ฐ TIL ์ •๋ฆฌ
์œ ์ € ํ”Œ๋กœ์šฐ ์„ค๊ณ„,API ์„ค๊ณ„, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ ์ •, ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„, DB ์„ค๊ณ„, ๋ผ์šฐํŒ… ์„ค๊ณ„, ํด๋”๊ตฌ์กฐ ์„ค๊ณ„, ESLint ์„ค์ • >> init

24H ํ—ค์ปคํ†ค ์ง„ํ–‰ 
๊ธฐํš ๋งˆ๋ฌด๋ฆฌ, ํŽ˜์ด์ง€ ๊ตฌ์„ฑ(์ปดํฌ๋„ŒํŠธ ๋ณ‘ํ•ฉ), ๊ฐ ์ปดํฌ๋„ŒํŠธ์™€ ๊ธฐ๋Šฅ๋ณ„ task ๊ด€๋ฆฌ, github issue๋กœ ์ž‘์—… ๊ฐ๊ด€ํ™”

post-page, supabase ์—ฐ๋™, ๋กœ๊ทธ์•„์›ƒ ํ›„ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง, mypage background, toast-ui text editor
1.0.1 version deploy
๋ฒ„๊ทธ ์ˆ˜์ •, ํด๋”๋ง, ๋ฆฌํŽ™ํ† ๋ง(detail), 1.1.0 version task ์ค€๋น„
์ค‘๊ฐ„๋ฐœํ‘œ ๋ฐ KTP ํšŒ๊ณ 
 ์‚ฌ์šฉ ํˆด
defalut : VS code
Next.js(ssr, ssg, isr) / Typescript ์ƒ๋žต. ์ƒ๋žต, ์ƒ๋žต,

 

'WIL' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

WIL - [23.04.03 ~ 23.04.09]  (0) 2023.04.09
WIL - [23.03.27 ~ 23.04.02]  (0) 2023.04.03
(React) WIL - 16์ฃผ์ฐจ ํšŒ๊ณ   (1) 2023.02.23
(React) WIL - 15์ฃผ์ฐจ ํšŒ๊ณ   (1) 2023.02.12
(React) WIL - 14์ฃผ์ฐจ ํšŒ๊ณ   (1) 2023.02.03