무우너의 먹물 기록

TypeScript란? JavaScript + Type TypeScript를 쓰는 이유 1. Type이 엄격 JavaScript는 Dynamic Typing을 지원하기에 알아서 데이터 타입을 바꿔주며 오류가 발생하게 됨 -> 프로젝트가 커지면 문제가 발생할 확률 높아짐 2. 에러 메세지가 구체적 JavaScript의 경우 추상적인 에러가 많아 추적이 어려움 TypeScript는 오타, 타입 오류에 대해 에러를 반환함 TypeScript 설치 1. nodejs 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. VS..

JsDoc이란? JavaScript용 API 문서 생성기 => 즉 완전 유용한 주석이다 => VSCode, Webstorm 등 여러 IDE에서 지원함 일반적으로 사용하는 주석 /**/ // JsDoc 주석 /** * * */ => /** 으로 입력하면 사용 가능 일반 주석과의 공통점, 차이점 일반 주석 JSDoc 기능 함수의 기능 매개변수, 리턴값 함수의 기능 매개변수, 리턴값 주석 단 대상 hover 시 별 반응 없음 함수와 변수 등 주석을 단 내용이 보여짐 => 매개변수와 리턴값 이외에도 다양한 값 설정이 가능함 실제 사용되는 모습 /** * 이름과 나이 입력시 해당 내용으로 인사하는 함수 */ function Hi(name, age) { console.log(`hi $age years old $na..

다음의 코드가 실행되며 출력되는 내용은? (Jason이 제작한 퀴즈를 들고 왔습니다..) https://jason-log.vercel.app/JavaScript/this%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80./ this란 무엇인가. 자바스크립트에서 가장 어려운 개념을 뽑으라고 한다면 저는 와 실행컨텍스트를 선택할 것같은데요. 이번 post에서는 의 개념에 대해 알아보도록 해요. 상황에 따라 달라지는 this 자바스크립트 jason-log.vercel.app var str = 'React'; function outer() { console.log(str) console.log(this) function inner(){ console.log(str) console..

콜백 함수 콜백 함수란? 다른 코드(함수 || 메서드)의 인자로 넘겨주는 함수 제어권도 함게 위임함 제어권 호출 시점 setInterval scope : Window 객체 || Worker의 인스턴스 브라우저 환경에서는 window를 생략해서 함수처럼 사용 가능 세번째 매개변수 선택적 func 함수를 실행할 때 매개변수로 전달할 인자 어떠한 값도 리턴하지 않음 고유한 ID값 반환 ⇒ clearInterval(중간 종료)를 위해 var count = 0; var cbFunc = function() { console.log(count); if(++count > 4) clearInterval(timer); }; var timer = setInterval(cbFunc, 300); //실행 결과 //0 (0.3초..

실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체 호이스팅 외부 환경 정보 구성 this값 설정 실행컨텍스트란? 스택 : LIFO(Last In First Out) 큐 : FIFO(First In First Out) 콜 스택 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트 구성해 쌓아 올림 (동일한 환경 : 전역 공간, eval() 함수, 함수) 가장 위에 쌓여 있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서 보장 실행 컨텍스트 실행 순서(3) 전역 컨텍스트 > outer -inner 함수 내부 a변수에 3 할당 () 전역 컨텍스트 > outer a 값 출력(undefined) () 전역 컨텍스트 a 값 출력(1) (2) 전역 컨..

데이터 타입의 종류 기본형(primitive type) number(숫자) string(문자열) boolean(불리언) null undefined symbol Symbol() 함수로 생성(호출될 때마다 Symbol 값 생성 let mySymbol = Symbol(); console.log(mySymbol); //Symbol() console.log(typeof mySymbol); //symbol new 연산자 사용 X new Symbol(); //TypeError : Symbol is not a constructor Symbol()에는 문자열을인자로 전달 가능(설명용, 디버깅 용도로 사용됨) let symbolWithDesc = Symbol('chaz'); console.log(symbolWithDesc..

1. Optional Chaining { const person1 = { name : 'octopus-head', job : { title : 'student', professor : { name : '3J', }, }, }; const person2 = { name : '3J', }; function printManager(person){ console.log(person.job.manager.name); } printManager(person1); //오류 X printManager(person2); //오류 발생 { function printManager(person) { console.log(person.job ? person.job.manager ? person.job.manager.name :..

1. Shorthand property names : key와 name이 동일한 경우에는 짧게 작성 가능 { const chaz = { name : 'Chaz', age : '23' }; const name = 'Chaz'; const age = 23; const chaz2 = { //name : name, name, //age : age age }; } 2. Destucturing assignment //object { const student = { name ='Chaz', level :1, }; { const name = student.name; const level = student.level; console.log(name, level); } { const {name, level} = stude..

async, await : promise를 간편하고 동기적으로 실행되는 것처럼 보이게 함 - promise + api - promise chaining이 많이 발생하는 경우 사용 1. async 기존의 promise 방식 function fetchUser(){ // 네트워크 통신을 통해 백엔드에서 데이터를 가져오는 함수(대략 10초 걸림) // 오래걸리는 일은 비동기적으로 처리해줘야 유저가 시간 낭비 X return new Promise((resolve, reject)=> { resolve('octopus-head'); }); } async 사용해보기 async function fetchUser2(){ return 'octopus-head'; } //자동적으로 함수 안의 코드 블럭들이 promise로 변..

Promise : 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트 - 정해진 장시간의 기능을 수행하고 나서 정상적으로 실행 완료시 -> 결과값, 성공 메세지 - 문제 발생시 -> 에러 전달 1) state : 수행중(pending), 성공(fulfiled), 실패(rejected) 2) producer : 원하는 기능을 수행해 해당하는 데이터를 만듬 3) customer : 원하는 데이터를 소비 1) Producer - 새로운 promise가 생성되면 executor가 자동으로 바로 실행됨 let promise = new Promise((resolve, reject) => { // doing some heavy work(네트워크 통신, 파일 읽어오기) // -> 비동기적으로..