[72일차](ToyProject)javascript DOM으로 하노이탑 만들기

javascript로 직관적인 하노이 만들기

하노이의 탑은 재귀응용으로 많이 나온다.
가장중요한 뼈대는 세가지다.

---

1.아래 원반을 제외한 나머지 원반을 목표와 다른곳으로
2.아래 원반을 목표지점으로
3.목표와 다른곳에 있던 원반들을 다시 목표지점으로

---

진하게 표시된 부분이 재귀적으로 활용되어야 될 부분이다.
function 하노이옮기기(블럭갯수, 시작지점, 목표지점, 목표와다른){}
이라는 함수가 있다 했을때,
1과 3이 재귀적으로 되는 이유는,
재귀적으로 목표지점이 곧 목표와 다른곳으로 바뀌고,
목표와 다른곳이 곧 목표지점으로 설정되며 반복되기 때문이다.
코드를 적으면서도 당연히 이해가 잘 가지않는다.
자바스크립트로 하노이를 표현하는 코드는 흘러넘친다.
웹브라우저로 좀더 직관적으로 봐보자!
고 한게 이 프로젝트의 시작이다.

---

하노이.js 사용법

컴퓨터는 우리랑 다르게 워낙 연산이 빨라서,
실행 즉시 블럭을 0.0000001초만에 옮길것이다.
setTimeOut메소드를 능숙하게 사용하지 못한 나는,
그냥 디버거 콘솔을 이용하라고 하고싶다.
우선 내 깃헙에 들어가서 다운받아준다.
https://github.com/sleepybird96/Hanoi-For-Dom

받아서 html을 열어보면 원판갯수를 입력받는다.
몇개든지 상관은 없지만 ui를 고려해 적당히 넣자.
그리고 어디로옮길지 정해준다. (깨알 유효성검사도 있다)

TIP.크롬개발자도구 javascript DOM 디버깅 하는법

다 입력하고 나면 크롬 개발자모드창을 열어준다.

윈도우는 F12번 바로누르면되고
Mac또한 F12누르거나 command + option + I 를 눌러준다

그리고 개발자모드를 연 상태에서
윈도우는 컨트롤 + P
Mac은 command + P 를 눌러주면

위 창이 뜬다. hanoi.js를 누르자.
그럼 내가 입력한 스크립트 파일이 나오는데,

함수 부분이나 원하는부분에 브레이크포인트를 설정한 후, (재귀로 이루어진 돔구조 스크립트라면 재귀함수를 포인트로 잡는걸 추천)

화살표를 누르면서 결과를 지켜보면 된다.

---

토이프로젝트를 진행하면서 배우고 느낀것들

우선 진행하면서 의외로 스타일에 여러 노하우들을 얻게 됐는데,

1. DOM스타일설정에 백틱을 넣어 좀더 역동적인 스타일을 연출할 수 있다.

1 2 3 4 5 6

for(let i = 1; i <= circleValue; i++){   let liCircle = document.createElement('li')   liCircle.textContent = i   liCircle.style['width'] = `${i * 1.8}rem` //백틱을 이용해 역동적으로 스타일 설정이 가능합니다.   pole1.append(liCircle)  } Colored by Color Scripter

cs

위와같이 설정했는데 li의 넓이가 i의 크기만큼 늘어났다.

2. 세로로 정렬되어 있는 박스를 가운데정렬 하고싶다면?

정렬하고싶은 컨텐츠에다 직접(부모X) margin 0 auto 를 주면 된다.

1 2 3 4 5 6

li {   text-align: center;   background-color: beige;   border: 1px solid goldenrod;   margin: 0 auto; }

cs

여기서 li는 아래 블럭들이다.

3. DOM또한 breakpoint를 이용해 내가 입력한 함수를 디버깅할 수 있다.

위에 자세히 기술했는데, 매번 직접 실행만 해봤지 디버깅을 할 생각은 안했다.
이제 좀더 편하게 과제를 진행할 수 있을것 같다.

---

개선할점

아직은 API적인 측면이 강하다는거다.
개발자모드를 열지않으면 한번에 옮겨지는게
결국은 직관적이지 않다.
setTimeOut메소드에 대해서 더 생각해 봐야겠다.