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

๋”ฐ๋ผํ•˜๋ฉฐ ๋ฐฐ์šฐ๋Š” ๋…ธ๋“œ, ๋ฆฌ์•กํŠธ ์‹œ๋ฆฌ์ฆˆ - ๋ ˆ๋”ง ์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ(NextJS)(Pages Router)

์ด ๊ฐ•์˜๋ฅผ ํ†ตํ•ด์„œ ๋ ˆ๋”ง ์›น์‚ฌ์ดํŠธ๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ํ•˜๋‚˜ํ•˜๋‚˜ ๋งŒ๋“ค์–ด ๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

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

  • ๋ฆฌ์•กํŠธ

  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ

  • PostgreSQL

  • ๋„์ปค

  • NextJS

  • ๋ฐฐํฌ

NextJS, Typescript, ExpressJS, Postgres
๊ฐ€์žฅ ํ•ซํ•œ ํ’€์Šคํƒ ์กฐํ•ฉ์œผ๋กœ ๋ ˆ๋”ง์„ ํด๋ก ์ฝ”๋”ฉํ•ด์š”! ๐Ÿ‘จโ€๐Ÿ’ป

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

์„ธ๊ณ„์ ์ธ ์ปค๋ฎค๋‹ˆํ‹ฐ, ๋ ˆ๋”ง ์‚ฌ์ดํŠธ๋ฅผ
์ฒ˜์Œ๋ถ€ํ„ฐ ๊ฐ™์ด ๋งŒ๋“ค์–ด๋ด…๋‹ˆ๋‹ค.

์š”์ฆ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์Šคํƒ์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” ํ’€ ์Šคํƒ ์กฐํ•ฉ์ธ NextJS Typescript ExpressJS Postgres ์กฐํ•ฉ์œผ๋กœ ์–ด๋А ์ •๋„ ๋ณต์žกํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ํ•จ๊ป˜ ๋งŒ๋“ค์–ด ๋ณด๊ฒŒ ๋˜๋ฏ€๋กœ, ํ’€ ์Šคํƒ ๊ฐœ๋ฐœ์— ์ž์‹ ๊ฐ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๊ฒŒ ์ด ๊ฐ•์˜๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

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

์‚ฌ์šฉ๋˜๋Š” ์–ธ์–ด์™€ ํ”„๋ ˆ์ž„์›Œํฌ ๐Ÿ‘‰

๋ ˆ๋”ง ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ ํ”„๋ก ํŠธ์—”๋“œ ๋ถ€๋ถ„์€ ๋ฆฌ์•กํŠธ์˜ NextJS๋ฅผ ์‚ฌ์šฉํ•˜๊ณ ,
๋ฐฑ์—”๋“œ ๋ถ€๋ถ„์€ NodeJS์™€ ExpressJS๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋‘ ๋ถ€๋ถ„ ๋ชจ๋‘ ์–ธ์–ด๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋Š” PostgreSQL์„ ์ด์šฉํ•˜๋ฉฐ TypeORM์„ ์ด์šฉํ•ด์„œ ์ปจํŠธ๋กคํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.


ํ•™์Šตํ•  ๋‚ด์šฉ์„ ์†Œ๊ฐœํ•ด์š” ๐Ÿ“š

Section 1

์ „์ฒด์ ์ธ ๊ตฌ์กฐ ๋งŒ๋“ค๊ธฐ

ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ค€๋น„๋ฅผ ํ•ฉ๋‹ˆ๋‹ค.

Section 2

Entity ์ƒ์„ฑํ•˜๊ธฐ

์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋“ค์„ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ๊ฐ์˜ Entity๋“ค์„ ์ƒ์„ฑํ•ด์ค๋‹ˆ๋‹ค.

Section 3

ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ

ํšŒ์›๊ฐ€์ž…๊ณผ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋ฅผ ์ƒ์„ฑํ•˜๋ฉฐ ์œ ์ €์— ๊ด€ํ•œ ๋ฐ์ดํ„ฐ๋Š” React Context๋ฅผ ์ด์šฉํ•ด ์ฒ˜๋ฆฌํ•ด์ค๋‹ˆ๋‹ค.

Section 4

์ปค๋ฎค๋‹ˆํ‹ฐ ์ƒ์„ฑํ•˜๊ธฐ

์ปค๋ฎค๋‹ˆํ‹ฐ ์ƒ์„ฑํ•˜๋Š” ํŽ˜์ด์ง€, ์ปค๋ฎค๋‹ˆํ‹ฐ ์ƒ์„ฑ, ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ ๋“ฑ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

Section 5

ํฌ์ŠคํŠธ ํŽ˜์ด์ง€ ์ƒ์„ฑํ•˜๊ธฐ

