Skip to content

Jay-WKJun/ninjaRun

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿฑโ€๐Ÿ‘คNinja Run

Rope swing And Jump Over!

์ŠคํŒŒ์ด๋”๋งจ ์ฒ˜๋Ÿผ ๋กœํ”„๋ฅผ ํƒ€๊ณ  ์žฅ์• ๋ฌผ์„ ๋„˜์–ด๊ฐ€๋Š” ๊ฒŒ์ž„์ž…๋‹ˆ๋‹ค!

๐Ÿ‘‰Deploy Address: https://www.ninjarun.fun/

๐Ÿ‘‰Backend Address: https://github.com/Jay-WKJun/ninjaRunBack

Demo

(๊ฒŒ์ž„ํ™”๋ฉด์˜ ์ผ๋ถ€๋ฅผ ์ดฌ์˜ํ–ˆ์Šต๋‹ˆ๋‹ค)

์‹œ์—ฐ์˜์ƒ

stand-up event

(2์‹œ๊ฐ„ 42๋ถ„ 21์ดˆ ์‹œ์ž‘)

โ— Motivation

  • why game?

    • ๊ฐ์ฒด์ง€ํ–ฅ ํŒจ๋Ÿฌ๋‹ค์ž„์„ ์‹ฌ๋„์žˆ๊ฒŒ ๋‹ค๋ฃจ์–ด๋ณด๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.
    • ์ง์ ‘ ๋ฌผ๋ฆฌ ํ˜„์ƒ๋“ค์„ ์ฝ”๋“œ๋กœ ๊ตฌํ˜„ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.
    • ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ดํ•ด๋„๋ฅผ ๋†’์—ฌ๋ณด๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.
  • why Rope Action?

    • ๋Œ€์ค‘์ ์ด์ง€๋งŒ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์ƒ๋Œ€์ ์œผ๋กœ ๋œ ์•Œ๋ ค์ง„ ๋กœํ”„์•ก์…˜์ด ์ฐธ์‹ ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ๊ฐœ์ธ์ ์œผ๋กœ ์ŠคํŒŒ์ด๋”๋งจ๊ณผ ๊ณผ๊ฑฐ Worms ๋ผ๋Š” ๊ฒŒ์ž„์ฒ˜๋Ÿผ ์†๋„ ์žˆ๋Š” ๊ฒŒ์ž„์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ›  Tech stack

  • Phaser 3

    Sprite ๋ Œ๋”๋ง๊ณผ ๋ฌผ๋ฆฌ์—”์ง„์„ ๋™์‹œ์— ๊ทธ๋ฆฌ๊ณ  ์กฐํ™”๋กญ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” FrameWork ์ด์—ˆ๊ธฐ์— ์ „์ฒด์ ์ธ ๊ฒŒ์ž„ ์ œ์ž‘์— ํ™œ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.

  • matterJS

    ๋‘ Object๊ฐ„ ๊ตฌ์†๊ด€๊ณ„(Constraint) ๊ธฐ๋Šฅ๊ณผ ๊ณต๊ธฐ ์ €ํ•ญ ๋“ฑ์˜ ๋”์šฑ ๋” ์ •๊ตํ•˜๊ณ  ๋ณต์žกํ•œ ๋ฌผ๋ฆฌ ํ˜„์ƒ์„ ์žฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.

  • Vanilla Javascript

    ๊ฐ„๋‹จํ•œ routing๊ณผ page rendering์— React๋Š” ๋„ˆ๋ฌด OverEngineering์ด๋ผ ์ƒ๊ฐํ•˜์—ฌ ์ฒ˜์Œ๋ถ€ํ„ฐ Vanilla Javascript๋กœ ๋งŒ๋“ค๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.

    Main page์™€ Backend Server ํ†ต์‹  ๊ทธ๋ฆฌ๊ณ  routing์— ์‚ฌ์šฉ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

  • Webpack

    Game์˜ ์ˆ˜๋งŽ์€ asset๊ณผ Phaser framework๋ฅผ bundlingํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.

  • Express.js

    Backend api server์— ํ™œ์šฉ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๐ŸŒ Deploy

Client

  • Netlify๋ฅผ ์ด์šฉํ•ด ๋ฐฐํฌ

Server

  • AWS Elastic Beanstalk (EB)
  • AWS Code Pipeline for Deployment automation

