Frontend/JavaScript (13) 썸네일형 리스트형 [바닐라 자바스크립트로 SPA 만들기] 3. 라우팅 사실상 SPA 구현의 핵심이라 할 수 있는 라우팅을 추가해 보자. 라우팅 구현하기 라우팅을 위한 주요 기능은 "프레임워크 없는 프론트엔드 개발" 도서의 라우팅 부분을 참고했으며, 전반적인 틀은 앞서 구현한 컴포넌트 기반 폴더 구조에 맞추었다. 폴더 구조 페이지 간 이동을 위해 파일을 추가했다. - HomePage.js: 초기 접근 페이지 - index.js: pages 컴포넌트의 export 모음 src/pages/HomePage.js 초기 접근 시 렌더링 되는 페이지로, 기존 App 컴포넌트의 역할을 대신하는 페이지 컴포넌트이다. 일단은 페이지 구분 용도이기 때문에 별 내용은 없다. import Component from '../core/Component.js'; export default class .. [바닐라 자바스크립트로 SPA 만들기] 2. 비동기 처리 지난 글에서는 카운터 컴포넌트를 통해 기본적인 SPA의 구조를 잡았다. 이번에는 조금 더 나아가서, API 통신을 위한 비동기 처리 컴포넌트를 만들어 보자. 비동기 컴포넌트 만들기 이 부분의 구조는 "프레임워크 없는 프론트엔드 개발" 도서의 HTTP요청 부분을 참고했으며, 더미 API를 통해 패치 컴포넌트를 만들어 볼 것이다. 폴더 구조 새롭게 추가된 부분은 다음과 같다. - api/http.js: HTTP 통신 메서드 모음 - components/List.js: API 결과를 출력할 리스트 컴포넌트 - pages/FetchPage.js: API 패치를 위한 페이지 컴포넌트 src/api/http.js Fetch API를 기반으로 HTTP 통신 메서드를 추상화한 파일이다. (참고 링크) 최대한 외부 라.. [바닐라 자바스크립트로 SPA 만들기] 1. 컴포넌트 만들기 개요 프레임워크 없이 바닐라 자바스크립트로 웹 애플리케이션을 만들 수 있는가? 뭐 만들 수야 있지만 굳이..?라는 생각을 가지며 지내온 시간이 꽤 흘렀다. 그리고 사실 웹 개발 입문 당시 DOM 하나하나를 조작하며 노가다스럽게 만들어본 경험만 있을 뿐, 효율적으로 바닐라 자바스크립트를 활용하는 방법은 몰랐기 때문에 뭐부터 시작해야 할지 잘 몰랐다. 하지만 취업을 준비하면서 바닐라 자바스크립트만을 활용한 과제를 해결해야 하는 순간이 있었기에, 바닐라 자바스크립트를 리액트스럽게 활용하는 방법을 알긴 알아야겠다는 생각이 들었다. 게다가 최근 "프레임워크 없는 프론트엔드 개발"이라는 책을 읽게 되면서 실습 겸, 간단하게 바닐라 자바스크립트로 SPA를 만들어 보았다. 컴포넌트 만들기 SPA의 구조를 잡기 위한 가.. [JavaScript] 코어 자바스크립트 7장 - 클래스 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니www.yes24.com 💡 자바스크립트의 클래스를 이해하기 위해서는 프로토타입의 이해가 우선되어야 한다. 자바스크립트에서의 클래스자바스크립트는 프로토타입 기반 언어이므로 클래스의 개념이 존재하지 않는다.그저 프로토타입을 클래스의 관점에서 접근해 상속 흉내를 것이다.프로토타입 체이닝에 의한 참조를 상속으로 이해하는 것이다. 예시를 통해 자세히 알아보자. 아래 Array와 arr를 클래.. [JavaScript] 코어 자바스크립트 6장 - 프로토타입 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니 www.yes24.com 💡 프로토타입 기반 언어인 자바스크립트에서는 객체를 원형으로 삼고 이를 참조함으로써 상속과 비슷한 효과를 얻는다. 프로토타입 개념 이해하기 new 연산자로 Constructor를 호출하면 인스턴스가 만들어지는데, 이 인스턴스의 프로퍼티인 __proto__는 Constructor의 prototype을 참조한다. 생성자 함수의 prototype에 어떤 메서드가.. [JavaScript] 코어 자바스크립트 5장 - 클로저 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니 www.yes24.com 💡A closure is the combination of a function and the lexical environment within which that function was declared. 클로저란? 클로저는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이다. MDN에 따르면, 클로저란 함수와 그 함수가 선언될 당시의 lexical e.. [JavaScript] 코어 자바스크립트 4장 - 콜백 함수 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니 www.yes24.com 💡콜백 함수를 통해 자바스크립트의 비동기 처리 발전 과정을 이해할 수 있다. 콜백 함수란? 콜백 함수는 다른 코드(함수 또는 메서드)의 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가진다. 콜백 함수는 함수다. 콜백 함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 함.. [JavaScript] 코어 자바스크립트 3장 - this 아래 책을 읽고 정리한 내용입니다. http://www.yes24.com/Product/Goods/78586788 코어 자바스크립트 - YES24 자바스크립트의 근간을 이루는 핵심 이론들을 정확하게 이해하는 것을 목표로 합니다최근 웹 개발 진영은 빠르게 발전하고 있으며, 그 중심에는 자바스크립트가 있다고 해도 결코 과언이 아니 www.yes24.com 💡상황별로 this가 어떻게 달라지는지, 왜 그렇게 되는지 이해할 수 있다. 그리고 예상과 다른 대상을 바라보고 있을 경우 그 원인을 효과적으로 추적하는 방법을 알 수 있다. 상황에 따라 달라지는 this 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때(실행 컨텍스트의 ThisBinding에서) 함께 결정된다. 일반적으로 실행 컨텍스트는 함.. 이전 1 2 다음
