Language/JavaScript & TypeScript7 [TypeScript] Basic Nest, Next는 타입스크립트를 기본 언어로 채택하고 있다. 자바스크립트로 물론 바꿀 수 있지만 타입스크립트의 장점을 누리기 위해 기본 설정으로 사용하길 추천!마이크로소프트에서 개발한 언어이다. 자바스크립트 코드에 타입 시스템을 도입하여 런타임에 에러가 발생할 가능성이 있는 코드를 정적 분석으로 찾아준다. 타입스크립트는 자바스크립트에 구문을 추가하여 만들어 졌다. tsc 명령으로 컴파이랗여 자바스크립트 코드로 변환이 가능하다. 컴파일 후 생성된 자바스크립트는 타입이 없다. 자바스크립트에 원래 타입이 없기 때문인데, 타입스크립트가 제공하는 타입 추론은 타입오류로 인해 런타임에 발생하는 오류를 컴파일 타임에 잡아준다.const user = { firstName: 'Dexter', lastNa.. 2025. 4. 10. [JavsScript] this this 에 대해서자바스크립트에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다.arguments라는 유사 배열 객체와 함께 함수 내부로 암묵적으로 전달되는 것이다. 그렇기 때문에 자바스크립트에서의 this는 함수가 호출된 상황에 따라 그 모습을 달리한다.1. 객체의 메서드를 호출할 때객체의 프로퍼티가 함수일 경우 메서드라고 부른다.this는 함수를 실행할 때 함수를 소유하고 있는 객체(메소드를 포함하고 있는 인스턴스)를 참조한다.즉 해당 메서드를 호출한 객체로 바인딩된다. A.B일 때 B함수 내부에서의 this는 A를 가리키는 것이다.var myObject = { name: "foo", sayName: function() { console.log(this); }};myO.. 2025. 4. 9. [JavaScript] Async/Await function 키워드 앞에 async를 붙여주면 되고 function 내부의 promise를 반환하는 비동기 처리 함수 앞에 await을 붙여주기만 하면된다.Arrow function에도 사용이 가능하다.promise를 더 간결하고 이쁘게awaitpromise가 해결될 때까지 기다려주세요...then 대신 사용가능Promise의 문제점디버깅then() 을 연쇄적으로 호출하면 몇 번째 then()에서 문제가 발생한건지 혼란스러울 수 있다.then() 메서드 호출부에 break point를 걸고 디버깅하면 화살표 함수로 한 줄 짜리 콜백함수를 넘겼을 경우 break point에서 멈추지 않아 불편하다.예외처리catch() 메서드를 사용해 예외처리를 하는데 비동기 코드만 있으면 괜찮은데, 동기와 비동기가 섞.. 2024. 11. 28. [JavaScript] Promise 콜백이 중첩되는 경우(콜벡헬)가 발생하면서, 이를 해결할 방안으로 등장!Promise 패턴을 사용하면 비동기 작업들을 순차적으로 진행하거나, 병렬로 진행하는 등의 컨트롤이 보다 수월해진다.또한 예외처리에 대한 구조가 존재하기 때문에 오류 처리 등에 대해 보다 가시적으로 관리 가능!그러니까 Promise 쓰면 then만 하지말고 꼭 catch로 에러도 잡아주자!let promiseEx = function (param) { return new Promise(function (resolve, reject) { // promise 객체에서 파라미터로 익명함수를 받고 그 익명함수는 resolve와 reject를 파라미터로 받음 // 비동기 표현 window.setTimeout(() .. 2024. 11. 28. [JavaScript] Closure 두 개의 함수로 만들어진 환경으로 이루어진 특별한 객체의 한 종류환경은 클로저가 생성될 때 그 범위에 있던 여러 지역 변수들이 포함된 context를 의미클로저를 통해서 자바스크립트에는 없는 private 속성/메서드, public 속성/메서드 를 구현할 수 있는 방안을 바련할 수 있다.생성방법조건내부 함수가 익명 함수로 되어 외부 함수의 반환값으로 사용된다.내부 함수는 외부 함수의 실행환경에서 실행된다.내부 함수에서 사용되는 변수 x는 외부 함수의 변수 스코프에 있다.function outer() { var name = 'closure'; function inner() { console.log(name); } inner();}outer();// closureouter .. 2024. 11. 28. [JavaScript] Hoisting Scope함수레벨 블록레벨의 렉시컬 스코프 규칙을 따른다. (ES6 기준)Scope Level자바스크립트는 전통적으로 함수 레벨 스코프를 지원했고, 블록 레벨 스코프는 지원하지 않았다.이는 ES6 부터!!함수 레벨 스코프var 키워드로 선언된 변수나, 함수 선언식으로 만들어진 함수는 함수 레벨 스코프를 갖는다. 즉 , 함수 내부 전체에서 유효한 식별자가 된다. function foo() { if(true) { var color = 'blue'; } console.log(color); // blue } foo();만약 var color가 블록 레벨 스코프였다면 , color는 if문이 끝날때 파괴되고 에러가 발생한다.하지만 color는 함수레벨의 스코프이기 때문에 foo 함수 내부 어디에서든 에러 발생없.. 2024. 11. 28. 이전 1 2 다음
