심심풀이 개발/notion 클론코딩

노션(notion) 클론 코딩 - 바닐라 자바스크립트 (3) : Page만들기

기본페이지 틀 만들기 이젠 페이지를 만들어보자. 노션에서 처음 페이지를 만들면 이렇게 생겨먹었다. 일단은 아이콘이 있는 빈 페이지와, 빈 페이지, 아이콘 추가 버튼정도만 구현해보자. 일단 body에 붙일 mainUI 를 만들어서 body에 붙여주자. this.mainUI = new Dom('div', 'main'); document.body.appendChild(this.mainUI.element); 기본 틀 그리고 iconBar, newPage(페이지의 각 블록, 본문을 가질 부분), newTitle을 만들어서 newPage에 붙이고, newPage를 mainUI에 붙여준다.이후 페이지 전환시에 mainUI는 그대로 있고, newPage만 교체될 것이다. this.mainUI = new Dom('div..

노션(notion) 클론 코딩 - 바닐라 자바스크립트 (2) : Dom 쉽게 생성하기, List만들기

Dom Class class를 사용해 Dom을 쉽게 생성할 것이다. 그냥 할수도 있겠지만, 그냥 해봤더니 DOM요소 하나 만드는데 5줄 넘게 든다. 이러면 나중에 읽기가 싫어진다. 분명 이거보다 나은 방법이 있겠지만, 지금 당장 떠오른 방법은 이거니 이렇게 하겠다. class Dom { constructor(elementType, className, innerHTML) { this.element = document.createElement(elementType); if (innerHTML !== undefined) { if (elementType === 'input') { this.element.placeholder = innerHTML; } else { this.element.innerHTML = in..

노션(notion) 클론 코딩 - 바닐라 자바스크립트 (1)

노션을 클론코딩해보자. db까지는 할 생각 없고 바닐라 자바스크립트로 페이지 만들기, 글쓰기 기능을 클론코딩해볼 생각이다. 우선 html이랑 css 구성을 마친 상태이다. 파일이 많아질 것 같아서 웹팩을 통해서 javascript를 관리해 볼 것이다. 우선은 웹팩을 적용시켜주자. https://0422.tistory.com/216 Webpack(웹팩) 적용하기 npm init 프로젝트가 npm으로 관리되어야 하므로 npm init을 진행한다. npm init -y 원래는 옵션 내용을 물어보나 -y옵션을 붙이게 되면 기본세팅 상태로 만들어지게 된다. 옵션 설명 name 프로젝트 이름 ve 0422.tistory.com User의 notion « 개인페이지 + 껍데기를 이렇게 구성해주었다. css는 별거 없..