๐Ÿ•น How to Play?

  • ํ‘œ์ฐฝ ๋ฐœ์‚ฌ

    ํด๋ฆญ์‹œ, ๋งˆ์šฐ์Šค ์ปค์„œ ์œ„์น˜๋กœ ํ‘œ์ฐฝ ๋ฐœ์‚ฌ

    • ๋•…์— ๋งž์„ ์‹œ?

      ๋กœํ”„ ์ƒ์„ฑ! Swing ์‹œ์ž‘!

    • ์ ์—๊ฒŒ ๋งž์„ ์‹œ?

      ์ ์„ ์ฒ˜์น˜!

  • Rope ๋†“๊ธฐ

    Swing์ค‘ ํด๋ฆญ, ๊ด€์„ฑ ๊ทธ๋Œ€๋กœ ๋‚ ์•„๊ฐ„๋‹ค

  • ์ ์ˆ˜ ํš๋“

    ์  ํ•˜๋‚˜๋‹น 1์ ! 10์ดˆ ๋‹น 1์ !

  • Rule!!

    • ๋กœํ”„์™€ ํ‘œ์ฐฝ์€ ํ™”๋ฉด์ƒ ํ•˜๋‚˜๋งŒ ๊ฐ€๋Šฅ(swing์ค‘ ํ‘œ์ฐฝ ๋ฐœ์‚ฌ ๋ถˆ๊ฐ€)
    • 1๋ถ„ ๋งˆ๋‹ค, ๋‚œ์ด๋„ ์ฆ๊ฐ€!

๐ŸŽฏ Focus point!

OOP ์„ค๊ณ„ (Object-Oriented Programming)

๊ฒŒ์ž„์ด๊ธฐ์— ์—ฌ๋Ÿฌ Object๋“ค์˜ ์ƒํ˜ธ์ž‘์šฉ์„ ์ฝ”๋“œ๋กœ ์ง๊ด€์ ์ด๊ณ  ๊ฐ„๊ฒฐํ•˜๊ฒŒ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด OOP ์„ค๊ณ„์— ํŠนํžˆ ์ง‘์ค‘ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๋†’์€ ์‘์ง‘๋„์™€ ๋‚ฎ์€ ๊ฒฐํ•ฉ๋„

OOP์˜ ๋‹ค๋ฅธ ๋ฒ•์น™๋„ ๋ชจ๋‘ ๊ณ ๋ คํ•˜๋ฉฐ ๊ฐœ๋ฐœํ•˜์˜€์ง€๋งŒ ํŠนํžˆ ์‘์ง‘๋„์™€ ๊ฒฐํ•ฉ๋„์˜ ์›์น™์€
์ˆœ์ˆ˜ ํ•จ์ˆ˜๊ฐ€ ํ•ต์‹ฌ์ด ๋˜๋Š” Functional Programming๊ณผ
moduleํ™” ๊ฐ€๋Šฅํ•œ ๊ฒƒ์„ ๋งŒ๋“ ๋‹ค๋ผ๋Š”
ํ•จ์ˆ˜ ์ƒ์„ฑ ์›์น™์ด ์œ ์‚ฌ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์—ฌ ์กฐ๊ธˆ ๋” ์‹ ๊ฒฝ์“ฐ๋ฉฐ ์„ค๊ณ„ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋Œ€ํ‘œ์ ์ธ ์ ์šฉ ์˜ˆ์‹œ

์ด๋ฒˆ์— ์‚ฌ์šฉํ•œ ์—”์ง„์€ 'matterJS' ๋ฌผ๋ฆฌ์—”์ง„์€ Object๊ฐ€ ์Šค์Šค๋กœ ์›€์ง์ด๋„๋ก ํ•˜๋Š” ๊ธฐ๋Šฅ์ด ์—†์–ด ์ฒ˜์Œ์—๋Š” frame์ด update๋  ๋•Œ๋งˆ๋‹ค velocity๋ฅผ ์„ค์ •ํ•ด์ฃผ์–ด ์†๋„๋ฅผ ์ผ์ •ํ•˜๊ฒŒ ์œ ์ง€ํ•ด ์ฃผ์—ˆ์ง€๋งŒ,

ํ•ด๋‹น ๊ธฐ๋Šฅ์€ ๋‹ค๋ฅธ Object์™€ ์ƒํ˜ธ์ž‘์šฉ์ด ํ•„์š”์—†๋Š”๋ฐ ๊ฒŒ์ž„ field์˜ update ํ•จ์ˆ˜์— ์žˆ๋Š” ๊ฒƒ์€ ์ฝ”๋“œ์˜ ๋‚ญ๋น„๋ผ๊ณ  ์ƒ๊ฐ,

