Javascript & Typescript

해당 글은 Javascript 내에서 함수의 실행시간을 측정하는 방법들을 설명하는 글입니다. 1) Date()를 이용한 측정방식 💡 해당 방식은 함수 시작전에 도출한 new Date() 값과 함수 종료후에 도출한 new Date() 값을 이용하여 두개의 차이를 계산하여 함수 수행속도를 측정하는 방식입니다. 해당 방식은 '밀리초(ms)' 단위로 경과한 시간을 반환해 줍니다. const fn_methodDate = () => { let sum: number = 0; let loopCnt: number = 10000000; // 루프 수행 횟수 const _startTime: number = new Date().getTime(); // 시작시간 for (let i = 0; i < loopCnt; i++) { ..

해당 글은 타입스크립트(Typescript)란 무엇이며, 어떻게 동작이 되고 어떠한 특징을 가지고 있는지에 대해 이해하기 위한 글입니다. 1) 타입스크립트(Typescript) 란? 💡 Microsoft에서 개발하고 유지/관리 되는 Apache 라이센스가 부여된 오픈 소스이다. 💡 타입스크립트는 자바스크립트의 슈퍼셋(Superset)이며, 자바스크립트에 '타입'을 부여한 언어를 의미한다. 2) 타입스크립트(Typescript) 동작 과정 1. 타입스크립트의 동작 과정 및 요약 1. 개발자가 '타입스크립트 코드'로 작성을 한다 2. 작성한 타입스크립트 코드는 '타입스크립트 컴파일러(tsc)'를 통해 파싱하여 '타입스크립트 AST 코드'로 변환된다. 3. '타입 검사기(Typechecker)'를 통하여 파싱..

해당 글은 이전 Promise에 대한 정의에 이어서 추가로 이해할 Promise Chaning, Promise.all 그리고 async/await 구문에 대해서 이해하기 위한 글입니다. 이전 Promise에 대한 정의가 궁금하면 아래에 이전 글을 참조하였습니다 [JS] Promise 이해하기 -1 (콜백함수, 정의, 요청상태) 해당 글은 Promise를 사용하기 이전에 callback 함수를 사용할 때와의 비교 및 Promise에 대한 이해 그리고 Promise의 요청 상태에 대해서 이해하기 위한 글입니다 1. Promise를 사용하기 이전 비동기 처리 adjh54.tistory.com 1) 프로미스 체이닝(Promise Chaning) 💡 비동기 함수의 처리 결과를 가지고 다른 비동기 함수를 호출하는 ..

해당 글은 Promise를 사용하기 이전에 callback 함수를 사용할 때와의 비교 및 Promise에 대한 이해 그리고 Promise의 요청 상태에 대해서 이해하기 위한 글입니다 1) Promise를 사용하기 이전 비동기 처리 방식 💡 해당 Promise는 이전에 비동기 통신을 할 때 사용되는 '콜백 함수'의 단점을 보완하기 위해서 추가가 되었으며 아래는 Promise 객체가 생겨나게 된 이전 콜백 함수의 문제점입니다. 1. 콜백 함수(Callback) 💡 콜백 함수(Callback) - 특정 함수 내 인자로 다른 함수를 받아서 어떤 이벤트나 특정 시점에 도달하였을 때, 시스템에서 인자로 받은 함수를 호출하는 것을 의미합니다. 💡 콜백 함수의 문제점 1. 콜백 패턴을 사용하여 처리 순서를 보장하기 위..

해당 글은 자바스크립트 라이브러리 'Prettier'에 대해서 이해하고 환경설정을 하기 위한 목적으로 작성된 글입니다. 1) Prettier 이해하기 💡 Prettier는 코드를 읽어 들여서 사용자가 지정한 '옵션'에 따라 코드를 다시 포맷팅(정렬)하는 "코드 포맷터"입니다. 코드 스타일에 초점을 맞추고 있기 때문에, 코드 품질을 위해 사용하는 ESLint와는 성격이 다릅니다 Prettier 지원 언어들 * JavaScript (including experimental features) * JSX * Angular * Vue * Flow * TypeScript * CSS, Less, and SCSS * HTML * JSON * GraphQL * Markdown, including GFM and MDX *..

해당 글의 목적은 배열에 대한 반복문으로써 필요한 데이터에 대해 도출해 내는 함수에 대해서 공부하는 목적으로 작성하였습니다. 루프와 반복 함수 요약본 함수 설명 함수 반환값 반복문 return 값 추가 시점 for 배열내에서 객체를 반환받기 위해서 순회를 하는 함수이다. undefined 속성(key), 속성값(value) 반환 ES5 이전 for/in 배열내에서 객체값을 반환받기 위해서 순회를 하는 함수이다. undefined 속성값(value) 반환 ES5 이전 for/of 배열내에서 객체를 반환받기 위해서 순회를 하는 함수이다. (배열 뿐만 아니라 이터러블한 객체를 모두 순회할 수 있음) undefined 속성(key), 속성값(value) 반환 ES6 forEach 배열내에서 객체를 반환받기 위해..

해당 글의 목적은 Javascript의 ES5와 ES6에 대한 기능들을 이해하며 사용법을 익히는 목적으로 작성하였습니다. 1) ES5 / ES6란 무엇인가? 💡 ES(ECMAScript)는 ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. ECMAScript 버전은 ES1, ES2, ES3, ES5 및 ES6으로 축약이 되었으며, 2016년부터 새 버전의 이름은 연도별로 지정됩니다(ECMAScript 2016/2017/2018). Javascript ES5 ECMAScript 2009는 JavaScript의 첫 번째 주요 개정판입니다 Javascript ES6 ECMAScript 2015는 JavaScript의 두 번째 주요 ..

Javascript에 대한 변수를 이해하여, 필요 상황에 따라 적절하게 사용하는 방법을 익힘 ES5와 대비하여서 ES6에서는 const, let 변수가 추가 되었으며,var 변수보다는 const, let 변수를 사용하는것을 '지향'한다. 1) 변수 설명 변수란? 어떤 문자 혹은 숫자, 진위, 배열 등과 같이 하나의 공간에 담아두었다가, 필요할때 꺼내쓰기 위한것을 의미한다. 변수는 문자형, 숫자형, 진위형, 배열형, 객체형 등.. 다양한 변수 공간에 다양한 타입을 넣을 수 있다. // 문자형 (String) var userId = "adjh54"; const userId = "adjh54"; let userId = "adjh54" // 숫자형 (Number) var userAge = 20; const us..