What I Learned Today비동기 자바스크립트 - AJAX 라이브러리라이브러리가 필요한 이유XHR과 Fetch API는 저수준(Low-level) API 이다.저수준 API를 사용하는 것에 문제가 있는 것은 아니지만 많은 코드 작성이 필요하다..then() 메서드 두 번 이상 사용예를 들어 Fetch API를 사용할 땐 항상 .then() 메서드가 두 번 이상 필요하다.콘텐츠 유형에 적절한 메서드 사용실제 요청에서는 적절한 메서드를 사용해 응답을 처리해야 한다,.서버가 보내는 콘텐츠 유형에 따라 적절한 메서드 .json(), .text(), .blob()를 호출해야 한다.직접 오류 처리 필요Fetch API는 오류가 발생할 경우 .catch() 메서드를 호출하지 않는다.따라서 fetch() 사용..
What I Learned Today비동기 자바스크립트 - 인증JS를 사용해 인증하는 방법기본 인증 (Basic Authentication)OAuth 인증 (Open Authentication)기본인증사용자 이름과 비밀번호를 서버에 전송할 때 발생한다.기본 인증을 수행하려면 Authorization 헤더를 전송해야 한다.이때 헤더 값은 Basic (Base64로 인코딩 된 문자열)인코딩은 텍스트를 Base64 포맷으로 변환하는 것을 말한다.디코딩은 Base64를 텍스트로 변환화는 과정을 말한다.Base64 인코딩텍스트를 Base64 포맷으로 변환하려면 btoa() 함수를 사용한다.btoa (Binary to ASCII)는 바이너리 데이터를 ASCII 문자열로 변환한다.btoa 함수는 서유럽 언어만 지원하..
What I Learned Today비동기 자바스크립트 - Fetch APIFetch APIAJAX 요청을 위한 현대적인 방법기존의 XMLHttpRequest보다 더 간결하고 강력한 인터페이스 제공요청fetch() 함수를 사용fetch(url, option(옵션))// 예) 깃허브 repo를 가져오는 요청fetch('https://api.github.com/users/dohyeon0709/repos')응답 처리Fetch API는 Promise를 반환하며 응답은 Response 객체로 제공이 response 객체는 다양한 메서드를 통해 데이터를 추출할 수 있다.fetch() 함수의 응답 결과를 확인하려면 .then() 메서드를 사용한다.하지만 fetch() 응답은 "읽기 가능한 스트림(readable st..
What I Learned Todayswitch 문// 기본 사용법switch (조건) { case '값': // ... break default: // ...}// break 키워드 사용하지 않기switch(취미) { case '수영': case '스킨스쿠버': case '윈드서핑': // ... break case '영화 감상': // ... break // ... }// 블록으로 묶기switch(취미) { case '수영': case '스킨스쿠버': case '윈드서핑': { // ... break } case '영화 감상': { // ... break } // ... }switch 문은 여러 if 구문을 합친 것과 같다.일반적으로 조건이 특정 값인지 확인할 때 사용한다.여러 조..
What I Learned TodayText 및 HTML 변경선택된 DOM 요소의 텍스트 콘텐츠 또는 HTML을 변경할 때 다음의 두 가지 방법을 사용한다.textContent : DOM 요소의 텍스트 콘텐츠를 변경할 때는 .textContent 속성을 사용한다.텍스트만 변경HTML 태그 무시innerHTML : DOM 요소 내부의 HTML을 변경할 때는 .innerHTML 속성을 사용한다.HTML 구조를 포함한 콘텐츠 변경HTML 태그 해석 DOM에 요소 추가createElement() : DOM 요소를 추가하려면 먼저 요소를 생성해야 한다.요소를 생성할 때는 .createElement() 메서드를 사용한다.초기 생성 시 메모리에만 존재한다.생성된 요소에 클래스 또는 textContent 속성을 사용하..
What I Learned Today목적에 맞는 함수 설계함수 작성 시 하나의 기능을 구현하는 목적만 가져야 한다.무슨 일을 하는 지 알기 쉽고 작성 또한 수월하다.함수 이름은 동사로 시작해야 한다.기능을 알기 쉽다.함수를 작성할 때 주석을 작성한다.기능을 이해하고 사용을 쉽게 한다.함수에 주석을 추가할 때는 JSDoc 방식을 사용한다.JSDoc 방식 - /** 으로 시작하고 */ 으로 끝나는 여러 줄 주석작성할 기능은 최소 아래 세 가지 사항을 문서화 해야한다.함수의 목적, 함수의 매개변수, 함수의 반환값 범위(Scope) 관리변수가 포함된 환경을 자칭하는 이름이다.범수에 접근할 수 있으면 해당 변수가 범위 내에 있다고 말한다.JS에서 5개의 범위글로벌 (Global Scope)함수 외부에 선언된 변수..
What I Learned TodayJS에는 배열을 조작하는 유용한 메서드가 있다..findIndex() : 조건이 맞는 항목의 인덱스를 찾아서 반환한다. (없으면 -1 반환).find() : 조건이 맞는 인덱스의 항목을 찾아서 반환한다. (없으면 undefined 반환).filter() : 배열의 각 항목을 순환해 걸러낸 후 새로운 배열을 반환한다..map() : 배열의 각 항목을 순환해 새로운 배열을 반환한다.forEach() 메서드와의 차이점은 map() 메서드는 새로운 배열을 반환한다.새로운 배열을 반환해야 하는 경우 = map() 메서드새로운 배열 반환 없이 각 항목을 순환해 무언가 해야 하는 경우 = forEach() 메서드 배열 객체의 .reduce() 메서드는 하나의 값으로 변환하는 데 도..
What I Learned Today구조 분해 할당객체 또는 배열의 구조를 분리해 변수에 할당하는 구문객체 구조 분해 할당// 객체에서 값을 가져오려면 변수를 선언하고 해당 변수에 값을 할당해야 한다.const jeemin = { name: '박지민', age: 27,}const name = jeemin.nameconst age = jeemin.ageconsole.log(name) // '박지민'console.log(age) // 27// 하지만 ECMAScript 2015부터는 객체의 구조를 분해해 할당할 수 있다.// 객체를 구조 분해 할당하려면 중괄호를 사용한다.const { name, age } = jeeminconsole.log(name) // '박지민'console.log(age) // 27/..
What I Learned Today삼항 연산자 : if-else 문을 사용하는 조건문을 더 간단하게 작성할 수 있다.삼항 연산자 식은 간단한 조건 처리에는 매우 유용하다.하지만 중첩이 깊어질수록 가독성이 떨어지기 때문에 복잡한 조건은 if-else 문을 사용하는 것이 좋다.// 삼항 연산자의 기본 구조조건 ? 조건이 참인 경우 실행 : 조건이 거짓인 경우 실행// exconst bool = true;// 한 줄 작성bool ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.') // 조건이 참입니다.// 여러 줄 작성bool ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.') // 더 복잡한 조건const ..
What I Learned TodayGSAP이란?GreenSock Animation Platform의 약자로 웹 애니메이션을 위한 자바스크립트 라이브러리다.먼저 GSAP를 사용하기 위해서는 HTML 파일에 라이브러리를 추가해야한다. GSAP은 CSS 속성, SVG, Canvas 등 거의 모든 것을 애니메이션 할 수 있다. 애니메이션을 만드는 방법// 트윈 애니메이션 : 싱을 애니메이션을 말한다.// 트윈 애니메이션의 메서드 (네 가지 유형)gsap.to("target", vars) // 요소의 현재 상태에서 트윈에 정의된 값까지 애니메이션gsap.from("target", vars) // 지정한 값에서 시작해 요소의 현재 상태로 애니메이션gsap.fromTo("target", vars) // 시작값과 종..
