Javascript & Typescript/이해하기

해당 글은 자바스크립트/타입 스크립트 내에서 의존성에 대해서 이해를 하고 상황에 따라 의존성을 설치해야 하는 이유에 대해 이해하고 관리하기 위한 방법과 관련된 글입니다. 1) 라이브러리 의존성 관리 💡 Javascript 내에서 라이브러리의 의존성 관리를 위한 종류는 3가지로 나뉩니다. 종류 설명 dependencies 현재 프로젝트를 실행하는데 필수적인 라이브러리들이 포함이 됩니다. 이는 컴파일을 수행하고 런타임 단계에서 수행되는 라이브러리들이 이에 해당 됩니다. devDependencies 현재 프로젝트를 개발하고 테스트를 하는데 사용되지만, 런타임에는 필요 없는 라이브러리들이 포함이 됩니다. 이는 런타임 단계에서는 수행되지 않고 이전 컴파일 단계에서까지만 수행되는 라이브러리가 해당 됩니다. ex) ..

해당 글은 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. 콜백 패턴을 사용하여 처리 순서를 보장하기 위..

해당 글의 목적은 배열에 대한 반복문으로써 필요한 데이터에 대해 도출해 내는 함수에 대해서 공부하는 목적으로 작성하였습니다. 루프와 반복 함수 요약본 함수 설명 함수 반환값 반복문 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..