study

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

안전한 전역 상태 관리 기존의 app.ts로 만든 하나의 파일에 페이지의 모든 기능을 작성했다. 이번에는 하나로 작성된 ts 파일을 기능 단위로 여러개의 ts파일로 구분할 것이다. 페이지의 역할을 하는 파일, 타입을 지정해주는 파일, 공통적으로 사용되는 파일, 라우팅 기능을 하는 파일 등으로 구분하는 폴더 구조를 갖는다. 구조를 정하여 관리하게 되면 어느 부분에서 에러, 오류 등이 발생 했을 때, 해당하는 파일에서 사용된 부분만을 수정하면 되고, 기능을 사용하는 부분은 사용 되어지는 파일의 세부적인 부분까지 몰라도 기능을 사용할 수 있지만 너무 세세하게 나눠진 구조는 오히려 구조를 더 복잡하게 할 수도 있다. // (src/app.ts) import Router from "./core/router"; i..

2022. 2. 13. 18:05

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