Skip to content

connect-foundation/2019-07

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

GitHub tag (latest by date) GitHub commit activity Document npm GitHub top language GitHub repo size GitHub

ํ”ผํ‚คํฌํ‚ค๋Š” ํ•™์Šต์„ ๋„์™€์ค„ ๐Ÿ™†โ€โ™‚๏ธ๐Ÿ™…โ€โ™€๏ธ์‹ค์‹œ๊ฐ„ ํ€ด์ฆˆ ํ”Œ๋žซํผ์ด์—์š”.
ํ‚ค์ฆˆ๋ถ€ํ„ฐ ์„ฑ์ธ๊นŒ์ง€ ๐Ÿ‘จโ€๐Ÿ‘จโ€๐Ÿ‘งโ€๐Ÿ‘ฆ ๋„“์€ ์—ฐ๋ น๋Œ€๋ฅผ ํƒ€๊ฒŸ์œผ๋กœ ํ•ด์š”.
๐Ÿ’ฏํฌ์ธํŠธ(์ ์ˆ˜) ๊ธฐ๋ฐ˜์˜ ๊ฒฝ์Ÿ ์š”์†Œ๋กœ ์žฌ๋ฏธ๋ฅผ ๋”ํ–ˆ์–ด์š”.
ํ‚ค(ํ€ด)์ฆˆ์˜ ๐Ÿ“Š์‹œ๊ฐํ™”๋œ ๊ฒฐ๊ณผ๋กœ ๊ฐ•์˜์˜ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•ด์š”!

ํ”ผํ‚คํฌํ‚ค๋กœ ๋” ๋‚˜์€ ํ•™์Šต ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜์„ธ์š” ๐Ÿ˜Š


๐Ÿ“š์œ„ํ‚ค์—์„  ๋” ๋‹ค์–‘ํ•œ ์ •๋ณด๋“ค์„,
๐Ÿ—‚ํ”„๋กœ์ ํŠธ์—์„  ๊ฐœ๋ฐœ ๊ณผ์ •์„,
ํ”ผํ‚คํฌํ‚ค์˜ ๋‹ค์–‘ํ•œ ๋ชจ์Šต์„ ์‚ดํŽด๋ณด์„ธ์š”!

๋ชฉ์ฐจ

  1. ํŒ€์› ์†Œ๊ฐœ
  2. ํ”„๋กœ์ ํŠธ ์†Œ๊ฐœ
    2-1. ํ”„๋กœ์ ํŠธ ์‹œ์—ฐ ๋ฐ ์†Œ๊ฐœ ์˜์ƒ
    2-2. ์‚ฌ์šฉ ๊ธฐ์ˆ 
    2-3. ๋ฐฐํฌ ๊ตฌ์กฐ
    2-4. ๊ฒŒ์ž„ ์ง„ํ–‰ ํ๋ฆ„๋„
    2-5. ํ”„๋กœ์ ํŠธ ๋ชฉํ‘œ
  3. ์‹คํ–‰ ๋ฐฉ๋ฒ•

๐Ÿ‘จโ€๐Ÿ‘จโ€๐Ÿ‘งํŒ€์› ์†Œ๊ฐœ

์›€์ง์ด๋Š”๊ฒŒ ์ข‹์€ CSS ๋งˆ์Šคํ„ฐ ๋ญ๋“  ์ •๋ฆฌํ•˜๊ณ  ์‹ถ์€ ์ •๋ฆฌ๋Ÿฌ 133% ์ž‘์—…๋ฅ ์„ ๋‹ฌ์„ฑํ•˜๊ณ ์žˆ๋Š” ์‚ฌ๋ผ์ง„
ocy1011
์˜ค์ฐฝ์˜

2ssue
์ด์ˆ˜์ •

changicho
์กฐ์ฐฌ๊ธฐ

leecoders
์ด์žฌ๋ฏผ

ํ”ผํ‚คํฌํ‚ค์˜ ์˜ค์ฐฝ์˜ ์†Œ๊ฐœ์„œ ํ”ผํ‚คํฌํ‚ค์˜ ์ด์ˆ˜์ • ์†Œ๊ฐœ์„œ ํ”ผํ‚คํฌํ‚ค์˜ ์กฐ์ฐฌ๊ธฐ ์†Œ๊ฐœ์„œ ...๐Ÿ‘ป

ํ”ผํ‚คํฌํ‚ค ๊ฐœ๋ฐœ์ž์˜ ํ•˜๋ฃจํ•˜๋ฃจ ์ปจ๋””์…˜

์ €ํฌ๋Š” ๋ฐ์ผ๋ฆฌ ์Šคํฌ๋Ÿผ๋งˆ๋‹ค, ๊ทธ๋‚ ์˜ ์ปจ๋””์…˜์„ ๊ธฐ๋กํ•˜๊ณ  ์„œ๋กœ ํ™•์ธํ–ˆ์–ด์š”!
ํ”ผํ‚คํฌํ‚ค ๊ฐœ๋ฐœ์ž๋“ค์˜ ๊ฐ€์žฅ ๋†’์•˜๋˜ ์ปจ๋””์…˜ ์ ์ˆ˜๋Š” ๋ช‡ ์ ์ด์—ˆ์„๊นŒ์š”? ๋ฐ์ผ๋ฆฌ ์Šคํฌ๋Ÿผ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ


ํ”„๋กœ์ ํŠธ ์†Œ๊ฐœ

