강의: [edwith 부스트코스] 웹 프로그래밍 챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 13일 5. WEB UI - FE 서비스 개발을 위한 디렉토리 구성 JavaScript 파일 구성 JavaScript 코드의 내용이 간단하다면 파일 하나에 모두 표현하는 것도 괜찮으나, 그렇지 않다면 의미에 맞게 여러 파일로 구분하는 것이 좋음 예시) 현업에서의 spec 폴더: 테스트 코드용 JavaScript 파일을 모아놓는 곳 실제 서비스에서는 JavaScript 파일이 많아지면 HTTP 요청이 여러 차례 전송되므로 하나의 파일로 merge해서 배포함 Merge에 쓰이는 전용 도구가 있음 HTML 안에 CSS, JavaScript 구성하기 CSS 코드 내용이 간단하면 head > sty..

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

사이트: edwith 강의: [부스트코스] 웹 프로그래밍 챕터 2, DB 연결 웹 앱 학습일: 2020년 3월 23일 2. Web UI 개발 - FE Window 객체와 setTimeout window 객체: 브라우저 개발 시 자주 활용되는 객체로, 많은 메서드를 포함하고 있음 형태: window.메서드( ), 메서드( ) window 객체는 전역 객체이므로 생략하더라도 메서드가 동작 예시) alert, setTimeout, setInterval 등 setTimeout(callback, delay) 비동기(asynchronous)로 실행되는 함수로, 다소 낯설게 동작함 인자로 즉시 실행되지 않고 나중에 실행되는 callback 함수를 받음 작동되는 순서 setTimeout 실행 브라우저(Web API)가..