강의: [edwith 부스트코스] 웹 프로그래밍 챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 14일 6. Tab UI 실습 - FE Tab UI를 만들기 위한 HTML과 CSS 구조 전략 상단 메뉴를 누르면 새로고침 없이 아래 내용이 변경되는 Tab UI가 자주 사용됨 방법 A: 메뉴 갯수만큼의 컨텐츠 요소를 만들고 각 요소의 display 속성을 block과 none으로 제어 방법 B: 메뉴 갯수와 상관없이 컨텐츠 요소 하나를 두고 그 안의 내용을 조절 예시 코드 실행 화면 Tab UI에 생명 불어넣기 AJAX 방식을 사용한 Tab UI 동작 제어: 메뉴를 클릭하면 해당하는 JSON 파일을 불러와 content 섹션에 표시하기 JSON 파일 JavaScript AJAX 코드 템플..

사이트: edwith 강의: [부스트코스] 웹 프로그래밍 챕터 2, DB 연결 웹 앱 학습일: 2020년 3월 24일 2. Web UI 개발 - FE AJAX 통신의 이해 AJAX(Asynchronous JavaScript and XML), 또는 XMLHTTPRequest 통신의 정의 웹에 데이터를 갱신할 때, 브라우저를 새로고침하지 않고도 서버의 데이터를 받을 수 있게 하는 기술 화면 내 다른 부분에 영향을 주지 않으면서 데이터를 비동기적으로 서버에서 가져올 수 있어, 더 좋은 UX 경험을 제공함 예시) 네이버 메인페이지의 섹션에서, 다른 섹션을 클릭하더라도 나머지는 그대로 있고 섹션 안의 내용만 바뀜 선택되지 않은 섹션의 컨텐츠까지 초기 로딩 시점에 불러온다면 초기 로딩 속도가 영향을 받으므로, 해당..