๊ฐ ์ปค๋ฎค๋‹ˆํ‹ฐ์— ๋“ค์–ด์žˆ๋Š” ํฌ์ŠคํŠธ๋“ค์„ ์ƒ์„ฑํ•˜๊ณ  ํฌ์ŠคํŠธ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.

Section 6

๋Œ“๊ธ€๊ณผ ํˆฌํ‘œ ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•˜๊ธฐ

๋Œ“๊ธ€๊ณผ ํˆฌํ‘œ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

Section 7

๋ฌดํ•œ ์Šคํฌ๋กค ๋ฐ ์œ ์ € ํŽ˜์ด์ง€ ์ƒ์„ฑํ•˜๊ธฐ

useSWRInfinite์™€ Intersection observer๋ฅผ ์ด์šฉํ•œ
๋ฌดํ•œ ์Šคํฌ๋กค ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด์ฃผ๋ฉฐ ์œ ์ € ํŽ˜์ด์ง€๋ฅผ ์ƒ์„ฑํ•ด์ฃผ๊ฒ ์Šต๋‹ˆ๋‹ค.

Section 8

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐฐํฌํ•˜๊ธฐ

EC2 ์ธ์Šคํ„ด์Šค๋ฅผ ์ด์šฉํ•ด์„œ ์ง€๊ธˆ๊นŒ์ง€ ๋งŒ๋“  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ฐฐํฌํ•ด์ฃผ๊ฒ ์Šต๋‹ˆ๋‹ค.

 

์ง€์‹๊ณต์œ ์ž์˜ 
๋‹ค๋ฅธ ๊ฐ•์˜๊ฐ€ ๊ถ๊ธˆํ•˜๋‹ค๋ฉด? ๐Ÿ“–

๋ˆ„์  ์ˆ˜๊ฐ•์ƒ 50,000+๋ช…, ๋”ฐ๋ผํ•˜๋ฉฐ ๋ฐฐ์šฐ๋Š” ์›น ๊ฐœ๋ฐœ ์‹œ๋ฆฌ์ฆˆ 

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

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

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ’€์Šคํƒ ์•ฑ์„ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

  • ์žฌ๋ฏธ์žˆ๊ฒŒ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

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

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

  • ๋ฆฌ์•กํŠธJS

  • ๋…ธ๋“œJS

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

83,039

๋ช…

์ˆ˜๊ฐ•์ƒ

2,638

๊ฐœ

์ˆ˜๊ฐ•ํ‰

2,428

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

20

๊ฐœ

๊ฐ•์˜

์•ˆ๋…•ํ•˜์„ธ์š”. 

์ฆ๊ฒ๊ฒŒ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ๋Š” ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค. 

์•ž์œผ๋กœ ๋งŽ์€ ๋„์›€์„ ๋“œ๋ฆด ์ˆ˜ ์žˆ์—ˆ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.


- ๋”ฐ๋ผํ•˜๋ฉฐ ๋ฐฐ์šฐ๋Š” ๋„์ปค์™€ CIํ™˜๊ฒฝ ์ €์ž
- ์นด์นด์˜ค ๊ธฐ์—… ์‹ ์ž… ๊ณต์ฑ„ FE ๊ต์ˆ˜์ž
- ํŒจ์ŠคํŠธ์บ ํผ์Šค, ๊ตฌ๋ฆ„ ๊ฐ•์‚ฌ 
- ํ˜„๋Œ€์ž๋™์ฐจ ๊ฐœ๋ฐœ ๊ธฐ์—… ๊ต์œก
- ์‹ ํ•œ์€ํ–‰ ๋ฉ”ํƒ€๋ฒ„์Šค, ์ฝ”๋น— ํƒ€์šด ํ’€์Šคํƒ ๊ฐœ๋ฐœ
- ์—ฌ๋Ÿฌ ๊ณต๊ณต๊ธฐ๊ด€ SNS ํ’€์Šคํƒ ๊ฐœ๋ฐœ

๋”๋ณด๊ธฐ

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

์ „์ฒด

