강의: [edwith 부스트코스] 웹 프로그래밍 챕터 4, 웹 앱 개발: 예약서비스 2/4 학습일: 2020년 7월 8일 2. 라이브러리 활용과 클린 코드 - FE handlebars 라이브러리를 활용한 템플릿 작업 DOM 요소 조작과 템플릿의 활용 웹페이지는 수많은 요소들이 계층적으로 구조를 이루고 있고, 이 일부분을 변경하고자 할 때 DOM 요소에 일일이 접근하는 것은 너무나도 번거로운 일입니다. 그렇기 때문에 DOM 요소에 일일이 접근하지 않아도 되도록 HTML 문자열로 이루어진 일종의 양식을 만든 뒤, replace와 같은 메서드를 활용해 특정 문자열만 변환해주는 방법을 사용하게 되었습니다. 이를 템플릿 작업이라고 합니다. 그런데 웹사이트의 규모가 계속 커지면서 템플릿을 통해 문자열을 변환하는 것..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 4, 웹 앱 개발: 예약서비스 2/4 학습일: 2020년 7월 7일 2. 라이브러리 활용과 클린 코드 - FE JavaScript 라이브러리와 프레임워크 최근 10년 간의 트렌드 2010년 이후로, 대표적인 JavaScript 라이브러리의 이름을 거론할 땐 jQuery가 빠지지 않습니다. 심지어 'JavaScript가 아닌 실무에서 쓰이는 jQuery를 중점적으로 배워야 한다'는 글도 있었을 정도로 광범위하게 바닐라 JavaScript를 대체하며 사용되었던 라이브러리가 jQuery입니다. 하지만 시간이 흐르고 웹의 대세가 웹 앱이 되면서 jQuery의 중요성은 떨어지고, 더 큰 규모의 도구인 프레임워크들이 관심을 이어받게 되었습니다. 그렇다면 jQue..

웹페이지 텍스트에 접근할 수 있는 3가지 속성과 그 차이 JavaScript를 사용해 웹페이지 요소의 텍스트에 접근할 때 Node.textContent, Node.innerText, Element.innerHTML의 3가지 속성을 쓸 수 있다. 이 셋은 비슷하면서도 약간씩 차이가 있다. 이 셋이 id가 source인 HTML 요소의 텍스트를 어떻게 표현하는지 살펴보자. HTML 원본 textContent, innerText, innerHTML 의 차이를 아래에서 살펴보세요. 숨겨진 내용 textContent 결과: ... innerText 결과: ... innerHTML 결과: ... 세 속성이 다른 결과를 보여준다는 것을 시각적으로 확인할 수 있을 것이다. 시각적인 결과의 차이뿐 아니라, 성능 상의 차..

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 객체 프로그래밍을 배우다보면 객체지향 프로그래밍이란 용어를 자주 접하게 될 것이다. 객체지향 프로그래밍을 간략하게 설명하면, '객체를 중심으로 속성을 설정하고, 그 속성을 다루는 방식의 프로그래밍 방식'이다. 객체지향 방식으로 프로그래밍을 하면 복잡하게 얽힌 많은 작업들을 일관성 있게 관리할 수 있다. 큰 분류에 따라 객체로 나눈 뒤, 각 객체의 데이터에 맞는 메서드를 입력하고, 객체 사이의 상호작용을 통해 속성에 접근하거나 값을 수정하는 등의 작업에 적합하기 때문이다. ..