myinfo7091 님의 블로그

오늘의 학습내용 :  React 개발환경 세팅하기  ◆ Yarn앞으로 개인 과제를 진행하면서 사용하게 될 패키지 툴이다. 간단한 커맨드로 게시된 패키지들을 설치받아 사용할 수 있고, 이를 통해 보다 효율적인 개발이 가능하다. 대표적인 패키지 관리 툴에는 npm, 그리고 yarn이 있는데, 각각 어떤 특징을 가지고 있는지 간단하게 알아보았다. NPM(Node Package Manager)은 자바스크립트 언어를 위한 패키지 관리자이다. Node 패키지를 만들고, 업로드하여 공유하여 누구나 사용할 수 있다. NPM이 없었을 때에는 필요한 기능을 추가하려면 직접 작성하거나 깃허브를 통해 다운로드할 수밖에 없었다. 이런 불편을 해소하기 위해 Node.js를 설치하면 기본적으로 내장된 npm을 사용할 수 있게 되었..

오늘의 학습내용 :  React 소개 ◆ React.js 주특기 입문주차에 들어서면서 React를 처음 접하게 되었다. React는 메타에서 개발한 오픈소스 자바스크립트 라이브러리로, 요즘에는 프론트엔드 개발자들 사이에서 많은 인기를 얻고 있다. SPA를 전제로 하고, 업데이트가 필요한 DOM요소를 찾아 해당 부분을 빠르게 업데이트하기 때문에 동적인 웹에서 좋은 퍼포먼스를 낼 수 있다. React 그 자체만으로는 프레임워크라고 불리기에 부족한 기능들이 있지만, 대신 라이브러리라는 특성을 살려 다른 프레임워크에 붙여 사용하거나 각종 메소드를 지원받고 프론트엔드 개발자라면 익혀야 할 표준으로 자리잡았다. 웹개발자로 일하고 싶으면 리액트 배워  홈페이지에서 간단한 특징 소개를 읽어보았다.애플리케이션의 각 상태..

오늘의 학습내용 :  Class ◆ Class 생성하기자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어이다. 다만 생성자, 상속 등 클래스를 기반으로 하는 다른 언어에 익숙한 개발자들이 적응할 수 있도록 ES6부터 class가 추가되었다. ES6에서 기존 자바스크립트가 가지고 있던 많은 단점들이 개선되었다. 그리고 배워야 할 것도 늘어났다 class를 통해 코드를 직관적으로 읽고 편리하게 작성할 수 있다.클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위한 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. (참고: 모던 JavaScript 튜토리얼) class User { constructor(name) { this.name..

오늘의 학습내용 :  DOM  ◆ DOM DOM(The Document Object Model, 문서 객체 모델)은 HTML, XML 문서의 프로그래밍 인터페이스이다. 문서를 구조화해 표현하고 프로그래밍 언어가 DOM의 구조에 접근할 수 있는 방법을 제공하는데, 우리는 이를 통해 문서의 구조와 스타일, 내용 등을 변경할 수 있다. 다시 말해 웹페이지의 객체 지향 표현이며, 자바스크립트와 같은 언어로 DOM을 수정할 수 있다. 1주차부터 4주차까지 자바스크립트의 다양한 문법들을 적용해 보면서 결과적으로 DOM을 수정하는 방법을 익히는 것이다. DOM을 사용하는 이유는 크게 ① 자바스크립트를 통해 HTML에서 데이터를 가져오기 위해서 ② 웹페이지 데이터를 동적으로 변경하기 위해서 정도로 생각해볼 수 있다. ..

오늘의 학습내용 :  콜백 함수 내부의 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..