ํ‹ฐ์Šคํ† ๋ฆฌ ๋ทฐ

what i learned/TIL

[TIL] 2021/11/22 Mon -

zubetcha 2021. 11. 22. 23:00

 

 

 

 

 

 

 

 

 

Today I learned

 

 

 

๐Ÿ“Œ HTML, CSS

      1์ฃผ์ฐจ ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ์—์„œ HTML, CSS์— ๋Œ€ํ•œ ๊ธฐ์ดˆ์ง€์‹์ด ๋ถ€์กฑํ•˜๋‹ค๋Š” ๊ฑธ ์—ฌ์‹คํžˆ ๋Š๊ผˆ๋Š”๋ฐ

      ํ•ญํ•ด ์ปค๋ฆฌํ˜๋Ÿผ์—๋งŒ ์ง‘์ค‘ํ•˜๋Š๋ผ ๊ฐœ์ธ์ ์œผ๋กœ ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์— ๋Œ€ํ•œ ๊ณต๋ถ€๋Š” ๊ณ„์† ๋’ท์ „์ด์—ˆ๋‹ค.

      ์ด ์ƒํƒœ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด ์•ˆ ๋˜๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด์„œ

      ์˜ค๋Š˜๋ถ€ํ„ฐ ๋งค์ผ ์˜ค์ „์„ HTML, CSS, JS๋ฅผ ๊ณต๋ถ€ํ•˜๋Š” ๋ฐ ์“ฐ๋ ค๊ณ  ํ•œ๋‹ค.

 

      ์˜ค๋Š˜์€ MDN Docs๋ฅผ ์‚ดํŽด๋ณด์•˜๋‹ค.

      ์šฐ์„  ์ „์ฒด์ ์ธ ๋‚ด์šฉ์„ ํ›‘์–ด๋ณธ ํ›„์— ์ฃผ์ œ๋ฅผ ์ •ํ•ด์„œ ํ•˜๋‚˜์”ฉ ๊นŠ๊ฒŒ ๊ณต๋ถ€ํ•˜๋ ค๊ณ  ํ•œ๋‹ค.

 

 

๐Ÿ“Œ ์ธํ”„๋Ÿฐ Javascript ๋ฌธ๋ฒ• ๊ฐ•์˜ ์ˆ˜๊ฐ•

      ๊ฐ•์˜๊ฐ€ ๋‚˜๋ž‘ ๋งž์ง€ ์•Š์•„์„œ ์•ˆ ๋ณผ๊นŒ ํ•˜๋‹ค๊ฐ€ ์™„๊ฐ•๊นŒ์ง€ ์–ผ๋งˆ ๋‚จ์ง€ ์•Š์•„์„œ ๊ทธ๋ƒฅ ๋‹ค ๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

      ์˜ค๋Š˜์€ ES5์—์„œ์˜ ๋ฐฐ์—ด ์˜ค๋ธŒ์ ํŠธ์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ๋‹ค.

      ์ฃผ๋กœ Array์˜ ๋‚ด์žฅ ๋ฉ”์†Œ๋“œ์— ๋Œ€ํ•œ ๋‚ด์šฉ์ด์—ˆ๋Š”๋ฐ, ๋‚ด๊ฐ€ ๋ชจ๋ฅด๊ณ  ์žˆ๋˜ ๋ฉ”์†Œ๋“œ๋“ค๋„ ์žˆ์–ด์„œ

      ์˜์™ธ๋กœ ์œ ์ตํ–ˆ๋‹ค.

 

 

๐Ÿ“Œ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ ํ’€๊ธฐ

      ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค์˜ ๊ฐ™์€ ์ˆซ์ž๋Š” ์‹ซ์–ด! ๋ฅผ ํ’€์—ˆ๋‹ค.

      ์ฒ˜์Œ์—๋Š” map() ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ’€๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ, ์ฝœ๋ฐฑํ•จ์ˆ˜์— ๋„ฃ์„ ๋‚ด์šฉ์ด ์ƒ๊ฐ๋‚˜์ง€ ์•Š์•„์„œ

      ๊ฒฐ๊ตญ filter() ๋ฉ”์†Œ๋“œ๋กœ ๋ฌธ์ œ๋ฅผ ํ’€์—ˆ๋‹ค.

      ๊ทธ๋Ÿฐ๋ฐ ์ƒ๊ฐํ•ด๋ณด๋‹ˆ ๋“ค์–ด๊ฐ€๋Š” ์ฝœ๋ฐฑํ•จ์ˆ˜๋Š” ๋น„์Šทํ• ํ…๋ฐ ์™œ map()์œผ๋กœ ๋ชป ํ’€์—ˆ์ง€?

 

      ๋ฌธ์ œ๋ฅผ ์ฝ๊ณ  ์‹ค์ œ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ๊นŒ์ง€ ์‹œ๊ฐ„์ด ๊ฝค ๊ฑธ๋ ธ๋Š”๋ฐ,

      ๋ง‰์ƒ ๋ฌธ์ œ๋ฅผ ๋‹ค ํ’€์–ด๋†“๊ณ  ๋ณด๋‹ˆ ์ฝ”๋“œ๊ฐ€ ๋„ˆ๋ฌด ์งง์•„์„œ ์กฐ๊ธˆ ํ—ˆ๋ฌดํ–ˆ๋‹ค.

 

 

