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

๋ฆฌ์•กํŠธ๋กœ ๋‚˜๋งŒ์˜ ๋ธ”๋กœ๊ทธ ๋งŒ๋“ค๊ธฐ(MERN Stack)

ํ’€์Šคํƒ์œผ๋กœ ๋‚˜๋งŒ์˜ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์•„์š”~~!

Thumbnail

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

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Mongo DB

  • Express

  • React

  • NodeJS

  • Redux, Redux-Saga

  • JWT Web Token

  • Infinite Scroll(Intersection Observer)

  • CKEditor5

  • CSS(BootStrap4)

  • Https(GreenLock Express)

์ƒˆ ๊ฐ•์˜ ๋ฐ ๋กœ๋“œ๋งต ์˜คํ”ˆํ–ˆ์Šต๋‹ˆ๋‹ค! ์ƒˆ ๊ฐ•์˜๋Š” >๋งํฌ< ์ฐธ๊ณ ํ•˜์„ธ์š”
Docker๋กœ ๊ฐœ๋ฐœ๋ถ€ํ„ฐ ๋ฐฐํฌ๊นŒ์ง€,Terraform์œผ๋กœ ์ฟ ๋ฒ„๋„คํ‹ฐ์Šค ์šด์˜์„ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด ๊ณ ๊ณ ~!!!

์ƒˆ๋กœ ์ถœ์‹œํ•œ Node FullStack ๊ฐœ๋ฐœ ๋กœ๋“œ๋งต, A~Z ๊นŒ์ง€ ๋กœ๋“œ๋งต ์ฐธ์—ฌ์‹œ ๊ด€๋ จ ๊ฐ•์˜ 20% ํ• ์ธ ์ฟ ํฐ์„ ๋“œ๋ฆฝ๋‹ˆ๋‹ค
ํ• ์ธ ์ฟ ํฐ ๋ฐ›์œผ๋Ÿฌ >Go! <

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ•˜๋‚˜๋กœ ํ’€์Šคํƒ ๊ฐœ๋ฐœ OK! ๋‚˜๋งŒ์˜ ๋ธ”๋กœ๊ทธ๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”.

์ฃผ์ œ ์†Œ๊ฐœ ๐Ÿ“

๋ฐฑ์—”๋“œ(์„œ๋ฒ„)์™€ ํ”„๋ก ํŠธ(์›น ํ™”๋ฉด)์„ ํ•œ ์‚ฌ๋žŒ์ด ๋ชจ๋‘ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ ์„ ํ’€์Šคํƒ(Full Stack)์ด๋ผ ํ•ฉ๋‹ˆ๋‹ค. ํ’€์Šคํƒ ๊ธฐ์ˆ ์€ ๋‹ค์–‘ํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์šฐ๋ฆฌ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐฑ์—”๋“œ(NodeJS, Express, MongoDB)์™€ ํ”„๋ก ํŠธ(React, Redux, Redux-Saga, Bootstrap, Ckeditor5 ๋“ฑ)์„ ๋งŒ๋“ค์–ด ๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. 

์™œ ๋ฐฐ์›Œ์•ผ ํ•˜๋Š”์ง€ โœ’๏ธ

์—ฌ๋Ÿฌ๋ถ„, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ•˜๋‚˜๋กœ ๋ชจ๋“  ๊ฑธ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๋ฉด ๋ฏฟ์–ด์ง€์„ธ์š”? @.@
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ’€์Šคํƒ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ฉด ์—ฌ๋Ÿฌ๋ถ„์˜ ๋ชจ๋“  ์•„์ด๋””์–ด๋Š” ๋ฐ”๋กœ ํ˜„์‹ค์ด ๋˜๋ฉฐ, ์ˆ˜์ต์ฐฝ์ถœ๋กœ ์ด์–ด์ง‘๋‹ˆ๋‹ค. 

๋ค์œผ๋กœ!!!
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ React๋ฅผ ๋ฐฐ์šฐ๋ฉด React๋กœ ๋ชจ๋ฐ”์ผ ์•ฑ(์•ˆ๋“œ๋กœ์ด๋“œ, ์•„์ดํฐ)์„ ๋งŒ๋“œ๋Š” React Native๊นŒ์ง€ ์‰ฝ๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค!!!

์—ฌ๋Ÿฌ๋ถ„์˜ ๋จธ๋ฆฌ์† ์•„์ด๋””์–ด๋Š” ๋” ์ด์ƒ ๋‹จ์ˆœํ•œ ์ƒ์ƒ์ด ์•„๋‹™๋‹ˆ๋‹ค.
์ง€๊ธˆ ๋‹น์žฅ!!! ํ˜„์‹ค์„ธ๊ณ„์— ์—ฌ๋Ÿฌ๋ถ„๋“ค์˜ ์ƒ๊ฐ์˜ ๋‚˜๋ž˜๋ฅผ ํŽผ์น˜์„ธ์š”. 

