Giter Club home page Giter Club logo

vanilla-todo-14th's Introduction

๐Ÿ™Œ Introduction

์ด ์ €์žฅ์†Œ๋Š” IT์ฐฝ์—…๋™์•„๋ฆฌ CEOS(https://www.ceos.or.kr/) ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์—์„œ ์Šคํ„ฐ๋””๋ฅผ ํ•˜๋ฉฐ ์ˆ˜ํ–‰ํ•œ ๋ฏธ์…˜์˜ ๊ฒฐ๊ณผ๋ฅผ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿšฉ ๋ฏธ์…˜ ์›๋ฌธ ๋งํฌ

https://github.com/CEOS-Developers/vanilla-todo-14th

๐Ÿšฉ ๊ฒฐ๊ณผ๋ฌผ ๋งํฌ

https://bonjunku.github.io/vanilla-todo-14th/

โœ ์š”๊ตฌ์‚ฌํ•ญ ๋ถ„์„

  1. html
  • ์ค‘์•™ ์ปจํ…Œ์ด๋„ˆ
  • ๋Œ€๊ธฐ์ค‘ / ์™„๋ฃŒ๋จ ๊ตฌ๋ถ„
  • ์ƒˆ๋กœ์šด ํ• ์ผ ์ถ”๊ฐ€ ์ž…๋ ฅ ๋ฐ›๊ธฐ
  • ์ƒˆ๋กœ์šด ํ• ์ผ ์ถ”๊ฐ€ ๋ฒ„ํŠผ
  • ๋ชฉ๋ก์—์„œ ์‚ญ์ œ ๋ฒ„ํŠผ
  1. css
  • ๋ฐฐ๊ฒฝ์ƒ‰ ์ถ”๊ฐ€
  • ํฐํŠธ ์กฐ์ ˆ, ๋Œ€๊ธฐ์ค‘์™„๋ฃŒ๋จ / ๋ชฉ๋ก / ์ƒˆ๋กœ์šด ํ• ์ผ ์ถ”๊ฐ€
  • ์Šคํฌ๋กค(์˜ค๋ฒ„ํ”Œ๋กœ์šฐ)
  • ์‚ญ์ œ ๋ฒ„ํŠผ ์•ˆ๋ณด์ด๊ฒŒ - js๋กœ ์ฒ˜๋ฆฌ
  • ์™„๋ฃŒ๋จ ์˜์—ญ์—์„œ๋Š” ํ๋ฆฌ๊ฒŒ + ์ทจ์†Œ์„ 
  1. js
  • ๋ชฉ๋ก ๊ฐœ์ˆ˜ ์นด์šดํŠธ
  • ํด๋ฆญ์‹œ ๋ฐ˜๋Œ€ํŽธ์œผ๋กœ ์ด๋™
  • ์ž…๋ ฅ ํ›„ ์ถ”๊ฐ€๋ฒ„ํŠผ ๋ˆ„๋ฅด๋ฉด ๋Œ€๊ธฐ์—ด์— ์ถ”๊ฐ€

โœ” ํ•„์ˆ˜ ์š”๊ฑด

  • ๊ฒฐ๊ณผ ํ™”๋ฉด ๊ตฌํ˜„
  • CSS Flexbox ์ด์šฉ
  • ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ X
  • lowerCamelCase
  • ์ฝ”๋”ฉ ๋‹จ์œ„ ๊ธฐ๋Šฅ๋ณ„ Commit ๋ฉ”์„ธ์ง€ ์ž‘์„ฑ

โœ” ์„ ํƒ ์š”๊ฑด

  • ์™ธ๋ถ€ ํฐํŠธ ์‚ฌ์šฉ: ๋ˆˆ๋ˆ„ ์‚ฌ์ดํŠธ์—์„œ ELAND_Choice_M ์‚ฌ์šฉ
  • local storage๋กœ ๋ฐ์ดํ„ฐ ๋ณด์กด

โœ” ์ปค์Šคํ„ฐ๋งˆ์ด์ง•

  • ํ• ์ผ์„ ๋ชจ๋‘ ์™„๋ฃŒํ•˜๋ฉด ๋ผ์ด์–ธ์ด ๋”ฐ๋ด‰์„ ์ค๋‹ˆ๋‹ค!๐Ÿ˜†๐Ÿ˜†
  • ์ด๋ชจ์ง€ ์‚ฌ์šฉ, ๋ชจ์„œ๋ฆฌ ๋‹ค๋“ฌ๊ธฐ, ์ƒ‰์ƒ ๋ณ€๊ฒฝ
  • item class๋ฅผ ์„ ์–ธ, ๊ฐ์ฒด๋“ค์„ ๋ฐฐ์—ด ํ•˜๋‚˜๋กœ ๊ด€๋ฆฌ

๐Ÿค” key Questions

DOM์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

:DOM(Document Object Model)์€ ๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ๋กœ, ๋ฌธ์„œ๋ฅผ ๊ณ„์ธต์ ์œผ๋กœ ๊ตฌ์กฐํ™”ํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š” ์ธํ„ฐํŽ˜์ด์Šค์ด๋‹ค.

HTML (tag) Element๋ฅผ JavaScript๋กœ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์–ด๋–ค ๊ฒƒ์ด ์žˆ๊ณ , ์–ด๋–ค ๋ฐฉ๋ฒ•์ด ๊ฐ€์žฅ ์ ํ•ฉํ• ๊นŒ์š”?

  1. document.createElement,document.createTextNode()๋Š” Element๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ์š”์†Œ์ธ์ง€ ๊ทธ ์•ˆ์˜ ํ…์ŠคํŠธ์ธ์ง€์— ๋”ฐ๋ผ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.
  2. Node.appendChild, Node.innerHTML,Node.textContent์ฒ˜๋Ÿผ ๋…ธ๋“œ๋ฅผ ๋จผ์ € ๊ฐ€์ ธ์˜จ ํ›„ ๊ฑฐ๊ธฐ ๋ง๋ถ™์ด๋Š” ๋ฐฉ์‹์œผ๋กœ ์ƒ์„ฑํ•  ์ˆ˜๋„ ์žˆ๋‹ค. html ๋ผˆ๋Œ€๊ฐ€ ์–ด๋Š์ •๋„ ์žกํ˜€ ์žˆ๋‹ค๋ฉด ์ผ๋ฐ˜์ ์œผ๋กœ 2๋ฒˆ ๋ฐฉ์‹์ด ๋” ์œ ๋ฆฌํ•œ ๋“ฏ ํ•˜๋‹ค.(1๋ฒˆ๋„ ์–ด์ฐจํ”ผ ์œ„์น˜๋ฅผ ์žก์•„์ค˜์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ)

inputํƒœ๊ทธ์—์„œ ๋ฐœ์ƒํ•˜๋Š” Event์—๋Š” ์–ด๋–ค ๊ฒƒ์ด ์žˆ๊ณ , ์–ด๋–ค ๋ฐฉ๋ฒ•์ด ๊ฐ€์žฅ ์ ํ•ฉํ• ๊นŒ์š”?

: ์—ฌ๊ธฐ(https://maxkim-j.github.io/posts/keyboard-input)๋ฅผ ์ฐธ๊ณ ํ•ฉ์‹œ๋‹ค.
7๊ฐ€์ง€ ์ด๋ฒคํŠธ๊ฐ€ ์žˆ์œผ๋ฉฐ, focus => keyDown => (keyPress) => input => keyUp => blur => change ์ˆœ์œผ๋กœ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

Flexbox Layout์€ ๋ฌด์—‡์ด๋ฉฐ, ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋‚˜์š”?

: css์—์„œ display:flex๋ฅผ ์ด์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ฃผ ์ถ•๊ณผ ์ˆ˜์ง์ถ•์„ ๊ฐ€์ง€๊ณ  ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ ์•ˆ์—์„œ ์ž์œ ๋กญ๊ฒŒ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—์„œ ์—ฐ์Šตํ•  ์ˆ˜ ์žˆ์–ด์š”.

JavaScript๊ฐ€ ๋‹ค๋ฅธ ์–ธ์–ด๋“ค์— ๋น„ํ•ด ์ฃผ๋ชฉํ• ๋งŒํ•œ ์ ์—๋Š” ์–ด๋–ค ๊ฒƒ๋“ค์ด ์žˆ๋‚˜์š”?

๋ฐ”๋‚˜๋‚˜
JS๋Š” ๋ฐ”๋‚˜๋‚˜๋ฅผ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค

  • ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ๊ฐ์ฒด ์ง€ํ–ฅ ์–ธ์–ด
  • ์ธํ„ฐํ”„๋ฆฌํ„ฐ
  • ๋™์ ํƒ€์ดํ•‘, ์•ฝํƒ€์ž… ์–ธ์–ด. ์œ ์—ฐํ•จ.
  • ํ•จ์ˆ˜๊ฐ€ ์ผ๊ธ‰ ๊ฐ์ฒด
  • ๊ณ ์ฐจํ•จ์ˆ˜ ์กด์žฌ

์ฝ”๋“œ์—์„œ ์ฃผ์„์„ ๋‹ค๋Š” ๋ฐ”๋žŒ์งํ•œ ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ผ๊นŒ์š”?

  • ๊ฐ„๊ฒฐํ•˜๊ฒŒ, ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋„๋ก
  • ์ผ๊ด€๋˜๊ฒŒ
  • ์—ฐ์†๋˜๋Š” ๋ผ์ธ์— ์žˆ์„ ๋•Œ๋Š” ์ •๋ ฌ
  • ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์šฉ์ดํ•˜๋„๋ก

๋“ฑ์ด ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

vanilla-todo-14th's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.