프레임워크없는프론트엔드개발

[프레임워크 없는 프론트엔드 개발] 5장. HTTP 요청

간단한 역사: AJAX의 탄생 Ajax 시작하기 - 웹 개발자 안내서 | MDN 본 문서는 AJAX의 기본을 익힐수 있도록 해주며, 두 가지 간단한 훈련용 예제를 제공합니다. developer.mozilla.org 1999년 이전에는 서버에서 데이터를 가져올 때 전체 페이지를 다시 로드해야 했다. 하지만 AJAX(Asynchronous JavaScript and XML)의 등장 이후로 서버에서 데이터를 가져올 때 페이지를 완전히 다시 로드하지 않고 필요한 데이터만 서버에서 가져와 화면을 채우는 식으로 개발이 가능해졌다. AJAX 애플리케이션의 핵심은 XMLHttpRequest 객체로, 이것을 통해 HTTP 요청으로 서버에서 데이터를 가져올 수 있다. 요즘은 자바스크립트를 통한 비동기 통신을 통칭하는 단어..

[프레임워크 없는 프론트엔드 개발] 4장. 웹 구성 요소

웹 컴포넌트 API 웹 컴포넌트에는 세 가지 중요 기술이 있다. HTML 템플릿: 태그는 컨텐츠가 렌더링되지는 않지만, 자바스크립트 코드에서 동적인 컨텐츠를 생성하는 데 ‘스탬프’로 사용되도록 하려는 경우에 유용하다. 사용자 정의 요소: 이 API를 통해 개발자는 완전한 기능을 갖춘 자신만의 DOM 요소를 작성할 수 있다 - 사용자 정의 HTML 태그를 만들 수 있다. Shadow DOM: 이 기술은 웹 컴포넌트가 컴포넌트 외부의 DOM에 영향을 받지 않아야 하는 경우에 유용하다. 다른 사람들과 공유할 수 있도록 구성 요소 라이브러리나 위젯을 작성하려는 경우에 유용하다. 가상 DOM과는 완전히 다른 개념이며, 섀도우 DOM은 캡슐화와 관련되고, 가상 DOM은 성능과 관련된다. HTML 템플릿은 3장에서 ..

[프레임워크 없는 프론트엔드 개발] 3장. DOM 이벤트 관리

지난 장에서는 데이터에 따른 DOM 엘레먼트를 어떻게 그리는지에 대해 알아봤다면, 이번 장에서는 화면을 동적으로 바꾸는 이벤트에 대해 알아본다. YAGNI 원칙 YANGI는 ‘You aren’t gonna need it(정말 필요할 때까지 기능을 추가하지 마라)’의 약자로, 익스트림 프로그래밍의 원칙 중 하나다. 프레임워크 없이 개발할 때에는 이 원칙이 절대적으로 중요하다. 아키텍처를 과도하게 엔지니어링하는 경우를 막기 위해서다. DOM 이벤트 API 이벤트는 웹 애플리케이션에서 발생하는 동작으로, 브라우저는 이벤트가 발생하면 사용자에게 알려주고 사용자는 이벤트에 대해 어떤 방식으로든 반응할 수 있다. 이벤트에는 다양한 종류가 있다. 전체 이벤트 리스트는 여기서 확인 가능하다. Event referenc..

[프레임워크 없는 프론트엔드 개발] 2장. 렌더링

문서 객체 모델(DOM) 문서 객체 모델(DOM)은 프로그래밍 방식으로 엘레먼트를 렌더링하는 방식으로, 우리는 DOM을 통해 웹 애플리케이션을 구성하는 엘레먼트들을 조작할 수 있다. 우리가 보는 HTML은 모두 DOM 트리 형식으로 표현할 수 있는데, 이 트리의 노드에 querySelector 등의 메서드로 접근하여 속성을 변경할 수 있다. 렌더링 성능 모니터링 여기선 렌더링 엔진의 성능을 모니터링하는 여러 도구를 살펴본다. 구글 개발자 도구 개발자 도구를 연 다음 cmd(ctrl)+shift+P를 누르고 Show frame per seconds (FPS) meter 메뉴 항목을 선택하면 FPS 미터와 함께 GPU에서 사용하는 메모리양을 볼 수 있다. stats.js GitHub - mrdoob/stat..

[프레임워크 없는 프론트엔드 개발] 1장. 프레임워크에 대한 이야기

프레임워크의 정의 프레임워크는 무언가를 만들 수 있는 지지 구조로, 우리는 프레임워크에서 제공하는 구성 요소와 기본 요소들을 가지고 서비스를 만들 수 있다. 프레임워크는 사용 언어, 의존성 주입 방법, 디렉터리 구조 등을 문법적으로 강제하거나, 프레임워크 커뮤니티 내에서 만든 ‘사실상’ 강제되는 몇 가지 제약 조건을 갖고 있으며, 프레임워크를 사용하려는 개발자는 이 제약 조건에 맞춰 코드를 작성해야 한다. 프레임워크 대 라이브러리 - 비교로 간단하게 알아보기 💡 프레임워크는 코드를 호출한다. 코드는 라이브러리를 호출한다. 우리가 웹 서비스를 개발할 때 사용하는 프레임워크 중 하나인 Angular와 날짜를 다루는 라이브러리인 Moment.js를 비교해 보면 프레임워크와 라이브러리의 차이점을 이해할 수 있다..