심심풀이 개발

Git 내부 살펴보기 - Objects

Git 깃,,, 지금까지 무지성으로 add, commit, push하고, 문제가 생기면 reset, revert, log정도 써왔던 버전관리 시스템이다. 이번 기회에 내부를 한번 뜯어보자. Git init git init을 하면 .git 파일이 생긴다. 이 녀석의 내부는 이렇게 생겼다. 깃은 Blob, Tree, Commit 이 세가지로 상태를 추적하고 관리한다. 어떻게 파일 버전을 관리하는지 흐름을 살펴보며 세가지 오브젝트를 살펴보자. Blob Git의 파일 상태 저장 방법 깃에서 파일상태를 저장하는 방법을 요약하면 이렇다. 1. 코드가 있는 파일을 전부읽는다. 2. 하나의 파일마다 그 내용에 대해 해시해서 파일 제목을 만든다. (해시값은 유일하므로, 겹칠 수 없다.) 3. 파일의 내용으로는 원본 파일..

노션(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는 별거 없..

바닐라 자바스크립트 dragger만들기

심심해서 하나 만들었다. 급한 사람은 아래 깃헙들어가서 전체 코드 긁어가면 된다. https://github.com/d0422/make-toy-vanillaJS/tree/main/dragger GitHub - d0422/make-toy-vanillaJS: 바닐라 자바스크립트로 장난감 만들기 바닐라 자바스크립트로 장난감 만들기. Contribute to d0422/make-toy-vanillaJS development by creating an account on GitHub. github.com 매우 간단하게 만들어보자. 아래는 파일구조 dragger.html 걍 다 js로 하고싶어서 script와 css만 심어준다. dragger.css css다.내부 글자를 드래그 못하게 하고, 위치조정, 글자 크기 ..