바닐라 자바스크립트로 투두리스트를 만들어보고 있다. http 통신은 json-sever를 사용하는 선에서 마무리하려고 했지만 욕심이 생겨서 검색해보며 express를 사용해 Node.js 백엔드 서버를 만들어보았다.   [Express.js] Express를 사용해 간단한 백엔드 서버 API 구축하기바닐라 자바스크립트로 투두리스트를 만들어보고 있다. 투두리스트에 대한 데이터는 로컬 스토리지에 저장해 관리하는 방식으로 만들다가, fetch API를 사용해 http 통신을 구현하고 싶어 직접 서parkjisun.tistory.com 코드는 완성이 되었으니 백엔드 서버를 배포를 해야 할텐데, 간단하게 배포할 수 있는 호스팅 서비스를 검색해보다가 Heroku를 알게 되었는데 유료로 전환되었다고 해서 heroku..

전통적인 콜백 패턴의 단점:콜백 헬로 인해 가독성이 나쁨비동기 처리 중 발생한 에러의 처리가 곤란여러 개의 비동기 처리를 한 번에 처리하는 데에 한계가 있음ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입함전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있음비동기 처리를 위한 콜백 패턴의 단점콜백 헬// GET 요청을 위한 비동기 함수const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // 서버의 응답을 콘솔에 출력..

⭐️ 노션에서 보기REST(REpresentational State Transfer): HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처REST API*: REST를 기반으로 서비스의 API를 구현한 것REST는 HTTP/1.0과 1.1 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩(Roy Fielding)의 2000년 논문에서 처음 소개 됨발표 당시 웹이 HTTP를 제대로 사용하지 못하고 있는 상황을 보고 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 REST를 소개했고 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있음REST의 기본 원칙을 성실히 지킨 서비스 디자인을 “RESTful”이라 표현REST API의 구성RE..

⭐️ 노션에서 보기Ajax란?자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공전통적인 방식: html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 렌더링하는 방식으로 동작 ⇒ 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링전통적인 웹페이지의 생명 주기- 전통적 방식의 단점 1. 이전 웹페이지와 차이가 없어서 변경할 필요가 없는 부분..

⭐️ 노션에서 보기동기 처리와 비동기 처리함수를 호출하면 함수 코드가 평가 되어 함수 실행 컨텍스트가 생성됨 → 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행 됨 → 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝 되어 제거됨 eg. const foo = () => {}; const bar = () => {}; foo(); bar();- 실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸시 되는 것 ⇒ 함수 실행의 시작- 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시 되기 때문⇒ 함수의 실행 순서는 실행 컨텍스트 스택으로 관리자바스크립트 엔진은 단 ..

⭐️ 노션에서 보기호출 스케줄링호출 스케줄링: 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 타이머 함수를 사용하여 함수 호출을 예약하는 것타이머 생성 함수: setTimeout, setInterval 타이머 제거 함수: clearTimeout, clearInterval타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니지만 브라우저와 Node.js 환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공함 → 타이머 함수는 호스트 객체임타이머 함수 setTimeout(한 번 동작)과 setInterval(반복 동작)은 모두 일정 시간이 경과된 이후 콜백 함수가 호출되도록 타이머를 생성함자바스크립트 엔진은 싱글 스레드로 동작하기 때문에 타이머 함수는 비동기 처리 ..

⭐️ 노션에서 보기이벤트 드리븐 프로그래밍브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 시킴특정 버튼 요소에서 클릭 이벤트가 발생하면 특정 함수(이벤트 핸들러)를 호출하도록 브라우저에게 위임(이벤트 핸들러 등록)할 수 있음함수를 언제 호출할 지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라 브라우저에게 함수 호출을 위임하는 것이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 Click me! 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 어플리케이션 간 상호작용(interaction)이 가능⇒ 이벤트 드리븐 프로그래밍: 프로그램의 흐름을 이벤트 중심으로 ..

⭐️ 노션에서 보기DOM(Document Object Model): HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조노드HTML 요소와 노드 객체HTML 요소:HTML 문서를 구성하는 개별적인 요소 https://yung-developer.tistory.com/74- 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨 - HTML 요소의 어트리뷰트 → 어트리뷰트 노드 - HTML 요소의 텍스트 콘텐츠 → 텍스트 노드- HTML 요소 간에는 **중첩 관계**에 의해 계층적인 부자 관계가 형성됨 → 이를 반영하여 HTML 요소를 객체화한 모든 노드 객체를 **트리 자료 구조**로 구성트리 자료구..