Community

๊ฐœ๋ฐœ์ž 99% ์ปค๋ฎค๋‹ˆํ‹ฐ์—์„œ ์ˆ˜๋‹ค ๋–จ์–ด์š”!

โ† Go back

๐Ÿˆ ๋ฉœ๋ก  ํด๋ก ์ฝ”๋”ฉ ์ตœ์ข… ์ œ์ถœ <๋‹น์‹ ์˜ ์ž‘์—…์‹ค>

โ€ข#music_playerโ€ข
2๋…„ ์ „
โ€ข
3,121
โ€ข
6
โ€ข

์ตœ์ข… ๋ฐฐํฌ URL: https://pixel-workroom.herokuapp.com/

๊นƒํ—ˆ๋ธŒ ๋งํฌ: https://github.com/ha-il/project-pixel

  • ์ž๊ธฐ์†Œ๊ฐœ

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

  • ํ”„๋กœ์ ํŠธ ๊ธฐํš

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

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

  • ์ดˆ๊ธฐ ๋””์ž์ธ

(์‹ฌ๊ฐํ•œ ๋””์ž์ธ ๊ฐ๊ฐ...)

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

  • ๋””์ž์ธ ํ…Œ๋งˆ๋Š” "ํ”ฝ์…€ ์•„ํŠธ"

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

(ํ”„๋กœ์ ํŠธ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์ฐ์€ ํ”ฝ์…€ ์•„ํŠธ ํŒŒ์ผ๋“ค)

  • ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ ๋ชฉํ‘œ

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋ฉด์„œ ์ œ๊ฐ€ ์Šค์Šค๋กœ ์„ค์ •ํ•œ ๋ชฉํ‘œ๊ฐ€ ์„ธ ๊ฐ€์ง€ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•˜๋‚˜. ์Œ์•…์ด ๋Š๊ธฐ์ง€ ์•Š๋„๋ก SPA๋กœ ๊ตฌํ˜„ํ•  ๊ฒƒ. (๋กœ๊ทธ์ธ, ๋กœ๊ทธ์•„์›ƒ์„ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ๊ธฐ๋Šฅ๋“ค์€ ์ „๋ถ€ ์ƒˆ๋กœ๊ณ ์นจ์„ ๋ฐœ์ƒ์‹œํ‚ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค. )

๋‘˜. ํผ๊ทธ ํŒŒ์ผ์€ layout.pug ํŒŒ์ผ์— div ํ•˜๋‚˜๋งŒ ์ž‘์„ฑํ•˜๊ณ , ๋ฆฌ์•กํŠธ์ฒ˜๋Ÿผ ๋‚˜๋จธ์ง€๋Š” ์ „๋ถ€ ํ”„๋ก ํŠธ์—”๋“œ์—์„œ ๋ Œ๋”๋งํ•  ๊ฒƒ

์…‹. ํ”„๋ก ํŠธ์—”๋“œ ๊ตฌํ˜„ํ•  ๋•Œ๋Š” ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•  ์ˆ˜ ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ค๊ณ , ์ปดํฌ๋„ŒํŠธ ํด๋ž˜์Šค๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™•์žฅ์‹œ์ผœ๊ฐ€๋ฉด์„œ ๊ตฌํ˜„ํ•  ๊ฒƒ

์œ„ ์„ธ ๊ฐ€์ง€๋ฅผ ๋‚˜๋ฆ„์˜ ๋„์ „๊ณผ์ œ๋กœ ์ƒ๊ฐํ•˜๋ฉด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

(ํด๋ผ์ด์–ธํŠธ ํด๋” ๊ตฌ์กฐ)

(๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋Š” Component ํด๋ž˜์Šค๋ฅผ ์ƒ์†๋ฐ›์•„ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.)

