study

패스트캠퍼스 챌린지 20일차

뷰 클래스로 코드 구조 개선 기존에 함수(function)형태로 작성한 코드들을 ES6의 클래스(class)형태로 바꾼다. function을 class로 바꾸면서 기존의 각 기능 등을 정의하는 함수만으로 정의되어 있는데, 각각의 함수들을 공통적인 부분으로 인스턴스화 할 수 있고, 공통적인 부분 들은 공통적인 클래스로 정의하고 상속을 받아서 사용 할 수 있는 구조를 만들 수 있다. 또한 클래스의 특징으로 구조와 기능은 같지만 값만 다른 여러개의 인스턴스를 복제하듯이 만들어 낼 수 있다. (화면의 동일한 컴포넌트들을 값만 다르게 생성할 수 있음) interface Store { currentPage :number, feeds :NewsFeed[] } interface News { readonly id :nu..

2022. 2. 12. 18:03

study

패스트캠퍼스 챌린지 19일차

상속과 믹스인 코드를 작성함에 있어서 중복된 코드가 발생을 하고 그 중복된 코드를 변수나 함수로 만들지만 그것 또한 한계가 있다. 따라서 코드를 목적에 맞게 범주로 나눠서 분류하면서 중복된 코드를 관리 할 수 있다. 그 방법으로 상속을 사용할 것이다. 공통 요소로 분류하고 공통 요소에서 확장할 수 있도록 개별 요소를 만드는 식으로 상속을 사용하면 된다. 상속을 사용하는 매커니즘은 1) 클래스 사용 중복을 제거하기 위해 클래스를 사용했지만 중복된 코드를 제거하려다 코드가 더 무거워질 수도 있다. 코드 자체가 하는 일이 작은 경우에 그런건데 클래스의 경우는 단순 함수에서 어떠한 구조를 갖는 것이다. 구조를 갖는다는 건 목적을 위한 형식을 갖는 것이고 그럼에서 나중에 클래스가 더 많은 기능을 가지게 될 때 초..

2022. 2. 11. 20:29

study

패스트캠퍼스 챌린지 18일차

타입과 인터페이스 타입스크립트는 type(타입 알리아스)말고도 interface로도 타입을 지정해 줄 수 있다. 타입과 인터페이스는 대체로 비슷하나 근소한 차이가 있다. 1) 타입을 결합하거나 조합하는 방식의 차이 - 확장되는 형식의 타입에서는 인터페이스를 선호한다. - type이 제공하는 유니온(|)타입은 인터페이스가 지원하지 않음 (인터섹션(&)은 가능) - 그 외에는 인터페이스를 사용하는 경향이 있다 interface Store { currentPage :number, feeds :NewsFeed[] } interface News { readonly id :number, readonly url :string, readonly user :string, readonly time_ago :string, ..

2022. 2. 10. 10:58

study

패스트캠퍼스 챌린지 17일차

함수의 규격 작성하기 타입스크립트는 중복되는 타입의 경우 공통의 타입을 만들어서 사용할 수 있고 변수말고도 함수에도 타입을 지정할 수 있다. type Store = { currentPage :number, feeds :NewsFeed[] } type News = { id :number, url :string, user :string, time_ago :string, title :string, content :string } type NewsFeed = News & { comments_count :number, points :number, read? :boolean } type NewsDetail = News & { comments :NewsComments[] } type NewsComments = New..

2022. 2. 9. 12:18

study

패스트캠퍼스 챌린지 16일차

변수에 타입 지정하기 타입스크립트의 타입은 primitive 타입과 object타입으로 나눌 수 있다. primitive 타입은 string, number, boolean 등 원시 타입이고, object타입은 객체 그 자체는 모든 것이 타입이 될 수 있기 때문에 수 없이 많다. type Store = { currentPage :number, feeds :NewsFeed[] } type NewsFeed = { id :number, comments_count :number, url :string, user :string; time_ago :string, points :number, title :string, read? :boolean } const container: HTMLElement | null = d..

2022. 2. 8. 11:02

study

패스트캠퍼스 챌린지 15일차

타입스크립트를 위한 환경설정 자바스크립트로 만들어진 해커뉴스 페이지를 타입스크립트로 변환하는 작업을 할 것인데 이런 작업을 포팅이라고 한다. 기존에 해커뉴스 페이지는 html파일(index.html)과 js파일(app.js)로 구성되어 있는데 타입스크립트를 사용하기 위해 app.js파일을 app.ts파일로 변환한다. 그리고 tsconfig.json이라는 파일을 생성한다. - tsconfig.json { "compilerOptions": { // 주로 사용하는 부분 "strict": true, // 타입체크 "target": "ES5", // 변환할버전 "module": "commonJS", "alwaysStrict": true, "noImplicitAny": true, "noImplicitThis": t..

2022. 2. 7. 11:13