๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Side project

[ํ”Œ์ ๊ธฐ๋ก] ๋‰ด์Šค๋ ˆํ„ฐ ๋ชจ์Œ ์‚ฌ์ดํŠธ NEWใƒปLEใƒปKA

NEWใƒปLEใƒปKA(๋‰ด๋ ˆ์นด) โžก๏ธ https://newleka.vercel.app

๐ŸŽฌ ์‹œ์ž‘ ๋ฐ ๊ณ„๊ธฐ

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

 

๐Ÿ’ป ์ง„ํ–‰

Next.js + Strapi ์กฐํ•ฉ์œผ๋กœ ์ง„ํ–‰ํ–ˆ๋‹ค. ์ฒ˜์Œ๋ถ€ํ„ฐ ์ด๋ ‡๊ฒŒ ์‹œ์ž‘ํ•œ ๊ฑด ์•„๋‹ˆ๊ณ  Next.js๋Š” ๋ญ”๊ฐ€ ๋นจ๋ผ ๋ณด์—ฌ์„œ ๋˜ React๋„ ์จ๋ณด๊ณ  ์‹ถ์€ ๋งˆ์Œ์— ์„ ํƒํ–ˆ๊ณ , Strapi๋Š” ์ฒ˜์Œ๋ถ€ํ„ฐ ์‚ฌ์šฉํ•˜์ง€๋Š” ์•Š์•˜๋‹ค. ์ฒ˜์Œ์—๋Š” Github์— json ํŒŒ์ผ ์˜ฌ๋ ค์„œ gh-pages๋กœ ํ˜ธ์ŠคํŒ…ํ•˜๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™”๋Š”๋ฐ ์ ์  ์ง„ํ–‰ํ• ์ˆ˜๋ก ๋„ˆ๋ฌด ์ฐ์ฐํ•ด์„œ Strapi๋กœ ๊ฐˆ์•„ํƒ”๋‹ค. ์‚ฝ์งˆ๋„ ๋งŽ์ด ํ–ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ์— Next.js + Strapi๋กœ ๊ธ€์„ ๋ช‡ ๊ฐœ ์˜ฌ๋ ธ์—ˆ๋Š”๋ฐ ์ € ์กฐํ•ฉ์œผ๋กœ ๊ฒ€์ƒ‰ํ•ด๋ณด๋‹ˆ ํŠœํ† ๋ฆฌ์–ผ์ด ๋‚˜์˜ค๊ธด ํ•˜๋Š”๋ฐ Strapi ์—ฐ๊ฒฐํ•  ๋•Œ ์‚ฝ์งˆ์„ ๋งŽ์ด ํ•ด์„œ ๋ˆ„๊ตฐ๊ฐ€์—๊ฒ ๋„์›€์ด ๋˜์—ˆ์œผ๋ฉด ํ•˜๋Š” ๋งˆ์Œ์œผ๋กœ ์˜ฌ๋ ค๋ณด์•˜๋‹ค.
์‚ฝ์งˆ๋กœ๊ทธ๋ฅผ ํ•˜๋‚˜ ๋” ์˜ฌ๋ฆฌ๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ ๊ทธ๋ƒฅ ์—ฌ๊ธฐ์— ํ’€์–ด์•ผ๊ฒ ๋‹ค.


[์‚ฝ์งˆ ์‹œ์ž‘] Strapi๋กœ ๊ฐˆ์•„ํƒ€๋Š” ์‹œ์ ์— ์ด๋ฏธ ๋‰ด์Šค๋ ˆํ„ฐ ๋ฐ์ดํ„ฐ๊ฐ€ 100๊ฐœ๊ฐ€ ๋„˜์€ ์ƒํƒœ์—ฌ์„œ ํ•˜๋‚˜ํ•˜๋‚˜ DB์— ๋ฐ์ดํ„ฐ๋ฅผ ๋„ฃ์„ ์˜์š• ์ž์ฒด๊ฐ€ ์ƒ๊ธฐ์ง€ ์•Š์•˜๋‹ค. ๊ธฐ์กด์— ์—‘์…€ ํŒŒ์ผ๋กœ ๊ด€๋ฆฌํ•˜๋˜ ๋ฐ์ดํ„ฐ๋ฅผ =CONCATENATE(,,,,,....) ํ•จ์ˆ˜๋กœ (์˜ˆ์ „์— ์ผํ•  ๋•Œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ€์–ด ๋„ฃ์„ ์ผ์ด ๋งŽ์•„์„œ ์“ฐ๋˜ ๊ผผ์ˆ˜?์ธ๋ฐ ์‹ค์ œ๋กœ๋„ ์ €๋ ‡๊ฒŒ ์“ฐ๋‚˜?ใ… ใ… ) SQL ์ฟผ๋ฆฌ๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  PgAdmin์„ ๋‹ค์šด๋ฐ›์•„์„œ ๋‚ด DB๊ฐ€ ๋ถ™์–ด์žˆ๋Š” ๊ณณ์œผ๋กœ ์ ‘๊ทผํ•ด์„œ ์ฟผ๋ฆฌ๋กœ ๋‹ค ๋ฐ€์–ด ๋„ฃ์—ˆ๋‹ค. ์˜ณ์€ ๋ฐฉ๋ฒ•์€ ์•„๋‹ ๊ฑฐ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์ง€๋งŒ... ๋‚˜๋ฆ„ ๋น ๋ฅด๊ฒŒ Strapi๋กœ ๊ฐˆ์•„ํƒˆ ์ˆ˜ ์žˆ์—ˆ๋‹ค.  [์‚ฝ์งˆ ๋]


์‚ฌ์‹ค Next.js๋„ ์ฒ˜์Œ ์‚ฌ์šฉํ•ด๋ณด๋Š” ํ”„๋ ˆ์ž„์›Œํฌ๋ผ์„œ ์Šคํƒ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ, ๊ฐ์ข… ๋ธ”๋กœ๊ทธ, ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ง„์งœ ๋งŽ์ด ์ฐพ์•„๋ณด๊ณ  ์ฐธ๊ณ ํ–ˆ๋‹ค. ๊ทธ๋ž˜์„œ Next.js ์นดํ…Œ๊ณ ๋ฆฌ์— ๋‚ด๋ณด๋‚ด๋ฒˆ(๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ๋‚ด๊ฐ€ ๋ฒˆ์—ญํ•œ) Next.js ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•˜๊ฒŒ ๋œ ๊ฒƒ๋„ ์ง„์งœ ๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ์ž‘์„ฑํ–ˆ๋‹ค. ์ž๊พธ ๊ฐ™์€ ๋ฌธ์„œ๋ฅผ ์ƒˆ๋กญ๊ฒŒ ์ฝ๊ณ  ์žˆ๋Š” ๋‚ด ์ž์‹ ์„ ๋ฐœ๊ฒฌํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.  

 

๐Ÿ”š ๋งˆ๋ฌด๋ฆฌ

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