튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 03 - CSS Variables 튜토리얼 분류: JavaScript 튜토리얼 설명: JavaScript로 CSS 속성 값 변화시키기 진행기간: 2020년 4월 14일 CSS 변수 사용하기 :root 의사 클래스 활용하기 문서 트리의 root 요소를 선택함 HTML의 root 요소는 요소이므로, html 선택자와 동일한 역할을 함 ※ :root가 html 선택자보다 명시도가 더 낮음 전역 CSS 변수 선언에 주로 사용됨 참고자료 :root - CSS: Cascading Style Sheets | MDN 명시도 - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수) 정의하기 형태: --변수명..

강의: [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..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 02 - CSS + JS Clock 튜토리얼 분류: JavaScript 튜토리얼 설명: 직선 모양의 div 요소 3개를 현재 시각과 연동해 시계의 시침, 분침, 초침처럼 작동시키기 진행기간: 2020년 4월 13일 CSS transform( ) 속성의 기준점 설정하기 transform-origin 속성 활용 형태: transform-origin: x y z; x, y, z축 모두 조절할 수 있음 x축은 길이, left, right, center 키워드로 조절 y축은 길이, top, bottom, center 키워드로 조절 z축은 길이로 조절 기본값은 center 참고자료: transform-origin - CSS: Cascading Style..

강의: [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..