myinfo7091 님의 블로그

오늘의 학습내용 :  콜백 함수 내부의 this에 다른 값 바인딩하기 ◆ 콜백 함수 내부의 thisthis는 Java, C# 처럼 객체 지향 프로그래밍 언어에서도 사용하는 키워드이다. 이때 this는 해당 코드를 실행하는 클래스의 인스턴스를 나타낸다. 조금 다른 방식으로, 자바스크립트에서의 this 키워드가 있는데, 함수가 호출되는 방식에 따라 this가 참조하는 것이 결정된다. 콜백 함수도 함수이기 때문에, 어떤 객체의 메서드로 있던 함수가 인자로 전달되면 함수 자체로 전달된다. 이때 내부의 this는 제어권을 넘겨받은 함수가 정의하고, 정의되지 않은 경우에 전역 객체를 참조한다. 복습하기: 전역 객체?전역 범위에 항상 존재하는 객체를 전역 객체라고 한다. 웹 브라우저에서의 전역 객체는 window, ..

오늘의 학습내용 :  콜백 함수 ◆ 콜백 함수콜백(callback), 또는 콜백 함수(callback function)는 전달인자로 다른 함수에 전달되는 함수이다.  보통 어떠한 동작을 완료하기 위해 외부 함수 내부에서 호출되고, 콜백을 넘겨받는 코드는 필요에 따라 콜백을 즉시 실행하거나, 나중에 실행하는 등 함수에 대한 제어권을 갖는다. (참고: MDN Web Docs)  콜백 함수를 호출할 때는 동기적 방법과 비동기적 방법이 있는데, 이는 4주차 강의 마지막에 더 자세히 배우게 될 것이다. 4주차 강의를 듣는 동안 이 콜백 함수 때문에 이래저래 멘탈이 많이 흔들렸다// forEach()const numbers = [1, 2, 3, 4, 5];numbers.forEach(function(number) ..

오늘의 학습내용 :  영화 상세 페이지 구현하기, 모달, 이벤트 버블링4일차 목표클릭된 영화의 ID를 활용해서 TMDB API로부터 영화 정보 요청하기영화 상세 정보를 모달 창으로 표시하기 모달에서 메인 페이지로 돌아가는 닫기 버튼 구현하기 ◆ HTML, CSS 사용하여 모달창 만들기각각의 영화 카드를 클릭했을 때 영화의 상세 정보가 화면에 표시되도록 모달을 이용해 구현한다. 영화 이미지, 제목, 줄거리 요약과 개봉일을 modal-content 에 넣어서 HTML과 CSS로 간단하게 모달창을 만들었다. 모달창 닫기 버튼도 미리 만들었는데, 구글링을 통해 &times 로 가위표 모양을 보기 좋게 표현할 수 있다는 조언을 얻었다.  × .moda..