(์ƒํƒœ๊ด€๋ฆฌ๋„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.)

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

  1. ๋กœ๊ทธ์ธ ์ „ ํ™”๋ฉด๊ณผ ๋กœ๊ทธ์ธ ์ฐฝ

  • ํ™ˆํŽ˜์ด์ง€ ์ฒซ ์ง„์ž…์‹œ ๋‚˜์˜ค๋Š” ํ™”๋ฉด์ž…๋‹ˆ๋‹ค.

  • 'click'์ด ๋– ์žˆ๋Š” ๋ชจ๋‹ˆํ„ฐ๋ฅผ ํด๋ฆญํ•˜๋ฉด URL์ด /login์œผ๋กœ ๋ฐ”๋€Œ๋ฉฐ ๋กœ๊ทธ์ธ์ฐฝ์ด ๋‚˜์˜ต๋‹ˆ๋‹ค.

  1. ๋กœ๊ทธ์ธ ํ›„ ์ฒซ ์ง„์ž… ํ™”๋ฉด

  • ์Šค๋งˆํŠธํฐ ์•„์ด์ฝ˜: ํด๋ฆญ์‹œ ์Šค๋งˆํŠธํฐ ์˜ค๋ธŒ์ ํŠธ๊ฐ€ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค.

  • ์นจ๋Œ€: ํด๋ฆญ์‹œ ๋กœ๊ทธ์•„์›ƒ ์•Œ๋žŒ์ฐฝ์ด ๋œน๋‹ˆ๋‹ค.

  • ์žฅ์‹์žฅ: ์œ ์ €์˜ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ๋ฅผ ๋‚˜์—ดํ•ฉ๋‹ˆ๋‹ค.

  • ๋ฎค์ง๋ฑ…ํฌ: ํด๋ฆญ์‹œ ์ธ๊ธฐ์ฐจํŠธ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

  1. ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ ์ƒ์„ฑ๊ณผ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€

  • ์Šค๋งˆํŠธํฐ ์•„์ด์ฝ˜์„ ํด๋ฆญํ•˜๋ฉด ์Šค๋งˆํŠธํฐ ์˜ค๋ธŒ์ ํŠธ๊ฐ€ ๋‚˜์˜ต๋‹ˆ๋‹ค.

  • ๋…น์ƒ‰ ์•„์ด์ฝ˜์€ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ ์ƒ์„ฑ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

  • ๋นจ๊ฐ„์ƒ‰ ์•„์ด์ฝ˜์€ ์œ ํŠœ๋ธŒ ์˜์ƒ์œผ๋กœ ์Œ์•…์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

  • ๋…น์ƒ‰ ์•„์ด์ฝ˜์„ ๋ˆ„๋ฅด๋ฉด ์ž…๋ ฅ์ฐฝ์ด ๋‚˜์˜ต๋‹ˆ๋‹ค.

  • ํผ์„ ์ž…๋ ฅํ•˜๊ณ  ์„œ๋ธŒ๋ฐ‹ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ํ•ด๋‹น ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€๊ฐ€ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค.

  • ์Œ์•…์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ธ๊ธฐ์ฐจํŠธ ์Œ์•…์„ ๋ฐ‘์— ์ถ”์ฒœํ•ด์ค๋‹ˆ๋‹ค.

  • + ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ์— ์Œ์•…์ด ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค.

  • ๊ฒ€์ƒ‰ํ•˜๊ธฐ ์ฐฝ์— ๊ฒ€์ƒ‰์–ด๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ์ธ๊ฐ€์ฐจํŠธ ๊ณก ๋Œ€์‹  ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

    • ํ˜„์žฌ๋Š” ๊ฒ€์ƒ‰์–ด ์ „์ฒด๋ฅผ ์ •ํ™•ํžˆ ์ž…๋ ฅํ•ด์•ผ ๊ฒฐ๊ณผ๊ฐ€ ๋œน๋‹ˆ๋‹ค.

  • ์žฌ์ƒ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๋ฎค์ง ํ”Œ๋ ˆ์ด์–ด๋กœ ํ˜„์žฌ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ์˜ ์Œ์•…์„ ์ „๋‹ฌํ•˜๊ณ  ์žฌ์ƒ์ด ์‹œ์ž‘๋ฉ๋‹ˆ๋‹ค.

  • ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํ™ˆ์œผ๋กœ ๋Œ์•„๊ฐ€๋ฉด ์žฅ์‹์žฅ์ด ์ฑ„์›Œ์ ธ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ์Œ์•… ์ถ”๊ฐ€ ๊ธฐ๋Šฅ

  • ์Šค๋งˆํŠธํฐ ์˜ค๋ธŒ์ ํŠธ์˜ ๋นจ๊ฐ„ ์•ฑ์„ ๋ˆ„๋ฅด๋ฉด ์Œ์•…์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ํผ์ด ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค.

  • ์œ ํŠœ๋ธŒ URL๋กœ ์Œ์•…์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ถ”๊ฐ€ํ•œ ์Œ์•…์„ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ ํ™”๋ฉด์—์„œ ๊ฒ€์ƒ‰ํ•˜์—ฌ ํ”Œ๋ ˆ์ด๋ฆฌ์ŠคํŠธ์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ์ธ๊ธฐ์ฐจํŠธ

  • ํ™ˆ ํ™”๋ฉด์—์„œ '๋ฎค์ง๋ฑ…ํฌ'๊ฐ€ ๋‚˜์˜ค๋Š” ํ‹ฐ๋น„ ์˜ค๋ธŒ์ ํŠธ๋ฅผ ํด๋ฆญํ•˜๋ฉด ์ธ๊ธฐ์ฐจํŠธ๊ฐ€ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค.

  • ๊ฐœ์„ ํ•˜๊ณ  ์‹ถ์€ ์ 

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

