오늘 한 일:

• 배민찬 step2 리팩토링
• mySQL설치(진행중)

내일 할 일:

• mySQL CRUD 실습 및 JOIN 살펴보기
• 배민찬 step 3 PR

배민찬

1. 퍼포먼스 고려한 리팩토링

매번 렌더링은 하는것은 비효율적이라 생각. 렌더링 된 데이터를 저장하여 css를 이용해서 가시성을 컨트롤.

css hover와 display를 이용해 메뉴 레이어 표현하기

<div class='outer'>
    <div class='inner'>
    </div>
</div>

.inner {
    display: none;
}

.outer:hover .inner {
    display: block;
}

2. 모델 데이터에 따른 동적 렌더링(클라이언트 사이드 렌더링을 이용)

html에 넣어두지 않고(서버 사이드 렌더링) 클라이언트 측에서 스크립트를 이용해 동적으로 렌더링 하도록 함: 클라이언트 사이드 렌더링

데이터와 html을 분리하기 위해 사용했다.

• 개별 파일(스크립트와 html)측면에서는 관리하기가 쉬워졌지만..
• 클라이언트 입장에서는 렌더링 버퍼링이 생겼다

결과

유지보수 측면

• DOM API(addEventListener)를 사용하지 않아 소스코드 가독성이 더 높아짐
• 동적 렌더링으로 스크립트와 html이 분리되어 관리하기 쉬워짐

퍼포먼스 향상

• 이미 렌더링한 데이터는 재렌더링 하지 않도록 함(html에서 css를 통해 꺼내쓰기)
• DOM API의 이벤트(Mouseover)대신 css(hover) 이용

퍼포먼스 문제

• 메뉴 레이어 렌더링에 클라이언트 사이드 렌더링을 선택한 것은 불필요했다
  • 메뉴 네비게이터 특성상 동적으로 바뀔 일이 없음
  • 따라서 서버쪽에서 html로 렌더링을 다 해준 상태에서 보내주는게 이상적인 방식