HTML 문서를 작성할 때 약방의 감초마냥 함께 등장하는 것들이 있다. 바로 CSS와 JavaScript이다. 간단한 HTML 문서에서 직접 CSS 스타일과 JavaScript 코드를 작성하는 경우를 제외하면, 대부분의 경우 외부에서 css, js 파일을 불러와 사용하게 된다. 이 때, 외부 css 파일은 head 태그 안에서, js 파일은 body 태그가 끝나기 직전에 불러오는 방식을 관용적으로 사용한다. CSS는 문서가 어떻게 보일지를 규정하므로 본문 전의 head 태그에서 미리 불러오고, JavaScript는 문서의 모든 요소를 문제 없이 인식해야 하기 때문에 본문을 다 불러온 후에 불러오는 것이다. 오랫동안 사용된 이 방식은 지금도 여전히 유효하다. 하지만 웹의 복잡성이 증가하고 새로운 기술과 트..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 4, 웹 앱 개발: 예약서비스 2/4 학습일: 2020년 6월 18일 1. 객체지향 JavaScript 구현 - FE bind 메서드로 this 제어하기 this의 참조 Part 2에서 언급했듯이, this는 함수의 실행 시점에 결정된다. this의 이런 특성으로 인해서 예상과 다르게 동작하는 경우가 발생하게 된다. 아래의 코드를 보자. showHealth 메서드를 실행하면, this.name과 this.lastTime이 undefined로 출력된다. 왜일까? setTimeout 메서드는 일정 시간 후 인자로 전달받은 함수를 실행하는 메서드이므로, 전달받은 출력 함수가 이벤트 큐에 저장되어 있다가 실행되기 때문이다. 출력 함수의 실행 시점에 showH..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 4, 웹 앱 개발: 예약서비스 2/4 학습일: 2020년 6월 17일 1. 객체지향 JavaScript 구현 - FE 객체 리터럴과 this 객체지향 프로그래밍과 JavaScript 객체 프로그래밍을 배우다보면 객체지향 프로그래밍이란 용어를 자주 접하게 될 것이다. 객체지향 프로그래밍을 간략하게 설명하면, '객체를 중심으로 속성을 설정하고, 그 속성을 다루는 방식의 프로그래밍 방식'이다. 객체지향 방식으로 프로그래밍을 하면 복잡하게 얽힌 많은 작업들을 일관성 있게 관리할 수 있다. 큰 분류에 따라 객체로 나눈 뒤, 각 객체의 데이터에 맞는 메서드를 입력하고, 객체 사이의 상호작용을 통해 속성에 접근하거나 값을 수정하는 등의 작업에 적합하기 때문이다. ..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 4, 웹 앱 개발: 예약서비스 2/4 학습일: 2020년 6월 16일 0. 챕터 소개 이번 챕터에서는 Back End 부분은 잠시 쉬고, Front End 위주로 학습하게 된다. 핵심 키워드는 아래와 같다. - JQuery - Handlebars - forEach - Map - Filter - 클린 코드 1. 객체지향 JavaScript 구현 - FE JavaScript 배열의 함수형 메소드 Front End에서의 데이터 처리의 중요성 예전과 달리, 데이터 처리는 더 이상 Back End만의 일이 아니다. 이는 Front End에서 데이터 조작을 해야 하는 경우가 많아졌기 때문이다. 특히 SPA(Single Page Application)의 등장이 이..

많다면 많고, 적다면 적었던 JavaScript30 시리즈의 마지막 튜토리얼입니다. 오락실 앞에 약방의 감초처럼 놓여있는 두더지 게임을 간단하게 JavaScript로 구현해봅니다. 튜토리얼 정보 출처: JavaScript30 이름: Day 30 - Whack A Mole 언어: JavaScript 목표: 구멍에서 무작위로 튀어나오는 두더지를 잡는 미니 게임 만들기 진행 기간 2020년 5월 16일 두더지가 나오는 구멍, 나와있는 시간 무작위로 설정하기 우선, 두더지가 튀어나올 구멍이 여럿 필요합니다. 여러 구멍 중 어떤 구멍으로 나올지, 그리고 나와서 얼마 동안 있다가 다시 들어갈 지가 정해져야 하겠죠. 두더지가 튀어나오는 구멍과 튀어나왔다가 들어가는 시간이 일정하면 금방 질리기 때문에, 이 둘을 무작위..

튜토리얼 출처: JavaScript30 튜토리얼 이름: Day 29 - Countdown Timer 튜토리얼 분류: JavaScript 튜토리얼 설명: 지정된 시간과 직접 입력한 시간 동안 카운트다운되는 타이머 만들기 진행기간: 2020년 5월 14일 JavaScript를 사용해 현재 시간으로부터 일정 시간 뒤까지 카운트다운을 실행하는 타이머를 만들 수 있다. 사전에 지정한 시간 동안 작동하게 할 수도 있고, 직접 입력한 시간 동안 작동하게 할 수도 있다. 카운트다운 시간 계산하기 우선, 카운트다운 시간을 계산하기 위해 현재 시각과 종료 시각이 필요하다. 아래 timer 함수의 코드를 보자. Date.now( ) 메서드를 통해 현재 시각을 계산하고, 현재 시각에 인자로 넘겨받은 seconds를 더해 종료..