Skip to content
@RachelSSang

RachelSSang

PairProgramming2

๐Ÿ“ Vanello

Trello with only Vanilla Javascript and Mouse Event

์˜ค์ง ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋งŒ์„ ์‚ฌ์šฉํ•˜์—ฌ Trello๋ฅผ ํด๋ก ํ•œ ์‚ฌ์ดํŠธ์ž…๋‹ˆ๋‹ค.

๐Ÿ‘‰๋ฐฐํฌ๋งํฌ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿค” ๋ชฉ์ 

  • SPA ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ/ํ”„๋ ˆ์ž„์›Œํฌ ์ค‘ ํ•˜๋‚˜์ธ React๋ฅผ ์ดํ•ดํ•ด๋ณด์ž!
  • ๊ตฌํ˜„ํ•œ SPA ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์œผ๋กœ ํŠธ๋ ๋กœ๋ฅผ ํด๋ก ํ•ด๋ณด์ž!
  • ๋“œ๋ž˜๊ทธ์•ค๋“œ๋กญ ์ด๋ฒคํŠธ ์‹œ OS ๊ธฐ๋ณธ ์„ค์ •์— ๋”ฐ๋ผ ์ƒ๊ธฐ๋Š” ์Šคํƒ€์ผ์˜ ์ฐจ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ๋กœ ๊ตฌํ˜„ํ•ด๋ณด์ž!

๐Ÿ“… ์ง„ํ–‰ ๊ธฐ๊ฐ„

2022.10.26 ~ 2022.11.23


๐Ÿ‘ฉโ€๐Ÿ‘ง ํŒ€์› ์†Œ๊ฐœ

๊น€์ฑ„๋ฆฐ ๋ฐ•์œคํ•˜
@chaerin.dev @GuRaBang

๐Ÿ“š ๊ธฐ์ˆ  ์Šคํƒ

HTML5 CSS3 JavaScript


๐Ÿ“Œ ์ฃผ์š” ๊ฐœ๋ฐœ ๋‚ด์šฉ

React๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ SPA Library ๊ตฌํ˜„

  • diff ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ตฌํ˜„
  • ์ „์—ญ ์ƒํƒœ ๋ณ€๊ฒฝ ์‹œ ๋ Œ๋”๋ง

Trello ๊ตฌํ˜„

  • ์นด๋“œ, ๋ฆฌ์ŠคํŠธ ์ƒ์„ฑ, ์ˆ˜์ •, ์‚ญ์ œ ๊ธฐ๋Šฅ
  • ์นด๋“œ ๋‚ด ๋ฉ”๋ชจ ๊ธฐ๋Šฅ

๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ๋ฅผ ํ†ตํ•œ ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ ๊ตฌํ˜„

  • mousedown, mousemove, mouseup ์ด๋ฒคํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌํ˜„
  • getBoundingClientRect ๋ฉ”์„œ๋“œ์™€ ๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ ํ”„๋กœํผํ‹ฐ(pageX, pageY)๋ฅผ ์ด์šฉํ•˜์—ฌ drag ์ปจํ…์ธ  ์œ„์น˜ ์กฐ์ •

Popular repositories Loading

  1. pair-programming-2 pair-programming-2 Public

    ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚˜ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  Vanilla JavaScript๋งŒ์œผ๋กœ ๊ตฌํ˜„ํ•œ Trello

    JavaScript 2

  2. .github .github Public

Repositories

Showing 2 of 2 repositories

People

This organization has no public members. You must be a member to see who’s a part of this organization.

Top languages

Loadingโ€ฆ

Most used topics

Loadingโ€ฆ