์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
BEST

Slack ํด๋ก  ์ฝ”๋”ฉ[์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ… with React]

Slack ์„œ๋น„์Šค๋ฅผ ๋”ฐ๋ผ ๋งŒ๋“ค๋ฉฐ ๋ณธ๊ฒฉ์ ์ธ ๋ฆฌ์•กํŠธ ์›น ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•ด๋ด…์‹œ๋‹ค! ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ, ๋ฐฉ ๋งŒ๋“ค๊ธฐ, ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…๊นŒ์ง€!

Thumbnail

์ค‘๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ
๋ฐฐ์›Œ์š”!

  • ๋ฆฌ์•กํŠธ ์›น ๊ฐœ๋ฐœ

  • ํ”„๋ก ํŠธ ์ดˆ๊ธฐ ์„ธํŒ…(CRA ์—†์ด)

  • SWR(๋ฆฌ๋•์Šค ๋Œ€์ฒด)

  • Emotion(์Šคํƒ€์ผ๋“œ ์ปดํฌ๋„ŒํŠธ)

  • Socket.io ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…

๋‚ด ์†์œผ๋กœ ๋งŒ๋“œ๋Š” ์ฑ„ํŒ… ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜, 
ํšจ๊ณผ์ ์œผ๋กœ, ๋” ๊ฐ„๋‹จํ•˜๊ฒŒ! ๐Ÿ’ฌ

์ด ๊ฐ•์˜์—์„œ๋Š”?

Slack(์Šฌ๋ž™) ์„œ๋น„์Šค๋ฅผ ๋”ฐ๋ผ ๋งŒ๋“ค๋ฉฐ 
๋ณธ๊ฒฉ์ ์ธ ๋ฆฌ์•กํŠธ ์›น ๊ฐœ๋ฐœ์„ ์‹œ์ž‘ํ•ด๋ด…์‹œ๋‹ค!
(์Šฌ๋ž™+๋ฆฌ์•กํŠธ, ์ผ๋ช… Sleact!)

๋ฆฌ์•กํŠธ ์›น ๊ฐœ๋ฐœ, 
์–ด๋–ป๊ฒŒ ๋ฐฐ์›Œ์•ผ ํ•˜๋Š” ๊ฑธ๊นŒ์š”?

์š”์ฆ˜ ๋ฆฌ๋•์Šค๋ฅผ ์ž˜ ์•ˆ ์“ฐ๋Š” ์ถ”์„ธ๋ผ๋˜๋ฐ... 
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ๋„˜์–ด๊ฐ€๊ณ  ์žˆ๋‹ค๋˜๋ฐ...
์ง„์งœ์ธ๊ฐ€์š”?

์ด๋Ÿฐ ๋ง ๋งŽ์ด ๋“ค์–ด๋ณด์…จ๋‚˜์š”? ์Šฌํ”„๊ฒŒ๋„ ์‚ฌ์‹ค์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด ๊ฐ•์˜์—์„œ๋„ ๋ฆฌ๋•์Šค(Redux)๋ฅผ ๊ฑท์–ด๋‚ด๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Œ€์‹  ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ฆฌ๋•์Šค ์—†์ด๋„ ๋ฆฌ์•กํŠธ ์•ฑ ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ•˜๊ณ , ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋„ ์ƒ๊ฐ๋ณด๋‹ค ์–ด๋ ต์ง€ ์•Š๋‹ค๋Š” ๊ฑธ ๋ณด์—ฌ๋“œ๋ฆด๊ฒŒ์š”!


์ด๋Ÿฐ ๋ถ„๋“ค์—๊ฒŒ ์ถ”์ฒœ๋“œ๋ ค์š”!

React ์›น ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›Œ๋ณด๊ณ  ์‹ถ์€ ๋ถ„

TypeScript๋ฅผ ์ƒˆ๋กœ ๋ฐฐ์›Œ๋ณด๊ณ  ์‹ถ์€ ๋ถ„

ํด๋ก ์ฝ”๋”ฉ์„ ํ†ตํ•ด ํ”„๋ก ํŠธ์—”๋“œ ํŒŒํŠธ๋ฅผ ๊ตฌํ˜„ํ•ด๋ณด๊ณ  ์‹ถ์€ ๋ถ„


