본문 바로가기
[JS] Fetch API 1. Fetch API란? HTTP 통신의 요청(request)과 응답(response)등의 리소스를 JavaScript에서 접근하고 조작할 수 있는 인터페이스이다. Promise를 활용한 JavaScript 자체의 비동기 처리 인터페이스이다. Fetch Interface GlobalFetch : 리소스를 취득하기 위해 사용되는 fetch() 메서드가 정의되어 있다. Headers : Request와 Response 객체에 대한 헤더이다. 헤더정보에 보내는 쿼리나 통신 결과에 대한 행동을 제어할 수 있다. Request : 리소스에 대한 요청 객체다. Response : Request에 대한 응답 객체다. 2. fetch() fetch()가 반환하는 프로미스 객체는 404, 500과 같은 HTTP 오류 .. 2023. 2. 8.
[JS] Closure 1. Closure란? 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical environment)의 조합이다. 즉, 객체 간의 유효범위를 이용해 private한 환경을 만드는 것이다. 클로저를 이해하려면 JavaScript가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. JavaScript는 함수 안에 선언된 변수는 지역변수로 취급되어 외부에서 접근이 불가능하다. 코드로 보자 const a = 1; function f() { const b = 2; } console.log(a); console.log(f.b); console.log(b); /**************결과값************** 1 undefined console.log(b); ^ Ref.. 2023. 2. 6.
[JS] module과 import / export 1. Module JavaScript를 기반으로 한 다양한 프레임워크와 인터페이스들이 등장하면서, JavaScript만으로 완전한 어플리케이션을 만드는 것이 가능해졌다. 이에 따라 자연스레 코드의 양은 늘어나고 파일들을 기능이나 역할 단위로 나누기 위해 module이 도입되었다. 이 포스팅에선 JavaScript를 모듈화하여 사용하기 위해 export / import 하는 과정, 이를 html에서 불러와 사용하는 법을 다룰 것이다. export > import > module 모듈로써 사용하고자 하는 함수나 변수의 선언부 앞에 export를 적어준다. ( export function a() {}, export const a = "example" ) export로 선언된 함수를 사용하고자 하는 .js 파일.. 2023. 2. 5.
[JS] 비동기 처리 (1) - Promise 1. 비동기(Asynchronous)란? JavaScript는 싱글 쓰레드 프로그래밍 언어로 코드를 동기적으로 처리한다. 동기적(Synchronous)으로 처리하는 것과 비동기적(Asynchronous)으로 처리하는 것을 그림으로 살펴보자. 이러한 불필요한 대기 시간을 없애기 위해 개발자는 적절한 비동기 처리를 해주어야 할 때가 있는데, 그 때 사용할 수 있는 방법으로 콜백 함수, Promise, Async가 있다. 이번 포스팅에서는 Promise를 중점적으로 다룬다. 기본적으로 비동기를 지원하는 JavaScript 함수 중 setTimeout()을 통해 동기와 비동기를 코드로 보자. function printImmed(print) { print(); } function printDelay(print, .. 2023. 2. 4.
[JS] Currying 1. Currying(커링)이란? 여러 개의 인자를 가진 함수를 하나의 인자를 가진 함수들의 나열로 변환하는 수학적 기법이다. 이것은 추후 React의 상태 관리 라이브러리인 Redux의 컨셉에 필요하다고 하니 미리 알아보도록 하자. let x = f(a, b, c); // uncurried, x has multiple args let j = i(a); let k = j(b); let x = k(c); // x = k(c) >> x = j(b)(c) >> x = i(a)(b)(c) x = i(a)(b)(c); // curried, each function(i, j, k) has single arg(a, b, c) 2. JavaScript에서의 Currying 덧셈 연산 함수를 커링 function x(a.. 2023. 2. 3.
[JS] Spread Syntax (전개 구문, 전개 연산자) 1. Spread Syntax란? 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 요소(배열의 경우) 또는 인수(함수의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다. 쉽게 말해, 선언되어 하나의 객체로 묶인 요소들을 다시 전개해주는 것을 말한다. 코드로 살펴보자. 2. Spread Syntax 예제 배열에서의 전개 연산자 let hobby1 = ["게임", "헬스", "독서"]; let hobby2 = ["코딩", "스노우보드", "댄스"]; const hobby = [hobby1, hobby2]; const hobbySpread = [...hobby1, ...hobby2]; console.log(hobby); console.log(hobbySpread); /***.. 2023. 2. 2.
[JS] Prototype 1. Prototype이란? Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용한다. JavaScript는 흔히 '프로토타입 기반 언어(prototype-based language)'라 불린다. 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 '프로토타입 객체(prototype object)'를 가진다는 의미이다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있다.. 이를 '프로토타입 체인(prototype chain)'이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 해준다. 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다. 객체의 prot.. 2023. 2. 1.
[JS] 일급 객체와 일급 함수 (First-class Object & Function) 1. 일급 객체(First-class Object)란? 다른 객체들에 대해 기본적인 연산이 모두 가능한 객체를 가리킨다. 자기 자신을 변수에 대입한다거나 다른 객체의 인자로 넘긴다거나 하는 연산이 가능할 때 일급 객체라고 한다. 기본적으로 일급 객체를 구성하는 요소는 다음과 같은 권리가 있다. 모든 요소는 함수의 실제 매개변수가 될 수 있다. 모든 요소는 함수의 반환 값이 될 수 있다. 모든 요소는 할당 명령문의 대상이 될 수 있다. 모든 요소는 동일 비교의 대상이 될 수 있다. 2. 일급 함수(First-class Function)란? 함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현하는데, JavaScript는 그 대표적인 언어 중 하나이다. 위에서 언급한 일급 객체의 권리를 Ja.. 2023. 1. 30.
[JS] JSON (JavaScript Object Notation) 1. JSON(JavaScript Object Notation)이란? 이름에서 알 수 있듯이 JavaScript의 표현으로 객체를 기록하는 데이터 포맷이다. JavaScript의 구문 형식을 따르지만 언어 독립형 데이터 포맷이다. 즉, 프로그래밍 언어나 플랫폼에 독립적이므로, JSON을 생성하거나 파싱하는 것은 어느 언어로든 가능하다는 말이다. 객체 리터럴 표현({ key : value })과 배열 표현([value, value, ...])이 있다. 객체 리터럴 방식은 Key 값으로 Value를 구분하고 배열 선언 방식은 Index 값으로 Value를 구분한다. 리터럴 값을 불러올 때는 상위객체.key 로 접근하고, 배열 값을 불러올 때는 상위객체[index] 로 접근한다. JavaScript로 JSON.. 2023. 1. 29.
[JS] Node.js 설치 및 버전 관리 (npm, n in Mac) Node.js / node package manager / n package 필자는 이미 Node.js와 npm이 설치가 되어있기 때문에 전부 삭제한 후 버전 관리를 다시 해보려 한다. 세팅되어 있는 node를 다시 세팅하는 이유는 점점 사용하는 패키지들이 많아지면서 사용하지 않는 버전들이 관리가 안되어 로컬 디렉토리에 남아 난잡해지기 때문이다. 흔히들 사용하는 Homebrew를 통해 node을 깔고, npm(node package manager)을 통해 n 패키지를 설치해서 n으로 node 버전을 관리할 생각이다. n에 대해선 글 하단에 참조문서를 걸어두겠다. 설치 도중 HOMEBREW_NO_INSTALL_CLEANUP에 대한 문제가 발생해 현재 사용중인 셸인 ZSHELL 설정파일 .zshrc에 아래와.. 2023. 1. 28.
[JS] 구조 분해 할당(Destructuring Assignment) 1. 구조 분해 할당(Destructuring Assignment)이란? 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. Java에서 배열의 순서를 바꾸려면 값을 임시 변수에 저장한 후 하나씩 차례대로 옮겨줘야 하는데에 반해, JavaScript는 아주 편한 문법을 가지고 있다. Java 코드와 비교해서 보도록 하자 Java 배열 값 옮기기 // Java 코드 public class Exam { public static void main(String[] args) { int[] arr = { 1, 2, 3, 4 }; int a = arr[0];// 여기부터 for (int i = 0; i < arr.length - 1; i++) {// arr[i.. 2023. 1. 25.
반응형

티스토리툴바