오늘의 학습내용 :  영화 검색 기능 구현하기 3일차 목표HTML, CSS 사용하여 검색창 만들기실시간으로 검색창에 입력한 영화 검색기능 만들기 ◆ HTML, CSS 사용하여 검색창 만들기 사용자가 입력한 검색어로 영화 목록을 필터링하는 검색 기능을 구현한다. 우선 검색을 위한 Search bar를 html로 header 영역에 만들었다. CSS는 매번 원하는 이펙트를 구현할 수 있는 방법을 일일이 구글링하는데, 내 디자인 감각이 그다지 좋은 편이 아님을 다시금 깨닫는다.   header { display: flex; align-items: center; position: relative; background-co..

오늘의 학습내용 :  async / await, forEach 2일차 목표HTML, CSS 사용하여 영화 카드 UI 만들기API에서 받아온 데이터를 카드 형태로 화면에 출력하기 ◆ 영화 카드 UI 만들기 1일차에 TMDB 오픈 API를 사용하여 데이터를 가져왔고, 이를 바탕으로 인기 영화 정보를 나열해 보여주는 카드를 만들어 페이지에 출력한다. 주의할 점은 브라우저의 크기가 변해도 자연스럽게 보일 수 있도록 스타일링을 적용하는 것이다. 카드를 생성하는 자바스크립트 코드를 작성하기 전에 HTML과 CSS를 사용하여 영화 카드를 먼저 한 장 만들어보았다. 디자인을 어떻게 할 지 감을 잡기 어려워서, 우선 예시 웹페이지의 CSS를 참고했다. 카드에는 당연히 영화 포스터 이미지가 보여야 하고, 영화 제목과 평점..

타임라인개인과제 발제자바스크립트 걷기반 실습오늘의 학습내용 :  DOM 조작과 데이터 타입◆ DOM 조작DOM(Document Object Model)은 HTML, XML 문서의 프로그래밍 interface 이다. (참고: MDN Web Docs) 구조화된 표현을 통해 프로그래밍 언어가 웹 페이지에 접근해서 문서의 스타일과 내용 등을 변경한다. 즉, 자바스크립트로 HTML을 조작할 수 있게 해 주는 것이다. 다음은 HTML에 있는 태그를 가져오는 방법이다.document.getElementsByTagName(선택자)document.getElementById(선택자)document.getElementsByClassName(선택자)document.querySelector(선택자)   querySelector..

캠프 기초 주차 개인 과제로 영화 검색 사이트 제작이 제시되었다. 세계적인 영화 DB인 TMDB의 오픈 API를 사용하여 영화 검색 사이트를 만들어 볼 것이다.개발 환경 / 기술Visual Studio Code / HTML, CSS, JS외부 APITMDB API주요 기능영화 검색, 영화 정보 조회 오늘의 학습내용 :  실시간 데이터를 사용하는 법 1일차 목표TMDB API에서 인기 영화 데이터 가져오기가져온 데이터를 콘솔에 출력하여 확인하기  ◆ TMDB 알아보기 데이터를 가져올 사이트가 어떤 곳인지부터 알아보았다. TMDB는 영화와 각종 TV프로그램을 수집하여 데이터베이스화하고 영상물에 대한 각종 정보를 제공한다. 포스터 이미지와 함께 인기 영화, 상영 중인 영화, 개봉 예정작, 각종 애니메이션 정보..

타임라인강의 [JS문법 종합반] 3주차자바스크립트 걷기반특강 알고리즘오늘의 학습내용 :  자바스크립트의 데이터 타입(심화)자바스크립트의 변수 타입은 기본형(Primitive type)과 참조형(Reference Type)으로 나눌 수 있다.기본형참조형 string, number, boolean, undefined, symbol, null 등Object - array, function, date, regexp, map, set 등 값이 담긴 주소값을 바로 복제 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 불변성을 띔 불변성을 띄지 않음  기본형 데이터 타입 이 불변성을 띈다는 것은 곧 메모리 영역에서 변경할 수 없음을 말한다. 때문에 변수에 할당될 때 메모리의 고정 크기로 값을 저장하고, 그 값을 ..

타임라인특강 [HTML, CSS 기초]강의 [JS문법 종합반] 2주차특강 알고리즘오늘의 학습내용 :  일급 객체(First-Class Object) 함수자바스크립트에서는 함수를 일급 객체로 다룬다. 일급 객체란, 다른 객체들에 일반적으로 적용 가능한 모든 연산을 지원하는 객체라는 의미이다. 즉 ① 상수 또는 변수에 할당될 수 있고, ② 다른 함수에 인자로 전달될 수 있으며, ③ 다른 함수의 결과값으로서 반환될 수 있다는 것이다. ◆ 변수에 함수를 할당하기함수는 값으로 취급되고, 변수에 할당될 수 있다. 이렇게 변수에 할당된 함수를 나중에 사용할 수 있다.const sayHello = function () { console.log("Hello!");};객체의 속성 / 배열의 요소로 할당하기◆ 다른 함..

타임라인특강 [HTML, CSS 기초]강의 [JS문법 종합반] 2주차특강 알고리즘오늘의 학습내용 :  ES6문법 연습ES6(ECMAScript 6)는 2015년도 이후 자바스크립트에 찾아온 문법적 변화였다. 과거보다 간결하고 효율적인 코드를 작성하기 위해 ES6 문법이 권장되며, 개중 let, const 변수가 추가된 점이 눈에 띈다. Arrow function도 추가되었다. ES6가 가장 최신 버전이기 때문에 중요하게 다루는 것일까? 딱히 그렇지는 않았다. 기존의 단점을 해결하기 위해 ES6 이후로도 문법은 거듭해서 개정되었다. 다만 ES6 이후 이전에 문제시되었던 부분들을 상당수 해결하면서 각종 기능이 확장되어 개발 방향성을 ES6와 맞춰나갔고, 그에 따라 개정된 문법에도 주목도가 모이게 되었다. ◆..