๐Ÿ“ฝ ํ”„๋กœ์ ํŠธ ์‹œ์—ฐ ๋ฐ ์†Œ๊ฐœ ์˜์ƒ

๋งํฌ๋ฅผ ๋ˆ„๋ฅด๋ฉด ์†Œ๊ฐœ ์˜์ƒ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค

โš™ ์‚ฌ์šฉ ๊ธฐ์ˆ 

๐Ÿ”ƒ ๋ฐฐํฌ ๊ตฌ์กฐ

๐Ÿ”„ ๊ฒŒ์ž„ ์ง„ํ–‰ ํ๋ฆ„๋„

๋Œ€ํ‘œ์ ์ธ ๊ธฐ๋Šฅ์ธ ๐Ÿ•นํ€ด์ฆˆ ๊ฒŒ์ž„ ์ง„ํ–‰์˜ ์†Œ์ผ“ ํ†ต์‹  ํ๋ฆ„๋„ ์ž…๋‹ˆ๋‹ค.
๋‹ค๋ฅธ ์„œ๋น„์Šค์˜ ์ง„ํ–‰ ํ๋ฆ„๋„ ํ™•์ธํ•˜๊ณ  ์‹ถ์œผ์‹œ๋‹ค๋ฉด ์œ„ํ‚ค์˜ ์„œ๋น„์Šค ์ง„ํ–‰ ํ๋ฆ„๋ฌธ์„œ๋ฅผ ์‚ดํŽด๋ณด์„ธ์š”.

๐Ÿ“Œํ”„๋กœ์ ํŠธ ๋ชฉํ‘œ

๐Ÿ’ป๐Ÿคณ ๋ชจ๋ฐ”์ผ ํผ์ŠคํŠธ

  • ํ•ธ๋“œํฐ ์‚ฌ์šฉ์ด ์žฆ์„ ์ˆ˜ ์žˆ๋Š” ํ”Œ๋žซํผ ํŠน์„ฑ์ƒ, Mobile First UI๋ฅผ ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • ๋ชจ๋ฐ”์ผ, ๋ฐ์Šคํฌํƒ‘์„ ๊ฐ€๋ฆฌ์ง€ ์•Š๊ณ  ์–ด๋””์„œ๋‚˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ”Œ๋žซํผ์ด ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค.

โ™ป ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์—†์ด ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์ปดํฌ๋„ŒํŠธ

  • ์ €ํฌ๋Š” ๋ณ„๋„์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์ง์ ‘ UI๋ฅผ ๊ตฌ์ƒํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • Modal, FlexibleInput, Button ๋“ฑ ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ํ™•์ธํ•ด๋ณด์„ธ์š”!

๐Ÿ’ช ์‚ฌ์šฉ์ž๊ฐ€ ๋ชฐ๋ ค๋„ ์•ˆ์ •์ ์ธ ์„œ๋น„์Šค

  • ์—ฌ๋Ÿฌ ๋ช…์˜ ์‚ฌ์šฉ์ž๊ฐ€ ํ•œ ๋ฒˆ์— ์ด์šฉํ•ด๋„ ๊ฒฌ๋”œ ์ˆ˜ ์žˆ๋Š” ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ–ˆ์Šต๋‹ˆ๋‹ค.

๐ŸŒˆ ๋ชจ๋‘๊ฐ€ ์ฆ๊ฑฐ์šด ํ”„๋กœ์ ํŠธ

  • ํ”„๋กœ์ ํŠธ ๋ชฉํ‘œ๋ฅผ ๋‹ฌ์„ฑํ•ด๋„ ํŒ€์›๋ผ๋ฆฌ ๊ธฐ๋ถ„์ด ์ƒํ•˜๋ฉด ์•ˆ๋˜๊ฒ ์ฃ ?
  • ์ €ํฌ๋Š” ํŒ€์›์ด ์žฌ๋ฏธ์žˆ๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ํ•ญ์ƒ ๋…ธ๋ ฅํ–ˆ์Šต๋‹ˆ๋‹ค.
  • 4๋ช…์—์„œ 3๋ช…์ด ๋˜์—ˆ์ง€๋งŒ ๊ทธ๋ž˜๋„ ๊ดœ์ฐฎ์•„์š”..!

๐Ÿ‘จโ€๐Ÿ’ป์‹คํ–‰ ๋ฐฉ๋ฒ•

npm-run-all ๋ชจ๋“ˆ๋กœ, client์™€ server๋ฅผ ๋™์‹œ์— ์‹คํ–‰์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
โ€ป ์‹คํ–‰ ์ „ .env๋ฅผ ์„ค์ •ํ•˜๊ณ  ์„œ๋ฒ„๋ฅผ ์‹œ์ž‘ํ•ด์•ผ ์ •์ƒ์ ์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

์„ค์น˜

yarn install

์‹คํ–‰

yarn start

์‘์›ํ•˜๊ธฐ

์ด ํ”„๋กœ์ ํŠธ๊ฐ€ ๋งˆ์Œ์— ๋“œ์…จ๋‹ค๋ฉด โญ๏ธ์„ ๋ˆŒ๋Ÿฌ์ฃผ์„ธ์š”!

About

๐ŸŽ“ํ”ผํ‚คํฌํ‚ค: ํ•™์Šต์„ ๋„์™€์ค„ ์‹ค์‹œ๊ฐ„ ํ€ด์ฆˆ ํ”Œ๋žซํผ

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages