JavaScript&TypeScript22

• 

  [JS] 이벤트 루프와 콜백 함수 이벤트 루프 https://www.youtube.com/watch?v=8aGhZQkoFbQ 꼭 보세요! 자바스크립트는 단일 스레드(Single-threaded) 기반 언어 로, 자바스크립트 엔진이 단일 콜 스택을 갖는다. 이 말은 요청이 동기적으로 처리된다는 것을 의미한다. 그렇다면 비동기 요청은 어떻게 처리될 수 있을까? 그것은 바로 자바스크립트를 실행하는 환경인 브라우저나 Node.js가 담당한다. 여기서 자바스크립트 엔진과 그 실행 환경을 상호 연동시켜주는 장치가 바로 이벤트 루프이다. 따라서, 이벤트 루프는 자바스크립트 엔진에 있지 않고 그 환경에 속한다. 태스크 큐(Task queue)와 마이크로태스크 큐(Microtask queue) 자바스크립트의 실행 환경은 2가지 큐를 가지고 있으며 각각 .. JavaScript&TypeScript 2023. 4. 8.

• [JS] async와 await async와 await async/await는 자바스크립트에서 비동기 처리를 보다 간편하게 해주는 문법입니다. async 함수는 항상 Promise를 반환하며, await 키워드를 사용하면 Promise가 처리될 때까지 기다리게 됩니다. 이렇게 기다리는 동안 다른 작업을 처리할 수 있기 때문에, 비동기 처리를 할 때 코드의 가독성과 유지보수성이 좋아집니다. async function fetchUserData(userId) { try { const response = await fetch(`https://api.example.com/users/${userId}`); const userData = await response.json(); return userData; } catch(error) { conso.. JavaScript&TypeScript 2023. 4. 7.

• [JS] Arrow Function(화살표 함수) Arrow Function(화살표 함수) Arrow Function은 ES6(ECMAScript 2015)에서 추가된 함수 표현식입니다. 기존의 함수 표현식보다 간결하고 가독성이 높아 코드 작성 시 유용하게 사용됩니다. Arrow Function은 function 키워드 대신에 화살표(=>)를 이용하여 함수를 정의합니다. 함수의 매개변수가 하나인 경우 괄호(())를 생략할 수 있습니다. 또한 함수 내부의 코드가 한 줄인 경우 중괄호({})를 생략하고 바로 반환값을 지정할 수 있습니다. 아래는 Arrow Function을 사용한 예시입니다. // 기존의 함수 표현식 function double(x) { return x * 2; } // Arrow Function 사용 const double = (x) =>.. JavaScript&TypeScript 2023. 4. 6.

• [JS] Hoisting Hoisting Hoisting(호이스팅)은 자바스크립트에서 변수와 함수 선언이 스코프의 상단으로 끌어올려지는 현상을 말합니다. 이는 코드 실행 전에 변수와 함수가 메모리에 할당되어 해당 스코프에서 사용할 수 있도록 하는 것입니다. 이러한 Hoisting 현상은 변수와 함수를 선언하기 전에도 참조할 수 있는 특징을 가집니다. 다만, 선언되지 않은 변수에 값을 할당하려고 하면 ReferenceError가 발생합니다. var의 경우, 변수를 선언하기 전에 변수를 사용하면 undefined를 반환합니다. let과 const는 TDZ에 의해 ReferenceError를 발생시킨다. console.log(x); // undefined var x = 10; 함수의 경우, 함수 선언문(function declarat.. JavaScript&TypeScript 2023. 2. 17.

• [JS] Promise Promise Promise는 자바스크립트에서 비동기적인 작업을 처리하기 위한 객체입니다. Promise는 비동기 작업의 결과를 나타내는 객체로서, 작업이 성공하면 성공한 결과를, 실패하면 실패한 이유를 반환합니다. Promise 객체는 대기(pending), 이행(fulfilled), 거부(rejected) 세 가지 상태를 가집니다. 대기 상태는 작업이 아직 수행되지 않은 상태이며, 이행 상태는 작업이 성공적으로 수행된 상태이며, 거부 상태는 작업이 실패한 상태입니다. Promise 객체는 주로 비동기 작업을 처리할 때 사용됩니다. 비동기 작업을 수행하고, 작업이 완료되면 Promise 객체를 반환합니다. 그리고 이후에 해당 Promise 객체의 상태를 확인하여 작업의 성공 여부를 판단합니다. Prom.. JavaScript&TypeScript 2023. 2. 12.

• [JS] var, let, const var var은 ES5 이전부터 사용되던 변수 선언 방법입니다. var로 선언한 변수는 함수 스코프(Function Scope)를 가집니다. 이는 해당 변수가 선언된 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없습니다. 또한, 중복 선언이 가능하며, 변수를 재할당할 수 있습니다. var x = 10; var x = 20; // 중복 선언 가능 function example() { var x = 30; console.log(x); // 30 } example(); console.log(x); // 10 let, const let과 const는 ES6에서 새로 도입된 변수 선언 방법입니다. let과 const로 선언한 변수는 블록 스코프(Block Scope)를 가집니다. 이는 해당 변수가 선언된 .. JavaScript&TypeScript 2023. 2. 7.

• TypeScript 과제 문제 1 /* 1. myDiverseArray와 anotherDiverseArray에 적용할 수 있는 제네릭 타입 MyDiverseArray를 만드세요. 힌트: 타입도 변수처럼 type alias로 선언 가능. */ type MyDiverseArray = {}; const myDiverseArray = [true, 100, 101, 102, false]; const anotherDiverseArray = [ myDiverseArray, "backend developer", { name: "hermione" }, ]; 나의 풀이 type MyDiverseArray = T[]; type Name = { name : string } const myDiverseArray : MyDiverseArray = [tr.. JavaScript&TypeScript 2023. 1. 30.

• TypeScript Generic 사용해보기 제네릭을 활용해 객체 만들어보기 type Player = { name : string extra : T } type ExtraPlayer = { name : string } const mandu : Player = { name : 'MANDU', extra : { name : 'MOZZI' } } const mozzi : Player = { name : 'MOZZI', extra : 'MANDU' } 제네릭을 활용해 함수 만들어보기 type Add = { ( arr : T[]) : number } const add : Add = (arr) => { return arr.length } function add2(arr : T[]) : number{ return arr.length } const du = ad.. JavaScript&TypeScript 2023. 1. 27.

• TypeScript 미리 써보는 공식사이트 https://www.typescriptlang.org/ko/play?#code/C4TwDgpgBACgTgSwHbCgXigbwFBT1ACgEM44oAuKAZ2ESQHMBtAXQEoKoA3AewQBNc+YqQ5IArgFsARhDgt2lHv0F5hZSlO7cANhCJJ5HJQIC+2bAGNuSGlCId4yVBjXs0APiwq7pAHQAzbjgAUSILAAsCCG10TysbHQhfbW56KO1WVmwzIgJGAEYAGgAmQoAWNmxcxn8ibSoIQqhaMQhK7CA TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online .. JavaScript&TypeScript 2023. 1. 27.

• TypeScript enum 너란 존재 . Tree-shaking은 무엇인가요? Tree-shaking이란 간단하게 말해 사용하지 않는 코드를 삭제하는 기능을 말합니다. 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 Tree-shaking이라고 부릅니다. Tree-shaking을 통해 export했지만 아무 데서도 import하지 않은 모듈이나 사용하지 않는 코드를 삭제해서 번들 크기를 줄여 페이지가 표시되는 시간을 단축할 수 있습니다. enum은 무엇인가요? enum은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능입니다. 임의의 숫자나 문자열을 할당할 수 있으며 하나의 유형으로 사용해서 버그를 줄일 수 있습니다. // 아무것도 지정하지 않은 경우에는 0부터 숫자를 매깁니다. enum MOBILE_OS { IOS, // 0 ANDROI.. JavaScript&TypeScript 2023. 1. 20.

• TypeScript 총정리 지금까지 배운 TypeScript 총정리 함수 기본 function add(...nums: number[]): number { return nums.reduce((result, curr) => result + curr, 0); } add(1, 2); // 3 add(10, 20, 30); // 60 function hello(name?: string): string { return `Hello ${name || "World"}`; } hello(); // Hello world hello("OGH"); // Hello OGH type type Score = "A" | "B" | "C" | "D"; interface User { name: string; age: number; gender?: string; .. JavaScript&TypeScript 2023. 1. 19.

• TypeScript Class 접근 제한자와 readonly Class의 선언 class Mozzi { readonly name : string = "아라" readonly boyFriend : string = "없음" constructor( boyFriend : string) { this.boyFriend = boyFriend } start() { console.log("2023.01.11 Start") } } Mozzi 라는 class를 정의한다 Mozzi.name = "아라" Mozzi.boyFriend = "없음" 처음 정의한 Mozzi.boyFriend는 "없음"이지만 constructor을 통해 boyFriend를 주입해 줄 수 있다. const 모찌 = new Mozzi("길환") // 모찌.boyFriend를 외부에서 임의로 변경할 수 없다 모찌.b.. JavaScript&TypeScript 2023. 1. 18.