์ œ๋กœ์ดˆ ์Šฌ๋ž™ ํด๋ก ,
ํ”„๋ก ํŠธ์—”๋“œ ๊ณ ๋ฏผ ์™„๋ฒฝ ํ•ด๊ฒฐ!

  • ์ตœ์‹  ํ”„๋ก ํŠธ์—”๋“œ ํŠธ๋ Œ๋“œ์— ๋งž์ถฐ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ์„œ๋น„์Šค๋ฅผ ์ œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. ๋‹จ, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๊บผ๋ ค์ง€๋Š” ๋ถ„๋“ค์„ ์œ„ํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ๋„ ์ง„ํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” ๊ฐ•์˜๋ฅผ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. (์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์†Œ์Šค ์ฝ”๋“œ ์ œ๊ณต!)
  • ๋ฆฌ๋•์Šค๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. SWR์ด๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋Œ€์‹  ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ, ์ฑ„ํŒ…๋ฐฉ ์ƒ์„ฑ, ์‚ฌ์šฉ์ž ์ดˆ๋Œ€, ์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ…, ์‚ฌ์šฉ์ž ๋ฉ˜์…˜, ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ ๋“ฑ ์ฑ„ํŒ… ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌํ˜„์— ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์„ ๋ชจ๋‘ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฐ•์˜์—์„œ ์„ค๋ช…ํ•˜์ง€๋Š” ์•Š์ง€๋งŒ, ๋ฐฑ์—”๋“œ ์†Œ์Šค ์ฝ”๋“œ๋„ ํ•จ๊ป˜ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ์Šคํ‚ฌ์„ ๋ฐฐ์›Œ์š”.

React

SWR

Socket.io

Emotion

TypeScript

Webpack+Babel


์ง์ ‘ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”!

ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ, ์›Œํฌ์ŠคํŽ˜์ด์Šค
๊ฐ์ข… ์›Œํฌ์ŠคํŽ˜์ด์Šค ๊ธฐ๋Šฅ ๊ตฌํ˜„

์‹ค์‹œ๊ฐ„ ์ฑ„ํŒ… ๋ฐ ์˜จ๋ผ์ธ ๋ฆฌ์ŠคํŠธ


#1
์†Œ์Šค ์ฝ”๋“œ๋ฅผ 

์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

https://github.com/zerocho/sleact (๋ฐ”๋กœ๊ฐ€๊ธฐ)

#2
์งˆ๋ฌธ์— ๋น ๋ฅด๊ฒŒ
๋Œ€๋‹ตํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ œ ๊ฐ•์ขŒ์˜ ์žฅ์ ์€ Q&A์ž…๋‹ˆ๋‹ค. ์งˆ๋ฌธํ•˜์‹œ๋ฉด ํ•˜๋ฃจ ์•ˆ์— ๋‹ต๋ณ€๋“œ๋ ค์š”.
๊ฐ•์ขŒ ๊ด€๋ จ ๋‚ด์šฉ์„ ์ž์œ ๋กญ๊ฒŒ ์งˆ๋ฌธํ•˜์‹œ๋ฉด์„œ ๋Šฅ๋™์ ์œผ๋กœ ๊ณต๋ถ€ํ•ด ๋ณด์„ธ์š”.
๋‚ด์šฉ์„ ์ดํ•ดํ•˜๊ธฐ์— ๋” ๋„์›€์ด ๋  ๊ฑฐ์˜ˆ์š”!


์ง€์‹๊ณต์œ ์ž๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

์›น๊ฐœ๋ฐœ ๋ฒ ์ŠคํŠธ์…€๋Ÿฌ
<Node.js ๊ต๊ณผ์„œ> ์ €์ž

์ฃผ์‹ํšŒ์‚ฌ ์˜ค๋Š˜์˜ํ”ฝ์—…
CTO


์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ ๐Ÿ’ฌ

Q. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ, ๊ผญ ์•Œ์•„์•ผ ํ•˜๋‚˜์š”?