103๊ฐœ โˆ™ (17์‹œ๊ฐ„ 39๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

19๊ฐœ

4.1

19๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • hi2177๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    hi2177

    ์ˆ˜๊ฐ•ํ‰ 3

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    68% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ๊ฐ•์˜์ข‹์•„์š”

    • jung ae Kim๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      jung ae Kim

      ์ˆ˜๊ฐ•ํ‰ 9

      โˆ™

      ํ‰๊ท  ํ‰์  4.8

      4

      97% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ์ œ๊ฐ€ ์—…๋ฌด์—์„œ๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋ฐ.. ๋…ธ๋“œ, ๋ฆฌ์•กํŠธ, ๋„์ปค, aws ๋ฐฐํฌ ๋“ฑ์— ๊ถ๊ธˆ์ฆ๊ณผ ๊ด€์‹ฌ์ด ์žˆ์–ด์„œ ๊ฐ•์ขŒ๋ฅผ ๋“ฃ๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ•์ขŒ๊ต์žฌ๋„ ์ž˜ ์ •๋ฆฌ๋˜์–ด ์žˆ๊ณ  ๋งค ๊ฐ•์˜๋งˆ๋‹ค ์‹œ๊ฐ„๋„ ๊ธธ์ง€ ์•Š์•„์„œ ๊ฐ•์˜๋”ฐ๋ผ์„œ ๊ตฌํ˜„ํ•˜๊ธฐ๋„ ์ข‹๊ณ  ์„ค๋ช…๋„ ์ž˜ ํ•ด์ฃผ์…”์„œ ์ข‹์•˜์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ข€ ์•„์‰ฌ์šด๊ฑด, ๋ฐฐํฌํ•˜๋Š” ๋ถ€๋ถ„์—์„œ ์ข€ ํ—ค๋งค๋‹ค๊ฐ€ ๊ฒจ์šฐ ๋ฐฐํฌํ–ˆ๋„ค์š” ใ…‹ ๋„์ปค, aws์— ๋ฐฐํฌํ•˜๋Š” ๊ฒƒ.. ์ด 2๊ฐ€์ง€๊ฐ€ ์ ค ์ต์ˆ™ํ•˜์ง€ ์•Š์€ ๋ถ€๋ถ„์ด๋ผ์„œ ๊ฐ€์žฅ ๊ฐ•์ขŒ๋ฅผ ํ†ตํ•ด์„œ ๊ฒฝํ—˜ ํ•ด๋ณด๊ณ ์ž ํ–ˆ๋˜ ๋ถ€๋ถ„์ธ๋ฐ ์•ž๋ถ€๋ถ„์—์„œ ํ™”๋ฉด๊ตฌํ˜„์—์„œ๋Š” ์ž์„ธํ•˜๊ฒŒ ์ž˜ ์„ค๋ช…์ด ๋˜์—ˆ๋Š”๋ฐ ๋ฐฐํฌ๋ถ€๋ถ„์—์„œ๋Š” ๊ฐ•์ขŒ๊ต์žฌ์™€ ์˜์ƒ๋ถ€๋ถ„์ด ๋งŽ์ด ์•„์‰ฌ์› ์Šต๋‹ˆ๋‹ค. ์ „๋ฐ˜์ ์œผ๋กœ ๊ธฐ๋ณธ๊ฐœ๋… ์žก๊ณ  ๊ตฌํ˜„ํ•ด๊ฐ€์— ์ถฉ๋ถ„ํžˆ ์ข‹์€ ๊ฐ•์ขŒ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค!

      • dev.jun28๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        dev.jun28

        ์ˆ˜๊ฐ•ํ‰ 9

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        ์ข‹์€ ๊ฐ•์˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

        • ์ด์€์˜๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          ์ด์€์˜

          ์ˆ˜๊ฐ•ํ‰ 1

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          97% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          ์ตœ์‹  typescript ๊ฐ•์˜๋ฅผ ๋“ค์„์ˆ˜ ์žˆ์–ด์„œ ๋„ˆ๋ฌด์ข‹์•˜์Šต๋‹ˆ๋‹ค ์„ฌ์„ธํžˆ ์•Œ๋ ค์ฃผ์…”์„œ ๋๊นŒ์ง€ ์™„์„ฑํ• ์ˆ˜์žˆ์—ˆ์Šต๋‹ˆ๋‹ค ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

          • ์–‘ํšจ์ค€๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
            ์–‘ํšจ์ค€

            ์ˆ˜๊ฐ•ํ‰ 2

            โˆ™

            ํ‰๊ท  ํ‰์  5.0

            5

            90% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

            NextJS์™€ Docker์— ๋Œ€ํ•ด ๋ง›๋ณผ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ๊ฐ•์˜์˜€์Šต๋‹ˆ๋‹ค! ๋‹ค์Œ์— ์ƒˆ๋กœ์šด ๊ฐ•์˜ ์ถœ์‹œ๋˜๋ฉด ๋˜ ๊ตฌ๋งคํ•ด์•ผ๊ฒ ์–ด์š”

            John Ahn๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

            ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ๋น„์Šทํ•œ ๊ฐ•์˜

            ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ์—ฐ๊ด€ ๋กœ๋“œ๋งต

            ๊ฐ•์˜๊ฐ€ ํฌํ•จ๋œ ๋กœ๋“œ๋งต์œผ๋กœ ํ•™์Šตํ•ด ๋ณด์„ธ์š”!

            โ‚ฉ44,000