Toy Project 006 Instagram Login page clone with React

Alice Kimยท2021๋…„ 5์›” 8์ผ
0

Toy Project

๋ชฉ๋ก ๋ณด๊ธฐ
6/7

๐ŸŽฏ Instagram clone ๋˜๋Œ์•„๋ณด๊ธฐ


๐Ÿ”‘Login page

1. id/pw validation

๐Ÿšฉ์ž…๋ ฅ๋ฐ›์€ ์‚ฌ์šฉ์ž์ด๋ฆ„/์ด๋ฉ”์ผ์ฃผ์†Œ/์ „ํ™”๋ฒˆํ˜ธ๊ฐ€ ํ˜•ํƒœ์— ๋งž๊ณ , ๋น„๋ฐ€๋ฒˆํ˜ธ๊ฐ€ 6์ž๋ฆฌ ์ด์ƒ์ผ ๋•Œ๋งŒ ์ถฉ์กฑํ•˜๋Š” ์กฐ๊ฑด๋งŒ๋“ค๊ธฐ

๋˜ ํ•œ๋ฒˆ ๋ฐฐ์›€์˜ ๊ธฐ์จ์„ ๋Š๊ผˆ๋˜ ์ˆœ๊ฐ„์ด๋‹ค. ์ด๊ฒƒ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์ •๊ทœํ‘œํ˜„์‹์„ ์ƒˆ๋กœ ๊ณต๋ถ€ํ•˜์˜€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

TIL015_์ •๊ทœํ‘œํ˜„์‹์—๋„ ๊ธฐ๋กํ–ˆ๋“ฏ์ด ์–ด๋ ค์›Œ๋งŒ ๋ณด์˜€๋˜ ์ •๊ทœํ‘œํ˜„์‹์„ ๊ณต๋ถ€ํ•˜๊ณ  ๋‚˜๋‹ˆ ์—ฌ๋Ÿฌ ๋ฌธ์ž์—ด ์กฐ๊ฑด๋“ค์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์ƒ๊ธด๊ฒƒ์ด๋‹ค.

์•ž์œผ๋กœ๋„ validation checkํ•  ๋•Œ๋‚˜ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œํ’€ ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์“ธ ๊ฒƒ ๊ฐ™๋‹ค.