tween์˜ counter๋ฅผ ๊ฐ class๋‚ด์—์„œ ์‚ฌ์šฉ, 1x -> 2x์ง€์ ๊นŒ์ง€ ์ผ์ •ํ•œ ๊ฐ„๊ฒฉ์œผ๋กœ ์ˆซ์ž๋ฅผ count, ๊ทธ๊ฒƒ์„ ์†๋„๋กœ ์‚ผ์•„ ์Šค์Šค๋กœ ์›€์ง์ด๋„๋ก ์„ค์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ์‹์œผ๋กœ class์˜ ์‘์ง‘์„ฑ์€ ๋Š˜์ด๊ณ  ๊ฒฐํ•ฉ์„ฑ์„ ์ค„์˜€์Šต๋‹ˆ๋‹ค.

๋Š๋‚€์ 

  • OOP์˜ ์žฅ์ 

    • ๋งค์šฐ ์ง๊ด€์ ์ธ ์„ค๊ณ„

      ํ˜„์‹ค์„ธ๊ณ„์˜ ๋ฌผ๊ฑด(Entity)์„ ๋งŒ๋“œ๋Š” ๊ฒƒ ์ฒ˜๋Ÿผ ๋งค์šฐ ์ง๊ด€์ ์ธ ์„ค๊ณ„๊ฐ€ ๊ฐ€๋Šฅํ•˜์—ฌ ์ข‹์•˜์Šต๋‹ˆ๋‹ค.

      ์„ค๊ณ„ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ object๋ผ๋ฆฌ์˜ ์ƒํ˜ธ์ž‘์šฉ์—๋„ ๊ฐ๊ฐ์˜ method๋งŒ ํ™œ์šฉํ•˜๋ฉด ๋˜๋Š” ์ ์—์„œ ๋งค์šฐ ํŽธ๋ฆฌํ•˜๊ณ  ์ง๊ด€์ ์ด์–ด์„œ ์ข‹์•˜์Šต๋‹ˆ๋‹ค.

      ex) ์บ๋ฆญํ„ฐ๊ฐ€ ์ž์‹ ์˜ ๊ฐ๋„๋ฅผ 360๋„ ํšŒ์ „ ์‹œํ‚ค๋Š” ํ–‰๋™์„ ์บ๋ฆญํ„ฐ class์•ˆ์— ํ•˜๋‚˜์˜ method๋กœ ์ •์˜ํ•˜๊ณ  ํ•„์š”ํ•  ๋•Œ, ์‹คํ–‰์‹œ์ผœ ์บ๋ฆญํ„ฐ๋ฅผ ํšŒ์ „์‹œํ‚ค๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ์Šคํ† ๋ฆฌ๋ฅผ ์งœ๋“ฏ์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ฒŒ ๋˜์–ด ์„ค๊ณ„์™€ ์ฝ”๋“œ ์ž‘์„ฑ์— ๋งค์šฐ ์šฉ์ดํ–ˆ์Šต๋‹ˆ๋‹ค.

      ๋™์‹œ์— ์ฝ”๋“œ ๋˜ํ•œ ์ง๊ด€์ ์œผ๋กœ ์ฝํžˆ๋„๋ก ์ž‘์„ฑ์ด ๊ฐ€๋Šฅํ–ˆ์Šต๋‹ˆ๋‹ค.

  • ๋ถˆํŽธํ–ˆ๋˜ ์ , ๋‹จ์ 

    • ๋ถˆ์™„์ „ํ•œ ์บก์Šํ™”

      javascript๋งŒ์˜ ๋ฌธ์ œ์ผ ์ˆ˜ ์žˆ์ง€๋งŒ ES2019์— ์ถ”๊ฐ€๋œ private๋ฐ–์— ์—†์–ด capsulation์ด ๋ถˆ์™„์ „ํ•˜๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. class ํ•˜๋‚˜์˜ ์ˆ˜๋งŽ์€ method๋“ค์˜ ๋ฒ”์œ„ ์„ค์ •์ด ์–ด๋ ค์›Œ ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ง„๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

    • ๋ฉ”๋ชจ๋ฆฌ ๋น„ํšจ์œจ์„ฑ

      ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์€ ์ƒ์†๋ฐ›์•„ ๋งŒ๋“  class์˜ ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ ์ค‘์— ๋ช‡๊ฐ€์ง€์ธ๋ฐ ๊ทธ๊ฒƒ์„ ์œ„ํ•ด instance๋กœ ๋ชจ๋“  ๊ฒƒ์„ ๋งŒ๋“ค์–ด๋‚ด์•ผ ํ•œ๋‹ค๋Š” ์ ์ด ๋น„ํšจ์œจ ์ ์ด๋ผ ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

      ex) ์‹ค์ œ๋กœ ์ด๋ฒˆ project์—์„œ sprite class๋ฅผ ์ƒ์†๋ฐ›์•„ ๋งŒ๋“  Character class์˜ method ์ค‘์— 30%๋งŒ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.

      interface๋‚˜ abstract class๋ฅผ ํ†ตํ•ด ํ•„์š”ํ•œ method์™€ variable์„ ์ •์˜ํ•˜๋Š” ๊ฒƒ๋„ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ค‘ ํ•˜๋‚˜๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

