본문 바로가기

JS40

n 번의 비동기 요청 시 Promise 재귀함수 처리 n번의 비동기 요청 시 Promise 재귀함수 처리 상황 공공 API 데이터를 활용 중 최대 1000 개의 데이터만 불러올 수 있는 제한사항으로 인해 전체 데이터를 불러와 데이터를 추출하는 과정에 문제가 생겼다. 다행히 API 요청 결과 데이터 중 전체 데이터의 전체 개수를 나타내는 데이터가 존재해 이를 활용하여 n 번의 요청으로 (n x 1000) 개의 데이터를 가져오도록 설계하기로 했다. 설계 비동기 처리의 실행 순서를 보장하기 위해 async await 키워드를 사용 원하는 만큼의 API 요청하기 위해 재귀함수로 형태를 활용 코드 코드 설명 axios 패키지를 활용해 API 데이터를 처리할 함수를 선언 함수안에 재귀 함수로 활용할 함수 recursiveReq를 async 키워드와 함께 선언 axio.. 2023. 11. 16.
[JS] 자세히 알아둬서 나쁠 것 없는 정규 표현식과 사용방법 정규 표현식(Regular Expression) 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴을 의미합니다. 정규 표현식 선언 // 리터럴 방식 const re = /ab+c/; // 객체 선언 방식 const re = new RegExp("ab+c"); 정규 표현식 모양새 / 패턴 / 플래그 정규표현식 매칭 패턴 패턴 의미 a-zA-Z 영어알파벳(-으로 범위 지정) ㄱ-ㅎ가-힣 한글 문자(-으로 범위 지정) 0-9 숫자(-으로 범위 지정) . 모든 문자열(숫자, 한글, 영어, 특수기호, 공백 모두) 단, 줄바꿈 X \d 숫자 \D 숫자가 아닌 것 \w 밑줄 문자를 포함한 영숫자 문자에 대응 [A-Za-z0-9_] 와 동일 \W \w 가 아닌 것 \s space 공백 \S sp.. 2023. 10. 16.
JS 공부는 다다익선 - 13. REST API 1. REST(Representational State Transfer) REST 는 웹의 장점을 최대한 활용할 수 있는 아키텍쳐로서 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 “RESTful”이라고 표현한다. 2. REST API 중심 규칙 REST에서 가장 중요한 기본적인 규칙은 두 가지이다. 2.1 URI는 정보의 자원을 표현해야 한다. 리소스명은 동사보다는 명사를 사용한다. URI는 자원을 표현하는데 중점을 두어야 한다. get 같은 행위에 대한 표현이 들어가서는 안된다. # bad GET /getTodos/1 GET /todos/show/1 # good GET /todos/1 2.2 자원에 대한 행위는 HTTP Metho.. 2023. 10. 6.
JS 공부는 다다익선 - 12. 이벤트 1. 이벤트의 이해 이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없으므로 일반적인 제어 흐름과는 다른 접근 방식이 필요하다. 즉, 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 한다. 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지해 준다. 이 과정을 통해 사용자와 웹페이지는 상호작용(Interaction)이 가능하게 된다. 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. 이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다. 2. 이벤트 루프(Event Loop)와 동시성(Concurrency) 이벤트 루프(Event Loop)는 이벤트 리스너를 관리하고, 이.. 2023. 10. 4.
JS 공부는 다다익선 - 11. 상속과 캡슐화 1. 상속 (Inheritance) 클래스 기반 언어에서 객체는 클래스의 인스턴스이며 클래스는 다른 클래스로 상속될 수 있다. 자바스크립트는 기본적으로 프로토타입을 통해 상속을 구현한다. 이것은 프로토타입을 통해 객체가 다른 객체로 직접 상속된다는 의미이다. 이러한 점이 자바스크립트의 약점으로 여겨지기도 하지만 프로토타입 상속 모델은 사실 클래스 기반보다 강력한 방법이다. 자바스크립트의 상속 구현 방식은 크게 두 가지로 구분할 수 있다. 하나는 클래스 기반 언어의 상속 방식을 흉내 내는 것(의사 클래스 패턴 상속. Pseudo-classical Inheritance)이고, 두번째는 프로토타입으로 상속을 구현하는 것(프로토타입 패턴 상속. Prototypal Inheritance)이다. 2.1 의사 클래스.. 2023. 9. 28.
JS 공부는 다다익선 - 10. 클로저(closure) 1. 클로저(closure)의 개념 클로저는 자바스크립트만의 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programming language)에서 사용되는 중요한 특성이다. 자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우, 외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근할 수 있는데 이러한 함수를 클로저(Closure)라고 부른다. 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있다. ※ 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는.. 2023. 9. 28.
JS 공부는 다다익선 - 9. 함수 호출과 this 1. 자바스크립에서 this 의 의미 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다. Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. 하지만 자바스크립트의 경우 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 2. 함수 호출 방식과 this 바인딩 자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프(.. 2023. 9. 28.
JS 공부는 다다익선 - 8. 스코프(Scope) 1. 스코프란? 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다. 변수는 전역 또는 코드 블록(if, for, while, try/catch 등)이나 함수 내에 선언하며 코드 블록이나 함수는 중첩될 수 있다. 식별자는 자신이 어디에서 선언됐는지에 의해 자신이 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 갖는다. 2. 스코프의 구분 자바스크립트에서 스코프를 구분해보면 다음과 같이 2가지로 나눌 수 있다. 전역 스코프 (Global scope): 코드 어디에서든지 참조할 수 있다. 지역 스코프 (Local scope or Function-le.. 2023. 9. 22.
JS 공부는 다다익선 - 7. prototype 1. 프로토타입 객체 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 **Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다. ※ Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. 2. [[Prototype]] vs prototype 프로퍼티 모든 객체는 자신의 프로토타입 객체를 가리키는 [[Prototype]] 인터널 슬롯(internal slot) 을 갖으며 상속을 위해 사용된다. 함수도 객체이므로 [[Prototype]] 가지면서 함수 객체는.. 2023. 9. 21.
JS 공부는 다다익선 - 6. 타입 체크 자바스크립트는 동적 타입(dynamic typed) 언어이므로 변수에 어떤 값이 할당될 지 예측하기 어렵기 때문에 자바스크립트는 타입 체크가 필요하다. 1. typeof 타입 연산자(Type Operator) typeof는 피연산자의 데이터 타입을 문자열로 반환한다. ※ typeof 연산자는 null과 배열의 경우 object, 함수의 경우 function를 반환하고, Date, RegExp, 사용자 정의 객체 등 거의 모든 객체의 경우, object를 반환한다. 객체의 종류까지 구분할 수 없다. typeof ''; // string typeof 1; // number typeof NaN; // number typeof true; // boolean typeof []; // object typeof {}.. 2023. 9. 21.
JS 공부는 다다익선 - 5. 함수(Function) 1. 함수 정의 함수를 정의하는 방식은 3가지가 있다. 함수 선언문 함수 표현식 Function 생성자 함수 1.1 함수 선언문 기본적인 함수 형태로 함수 선언문(Function declaration) 방식으로 정의한 함수는 function 키워드와 이하의 내용으로 구성된다. 함수명: 함수 선언문의 경우, 함수명은 생략할 수 없다. 함수명은 함수 몸체에서 자신을 재귀적(recursive) 호출하거나 자바스크립트 디버거가 해당 함수를 구분할 수 있는 식별자이다. 매개변수 목록: 0개 이상의 목록으로 괄호로 감싸고 콤마로 분리한다. 다른 언어와의 차이점은 매개변수의 타입을 기술하지 않는다는 것이다. 이 때문에 함수 몸체 내에서 매개변수의 타입 체크가 필요할 수 있다. 함수 몸체: 함수가 호출되었을 때 실행되.. 2023. 9. 21.
JS 공부는 다다익선 - 4. 객체(Object) 1. 객체(Object)란? 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다. 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있으므로 프로퍼티 값으로 함수를 사용할 수도 있다. 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 프로토타입(prototype)이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 이 프로토타입은 타 언어와 구별되는 .. 2023. 9. 20.

티스토리툴바