IT 공부

1. fetch 2. Axios 3. fetch와 Axios 사용 예시 1. fetch 기존에 웹에서 어떤 리소스를 비동기로 요청하기 위해서는 XHR(XML HTTP Request)객체를 사용했어야 했었는데, XHR은 잘 디자인되어 있는 API가 아니다. 요청의 상태나 변경을 구독하려면 Event를 등록해서 변경사항을 받아야 했고 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 들어가기 좋지 않았다. 이를 보완하기 위해 HTTP 요청에 최적화 되어 있고 상태도 잘 추상화되어 있는 API들이 생겨나기 시작했다. 대표적으로 fetch와 Axios가 그 예이다. fetch는 ES6부터 JavaScript의 내장 라이브러리로 들어왔다. promise 기반으로 만들어졌기에 Axios와 마찬가지로 데이터를 ..

1. AJAX 개념 2. AJAX 동작 원리 3. AJAX 사용 예시 1. AJAX 개념 AJAX는 Asynchronous JavaScript And XML의 약자로, 직역하면 비동기 자바스크립트와 XML이다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JavaScript를 이용하여 서버로 보내는 HTTP Request를 만들기 위해서는 그에 맞는 기능을 제공하는 Object가 필요하다. XMLHttpRequest가 그러한 Object의 예이다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함하여 다양한 포맷을 주고 받을 수 있다. AJAX의 강력한 특징은 웹 페이지 전체를 리프레시 하지 않고서도 수행되는 "비동기성"이다. 이러한 비동기..

1. 콜백지옥 2. Promise 3. async/await 1. 콜백지옥 콜백(Callback)은 다른 함수의 실행이 끝난 뒤 실행되는 함수이다. 콜백지옥은 JavaScript를 이용한 비동기 프로그래밍시 발생하는 문제로서, 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다. 위의 스크립트는 apple go, apple end, orange go, orange end, strawberry go, strawberry end 순서로 출력되고, 마지막으로 Mission Complete!가 출력되도록 만든 것이다. apple, orange, strawberry 이렇게 depth가 3개 밖에 없어서 지옥까지는 아니지만, 콜백지옥이 이러한 원리로..

1. 템플릿 문자열 (template string) 2. 객체 리터럴 (Enhanced Object Literal) 3. 디스트럭쳐링 (Destructuring) 1. 템플릿 문자열 (template string) 자바스크립트에서 문자열 여러 개를 합칠 때에는 다음과 같은 방식을 사용한다. let a = 'yellow'; let b = 'green'; let ab = a+b; console.log(ab); // yellowgreen console.log(a+'와 '+b+'을 섞으면 '+ab+'이 됩니다.'); // yellow와 green을 섞으면 yellowgreen이 됩니다. 따옴표와 + 기호를 여러 번 적어야 하기 때문에 번거로운데, 이를 간단하게 해주는 것이 템플릿 문자열이다. let a = 'y..

1. Date 메소드 2. 캘린더 만들기 1. Date 메소드 캘린더를 만들기에 앞서 Date 메소드를 알아보려고 한다. 메소드 설명 값의 범위 Date.now() 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초(millisecond) 단위의 정수로 반환 - getFullYear() 현재 연도를 4비트의 숫자(YYYY)로 반환 YYYY getDate() 현재 날짜에 해당하는 숫자를 반환 1 ~ 31 getDay() 현재 요일에 해당하는 숫자를 반환 (일요일은 0, 토요일은 6) 0 ~ 6 getTime() 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초(millisecond) 단위로 환산한 값을 숫자로 반환 - getMonth() 현재 월에 해당하는 숫자를 반환 0 ~..

1. 목표 2. 구현 과정 1. 목표 완성된 웹 페이지에서 헤더의 'menu1' ~ 'menu4'에 마우스를 가져가면 menu1-1 ~ menu4-4가 나타난다. 다시 마우스를 다른 곳에 가져가면 menu1-1 ~ menu4-4는 보이지 않는다. 2. 구현 과정 HTML은 기초적인 문법으로 구성되었기 때문에 자세한 설명은 생략한다. 하나 언급하자면, 마우스를 가져갔을 때 나타나는 메뉴가 header에 고정되어 있는 메뉴와 독립적으로 존재하는 것이 아니라 ul, li 태그를 이용해 header에 고정되어 있는 메뉴의 하위 항목으로 구성해주었다. script에서 for 문을 쓴 이유는 gnb의 'menu1' ~ 'menu4'를 일일이 쓰는 번거로움을 덜기 위해서이다. for 문을 해석하자면, 'menu1' ..

1. JavaScript 코드와 브라우저 2. 시간과 관련된 Web APIs 2.1. setInterval() 함수 2.2. setTimeout() 함수 2.3. clearInterval() 함수 3. 화면 슬라이드 애니메이션 구현 1. JavaScript 코드와 브라우저 JavaScript는 단일 스레드 기반의 언어로 한 순간에 하나의 작업만 수행할 수 있다. 하지만 JavaScript는 비동기로 동작하기 때문에 단일 스레드임에 불구하고 동시에 여러 작업을 수행한다. 비동기로 동작하는 이유는 JavaScript가 아니라 브라우저 때문이다. JavaScript가 실행될 때 브라우저와의 동작은 [그림 1]과 같다. 2. 시간과 관련된 Web APIs 2.1. setInterval() 함수 일정한 시간 간격..

1. CRUD 2. To Do List 제작 2.1. 기본 틀 2.2. List 항목 Create 2.3. List 항목 Update 2.4. List 항목 Delete 2.5. 완성된 JavaScript 1. CRUD 대부분의 게시판은 CRUD 속성을 갖는다. CRUD는 4개 단어의 약자를 따서 만들었다. C는 Create, R은 Read, U는 Update, D는 Delete를 의미한다. 오늘 제작할 To Do List는 C, U, D 기능을 사용할 수 있도록 하는 것이 목표이다. 2. To Do List 2.1. 기본 틀 form 태그 안에 input 태그 2개를 넣어서 각각 해야 할 일을 작성할 수 있는 text 박스와 작성한 내용을 등록할 수 있는 submit 박스로 나타냈다. ul 태그 안에는..

1. DOMContentLoaded 2. Load 3. Unload 1. DOMContentLoaded 2. Load 3. Unload

1. 동기식 2. 비동기식 1. 동기식 2. 비동기식

1. 소개 2. this를 이용하는 함수 실행에 대한 4가지 방식 2.1. 일반 함수 실행 방식 (Regular Function Call) 2.2. 도트 표기법 (Dot Notation) 2.3. 명백한 바인딩 (Explicit Binding) / call, bind, apply 2.4. new 키워드를 사용한 함수 실행 1. 소개 자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는데, this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구분된다. this의 값들은 크게 4가지 정도로 나뉜다. 즉, this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다. 이러한 특성 때문에 this가 무엇을 ..

1. DOM (Document Object Model) 2. BOM (Browser Object Model) 2.1. Window 객체 2.2. Location 객체 2.3. History 객체 2.4. Screen 객체 2.5. Navigator 객체 1. DOM (Document Object Model) 문서 객체 모델(DOM)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 이러한 DOM은 W3C의 표준 객체 모델이며, 아래와 같이 계층 구조로 표현된다. 자바스크립트는 이러한 객체 모델을 이용해 다음과 같은 작업을 할 수 있다. 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다. ..