Vanilla Javascript Page

๊ทธ๋™์•ˆ React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ Vanilla Javascript์™€ ๋ฉ€์–ด์ ธ ์ด๋ฒˆ ๊ธฐํšŒ์— Vanilla Vavascript์™€ ์นœํ•ด์ง€๊ธฐ ์œ„ํ•ด Vanilla Javascript๋กœ Page๋ฅผ ์ž‘์—…ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธฐํšŒ๋กœ ๋‹ค์‹œ๊ธˆ ๋ณธ์งˆ์ ์ธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๋Œ€ํ•ด ๋‹ค์‹œ ์ƒ๊ฐํ•ด ๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

Main Page๋Š” ์ ‘์†ํ•œ ์‚ฌ์šฉ์ž๋“ค์˜ Name์„ ํŒŒ์•…ํ•˜๊ณ  Ranking Page๋ฅผ ์œ„ํ•ด ๋”ฐ๋กœ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ (Business logic๊ณผ Game logic์˜ ๋ถ„๋ฆฌ)

Logic์€ ํฌ๊ฒŒ Main Page์—์„œ ํ•„์š”ํ•œ "Business Logic"๊ณผ ๊ฒŒ์ž„์„ ์œ„ํ•œ "Game Logic"์ด ์žˆ์–ด ์ด ๋‘˜์˜ ๊ด€์‹ฌ์‚ฌ๋ฅผ ํ™•์‹คํ•˜๊ฒŒ ๋ถ„๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด React์™€ ์œ ์‚ฌํ•˜๊ฒŒ Componentํ™” ๋ฐ Routing์„ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ด€์‹ฌ์‚ฌ์˜ ๋ถ„๋ฆฌ์— ์ง‘์ค‘ํ•œ ์ด์œ 

  • Game์— ์ „ํ˜€ ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š” Logic

    Game์ด ๊ตฌ๋™๋˜๋Š”๋ฐ ์ „ํ˜€ ์ƒ๊ด€์—†๋Š” Logic์ด๊ธฐ์— ์™„์ „ํžˆ ๋ถ„๋ฆฌํ•˜๊ณ ์ž ํ–ˆ์Šต๋‹ˆ๋‹ค.

  • Logic์ด ์„ž์˜€์„ ๋•Œ, ๊ฐ€๋…์„ฑ์˜ ์ €ํ•˜, ์œ ์ง€๋ณด์ˆ˜์˜ ๋ถˆํŽธํ•จ

    Game Logic ์•ˆ์—์„œ๋„ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์ง€๋งŒ ์™„์ „ํžˆ ํŒŒ์ผ์„ ๋‚˜๋ˆ”์œผ๋กœ์„œ ์œ ์ง€๋ณด์ˆ˜ ๋ฉด์—์„œ ํฌ๊ฒŒ ์ข‹์•„์กŒ์Šต๋‹ˆ๋‹ค.

    ex) ์‹ค์ œ๋กœ ๊ธฐ๋ก์ €์žฅ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•  ๋•Œ api fetch Logic ๋”ฐ๋กœ, ๊ฒŒ์ž„ ์ข…๋ฃŒ ๋ฐ ์ €์žฅ Logic ๋”ฐ๋กœ ๊ตฌํ˜„ ํ•œ ํ›„ ์—ฐ๋™ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ์ „, Game Logic ์•ˆ์—์„œ ๋ชจ๋“  ๊ฒƒ์„ ์ฒ˜๋ฆฌํ–ˆ๋˜ ๊ฒƒ๊ณผ๋Š” ๋‹ฌ๋ฆฌ ๊ต‰์žฅํžˆ ๋น ๋ฅด๊ณ  ํŽธ๋ฆฌํ•˜๊ฒŒ ๊ตฌํ˜„ํ–ˆ๊ณ , ํŒŒ์ผ์ด ํ™•์‹คํžˆ ๊ตฌ๋ถ„๋˜์–ด ๊ฐ€๋…์„ฑ๋„ ํ›จ์”ฌ ์ข‹์•„ ์กŒ์Šต๋‹ˆ๋‹ค.

    ex) ์‚ฌ์šฉ์ž ์ •๋ณด์— ๋Œ€ํ•œ ๋ณ€์ˆ˜๋„ ๋‹ค๋ฅธ ํŒŒ์ผ๋กœ ๋‚˜๋ˆ„์–ด ๋ฒ„๋ฆฌ๋‹ˆ ๋‚œ์ด๋„์— ์˜ํ–ฅ์„ ์ฃผ๋Š” factor๋“ค์„ ์ •๋ฆฌํ•˜๊ธฐ๊ฐ€ ํ›จ์”ฌ ์ˆ˜์›”ํ•ด์ ธ ๋‚œ์ด๋„ ์กฐ์ ˆ์—๋„ ํ›จ์”ฌ ์ˆ˜์›”ํ–ˆ์Šต๋‹ˆ๋‹ค!

