튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 06 - Ajax Type Ahead 튜토리얼 분류: JavaScript 튜토리얼 설명: AJAX를 이용한 검색어 자동완성 기능 진행기간: 2020년 4월 17일 Fetch API AJAX를 구현하는 방법 중 하나로, 사용이 쉽고 간단함 Promise 객체를 반환하므로, Promise가 도입된 ES6 이후로 자주 쓰임 반환된 Promise 객체는 then 키워드로 활용 예시 코드 참고자료 Fetch API - Web API | MDN AJAX, XMLHttpRequest와 Fetch 살펴보기 | Dev.White 자바스크립트 fetch API 알아보기 ! Internet Explorer에서는 지원되지 않음 정규 표현식 문자열의 특정 문자 조합..

강의: [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 부스트코스] 웹 프로그래밍챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 11일, 12일 3. AJAX - FE AJAX 응답 처리와 비동기 AJAX와 비동기 실행 Line 4의 addEventListener가 순서대로 실행되는 것과 달리, 그 안의 익명함수는 비동기로 실행됨 → 비동기로 실행된 익명함수는 Event Queue에 보관되다가 "load" 이벤트가 발생 (서버로부터 데이터를 받음) → Call Stack을 확인한 뒤, 비어있다면 Call Stack으로 올라와 실행됨 비동기에 대한 참고자료 [YouTube] Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014 Synchronou..

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