강의: [edwith 부스트코스] 웹 프로그래밍 챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 14일 7. Spring Core - BE Spring이란? Framework란? 일종의 반(半)제품 이미 어느 정도의 기본 뼈대가 구성되어 있는 제품에, 사용자가 추가적으로 살을 덧붙여 제품을 완성할 수 있음 사용자가 뼈대까지 모두 만들려면 시간과 능력이 필요하므로, 프레임워크를 써서 보다 쉽게 만들 수 있음 Spring Framework의 특징 엔터프라이즈급의 대규모 어플리케이션을 구축할 수 있는 가벼운 솔루션 One-Stop-Shop: 모든 과정을 한꺼번에 해결할 수 있는 서비스 원하는 부분만 가져다 사용할 수 있도록 모듈화가 잘 되어 있음 예시) LEGO 블록 IoC 컨테이너 선언적..

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

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 12일 4. Web Animation - FE 웹 애니메이션 이해와 setTimeout 활용 애니메이션: 반복적인 움직임을 나타내는 것 웹 UI의 애니메이션은 JavaScript로 다양하게 제어할 수 있음 단순하고 규칙적인 애니메이션은 CSS3의 transition과 transform 속성으로 대부분 구현할 수 있음 CSS 방식은 JavaScript보다 더 빠른 성능을 보장하며, 특히 모바일 웹에서 성능 차이가 두드러짐 애니메이션이 단순하면 CSS로, 세밀한 조작이 필요하다면 JavaScript로 적절하게 나눠 구현해야 함 성능 비교를 통해 가장 빠른 방법을 찾는 과정도 필요함 FPS(Fr..

강의:[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 부스트코스] 웹 프로그래밍 챕터 3, 웹 앱 개발: 예약서비스 1/4 학습일: 2020년 4월 11일 2. DOM API 활용 - FE DOM Node 조작하기 DOM을 다루는 다양한 API가 존재 DOM API의 종류 document 객체에 대해 사용할 수 있는 API: HTML DOM Document Objects element 객체에 대해 사용할 수 있는 API: HTML DOM Element Objects DOM을 탐색하는 DOM API 유용한 속성을 기준으로 탐색 tagName textContent: 해당 element의 하위 텍스트 노드의 값을 조회하거나 바꿀 수 있음 nodeType 특정 요소를 기준으로 이동하며 탐색 childNodes firstChild firstEl..