์™œ React์ฒ˜๋Ÿผ ๊ตฌํ˜„?

Phaser framework๊ฐ€ webpack ํ˜น์€ parcel์„ ํ†ตํ•œ bundling์ด ํ•„์š”ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— bundler์— ๋งž์ถฐ Vanilla Javascript page์™€ routing์„ ๊ฐ Component๋กœ ๋‚˜๋ˆ„์–ด SPA ํ˜•ํƒœ๋กœ ๊ตฌํ˜„ํ•  ํ•„์š”๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

routing๋„ ์‹ค์ œ api ์ฃผ์†Œ๋ฅผ ํ†ตํ•ด page ์ž๋ฃŒ๋“ค์„ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ฏ€๋กœ,

window.history.pushState({ data, "/" });

๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‹ค์ œ๋กœ ํ•ด๋‹น IP์— ๊ฐ€์„œ ์ž๋ฃŒ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ ์ฃผ์†Œ์— ํ•ด๋‹นํ•˜๋Š” Javascript ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋ง ํ•จ์œผ๋กœ์จ, ํ”Œ๋ ˆ์ด์–ด๊ฐ€ routing์„ ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋Š๋‚€์ 

  • Vanilla Javascript ๊ฐ๊ฐ์ด ๋˜์‚ด์•„ ๋‚ฌ๋‹ค

    ๊ทธ๋™์•ˆ React์™€ React router๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ Vanilla Javascript์— ๋Œ€ํ•œ ๊ฐ๊ฐ์„ ์žƒ์–ด๋ฒ„๋ ค์„œ React๊ฐ€ Vanilla Javascript๋กœ ๋˜์–ด ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค๋„ ์žŠ์–ด๊ฐ€๋Š” ์ฐธ์— ๊ฑฐ๊พธ๋กœ Vanilla Javascript๋กœ React์˜ ๊ธฐ๋Šฅ๋“ค์„ ๋งŒ๋“ค์–ด ๋ณด๋ฉด์„œ Javascript ๋ณธ์—ฐ์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๋Œ€ํ•œ ๊ฐ๊ฐ์„ ๋‹ค์‹œ ์‚ด๋ฆด ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ธฐํšŒ๊ฐ€ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

    ๋˜ํ•œ ์–ด๋– ํ•œ ๊ธฐ์ˆ ์— ์–ฝ๋งค์ด๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์•„๋‹Œ ์–ด๋–ค ๋ฌธ์ œ๋“  ์Šค์Šค๋กœ ํ•ด๊ฒฐํ•˜๊ณ  ๋งŒ๋“ค์–ด ๋‚ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ํ”„๋กœ๊ทธ๋ž˜๋จธ๋กœ์„œ์˜ ์ž์‹ ๊ฐ์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค.

  • ๊ด€์‹ฌ์‚ฌ ๋ถ„๋ฆฌ์™€ ์ฝ”๋”ฉ ์ปจ๋ฒค์…˜๋“ค

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

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

About

๐Ÿ‘น vanilla 2nd project "Ninja Run"

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published