์ด ์ ์ฅ์๋ IT์ฐฝ์ ๋์๋ฆฌ CEOS(https://www.ceos.or.kr/) ํ๋ก ํธ์๋ ํ์์ ์คํฐ๋๋ฅผ ํ๋ฉฐ ์ํํ ๋ฏธ์ ์ ๊ฒฐ๊ณผ๋ฅผ ๊ณต์ ํฉ๋๋ค.
https://github.com/CEOS-Developers/vanilla-todo-14th
https://bonjunku.github.io/vanilla-todo-14th/
- html
- ์ค์ ์ปจํ ์ด๋
- ๋๊ธฐ์ค / ์๋ฃ๋จ ๊ตฌ๋ถ
- ์๋ก์ด ํ ์ผ ์ถ๊ฐ ์ ๋ ฅ ๋ฐ๊ธฐ
- ์๋ก์ด ํ ์ผ ์ถ๊ฐ ๋ฒํผ
- ๋ชฉ๋ก์์ ์ญ์ ๋ฒํผ
- css
- ๋ฐฐ๊ฒฝ์ ์ถ๊ฐ
- ํฐํธ ์กฐ์ , ๋๊ธฐ์ค์๋ฃ๋จ / ๋ชฉ๋ก / ์๋ก์ด ํ ์ผ ์ถ๊ฐ
- ์คํฌ๋กค(์ค๋ฒํ๋ก์ฐ)
- ์ญ์ ๋ฒํผ ์๋ณด์ด๊ฒ - js๋ก ์ฒ๋ฆฌ
- ์๋ฃ๋จ ์์ญ์์๋ ํ๋ฆฌ๊ฒ + ์ทจ์์
- js
- ๋ชฉ๋ก ๊ฐ์ ์นด์ดํธ
- ํด๋ฆญ์ ๋ฐ๋ํธ์ผ๋ก ์ด๋
- ์ ๋ ฅ ํ ์ถ๊ฐ๋ฒํผ ๋๋ฅด๋ฉด ๋๊ธฐ์ด์ ์ถ๊ฐ
- ๊ฒฐ๊ณผ ํ๋ฉด ๊ตฌํ
- CSS Flexbox ์ด์ฉ
- ์ธ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ X
- lowerCamelCase
- ์ฝ๋ฉ ๋จ์ ๊ธฐ๋ฅ๋ณ Commit ๋ฉ์ธ์ง ์์ฑ
- ์ธ๋ถ ํฐํธ ์ฌ์ฉ: ๋๋ ์ฌ์ดํธ์์ ELAND_Choice_M ์ฌ์ฉ
- local storage๋ก ๋ฐ์ดํฐ ๋ณด์กด
- ํ ์ผ์ ๋ชจ๋ ์๋ฃํ๋ฉด ๋ผ์ด์ธ์ด ๋ฐ๋ด์ ์ค๋๋ค!๐๐
- ์ด๋ชจ์ง ์ฌ์ฉ, ๋ชจ์๋ฆฌ ๋ค๋ฌ๊ธฐ, ์์ ๋ณ๊ฒฝ
- item class๋ฅผ ์ ์ธ, ๊ฐ์ฒด๋ค์ ๋ฐฐ์ด ํ๋๋ก ๊ด๋ฆฌ
:DOM(Document Object Model)์ ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ๋ก, ๋ฌธ์๋ฅผ ๊ณ์ธต์ ์ผ๋ก ๊ตฌ์กฐํํ์ฌ ์ฌ์ฉ์๊ฐ ์กฐ์ํ ์ ์๋๋ก ๋๋ ์ธํฐํ์ด์ค์ด๋ค.
HTML (tag) Element๋ฅผ JavaScript๋ก ์์ฑํ๋ ๋ฐฉ๋ฒ์ ์ด๋ค ๊ฒ์ด ์๊ณ , ์ด๋ค ๋ฐฉ๋ฒ์ด ๊ฐ์ฅ ์ ํฉํ ๊น์?
document.createElement
,document.createTextNode()
๋ Element๋ฅผ ์์ฑํ๋ค. ์์์ธ์ง ๊ทธ ์์ ํ ์คํธ์ธ์ง์ ๋ฐ๋ผ ์ฐจ์ด๊ฐ ์๋ค.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 ์์ผ๋ก ๋ฐ์ํฉ๋๋ค.
: css์์ display:flex
๋ฅผ ์ด์ฉํ๋ฉด ๋ฉ๋๋ค. ์ฃผ ์ถ๊ณผ ์์ง์ถ์ ๊ฐ์ง๊ณ ์์๋ค์ ์ปจํ
์ด๋ ์์์ ์์ ๋กญ๊ฒ ๋ฐฐ์นํ ์ ์์ต๋๋ค. ์ฌ๊ธฐ์์ ์ฐ์ตํ ์ ์์ด์.
JS๋ ๋ฐ๋๋๋ฅผ ์ข์ํฉ๋๋ค
- ํ๋กํ ํ์ ๊ธฐ๋ฐ ๊ฐ์ฒด ์งํฅ ์ธ์ด
- ์ธํฐํ๋ฆฌํฐ
- ๋์ ํ์ดํ, ์ฝํ์ ์ธ์ด. ์ ์ฐํจ.
- ํจ์๊ฐ ์ผ๊ธ ๊ฐ์ฒด
- ๊ณ ์ฐจํจ์ ์กด์ฌ
- ๊ฐ๊ฒฐํ๊ฒ, ์ดํดํ๊ธฐ ์ฝ๋๋ก
- ์ผ๊ด๋๊ฒ
- ์ฐ์๋๋ ๋ผ์ธ์ ์์ ๋๋ ์ ๋ ฌ
- ์ ๋ฐ์ดํธํ๊ธฐ ์ฉ์ดํ๋๋ก
๋ฑ์ด ์์ ๊ฒ ๊ฐ์ต๋๋ค.