๐Ÿ“Œ React ๊ธฐ์ดˆ 5-3 ๊นŒ์ง€ ์ˆ˜๊ฐ•

      ์˜คํ›„๋ถ€ํ„ฐ ๋ฐค๊นŒ์ง€๋Š” ๊ณ„์† ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ ๊ฐ•์˜๋ฅผ ๋“ค์—ˆ๋‹ค.

      ์–ด์ œ 3์ฃผ์ฐจ ๊ฐ•์˜๋ฅผ ๋“ค์–ด๋†”์„œ ์˜ค๋Š˜์˜ ๋ชฉํ‘œ์น˜์— ๊ทผ์ ‘ํ•˜๊ฒŒ ๊ฐ•์˜๋ฅผ ๋“ค์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

 

      ๋‹ค๋งŒ...

      5์ฃผ์ฐจ ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด์„œ ๋ณต๋ณ‘์„ ๋งŒ๋‚ฌ๋‹ค.

      ์ฃผ์ธ๊ณต์€ ๋ฐ”๋กœ ์•…๋ช… ๋†’์€ 5-2 ๋ฆฌ๋•์Šค์—์„œ FireStore ๋ฐ์ดํ„ฐ ๊ฐ€์ง€๊ณ  ๋†€๊ธฐ (2) ์ด๋‹ค.

      

      ๊ฐ•์˜ ์ œ๋ชฉ์€ ๋‚ด๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ๋…ธ๋Š” ๊ฒƒ ๊ฐ™์€๋ฐ

      ๋งˆ์น˜ ๋‚ด๊ฐ€ ๋ฐ์ดํ„ฐ์— ๋†€์•„๋‚œ ๋Š๋‚Œ์ด๋ž„๊นŒ..?

      ๋‚˜๋ฅผ ํฌํ•จํ•˜์—ฌ ๋ฆฌ์•กํŠธ๋ฅผ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ์‚ฌ๋žŒ์—๊ฒŒ๋Š” ์•„ํฌ์นผ๋ฆฝ์Šค์— ์ค€ํ•˜๋Š” ๊ฐ•์˜๊ฐ€ ์•„๋‹๊นŒ ํ•˜๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค.

 

      ์˜ค๋Š˜ ์ผ์‹œ์ •์ง€์™€ ์žฌ์ƒ์„ ๋ฐ˜๋ณตํ•˜๋ฉด์„œ ์ฝ”๋“œ๋ฅผ ๋”ฐ๋ผ์„œ ์ž‘์„ฑํ•˜๋ฉฐ ๋‹ค ๋“ฃ๊ธฐ๋Š” ํ–ˆ์ง€๋งŒ

      ์ด ๊ฐ•์˜๋Š” ๋ฆฌ๋•์Šค์— ๋Œ€ํ•œ ์™„๋ฒฝํ•œ ์ดํ•ด๋ฅผ ์š”ํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์—

      ๋‚ด์ผ ๋ฆฌ๋•์Šค๋ฅผ ๋” ๊ณต๋ถ€ํ•œ ๋‹ค์Œ์— ๋‹ค์‹œ ๊ฐ•์˜๋ฅผ ๋“ค์„ ์ƒ๊ฐ์ด๋‹ค.

 

 

 

 

Tomorrow I Will

 

 

 

๐Ÿ“Œ HTML, CSS, JS

      ์˜ค๋Š˜๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์˜ค์ „์—๋Š” HTML, CSS, JS ๊ณต๋ถ€๋ฅผ ํ•˜๋ ค๊ณ  ํ•œ๋‹ค.

      HTML๊ณผ CSS๋Š” MDN์—์„œ ํƒœ๊ทธ์™€ ์†์„ฑ์„ ํ›‘๋Š” ์‹์œผ๋กœ ํ•˜๋ ค๊ณ  ํ•˜๋ฉฐ,

      JS๋Š” ์ธํ”„๋Ÿฐ์˜ ๋‚จ์€ ๊ฐ•์˜๋ฅผ ๋ชจ๋‘ ์ˆ˜๊ฐ•ํ•  ์˜ˆ์ •์ด๋‹ค.

      

 

๐Ÿ“Œ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋ฌธ์ œ ํ’€๊ธฐ

      ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค์˜ ๋‘ ๊ฐœ ๋ฝ‘์•„์„œ ๋”ํ•˜๊ธฐ ๋ฌธ์ œ๋ฅผ ํ’€ ์˜ˆ์ •์ด๋‹ค.

 

 

๐Ÿ“Œ React Redux & FireStore

      ์˜ค๋Š˜ ๋Œ€์žฌ์•™์„ ๋ง›๋ณด์•˜๊ธฐ ๋•Œ๋ฌธ์—..

      ๋ฆฌ๋•์Šค๋ฅผ ๋” ๊ผผ๊ผผํžˆ ๊ณต๋ถ€ํ•˜๊ณ  5-2 ๊ฐ•์˜๋ฅผ ๋‹ค์‹œ ๋“ค์„ ์˜ˆ์ •์ด๋‹ค.

     

 

๐Ÿ“Œ React ๊ฐœ์ธ ๊ณผ์ œ ์‹œ์ž‘

      ์ด๋ฒˆ ์ฃผ ๊ฐœ์ธ ๊ณผ์ œ๋ฅผ ์‹œ์ž‘ํ•ด์•ผ ํ•œ๋‹ค.

      ์šฐ์„  React ๊ฐœ์ธ ๊ณผ์ œ์•  ๋Œ€ํ•œ ์„ค๋ช…์„ ๋ดค๋Š”๋ฐ ์ง€๋‚œ ์ฃผ์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ๋Œ€๋ถ€๋ถ„ ๊ฐ•์˜ ๋‚ด์šฉ์— ์žˆ๋Š” ๊ฒƒ๋“ค์ด์—ˆ๋‹ค.

      ๋ชฉํ‘œ๋Š” 11/17 ์ˆ˜์š”์ผ๊นŒ์ง€ ์ œ์ถœํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

 

 

 

 

 

๋งํฌ
ยซ   2024/11   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Total
Today
Yesterday