๊ฐœ์ธ์ ์œผ๋กœ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ฐฐ์šฐ์‹œ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ƒํƒœ๊ณ„๋Š” ์ ์  ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ์˜ฎ๊ฒจ๊ฐ€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ ์ด ๊ฐ•์ขŒ์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•˜๊ณ , ์˜์ƒ์—์„œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ ์šฉํ•˜๋Š” ๋ถ€๋ถ„์„ ์•Œ๋ ค๋“œ๋ฆฌ๋ฏ€๋กœ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋งŒ์œผ๋กœ๋„ ์ง„ํ–‰ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. (tsx, ts ํŒŒ์ผ์„ jsx, js๋กœ ๋ฐ”๊พธ๊ณ  :ํƒ€์ž…, <ํƒ€์ž…> ๋ถ€๋ถ„์„ ์ง€์šฐ๋ฉด ๋์ž…๋‹ˆ๋‹ค. ์—„์ฒญ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค)

Q. SWR์€ ๊ฒ€์ฆ๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ๊ฐ€์š”?

Next.js์™€ now.sh๋ฅผ ๋งŒ๋“  Vercel(๊ตฌ Zeit)์—์„œ ๋งŒ๋“  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ๋ฏฟ๊ณ  ์‚ฌ์šฉํ•˜์…”๋„ ๋ฉ๋‹ˆ๋‹ค. ๊นƒํ—™ ์Šคํƒ€๊ฐ€ 16,000๊ฐœ์˜ˆ์š”~

Q. ์„ธํŒ…ํ•  ๋•Œ CRA๋ฅผ ์“ฐ์ง€ ์•Š์€ ์ด์œ ๊ฐ€ ์žˆ๋‚˜์š”?

์ €๋Š” ํ•ญ์ƒ ๊ฐ•์˜์—์„œ CRA๋ฅผ ํ•˜์ง€ ์•Š๊ณ  ์ˆ˜๋™์œผ๋กœ ์„ธํŒ…ํ•˜๋Š” ๊ฒƒ์„ ์›์น™์œผ๋กœ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆ˜๋™์œผ๋กœ ์„ธํŒ…ํ•˜๋Š” ๋ฒ•์„ ์•Œ์•„์•ผ CRA์˜ ์›๋ฆฌ๋„ ์•Œ ์ˆ˜ ์žˆ์œผ๋‹ˆ๊นŒ์š”. ์›๋ฆฌ๋ฅผ ์•Œ๊ณ  ๋‚˜์„œ CRA๋ฅผ ์“ฐ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”!

  • Socket.io๋Š” 2๋ฒ„์ „์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. 2๋ฒ„์ „์„ ์„ค์น˜ํ•˜์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ์‹ค์ œ ๋ฐฐํฌ๋œ ์„œ๋น„์Šค๋Š” sleact.nodebird.com ์—์„œ ํ™•์ธ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
  • ์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ์€ FAQ๋กœ ์ •๋ฆฌํ•ด์„œ ์ธํ”„๋Ÿฐ ๋ธ”๋กœ๊ทธ์— ์˜ฌ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.
  • ์˜์ƒ์ด๋‚˜ ๋‚ด์šฉ์— ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ ๋ฌธ์˜ํ•˜์‹œ๋ฉด ์žฌํŽธ์ง‘ํ•ด์„œ ์˜ฌ๋ฆฝ๋‹ˆ๋‹ค.
  • ๊ฐ•์˜์— ์—†๋Š”๋ฐ ๊ตฌํ˜„์ด ๊ถ๊ธˆํ•˜์‹  ๊ฒƒ์ด ์žˆ๋Š” ๊ฒฝ์šฐ, ๋งŽ์€ ๋ถ„๋“ค์ด ์งˆ๋ฌธํ•˜์‹œ๋ฉด ๋ณด๋„ˆ์Šค ์˜์ƒ์„ ์ œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

์„ ์ˆ˜ ์ง€์‹ & ์—ฐ๊ณ„ ๊ฐ•์˜

ํ•„์ˆ˜ ์„ ์ˆ˜ ์ง€์‹

์›น๊ฒŒ์ž„ ์—ฌ๋Ÿ ๊ฐœ๋กœ ๋ฆฌ์•กํŠธ, ๋ฐ”๋ฒจ, ์›นํŒฉ๊นŒ์ง€!

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋” ๋ฐฐ์šฐ์‹œ๋ ค๋ฉด!

