![](https://private-user-images.githubusercontent.com/99726297/250924912-08b3f53f-a8da-436c-a046-8a1b3fbc01af.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwMDY5NDQsIm5iZiI6MTcyNTAwNjY0NCwicGF0aCI6Ii85OTcyNjI5Ny8yNTA5MjQ5MTItMDhiM2Y1M2YtYThkYS00MzZjLWEwNDYtOGExYjNmYmMwMWFmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDA4MzA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMzM2M2MjE1ZTBlZjg4ZWUxMDU0MmVlOGY3OGUyYjIxOTIxM2JjNjdiM2U4NzBiNWRjZWE1YmY0NjYzZWJhODcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.HGk2UA-QBMWMbFEGXIvGiYjQyN-f6wokUKrTat9arE4)
- Implemented SPA (Single Page Application) using Vanilla JavaScript without any libraries or frameworks
- Created a Diffing algorithm for efficient rendering(Reconciliation)
- Designed a CBD library based on the implemented Diffing algorithm, using Class (ES6+) syntax
- Implemented various DOM event interactions using event delegation
- Define Components as declarative views with state
HTML
CSS(Sass)
JavaScript
lodash
![](https://private-user-images.githubusercontent.com/99726297/251803880-31a7e51e-d3c1-44f3-9f66-48fe2b24d04c.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwMDY5NDQsIm5iZiI6MTcyNTAwNjY0NCwicGF0aCI6Ii85OTcyNjI5Ny8yNTE4MDM4ODAtMzFhN2U1MWUtZDNjMS00NGYzLTlmNjYtNDhmZTJiMjRkMDRjLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDA4MzA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNkOGM0YTIyNzdiNzAzNzdmMjA0MDJkMTEwZTJkN2Y5YzM1ZmIyNmZhNzZlN2U2NWE5NGIzZjlmNmVhNGYyNDAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.C-AyrkP4nU5240wsUzFU0u9SxtRh0kKS35zqrbSVkpc)
- add Another List
- add new Card with using
Card Creator
- remove list
![](https://private-user-images.githubusercontent.com/99726297/251804310-938a53b5-6e86-43c7-a9a9-27a61b6222bd.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwMDY5NDQsIm5iZiI6MTcyNTAwNjY0NCwicGF0aCI6Ii85OTcyNjI5Ny8yNTE4MDQzMTAtOTM4YTUzYjUtNmU4Ni00M2M3LWE5YTktMjdhNjFiNjIyMmJkLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDA4MzA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTIyY2JlYWZiNjZmNGZlZjJmYzM0NDM4ZDAxMzk0ZWIxZjg3MTYzM2FlMTQ1NmMxODE5OGUxOWY3OTNhMzkxMjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.aCJNqlApfUByvtlJNrqB5SEbcCEW1llAX34qgHfLVQY)
- change title of list with pressing 'Enter' key to save new title
- add new Card with using
Card Creator
![](https://private-user-images.githubusercontent.com/99726297/251509158-e6ab2ae6-0903-4286-9b43-890c20fc99db.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwMDY5NDQsIm5iZiI6MTcyNTAwNjY0NCwicGF0aCI6Ii85OTcyNjI5Ny8yNTE1MDkxNTgtZTZhYjJhZTYtMDkwMy00Mjg2LTliNDMtODkwYzIwZmM5OWRiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDA4MzA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg1YTM1ZjFlYzhkYzJiOTA3YmY1MjI2NzU5YTkwZThhMWViZjUxMTIwZDJiZDg5NWI2YWRmNTdmMmJkMGEwYzQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Fiyg16NLcgBPQpaaC9pxxYeNvDc78yCzXlM-8XM2XMc)
-
Drag and drop with
Card
andList
Component -
Close
ListCreator
andCardCreator
component to press 'ESC'- If
textarea
component inListCreator
is focused, pressing 'ESC' makesListCreator
close - If all
textarea
components inList
Components are opened, pressing 'ESC' makes allCardCreator
close
- If
-
Open
Modal
Component, after clickCard
component- After Click
textarea
component and insert some words, press 'Enter' to saveCard
Component's title - If click
textarea
in description part, then we have to save the contents.- The situations Trello will not save contents
- click the
overlay
area - click the area without
textarea
in description part - click 'x'
button
component - after click
textarea
in description part, if we do not click 'save' button or press 'Enter' astextarea
is focused
- click the
- The situations Trello will not save contents
- After Click
-
Close
Modal
clicking outside ofmodal
, or clickingClose Button
.
-
SPA(Single Page Application)์ ์ ์ฌํ๊ฒ ๋์ํ๋๋ก
html
์body
์๋ id๊ฐroot
์ธ ์์(์ปจํ ์ด๋ ์์) ํ๋๋ง ์กด์ฌํ ๋ฉฐ,#root
์ ์์ ์์๋ค์ ์ดํ๋ฆฌ์ผ์ด์ ์ ์คํํ๋ฉด ์ ์ํ ์ปดํฌ๋ํธ๋ค์ด ๋ฐํํ๋ ๋ฌธ์์ด(DOMString)์ด ํ์ฑ ๊ณผ์ ์ ์ํด DOM ์์๋ก ๋ณํ๋์ด ๋์ ์ผ๋ก ํ๋ฉด์ ๊ทธ๋ฆฌ๋๋ก ๊ตฌํํ์์ต๋๋ค. -
ํจ์จ์ ์ธ ๋ ๋๋ง์ ์ํ Diffing ์๊ณ ๋ฆฌ์ฆ ๋ฐ CBD ๊ตฌํ
// renderDOM.js let $root = null; let component = null; const renderDOM = (Component, $container) => { if ($container) $root = $container; if (Component) { component = new Component({ $root: $container }); $root.innerHTML = component.render(); } const createNewTree = () => { const cloned = $root.cloneNode(true); const domString = component.render(); cloned.innerHTML = domString; return cloned; }; // reconciliation diff($root, createNewTree()); // bind Events bindEventHandler($root); };
-
Initial Rendering
renderDOM
์ด๋ผ๋ ํจ์๋ id๊ฐroot
์ธ ์์์ ์์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ๊ท์ ์ผ๋ก ํธ์ถํ๋ฉด์ ์์ ์ปดํฌ๋ํธ๊ฐ ๋ฐํํ๋ DOMString์ ๋ชจ์,์ด๋ฅผ ๋ฐํ์ผ๋ก UI๋ฅผ ๊ทธ๋ฆฝ๋๋ค.
-
Rerendering
- ์ปดํฌ๋ํธ๊ฐ ๊ฐ๊ณ ์๋ ์ํ๊ฐ ๋ณํ๋ฉด, UI๋ฅผ ๋ค์ ๊ทธ๋ ค์ผ ํฉ๋๋ค. ์ด ๋,
setState
๋ผ๋ ์ํ ์ ๋ฐ์ดํธ ํจ์๋ฅผ ํธ์ถํ๋ฉด์, renderDOM์ด๋ผ๋ ํจ์๋ ๋ฆฌ๋ ๋๋ง์ ์ํด ๋ค์ ํธ์ถ๋ฉ๋๋ค. ์ด ๋, ์ธ์๋กComponent
์$container
๋ฅผ ์ ๋ฌํ์ง ์์ต ๋๋ค. - ๊ทธ ์ด์ ๋, Initial Rendering ์์
renderDOM
ํจ์ ์ค์ฝํ ๋ฐ๊นฅ์ ์ ์ธํ$root
(id๊ฐ root์ธ ์์)์๋App
Class Component๊ฐ ์ฌ๊ท์ ์ผ๋ก ํธ์ถํ ์์ ์ปดํฌ๋ํธ๋ค์ด ๋ฐํํ๋ DOMString์ดinnerHTML
๋ฉ์๋๋ฅผ ํตํด ํ ๋น๋์ด ์์ด, ํด๋ก์ ์ ์ํด ์ด๋ค UI๋ฅผ ๊ทธ๋ฆด ์ง์ ๋ํ ์ ๋ณด๋ฅผ ์ด๋ฏธ ๋ด๊ณ ์์ต๋๋ค. ์ด$root
๋ ๋ค์์ ์ด์ผ๊ธฐํ ๋ฉ๋ชจ๋ฆฌ์ DOMString์ด ์ ์ฅ๋ oldNode๊ฐ ๋ฉ๋๋ค. - ๋ฆฌ๋ ๋๋ง์ด ๋ฐ์ํ๋ฉด ์
๋ฐ์ดํธ ๋ ์ํ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก UI๋ฅผ ๋ค์ ๊ทธ๋ ค์ผ ํฉ๋๋ค. ๋จผ์ ,
createNewTree
๋ผ๋ ํจ์๋ฅผ ํธ์ถํ์ฌ, ๋ณต์ ํ$root
๋ณ์์ ์ ๋ฐ์ดํธ ๋ ์ํ๋ฅผ ๊ฐ์งcomponent
๋ณ์๊ฐ ์ ์ฅํ๊ณ ์๋ DOMString(App
Class Component๊ฐ ์ฌ๊ท์ ์ผ๋ก ์์ ์ปดํฌ๋ํธ๋ฅผ ํธ์ถํ๋ฉด์ ๋์ด๋ชจ์ DOMstring ๊ฐ)์innerHTML
๋ฉ์๋๋ฅผ ํตํด ํ ๋นํ๊ณ , ๋ณต์ ํ$root
๋ฅผ ๋ฐํํฉ๋๋ค. - ๊ทธ๋ฆฌ๊ณ ,
diff
ํจ์(diffing ์๊ณ ๋ฆฌ์ฆ์ด ๊ตฌํ๋ ํจ์)๋ฅผ ํธ์ถํ์ฌ, ๊ธฐ์กด์ ๋ฉ๋ชจ๋ฆฌ์ ์ฌ๋ ค์ ธ ์๋oldNode
(type === object)์createNewTree
ํจ์๊ฐ ๋ฐํํ ๋ณต์ ๋$root
์ธnewNode
(type === object)๋ฅผ ๋น๊ตํ์ฌ reconciliation์ ์คํํฉ๋๋ค. - ์ฆ, ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ๋์ด ์๋ DOM ํธ๋ฆฌ ํํ๋ฅผ ๋๋
oldNode
์ ์ํ ๋ณ๊ฒฝ์ ์ํด ์๋กญ๊ฒ ์์ฑ๋newNode
๋ฅผ ๋น๊ตํ๋ฉด์, ๋ค๋ฅธ ๋ถ๋ถ(e.g ์์ ๋ ธ๋, ์ดํธ๋ฆฌ๋ทฐํธ ๋ ธ๋ ๋ฑ)๋ง ์ ๋ฐ์ดํธ ํ๋ ๋ฐฉ์์ ์ทจํฉ๋๋ค. - ๊ฒฐ๊ณผ์ ์ผ๋ก, ๋ฉ๋ชจ๋ฆฌ์ ์ฌ๋ ค์ ธ ์๋ ๊ฐ์ฒด(DOMString)์ ์ฐธ์กฐ๊ฐ์ ๋น๊ตํ๋ฉด์ ์ ๋ฐ์ดํธ ํ๋ค๊ณ ์ค๋ช ํ ์ ์์ต๋๋ค.
- ์ปดํฌ๋ํธ๊ฐ ๊ฐ๊ณ ์๋ ์ํ๊ฐ ๋ณํ๋ฉด, UI๋ฅผ ๋ค์ ๊ทธ๋ ค์ผ ํฉ๋๋ค. ์ด ๋,
-
โ๏ธ DOMstring์ utf-16 ๋ฌธ์์ด์ ์ํ ๋ ๋ฆฝ์ ์ผ๋ก ๊ตฌํ๋ DOM ์ธํฐํ์ด์ค๋ก, javascript ๋ฌธ์์ด์ ์ด๋ฏธ utf-16 ๋ฌธ์์ด ํํ์ด๋ค. ๋ฐ๋ผ์, javascript์ ๋ชจ๋ ์ธ์คํด์ค String์ DOMString ์ธ์คํด์ค๋ผ๊ณ ์ด์ผ๊ธฐ ํ ์ ์๋ค.
- ์ด๋ฒคํธ ์์์ ํตํด ๋ชจ๋ ์ด๋ฒคํธ๋ฅผ ํธ๋ค๋ง ํ๋๋ก ๊ตฌํํ์์ต๋๋ค. ์ฆ,
$root
๋ผ๋ ๋ฃจํธ ์ปจํ ์ด๋ ์์์ ์ด๋ฒคํธ๋ฅผ ์์ํจ์ผ๋ก์จ, ์์ ์ปดํฌ๋ํธ์์ ๋ฐ์ํ๋ ์ด๋ฒคํธ๋ฅผ ํธ๋ค๋งํ๊ณ ์์ต๋๋ค. - ์ด๋ฒคํธ ์์์ ์ํด
$root
์ปดํฌ๋ํธ์์ ๋ฐ์ํ๋ ์ด๋ฒคํธ,window
์ ์ญ ๊ฐ์ฒด์์ ๋ฐ์ํ๋ ์ด๋ฒคํธ๋ฅผ ๋ถ๋ฆฌํ์ฌ event Type์ ๋ง๋ ์ด๋ฒคํธ๋ฅผ ํธ๋ค๋งํฉ๋๋ค. - event Type์ ๋ฐ๋ผ ์คํ๋
handler
์๋ this์ ๋ํ ์ดํด๊ฐ ํ์ํ ์ํฉ์ด ๋ฐ์ํฉ๋๋ค. ๊ทธ ์ด์ ๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ์์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ๊ท์ ์ผ๋ก ํธ์ถํ๋ ๋ฐฉ์์ผ๋ก ๊ตฌํํ์๊ธฐ ๋๋ฌธ์ ๋๋ค. this๋ ๋ฉ์๋๋ฅผ ํธ์ถํ ๊ฐ์ฒด์ ๋ฐ์ธ๋ฉ ๋๋ฏ๋ก,bind
๋ฉ์๋๋ฅผ ํตํด ์์ ์ปดํฌ๋ํธ์ ๋ฐ์ธ๋ฉํ์ฌ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ(์ฝ๋ฐฑํจ์)๋ฅผ ํธ์ถํ ์ ์๊ฒ ๋ฉ๋๋ค.
- ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์น ์ดํ๋ฆฌ์ผ์ด์
์ ๋ง๋ค์ด ๋ณธ ๊ฐ์ง ๊ฒฝํ
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ง์ ์ด์ฉํ์ฌ SPA์ฒ๋ผ ๊ตฌํํ ๋ ์ด๋ฒคํธ๋ฅผ ํธ๋ค๋งํ๊ณ ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋งํ๋ ๊ณผ์ ์ ์๋นํ ์ด๋ ค์ ์ง๋ง, ๊ตฌํ์ด ์๋ฃ๋์์ ๋ ์๋นํ ๋ง์กฑ์ค๋ฌ์ ์ต๋๋ค.
- this ๋ฐ์ธ๋ฉ, class Syntax์ ๋ํ ์ดํด๋๊ฐ ์ด์ ๋ณด๋ค ๋์์ก๋ค๊ณ ์๊ฐํฉ๋๋ค.
- ์ ์ฐ์ง ์์๋ DOM API์ ๋ํด ์๊ฒ ๋์ด ์ข์์ผ๋ฉฐ, ์ด๋ฒคํธ ์์์ ํ์ฉํ ์ด๋ฒคํธ ํธ๋ค๋ง ๊ฒฝํ์ ๊ฐ์ก์ต๋๋ค.