๐Ÿ‘ฉ๐Ÿปโ€๐ŸŽจ ์ „์ฒด์ ์ธ ๋ถ„์œ„๊ธฐ ๋ฐ”๊พธ๊ธฐ

eassyยท2020๋…„ 6์›” 15์ผ
0

twmc-react-components

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

์ด์ „์— ํ‹€์„ ๋งŒ๋“ค์–ด์„œ ์ง„ํ–‰ํ•˜๋˜ ํ”„๋กœ์ ํŠธ๋ฅผ
๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ๋“ค์„ ํ†ตํ•ด ๋งŒ๋“ค์–ด์ง„ component๋“ค์„ ๊ฐ€์ง€๊ณ 
๋‹ค์‹œ ๊บผ๋‚ด์„œ ์ง„ํ–‰ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

๊ทธ ์ฒ˜์Œ์œผ๋กœ ์ „์ฒด์ ์ธ ๋ถ„์œ„๊ธฐ๋ฅผ ๋ฐ”๊ฟ”์ฃผ๊ธฐ๋กœ ํ–ˆ๋‹ค.
๋”ฑ๋”ฑํ•˜๊ณ  ์‹œ์‹œํ•œ ๊ธฐ๋ณธ ์„œ์ฒด์—, ํƒํ•˜๊ณ  ์žฌ๋ฏธ์—†๋Š” ์ƒ‰์ƒ๋“ค ๋•Œ๋ฌธ์—
์‹ ๊ฒฝ์“ฐ์˜€๋˜ sidebar์™€,
๋ˆ„๊ฐ€ ์ด component๋“ค์„ ๋งŒ๋“ค์—ˆ๋Š”์ง€
๋ณด์—ฌ์ฃผ๊ณ  ์ด ํ”„๋กœ์ ํŠธ์˜ ๊ฐœ์š”?๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์•Œ๋ ค์ฃผ๋Š” overview๋ฅผ ์ˆ˜์ •!

  • sidebar์˜ list tab๋“ค์— ํ™œ์„ฑํ™” ๋˜์–ด์žˆ๋Š” ํ‘œ์‹œ๋ฅผ ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด ์ƒ‰์„ ๋„ฃ๊ณ ,
    'overview'๋ผ๋Š” ์ด๋ฆ„์„ ์ด ํ”„๋กœ์ ํŠธ ํŒ€์˜ ์ด๋ฆ„์ธ
    'twmc'๋กœ ๋ฐ”๊ฟ”์ฃผ์—ˆ๋‹ค.
  • list ๋งจ ์•„๋ž˜์—๋Š” ํ•ด๋‹น ํ”„๋กœ์ ํŠธ์˜ github ์ฃผ์†Œ๋ฅผ ์—ฐ๊ฒฐํ•ด์ฃผ์—ˆ๋‹ค
    -> ์ด ๋ถ€๋ถ„์—์„œ ๋‚ด๊ฐ€ absolute์˜ ์œ„์น˜๋ฅผ top์—์„œ ๋ง‰ 400px๊นŒ์ง€ ์žก์•„์„œ ์กฐ์ •ํ–ˆ์—ˆ๋Š”๋ฐ, ์™œ๋•Œ๋ฌธ์— bottom์œผ๋กœ ์žก์„ ์ƒ๊ฐ์„ ๋ชปํ–ˆ๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค...ใ…Ž
  • ๊ตฌ๊ธ€ํฐํŠธ์—์„œ ์ ๋‹นํžˆ ๋ง˜์—๋“œ๋Š” ๊ธ€์”จ์ฒด๋ฅผ ๊ฐ€์ ธ์™€์„œ ๋Œ€๋žต์ ์ธ ์„ค๋ช…๊ธ€์„ ์“ฐ๊ณ ,
    ๋‘˜์˜ ํ”„๋กœํ•„, ๋ธ”๋กœ๊ทธ์ฃผ์†Œ, github์ฃผ์†Œ๋ฅผ ์—ฐ๊ฒฐํ•ด์ฃผ์—ˆ๋‹ค.

ํ•„์š”ํ•œ ์ถ”๊ฐ€์ž‘์—…

๋Œ€๋žต์ ์ธ ํ‹€์€ ๋‹ค์‹œ ์žก์•„์ฃผ์—ˆ์ง€๋งŒ
๊ณ„์† ์ˆ˜์ •์— ์ˆ˜์ •์„ ๊ฑฐ๋“ญํ•ด์„œ ์™„์„ฑ์„ ํ•ด์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค.

  1. ํ”„๋กœํ•„ ์‚ฌ์ง„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ ์ถ”๊ฐ€
    ํ”„๋กœํ•„์‚ฌ์ง„์— hover ํ–ˆ์„ ๋•Œ ์–ด๋–ค ํšจ๊ณผ๋ฅผ ์ฃผ๊ณ ์‹ถ๋‹ค๋Š” ์ƒ๊ฐ์€ ํ–ˆ์—ˆ๋Š”๋ฐ ๋”ฐ๋กœ ์•„์ด๋””์–ด๊ฐ€ ๋– ์˜ค๋ฅด์ง€ ์•Š์•„์„œ ๋„˜๊ฒผ์—ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๊ฝค๋‚˜ ๋ง˜์— ๋“œ๋Š” ์˜ˆ์‹œ๋ฅผ ์ฐพ๊ฒŒ ๋˜์–ด์„œ ๋‹ค์‹œ ์ˆ˜์ •์„ ํ•ด๋ณผ๊นŒ ํ•œ๋‹ค

https://conf.reactjs.org/index.html

  1. ๋งก์€ component ํ‘œ์‹œ
    ๊ฐ ์‚ฌ๋žŒ์ด ๊ธฐ์—ฌํ•œ component๋“ค์„ ๊ธฐ์ž…ํ•ด์ฃผ๋Š”๊ฒŒ ์ข‹์„๊นŒ-์‹ถ์€ ์ƒ๊ฐ์ด ๋“ ๋‹ค. ๋‚ด๊ฐ€ ์†๋Œ€์ง€ ์•Š์€ ๋ถ€๋ถ„๋„ ์žˆ๊ธฐ์—,,,, ์ถ”๊ฐ€์ ์œผ๋กœ ๋‚ด๊ฐ€ ๋งŒ๋“ค์ง€ ์•Š์€ ์ฝ”๋“œ๋“ค์„ ๋‹ค์‹œ ์‚ดํŽด๋ณด๋ฉด์„œ ๋ฆฌ๋ทฐํ•ด๋ณด๋Š” ๊ฒƒ๋„ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.
  2. ์ถ”๊ฐ€์ ์ธ component ์ž‘์—…
    ์ถ”๊ฐ€์ ์œผ๋กœ component๋“ค์„ ์ž‘์—…ํ•ด์•ผ ํ•œ๋‹ค. ๋‚ด๊ฐ€ ์šฐ์„  ๋‹ค์Œ์œผ๋กœ ์ž‘์—… ํ•  component๋Š” tooltip.
profile
์‰ฝ๊ฒŒ ์‚ฌ๋Š”๊ฑด ์žฌ๋ฏธ๊ฐ€ ์—†๋”๊ตฐ์š”, ์ƒˆ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค๐Ÿค“

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