웹/JavaScript
-
[이펙티브 타입스크립트] 5장 any 다루기웹/JavaScript 2023. 7. 24. 09:57
5장 any 다루기 타입 스크립트의 타입 시스템은 선택적이고 점진적이기 때문에, 정적이면서 동적인 특성을 가지고 있다. item 38. any 타입은 가능한 한 좁은 범위에서만 사용하기 - Blink 예시 ) any 로 선언을 하지만 @ts-ignore을 사용해서 강제로 타입 오류를 제거 class Form extends React.Component { constructor(props: any) { super(props) const initialState: any = { goodsName: '', moid: '', amount: '', buyerName: '', buyerTel: '', buyerEmail: '', returnURL: '', ReqReserved: '', ediDate: '', hashS..
-
[이펙티브 타입스크립트] 3장 타입 추론 (1)웹/JavaScript 2023. 6. 12. 10:00
3장 타입 추론 타입 스크립트는 타입 추론을 적극적으로 수행한다. 아이템 19. 추론 가능한 타입을 사용해 장황한 코드 방지하기 코드의 모든 변수에 타입을 선언하는 것은 비생산적이며 형편없는 스타일로 여겨진다. 타입 추론이 된다면 명시적 타입 구문은 필요하지 않다. 방해만 될 뿐이다. 함수 매개변수에 타입 구문을 생략하는 경우도 간혹 있다. 예를 들어 기본값이 있는 경우를 예로 들자. TypeScript에서 함수 매개변수의 타입 구문을 생략하는 경우, 타입 추론을 통해 매개변수의 타입을 유추하도록 할 수 있습니다. 이를 "타입 추론"이라고 합니다. 타입 추론은 변수의 할당값이나 함수의 반환값을 기반으로 해당 변수 또는 매개변수의 타입을 추론하는 TypeScript의 기능입니다. 예를 들어, 다음과 같이 ..
-
[Javascript] 모던자바스크립트 딥 다이브 7일차 (완독)웹/JavaScript 2023. 1. 31. 09:11
42. 비동기 프로그래밍 실행 컨텍스트 스택 - 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이를 콜 스택 또는 실행 컨텍스트 스택이라고 부른다. - 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다. - 싱글 스레드 방식으로 동작하여 작업 시간이 걸리는 테스크를 실행할 경우 , 블로킹(작업 중단)이 발생한다. so, 동기 처리 단, 타이머 함수인 setTimeout과 setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다. 44. REST API REST API 구성 - 자원, 행위, 표현 (REsource, verb, represenTations)의 3가지 요소로 구성된다. - URI는..
-
[Javascript] 모던자바스크립트 딥 다이브 6일차 (~753p)웹/JavaScript 2023. 1. 27. 08:47
35. 스프레드 문법 배열 리터럴 내부에서 사용하는 경우 1. concat es5에서 2개의 배열을 1개의 배열로 결합하고 싶은 경우 배열 리터럴만으로 해결할 수 없고 concat 메서드를 사용해야 한다. arr.concat([3,4]) 2. splice const arr = [1,2] const arr2 = [3,4] arr.splice(2,0,arr2) //[1,2,[3,4]] 3. 스프레드 문법 const arr = [1,2] const arr2 = [3,4] arr.splice(2,0,...arr2) // [1,2,3,4] 단, 유사 배열 객체는 문법의 대상이 될 수 없다. const object1 = { 0 : 1, 1 : 2, length : 2 }; const arr = [...object1..
-
[Javascript] 모던자바스크립트 딥 다이브 5일차 (~613p)웹/JavaScript 2023. 1. 26. 08:07
28. Number 표준 빌트인 객체인 Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. //문자열 타입 => 숫자 타입 Number('2.3') // 2.3 //boolean 타입 => 숫자 타입 Number(true) // 1 Number(false) // 0 Number.isNaN Number.isNaN 정적 메서드는 인수로 전달된 숫자값이 NaN인지 검사하여 그 결과를 불리언 값으로 반환한다. //Number.isNaN은 암묵적 타입 변환 X Number.isNaN(NaN) // true Number.isNaN(undefined) // false //isNaN은 인수를 숫자로 암묵적 타입 변환한다. isNaN(undefined) // true Number.protot..
-
[Javascript] 모던자바스크립트 딥 다이브 4일차 (~551p)웹/JavaScript 2023. 1. 25. 12:15
25. 클래스 constructor 생성자 함수와 유사하지만 몇 가지 차이가 있다. constructor는 클래스 내에 최대 한 개만 존재할 수 있다. 만약 2개 이상인 경우 문법 에러가 발생한다. constructor를 생략하면 빈 constructor가 암묵적으로 정의된다. return(명시적으로 원시값을 반환하면) 무시되고 암묵적으로 this가 반환된다. constructor 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 클래스의 기본 동작을 훼손한다. 따라서 return문을 반드시 생략해야 한다. 프로토타입 메서드 생성자 함수를 사용해서 인스턴스를 생성할 경우 명시적으로 프로토타입에 메서드를 추가해야 한다. 하지만 클래스 메서드는 기본적으로 프로토타입 메서드가 된다. 클래스 필드 클..
-
[Javascript] 모던자바스크립트 딥 다이브 3일차 (~416p)웹/JavaScript 2023. 1. 23. 19:03
24. 클로저 상위 스코프 함수 객체의 내부 슬롯 [[Environment]]에 저장된 현재 실행 중인 실행 컨텍스트의 렉시컬 환경의 참조를 말한다. 함수 객체는 내부슬롯 [[Environment]]에 저장한 렉시컬 환경의 참조 , 즉 상위 스코프를 자신이 존재한 한 기억한다. 자신이 호출되었을 때 생성될 함수 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장될 참조값이다. 클로저 클로저는 자바스크립트 고유의 개념이 아니므로 ECMAScript 명세에 클로저의 정의가 등장하지 않는다. 클로저에 대해 MDN은 아래와 같이 정의하고 있다. “A closure is the combination of a function and the lexical environment within which that fu..
-
[코딩 테스트] 프로그래머스 JS 연습 - 가위바위보, 인덱스 바꾸기, 모스부호(1), 영어가 싫어요, 7의 개수웹/JavaScript 2023. 1. 18. 17:53
1. 가위바위보 문제 설명 가위는 2 바위는 0 보는 5로 표현합니다. 가위 바위 보를 내는 순서대로 나타낸 문자열 rsp가 매개변수로 주어질 때, rsp에 저장된 가위 바위 보를 모두 이기는 경우를 순서대로 나타낸 문자열을 return하도록 solution 함수를 완성해보세요. function solution(rsp) { var obj = { "0" : 5, "2" : 0, "5" : 2 } return rsp.split('').map(x => obj[x]).join('') } 객체는 obj[key] = value 라는 것을 이용해서 rsp를 split한 후 map 메소드를 이용하였다. 2. 인덱스 바꾸기 문제 설명 문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_st..