์š”์ฆ˜ ๋Œ€์„ธ! JS๋ณด๋‹ค ์•ˆ์ •์ ์ธ TS์˜ ์„ธ๊ณ„

๋‹ค๋ฅธ ํด๋ก  ์ฝ”๋”ฉ ๊ฐ•์˜๊ฐ€ ๊ถ๊ธˆํ•˜๋‹ค๋ฉด?

์–ด๋งˆ์–ด๋งˆํ•œ 22์‹œ๊ฐ„ ํŠธ์œ„ํ„ฐ ํด๋ก !

 

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ๋ฆฌ์•กํŠธ ๋ฌธ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ  ๋ณธ๊ฒฉ์ ์œผ๋กœ ์›น ๊ฐœ๋ฐœ์„ ํ•˜๊ณ  ์‹ถ์€ ๋ถ„

  • ๋‹จ์ˆœํ•œ ํŠœํ† ๋ฆฌ์–ผ ๋Œ€์‹  ์ œ๋Œ€๋กœ ๋œ ์„œ๋น„์Šค๋ฅผ ๋”ฐ๋ผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๋ถ„

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ์•ˆ์ •์„ฑ์„ ๋†’์ธ ๊ฐœ๋ฐœ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • HTML/CSS

  • JS ๊ธฐ์ดˆ ์ง€์‹

  • React ๊ธฐ๋ณธ ๋ฌธ๋ฒ•(๋ฌด๋ฃŒ ๊ฐ•์ขŒ ๋“ฃ๊ณ  ์˜ค์„ธ์š”)

์•ˆ๋…•ํ•˜์„ธ์š”
์ œ๋กœ์ดˆ(์กฐํ˜„์˜)์ž…๋‹ˆ๋‹ค.

61,263

๋ช…

์ˆ˜๊ฐ•์ƒ

1,418

๊ฐœ

์ˆ˜๊ฐ•ํ‰

9,486

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

21

๊ฐœ

๊ฐ•์˜

์ œ ๊ฐ•์˜์˜ ์žฅ์ ์€ Q&A์ž…๋‹ˆ๋‹ค(์ธํ”„๋Ÿฐ ๋‹ต๋ณ€์™• 2ํšŒ ์ˆ˜์ƒ). 24์‹œ๊ฐ„ ์ด๋‚ด์— ์ตœ๋Œ€ํ•œ ๋‹ต๋ณ€๋“œ๋ฆฝ๋‹ˆ๋‹ค! ๊ฐ™์ด ๊ณ ๋ฏผํ•œ๋‹ค๋Š” ๋Š๋‚Œ์œผ๋กœ ๋‹ต๋ณ€ ๋“œ๋ฆด๊ฒŒ์š”!

https://www.zerocho.com/lecture

์ œ๋กœ์ดˆ ๊ฐ•์˜ ์ „์ฒด ๋กœ๋“œ๋งต

 

โ€“ Node.js๊ต๊ณผ์„œ, ์ฝ”๋”ฉ์ž์œจํ•™์Šต ์ œ๋กœ์ดˆ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, Let's Get IT ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ต๊ณผ์„œ ์ €์ž 
โ€“ ZeroCho.com ์šด์˜์ž
โ€“ ํ˜„) ์œ ํŠœ๋ธŒ์—์„œ ZeroCho TV๋กœ ๊ฐœ๋ฐœ ๊ด€๋ จ ๋ฐฉ์†ก์ค‘ 
โ€“ ํ˜„) ์Šค๋ชจ์–ดํ†ก CTO 
โ€“ ์ „) ์˜ค๋Š˜์˜ํ”ฝ์—… CTO(์นด์นด์˜ค๋ชจ๋นŒ๋ฆฌํ‹ฐ์— ์—‘์‹ฏ ํ›„ ์นด์นด์˜ค๋ชจ๋นŒ๋ฆฌํ‹ฐ ์ตœ์—ฐ์†Œ ๊ฐœ๋ฐœํŒŒํŠธ์žฅ)

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

46๊ฐœ โˆ™ (11์‹œ๊ฐ„ 1๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!

โ‚ฉ39,600