์ฝ”๋”ฉ์€ ๋‚˜์˜ ์ƒ์ƒ์„ ํ˜„์‹คํ™” ์‹œ์ผœ์ฃผ๋Š” ๋„๊ตฌ ์ž…๋‹ˆ๋‹ค~~~ *^^*

์ด ๊ฐ•์˜์—์„œ ๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค โœ๏ธ

Infinite Scroll

 

Category Search

 

CKEditor5

 

Comment

 

์ด๋ฐ–์— MongoDB, Express, React, Node JS(์ด์ƒ MERN Stack), Redux, Redux-Saga, JWT Web Token, Bootstrap4๋ฅผ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

๊ฐ•์˜ ํŠน์ง• ๐Ÿ’ก 

์›น ๊ฐœ๋ฐœ์ž๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ž์‹ ์˜ ์ง€์‹๊ณผ ๊ธฐ์ˆ ์„ ์ €์žฅํ•ด ๋†“์„ ๋ธ”๋กœ๊ทธ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ... ์›น๊ฐœ๋ฐœํ•˜์‹ ๋‹ค๋ฉด์„œ... ์•„์ง ๋‚˜์˜ ๊ธฐ์ˆ ๋กœ ๋งŒ๋“  ๋ธ”๋กœ๊ทธ๊ฐ€ ์—†๋‹ค๊ณ ์š”? ๊ทธ๋Ÿฌ๋ฉด ํ•œ๋ฒˆ ๋”ฐ๋ผ์„œ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”. 

์ด ๊ฐ•์˜๋Š” HTML, CSS ๋“ฑ ๋ง‰ ์ž…๋ฌธํ•˜์‹  ๋ถ„๋“ค์„ ๋Œ€์ƒ์œผ๋กœ ๋งŒ๋“ค์–ด์ ธ, ๋น„๊ต์  ์ƒ์„ธํžˆ ๊ฐœ๋…๋“ค์„ ์„ค๋ช…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. 

