본문 바로가기
728x90

프론트엔드111

[TypeScript] 타입스크립트 함수 Rest Parameter (가변 인자) [타입스크립트 / TypeScript] Function Rest Parameter 🔆 타입스크립트 Rest Parameter란 ? 함수의 파라미터 개수를 가변적으로 전달 받을수 있는 기능을 수행할수 있게 파라미터에 기능을 부여하는 것 🔆 기본 형태 function 함수이름(...파라미터이름 : 타입 []):반환타입 { //기능 수행.. } 🔆 샘플 예제 function PrintResult(...Numbers:number []):void { const result = Numbers.reduce((a,b)=>a+b); console.log(result); } PrintResult(1,2,3,4,5,6,7,8,9,10); 🔆 출력 결과 55 2021. 6. 24.
[TypeScript] 타입스크립트 함수 Optional Parameter [TypeScript / 타입스크립트] Optional Parameter 🍔 Optional Parameter란? 함수내에 인자를 전달 하지 않아도 주어진 함수의 기능을 수행하게 하기위해 인자에 따로 옵션을 부여하는 방식 🍔 기본 형태 //파라미터 이름 뒤에 ?를 붙이면 //인수가 전달되지 않더라도 함수의 기능을 수행한다 function 함수이름 (파라미터1:타입, 파라미터2?:타입) :반환타입 { //함수 기능... } 🍔 샘플 예제 function PrintInfo(name:string,age?:string):void { age = age ?? '' console.log(name,age); } PrintInfo('goodmemory'); 🍔 출력 결과 goodmemory 2021. 6. 24.
[TypeScript] readonly를 통해 일관성 있는 코드 작성하기 [타입스크립트 / TypeScript] readonly 를 통해 일관성 있는 코드 작성하기 ⭐️ readonly란 ? 함수에 전달되는 배열을 변경할수 없게하여 코드의 일관성을 유지할수 있는 키워드이다 ⭐️ 기본 형태 function 함수(파라미터1 : 파라미터 타입[]):반환타입 { //함수기능 } ⭐️ 샘플 예제 function sum(...arr:readonly number[]):number { return arr.reduce((a,b)=>a+b); } console.log(sum(1,2,3,4,5)); ⭐️ 출력 결과 15 2021. 6. 23.
[Javascript ES6] 자바스크립트 배열 복사하기 & 합치기 & 요소 추가하기 [자바스크립트] Javascript 배열 복사 / 합치기 / 요소 추가하기 🌈 기본 형태 //복사하기 const newArray = [...oldArray]; //합치기 const resultArray = [...FirstArr,...SecondArr]; //복사하기 + 요소 추가 const copyArr = [...arr,요소]; 🌈 샘플 예제 : 복사하기 const oldArr = [1,2,3]; const newArr = [...oldArr]; console.log(newArr); 💡 출력 결과 [1,2,3] 🌈 샘플 예제 : 합치기 const firstArr = [1,2,3]; const secondArr = [4,5,6]; const resultArr = [...firstArr,...second.. 2021. 6. 23.
[Javascript / ES6] 객체 키 이름으로 직접 접근하기 {key1,key2} = object [자바스크립트 / Javascript] ES6 객체 내 키 이름으로 직접 접근하기 ES6 새로 추가된 문법으로 기존에 접근 방식에 업그레이드 된 방식으로 모듈을 import할때 자주 접했던 문법일 것이다 🌈 기본 형태 const object = { key1,key2 } //원래 키이름으로 접근 원할시 const {key1, key2} = object; //다른 이름으로 접근 원할시 const {key1:newKey1, key2:newKey2} = object; 🌈 샘플 예제 const person = { name : 'goodmemory', age : 10 }; const {name, age} = person; console.log(name,age); 🌈 출력 결과 goodmemory 10 2021. 6. 23.
[TypeScript] 여러타입 지정하기 [타입스크립트 / TypeScript] 여러타입 지정하기 타입스크립트로 소스를 작성할때 한개의 변수에 하나의 타입만 할당할수 없는 경우가 있다 예를 들면 변수가 숫자이거나 null 인 경우, 변수가 문자열이거나 undefined 인경우 위와같은 경우에는 | 를 통해서 여러 타입의 지정이 가능한데 사용 방법은 아래와 같다 🌈 기본 형태 //타입의 지정은 2개 이상도 가능하다 const 변수명 : 타입1|타입2; 🌈 사용 예제 //string 이거나 undefined let str : string | undefined = 'hello'; str=undefined; //number 이거나 null let num : number | null = 10; num = null; //string 이거나 number 이.. 2021. 6. 23.
[TypeScript] 기본 타입 정리 및 기본 문법 정리 (함수 포함) 타입스크립트 기본 타입 정리 및 기본 문법 정리 feat. 함수 타입스크립트는 자바스크립트 확장판 같은 개념이다 타입스크립트로 코드를 작성해도 결국에는 자바스크립트로 변환해서 자바스크립트 파일을 배포하거나 자바스크립트 파일을 사용해야 한다 ⭐️ 타입스크립트 원시 타입과 객체 타입 Primitive Type (원시 타입) : number, string, boolean, bigint, symbol, null, undefined Object (객체 타입): functio, array .. ⭐️ number Type //0.1, -1 소수점, 음수, 양수, 정수 등 가능 const num:number = 10; ⭐️ string Type const str:string = 'hello'; ⭐️ boolean Ty.. 2021. 6. 23.
[TypeScript] ts-node 를 통해 타입스크립트 실행하기 [타입스크립트 / TypeScript] ts-node 사용하기 🌈 ts-node란? 기존 자바스크립트를 웹이 아닌 콘솔에서 실행하기 위해서는 NodeJs 설치 후 node (자바스크립트).js 를 통하여 실행했었다. 타입스크립트 파일 또한 내부에 자바스크립트 문법으로만 작성을 한다면 node (타입스크립트).ts를 통하여 실행이 가능하다. 하지만 타입스크립트 문법으로 작성된 .ts 파일은 node를 통해 실행이 되지 않는데 이유는 node는 타입스크립트를 해석하지 못하기 때문이다. .ts 즉 타입스크립트 파일을 콘솔환경에서 node와 같이 실행하기 위해서는 아래와 같은 과정이 필요하다 🌈 ts-node Install 터미널에 아래 명령어 실행 npm install -g ts-node 🌈 TypeScrip.. 2021. 6. 23.
[TypeScript] 타입스크립트 자바스크립트로 변환하기 타입스크립트 (typescript) 파일을 자바스크립트 (javascript) 파일로 변환하기 typescript to javascript (.ts -> .js) 💡 타입스크립트 파일 (.ts)이 있는 폴더내 터미널에서 아래 키워드 입력 tsc 파일명.ts 💡 같은 폴더내 생성된 js 파일 확인 2021. 6. 23.
[Javascript] 프로토타입 (Prototype) 간단한 이해 [Javascript / 자바스크립트] 프로토타입 Prototype 간단한 이해 자바스크립트 프로토타입에 대한 여러 자료를 검색 도중 프로토 타입 자체가 약간 복잡한 개념이라 그런지 대부분의 관련 자료를 검색했을때 이해가 잘 되지 않았다. 그래서 최대한 내가 이해한 내용을 바탕으로 블로그의 취지에 맞게 최대한 간단하게 메모하고자 한다 아래 두개의 예제는 객체 생성 함수 (Person)을 만들고 속성(name,age) 및 메소드(print)를 초기화하기 예제인데 모양만 다를뿐 같은 의미를 가진 코드이다 예제 1 일반적인 속성 및 메서드 추가 //일반적인 객체의 속성 및 메서드 초기화 function Person(name,age){ this.name = name; this.age = age; this.pri.. 2021. 6. 11.
728x90

티스토리툴바