javascript-postbox

구현 계획

1. 렌더링

마을과 우체통을 렌더링

2. 탐색

빨간 우체통 확인 버튼을 누른 뒤 마을 개수 확인과 우체통이 어느 마을에 있는지 위치 파악

3. 정렬

빨간 우체통 확인 버튼을 누른 뒤 우체통 크기 순서대로 표시

미션 1

---

[x] 화면이 열리면, 기획서와 같은 모습의 마을들이 화면에 자동으로 만들어진다.

[ ] 마을의 위치,크기, 갯수 등이 랜덤하게 생성된다. 자유배치가 너무 난해하다면, 위치에 제약조건을 두는 방식등도 괜찮다.

[ ] 우체통 갯수와 크기도 랜덤하게 생성된다.

기본 랜더링

html 뼈대 만들어 놓기

1. 마을지도 틀
2. 빨간 우체통 확인 버튼
3. 마을 갯수 + 우체통 크기 결과 표시 박스

마을 렌더링 규칙 정하기(크기, 개수, 겹치지는 여부)

1. 생성될 크기들을 정해놓고, 정해진 크기 내에서 랜덤 함수로 사각형 랜더링 (우체통 크기, 갯수, 마을 크기, 갯수)

층마다 높이와 너비 범위를 정해 놓는다.

const LAYER_RANGE = {
  0: 500, //최상위 요소
  1: 200,
  3: 30, //최하위 요소
};

cf> 혹시나 랜덤으로 너비와 높이를 정할 경우

• 부모 요소의 너비와 높이를 기억
• 해당 부모 아래 여러 자식요소들을 렌더링하는데, 특정조건(자식들이 겹치는 조건)에서는 자식 요소를 추가 생성이 되지 않게 하기

2. 마을 크기 로직

겹치는 요소를 층으로 생각해서 표현.

부모 계층에서 몇 층까지 내려가야할까

조건

• 최대로 내려갈 수 있는 층: 2~4층
• (내려가야할 층이 남았더라도 컨테이너보다 생성해야할 자식요소가 크면 생성 중지) -> 자식요소마다 크기 및 생성 개수의 제한이 있으므로 해결함, 나중에 랜덤값으로 할 때 고려할 사항으로 미룸.

// 아래 함수를 재귀적으로 호출
function 재귀함수(층){
  if(층 특정 조건) 재귀함수 종료
  for(let i = 0; i < 최대 내려갈 수 있는 층; i++){
  자식요소 생성 (몇 개 생성할 건지도 결정){
    // 기타 로직
    // 우체통 널지 말지
  }
  부모요소에 자식요소 추가
  }
  재귀함수(층)
}

부모 계층 내에서 자식 요소 렌더링

조건 및 고민

• 위치기반 -> ❗️ 핵심, 너무 어려우니까 고민 좀 더 해보기로
• 자식요소를 생성할 때 이전 자식요소(형제관계) 위치를 기반으로 추가생성 여부를 결정(1번 자식은 랜덤위치로 테두리 벗어나지 않게 생성)
• 한층에서 자식요소 최대 개수: 2개
• 첫 번째 자식 요소위치는 부모요소의 왼쪽 상단 기준으로 어느 정도 떨어진 위치에 렌더링한다.
• 두 번째 자식 요소위치는 첫 번째 자식 요소위치를 기준으로 겹치지 않게 렌더링한다.

해결 및 변경사항

• 위치기반:
  • 겹치지 않게 하는 방법: css요소로 div를 사용하면 어차피 겹치지 않음. 크기 제약을 미리 걸어놔서 해결
  • 자식요소끼리의 배치: css 클래스 네임으로 랜덤으로 부여

    ex> justify-content: space-around/ between, 이런식으로 공통 클래스를 만들어서 랜덤으로 적용

3. 우체통 class

자식요소를 만들 때 우체통을 넣을지 말지 결정

  class 우체통 {
    consturtor(){
      this.size = 랜덤 값 // 폰트 어썸으로 사이즈만 다르게
    }
    render(){

    }
  }

미션 2`

---

[ ] 빨간색 우체통이 있는 모든 마을을 조사해서 화면에 표시해야 한다.

[ ] '버튼'UI을 선택하면 빨간 우체통을 가진 마을을 찾는 작업이 시작 된다.

[ ] 빨간색 우체통을 가진 마을정보를 텍스트로 표현해야 한다

[ ] 우체통은 각각 크기가 다르다, 크기 순으로 정렬해서 정보를 표시한다.

[ ] 빨간색 우체통을 가진 마을은 2초 뒤에 '빨간색 테두리'로 표시된다.

미션3(먼저 할 필요 없음, 필요하다 생각되면 그떄 구현!)

---

[ ] Express 를 설치하고 서버를 띄워서 현재 프로그램이 동작하도록 해보자.

[ ] 초기결과를 렌더링 하기 위한 일부 정보를 서버로부터 JSON형태로 받아서 사용한다.

프로그래밍 요구사항

const $app = document.querySelector("#app");

function getRandomNumber(min, max) {
  return Math.random() * (max - min) + min;
}

function init() {
  for (let i = 0; i < getRandomNumber(1, 10); i++) {
    const $div = document.createElement("div");
    $div.classList.add("town");
    $div.style.height = `${getRandomNumber(20, 200)}px`;
    $div.style.width = `${getRandomNumber(20, 200)}px`;
    $app.appendChild($div);
  }
}

window.addEventListener("DOMContentLoaded", init);