์‚ฌ์‹ค ๋‹ค๋ฅธ ๊ฒƒ๋ณด๋‹ค๋„ ์ฝ”๋“œ๋กœ ์ธ์ •๋ฐ›๊ณ  ์‹ถ์€ ํ”„๋กœ์ ํŠธ์˜€๋Š”๋ฐ, ๋งˆ๊ฐ์ด ๊ธ‰ํ•˜๋‹ค๋ณด๋‹ˆ ๋งˆ์ง€๋ง‰์—๋Š” ๊ฒฐ๊ตญ ์ค‘๋ณต ์ฝ”๋“œ๊ฐ€ ๋งŽ์•„์ง€๊ณ , ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ์— ๋„ˆ๋ฌด ๋งŽ์€ ์—ญํ• ์ด ๋ถ€์—ฌ๋œ ๊ฒƒ ๊ฐ™์•„์„œ ์•„์‰ฝ์Šต๋‹ˆ๋‹ค. ๋ฉฐ์น  ์‰ฌ์—ˆ๋‹ค๊ฐ€ ๋ฆฌํŒฉํ† ๋ง ๊ณผ์ •์„ ๊ฑฐ์น˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

  • ๋ฉœ๋ก  ํด๋ก ์ฝ”๋”ฉ ์ฐธ๊ฐ€ํ•˜์‹ค ๋ถ„๋“ค์—๊ฒŒ ์ „ํ•˜๊ณ  ์‹ถ์€ ํŒ

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

  • ์†Œ๊ฐ

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

๋งˆ์ง€๋ง‰์œผ๋กœ, ๋ฉœ๋ก  ํด๋ก ์ฝ”๋”ฉ ์ปจํ…Œ์ŠคํŠธ๋ฅผ ์—ด์–ด์ฃผ์‹  ๋…ธ๋งˆ๋“œ์ฝ”๋”์—๊ฒŒ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด์„œ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋งŽ์ด ๊ณต๋ถ€ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋˜ ๊ฐœ์ธ์ ์ธ ๋ชฉํ‘œ๋“ค์„ ๋‹ฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋‚˜๋ฆ„๋Œ€๋กœ ๊ฒ€์ƒ‰๋„ ๋งŽ์ด ํ•ด๋ณด๊ณ  ์‚ฝ์งˆ๋„ ๋งŽ์ด ํ–ˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ express์™€ pug๋กœ ์‰ฝ๊ฒŒ ํ•˜๋˜๊ฑธ, ํด๋ผ์ด์–ธํŠธ์—์„œ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋งŒ ๊ฐ€์ง€๊ณ  ํ•ด๊ฒฐํ•˜๋Š” ๊ฒƒ์ด ๋งŽ์ด ์–ด๋ ค์› ์ง€๋งŒ, ๋•๋ถ„์— ํด๋ž˜์Šค, this ๋ฐ”์ธ๋”ฉ, SPA ๊ตฌํ˜„, location API, history API, ์ฟ ํ‚ค, ์ƒํƒœ๊ด€๋ฆฌ ๋“ฑ ๋งŽ์€ ๊ฒƒ์„ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค. ํž˜๋“ค์—ˆ์ง€๋งŒ, ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ•œ๋•€ ํ•œ๋•€ ๊ตฌํ˜„ํ•˜๋Š”๊ฒŒ ์ •๋ง ์ฆ๊ฑฐ์› ์Šต๋‹ˆ๋‹ค. ์†Œ์ค‘ํ•œ ๊ฒฝํ—˜์„ ์„ ๋ฌผํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

6 comments