2. DRY(Don't Repeat Yourself!)

๐Ÿšฉinput์ฐฝ์—์„œ ์ „๋‹ฌ๋ฐ›์€ ์ž…๋ ฅ๊ฐ’์œผ๋กœ state updateํ•˜๊ธฐ

์—ฌ๊ธฐ์—์„œ ์ž…๋ ฅ์ฐฝ์€ ์ด 2๊ฐœ๋‹ค. ์‚ฌ์šฉ์ž์ด๋ฆ„/์ด๋ฉ”์ผ์ฃผ์†Œ/์ „ํ™”๋ฒˆํ˜ธ ์ž…๋ ฅ์ฐฝ ๊ทธ๋ฆฌ๊ณ  ๋น„๋ฐ€๋ฒˆํ˜ธ ์ž…๋ ฅ์ฐฝ.

๊ฐ๊ฐ์„ ํ•จ์ˆ˜๋กœ ๊ตฌํ˜„ํ•˜์—ฌ state๋ฅผ ๋ณ€๊ฒฝํ•˜๋„๋ก ํ•  ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋‹ค๋ณด๋‹ˆ ์ค‘๋ณต์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ๋Š๋‚Œ์ด ๋“ค์—ˆ๋‹ค.

์—ด์‹ฌํžˆ ๊ตฌ๊ธ€๋ง์„ ํ•ด๋ณด๋‹ˆ..์—ญ์‹œ๋‚˜..๋ฆฌ์•กํŠธ๋Š” ๋˜‘๋˜‘ํ•˜๋‹ค!!

๋จผ์ € ๊ฐ๊ฐ input tag์˜ name attribute์— state์˜ key ๊ฐ’์„ ํ• ๋‹นํ•˜๊ณ 

์ด๋ฏธ ์ •ํ•ด์ง„ key๊ฐ€ ์•„๋‹ˆ๋ผ runtime์œผ๋กœ ์›ํ•˜๋Š” key๋ฅผ ๋ฐ›์•„์˜ค๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” computed property name(MDN ์ฐธ๊ณ )์œผ๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ฝ”๋“œ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.

Destructuring(๊ตฌ์กฐ๋ถ„ํ•ดํ• ๋‹น)์œผ๋กœ ์•„๋ž˜์™€ ๊ฐ™์ด ๋”๋”๋”๋” ๊ฐ„๋‹จํ•˜๊ฒŒ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

3. activate Login button

๐Ÿšฉ์กฐ๊ฑด์ด ์ถฉ์กฑ๋˜๋ฉด ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” ์‹œ๊ฐํ™”ํ•˜๊ธฐ

validation ์กฐ๊ฑด์„ ์ถฉ์กฑํ•˜์˜€์œผ๋ฉด ์‹œ๊ฐ์ ์œผ๋กœ ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ ํ™œ์„ฑํ™”๋ฅผ ๋ณด์—ฌ์ค˜์•ผํ•œ๋‹ค.

์ฒ˜์Œ์—๋Š” ๊ฐ ์กฐ๊ฑด์ด ์ถฉ์กฑ๋˜๋ฉด state์˜ id, password status๊ฐ€ false์—์„œ true๋กœ ๋ฐ”๋€Œ๋„๋ก ๋ณ€๊ฒฝํ•˜๊ณ  ์ด ๊ฐ’์„ ๋ถˆ๋Ÿฌ์™€์„œ ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ์„ ํ™œ์„ฑํ™” ์‹œ์ผฐ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์—ฌ๊ธฐ์„œ ๋ฌธ์ œ๋ฅผ ํ•˜๋‚˜ ๋ฐœ๊ฒฌํ•˜์˜€๋‹ค.

๋ถ„๋ช…ํžˆ ๋น„๋ฐ€๋ฒˆํ˜ธ์ด 6๊ฐœ๋ถ€ํ„ฐ true๊ฐ’์ด ๋˜์–ด์•ผ ํ•˜๋Š”๋ฐ ๋ฒ„ํŠผ ํ™œ์„ฑํ™”์™€ ๋น„ํ™œ์„ฑํ™”๊ฐ€ ๋‚ด๊ฐ€ ์„ค์ •ํ•œ ์กฐ๊ฑด๋ณด๋‹ค ๋Šฆ์€ ๊ฒƒ์ด๋‹ค.

๊ทธ๋Ÿฌ๋‹ค ์•Œ๊ฒŒ๋œ ์ปดํฌ๋„ŒํŠธ์˜ ์กฐ๊ฑด! React๋กœ ์‚ฌ๊ณ ํ•˜๊ธฐ์—์„œ ๊ธฐ๋กํ–ˆ๋“ฏ์ด, ์ปดํฌ๋„ŒํŠธ ์•ˆ์˜ ๋‹ค๋ฅธ state๋‚˜ props๋ฅผ ๊ฐ€์ง€๊ณ  ๊ณ„์‚ฐ ๊ฐ€๋Šฅํ•œ ๊ฒฝ์šฐ๋Š” state๊ฐ€ ์•„๋‹Œ ๊ฒƒ์ด๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ •๋ง ์ค‘์š”ํ•œ ๊ฐœ๋…์ด์—ˆ๋˜ ์ด๊ฒƒ!

state๋กœ ๊ฐ’์„ ๋‹ด์•„ ์‚ฌ์šฉํ•˜๋ฉด, setState๋Š” ๋น„๋™๊ธฐ์ ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋น„๋™๊ธฐ์ ์ธ setState์™€ ๋™๊ธฐ์ ์ธ ์–ด๋–ค ํ•จ์ˆ˜๋ฅผ ๊ฐ™์ด ์ž‘์„ฑํ•˜๋ฉด ํ•จ์ˆ˜๊ฐ€ ๋จผ์ € ์‹คํ–‰๋˜์–ด ๋”œ๋ ˆ์ด๊ฐ€ ๋˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์˜€๋˜ ๊ฒƒ๋„ ํ™•์ธํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

์œ„์™€ ๊ฐ™์ด ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ ํ™œ์„ฑํ™”์˜ ์กฐ๊ฑด์ด ์ถฉ์กฑํ•œ ์ง€ ์—ฌ๋ถ€๋ฅผ ๊ธฐ์กด state ๊ฐ’์„ ๋ถˆ๋Ÿฌ์™€์„œ ๊ณ„์‚ฐํ•˜๋Š” ํ•จ์ˆ˜๋กœ ๋”ฐ๋กœ ๊ตฌํ˜„ํ•˜๋ฉด, state์— true/false๋ฅผ ์ €์žฅํ•˜๊ณ  ๊ทธ ๊ฐ’์„ ๋ถˆ๋Ÿฌ์™€์„œ ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ ํ™œ์„ฑํ™”์— ์‚ฌ์šฉํ•  ํ•„์š”๊ฐ€ ์—†๋˜ ๊ฒƒ์ด๋‹ค.

์ค‘๋ณต๋ฐฐ์ œ์›์น™์„ ๋ช…์‹ฌํ•˜๊ณ  state์˜ ์ตœ์†Œ ์ง‘ํ•ฉ์„ ๋งŒ๋“ค์ž!

๐Ÿ’ญ What I learned from this..

๊ฐ„๋‹จํ•ด ๋ณด์ด๋Š” ์ด ํŽ˜์ด์ง€์—์„œ๋„ ์ •๋ง ๋งŽ์€ ๊ฒƒ์„ ๋ฐฐ์› ๋‹ค.

์‚ฌ์šฉ์ž ๋ˆˆ์—๋Š” ๊ทธ์ €๊ทธ๋ž˜ ๋ณด์ด๋Š”..์‹ฌ์ง€์–ด ์‚ฌ์šฉ์ž๋Š” ์•Œ์•„ ์ฐจ๋ฆฌ์ง€๋„ ๋ชปํ•˜๋Š” ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ๋“ค์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์–ผ๋งˆ๋‚˜ ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด ์˜ํ˜ผ์„ ๊ฐˆ์•„ ๋„ฃ์—ˆ์„๊นŒ ๋ฌธ๋“ ์ƒ๊ฐํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

๋ฆฌ์•กํŠธ ์ฒœ์žฌ๊ฐ€ ๋˜๊ณ  ์‹ถ๋‹ค.

๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ๋š๋”ฑ ๋š๋”ฑ ๋งŒ๋“ค์–ด ๋‚ด๊ณ  ์‹ถ๋‹ค.

profile
If you don't build your dream, someone will hire you to help build theirs.

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