타입스크립트 썸네일형 리스트형 [타입스크립트] 모듈로더와 모듈 번들러 모듈로더는 모듈 포맷에서 맞게 작성된 모듈을 브라우저에서 해석하고 읽어 들이는 역할을 합니다. 이는 런타임 시에 발생합니다. 여기서 문제점은 모듈을 하나의 스크립트에서 생성하지 않고 10개, 100개에서 생성할 수도 있다는 것이죠. 이렇게 되면 모듈로더가 해당 파일 갯수 만큼 실행되어 http에 큰 부하를 주게 됩니다. 그래서 모듈 번들러로 모듈이 작성되어 있는 모든 파일을 하나의 번들파일로 만들어 주는 역할을 합니다. 모듈 번들러는 빌드 타임에 번들파일을 만들게 됩니다. 그런데 기본적으로는 자바스크립에는 빌드라는 과정이 존재하지 않기 때문에 따로 빌드과정을 거쳐서 번들 파닐을 생성해 주고 모듈로더는 이 번들파일만 로드 해주는 과정을 갖게 되는 것입니다. 끝! 더보기 [타입스크립트] 디폴트 모듈 타입스크립트에서 모듈을 사용할 때 모듈이 정의 되어 있는 파일에서 export 변수명 export된 모듈을 사용하는 부분에서 import { 변수명 } from 파일명 위와 같이 사용하면 된다. 모듈을 작성해 놓은 파일에서 단 하나의 default 모듈을 정의 할수 있는데 export default 변수명 또는 export { a as default } 와 같이 선언하면 import 변수명 또는 a(원하는 변수명) from 파일명 과같이 선언할 수 있다. 해당 부분이 음.... 뭐가 특별한지는 잘 모르겠다... 더보기 [타입스크립트] 리듀스 메서드 리듀스 메서드는 배열의 각각 요소들을 왼쪽애 요소부터 접근하여 함수 로직의 결과를 그 다음 요소에재귀적으로 적용하면서 결과를 도출해내는데 유용하다 예를 들면 모든 요소의 합 구하기 [1,2,3,4,5].reduce((a,b) => {return a + b}) 결과는 15 마지막 요소까지의 연산이 완료 될때까지 실행된다 더보기 [타입스크립트] 필터메서드 필터메서드는 배열에서 조건에 맞는 요소를 추출하는대 사용한다. 예를 들면 let numberList = [1,2,3,4,5] numberList = numberList.filter(n => { return n%2 ===0; }); console.log(numberList); 결과 : [2,4] for문으로도 구현 할수 있지만 필터 메서드가 구현하기도 편하고 소스가 간결하네요 더보기 [타입스크립트] 전개연산자 전개 연산자란? ‘...something’ 이다. 의미는 1. 나머지 매개변수를 선언할때 2. 배열 요소를 확장할때 3. 객체 요소를 확장할때 하지만 사용하다 보면 의미는 한가지로 통용됩을 알수 있다 예를 들면 let arr = [1,2,3] let arr1 = [4,5, ...arr] console.log(arr1) => 4,5,1,2,3 concat위 느낌과 비슷하다고 생각하면 될것같다! 더보기 [타입스크립트] 객체 디스트럭처링3 그림 이제 함수를 만들에 해당 함수에 받는 파리미터의 속성을 부여하는 방법을 알고 싶다. 예를 들면 funtion test({a , b} : {string , number}){ ..... } 이런식으로 해도 뭐 무방 할듯한데.... 변수들의 타입을 따로 관리하는 부분을 만들어 보는 것도 멋있을듯하다. type C = { a : string, b? : number}; function test({ a, b } : C): void{ ..... } type 변수를 이용해서 따로 관리하는 것도 좋을듯하다. # 변수 b에 물음표는 해당 변수가 생략도 가능합을 나타낸다. 더보기 [타입스크립트] 객체 디스트럭처링2 함수 호출시 객체에 해당 하는 값이 있는지 없는지에 대한 로직은 반드시 필요하다. 일반적으로 if문이나 삼항연산자를 통헤서 작업을 한다. 이런 부분에 있어서도 타입스트립트는 편리함이 있다. function printProfile({name, nationality = “?”}){ console.log(name); console.log(nationality); } printProfile({ name : “happy” }); 이와 같이 함수를 만들고 호출을 하면 파라미터에 존재 하지 않는 nationality 는 초기화 선언된 “?” 로 출력되게 된다. 더보기 [타입스크립트] 객체 디스트럭처링1 객체 리터럴에서 변수명에 대응하는 속성값을 추출해 변수로 할당하는데 유용하다. ex) let {id, country} = {id: “happy”, country : 88} 할당 받을 값이 없다면 초기화 선언도 가능하다. Ex) let {id, country = 88} = {id : “happy”} 마지막으로 할당과정에서 새로운 변수 이름을 할당할수도 있다. Ex) let {id : field1, country : field2} = {id : “happy”, country : 88} 더보기 이전 1 2 다음
