35일차 - js 아키텍처 = DB설계

1. 자바스크립트 오브젝트 다루기

1-1. navi.js에 배열 생성

1-2. 배열 안에 객체 삽입 {key : value}

1-3. 뎁스1 (대메뉴) > 뎁스2 (소메뉴 소메뉴 소메뉴)

d2 : 객체 안에서 [ 배열 ]을 value로 가지는 key

1-4. 배열과 객체 데이터에 접근하는 방법

Quiz) 콘솔창에 '회사소개'를 띄우려면? (배열 안 객체)

console.log( naviData[0].d1 )
<!-- naviData 배열의 0번인, 객체 안의 '회사소개' value 부르려면 key값으로 -->

Quiz) 콘솔창에 '연혁'을 띄우려면? (배열 안 객체 안 배열)

console.log( naviData[0].d2[1].d2text )
<!-- naviData 배열의 0번인, 객체 안에서 d2 배열에 접근,
	 배열[ 1 ]번인 객체의 '연혁' value 부르려면 key값으로 .d2text -->

---

2. 배열을 innerHTML (for-in문)

2-1. 1뎁스, 2뎁스 대메뉴/소메뉴들 추가추가

뎁스2 없다해도, 패턴 동일하게 (빈)배열까지 주기
값이 없는 것 뿐이지, 키가 없으면 오류남!

2-2. HTML에 < ul >만 삽입 후, js 연결

js에 window.onload 삽입

2-3. navitag 변수 선언 (값 비어있음)

2-4. navitag 변수에 < li > 하나하나 집어넣기

• 회사소개 naviData[ 0 ].d1
• 제품소개 naviData[ 1 ].d1
• 고객센터 naviData[ 2 ].d1
  

2-5. for문으로 반복

naviData[ i ].d1

---

3. 대메뉴 li 안에 소메뉴 ul>li 삽입

3-1. d1에 < a href="{ d1링크 }" > 삽입

3-2. li 안에 ul 넣기

< /li > 아래로 내리고

< ul >< /ul > 삽입

3-3. ul 안에 li 넣기

< li >< a > 2뎁스 소메뉴 텍스트 & 링크 < /a >< /li >

결과물

• 뎁스1 회사소개 : naviData[ i ].d1link & naviData[ i ].d1
  ㄴ뎁스2 CEO 인사말 : naviData[ i ].d2[0].d2link & naviData[ i ].d2[0].d2text

• 뎁스1 제품소개
  ㄴ뎁스2 CEO 신제품

• 뎁스1 고객센터
  ㄴ뎁스2 CEO 노마진
  

---

3-4. 뎁스2 소메뉴들 다 나오게

ul 안의 < li >< a > 를 다시 for-in문 안에 넣음

<script>

  for(let j in naviData[i].d2){ // naviData[i] 안의 [d2] 배열 안에서 반복
      navitag +=`<li><a href='${naviData[i].d2[j].d2link}'>${naviData[i].d2[j].d2text}</a></li>`;    
							 // naviData[i].d2 배열[j].d2링크 // naviData[i].d2 배열[j].d2제목
	}
  
        
</script>

완성본은 이런 모양

<script>

for(let i in naviData){
	navitag +=`<li><a href='${naviData[i].d1link}'>${naviData[i].d1}</a><ul>`;
		for(let j in naviData[i].d2){
			navitag +=`<li><a href='${naviData[i].d2[j].d2link}'>${naviData[i].d2[j].d2text}</a></li>`;    
		}
	navitag +=`</ul></li>`;
}
        
</script>