์—ฌ๋Ÿฌ๋ถ„๋งŒ์˜ ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“ค๊ณ  ์ง€๊ธˆ๋ถ€ํ„ฐ ํ‚ค์›Œ๋‚˜๊ฐ€ ๋ณด์„ธ์š”~~~
(๊นƒํ—ˆ๋ธŒ : https://github.com/sideproject0214/blog)

์‹ธํ”Œ์˜ ์ตœ์‹  ๊ฐ•์˜ ์ •๋ณด๋Š” blog.ssaple.com ์—์„œ ํ™•์ธํ•˜์„ธ์š”~

 

์„น์…˜๋งˆ๋‹ค ๊ฐ„๋‹จํ•œ ์†Œ๊ฐœ ๐Ÿ“–

< ์ด 63๊ฐœ ๊ฐ•์˜, 815๋ถ„ >

Section 1 (๊ฐ•์˜ 1๊ฐœ, 4๋ถ„)
*์ธํŠธ๋กœ: ๊ธฐ๋ณธ MERN ์Šคํƒ์— ๊ด€ํ•œ ๊ฐœ์š”์™€ ์•ž์œผ๋กœ ๋ฐฐ์šธ ๊ธฐ์ˆ  ์†Œ๊ฐœ

Section 2 (๊ฐ•์˜ 12๊ฐœ, 126๋ถ„)
*Express(๋ฐฑ์—”๋“œ), Router, MongoDB ๋“ฑ ๊ธฐ๋ณธ ์„œ๋ฒ„์ž‘์—…

Section 3 (๊ฐ•์˜ 47๊ฐœ, 653๋ถ„)
*React, Redux ๋“ฑ์„ ํ™œ์š”ํ•œ ํ”„๋ก ํŠธ์—”๋“œ ์ž‘์—…๊ณผ ์ด์— ๋งž์ถ˜ ๋ฐฑ์—”๋“œ ์ž‘์—…

Section 4 (๊ฐ•์˜ 3๊ฐœ, 32๋ถ„)
*AWS Deploy ์ž‘์—…

Bonus (๊ฐ•์˜ 1๊ฐœ, 15๋ถ„)
*Https(GreenLock Express)

 

์—ฌ๊ธฐ์„œ ๋‹ค๋ฃจ๋Š” ํˆด ๐Ÿงฐ 

MongoDB, Express, React, NodeJS, Redux, Redux-Saga, JWT Web Token, Infinite Scroll(Intersection Observer), CKEditor5, BootStrap4

*์ปดํ“จํ„ฐ ์‚ฌ์–‘: ๋ฆฌ๋ˆ…์Šค, ๋งฅ, ์œˆ๋„์šฐ

 

์˜ˆ์ƒ ์งˆ๋ฌธ Q&A ๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ 

Q. ๋น„์ „๊ณต์ž๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋‚˜์š”?
A. ๋„ค ๋‹น์—ฐํ•ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์ œ๊ฐ€ ๋น„์ „๊ณต์ž๋กœ ์—ฌ๋Ÿฌ๋ถ„๋“ค์ฒ˜๋Ÿผ ์ธํ„ฐ๋„ท์œผ๋กœ ๋…ํ•™ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ ์ฒ˜์Œ ์ž…๋ฌธํ•˜์‹œ๋Š” ๋ถ„์ด๋ผ๋ฉด, ๋ฆฌ์•กํŠธ ์ž์Šต์„œ(https://ko.reactjs.org/tutorial/tutorial.html#completing-the-game)๋ฅผ ๋ณด์‹œ๊ณ  ์˜ค์‹œ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค. 

Q. ๋ฆฌ์•กํŠธ๋Š” ์–ด๋ ต๋‚˜์š”?

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

์ด ๋‹จ๊ณ„๋งŒ ๋„˜๊ธฐ๋ฉด ์ž์œ ์ž์žฌ๋กœ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์ˆ˜ ์žˆ์œผ๋‹ˆ ํฌ๊ธฐํ•˜์ง€ ์•Š์œผ์‹œ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค. *^^*

Q. MERN Stack์€ ๋ฌด์—‡์ธ๊ฐ€์š”?
A. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด ํ•œ๊ฐœ๋กœ MongoDB, Express, React, NodeJS(MERN) ์„ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„(๋ฐฑ์—”๋“œ), ์›น(ํ”„๋ก ํŠธ)๋ฅผ ๋ชจ๋‘ ๋งŒ๋“œ๋Š” ๊ธฐ์ˆ ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. 

Q. ์ด ๊ฐ•์˜๋งŒ์˜ ํŠน๋ณ„ํ•œ ์žฅ์ ์ด ์žˆ์„๊นŒ์š”?
A. ์ €๋„ ์—ฌ๋Ÿฌ๋ถ„์ฒ˜๋Ÿผ ์ธํ”„๋Ÿฐ ๋“ฑ ์ธํ„ฐ๋„ท์œผ๋กœ ๋…ํ•™์„ ํ•˜์˜€๊ธฐ์—, ๊ธฐ์กด ๊ฐ•์˜์—์„œ ๋Š๋‚€ ์•„์‰ฌ์šด ์ ์„ ๋ณด์™„ํ•˜์—ฌ ์ž…๋ฌธํ•˜์‹œ๋Š” ์—ฌ๋Ÿฌ๋ถ„์˜ ์ž…์žฅ์—์„œ ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค. 

 

 

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

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

  • ์›น๊ธฐ์ดˆ์ง€์‹(HTML, CSS)๋ฅผ ์•„์‹œ๋Š” ๋ถ„

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ("console.log"๋ฅผ ์•„์‹œ๋Š” ๋ถ„)

  • ๋ฆฌ์•กํŠธ, Express๊ธฐ์ดˆ๋ฅผ ์•„์‹œ๋Š”๋ถ„

  • ๋ฆฌ์•กํŠธ To-do list 1๋ฒˆ์ด๋ผ๋„ ๋งŒ๋“ค์–ด๋ณด์‹ ๋ถ„

  • ์›น ์ฝ”๋”ฉ์„ ๋น ๋ฅด๊ฒŒ ๋ฐฐ์šฐ๊ณ  ์‹ถ์œผ์‹ ๋ถ„

์•ˆ๋…•ํ•˜์„ธ์š”
์‹ธํ”Œ์ž…๋‹ˆ๋‹ค.

572

๋ช…

์ˆ˜๊ฐ•์ƒ

30

๊ฐœ

์ˆ˜๊ฐ•ํ‰

271

๊ฐœ

๋‹ต๋ณ€

4.0

์ 

๊ฐ•์˜ ํ‰์ 

4

๊ฐœ

๊ฐ•์˜

๋‚ฎ์—๋Š” ํ‰๋ฒ”ํ•œ ํšŒ์‚ฌ์›์ด์ง€๋งŒ, ๋ฐค์—๋Š” ์—ด์ •์„ ๊ฐ€์ง„ ๊ฐœ๋ฐœ์ž ์ž…๋‹ˆ๋‹ค

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

์ „์ฒด

66๊ฐœ โˆ™ (13์‹œ๊ฐ„ 52๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

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