19 May 2021
|
Typescript
Typescript Day 03 - 인터페이스
인터페이스
object 타입은 인터페이스와 클래스의 상위 타입이다.
타입스크립트는 객체의 타입을 정의할 수 있게 하는 interface 키워드를 제공한다.
interface 인터페이스명 {속성이름: 속성타입}
interface IPerson {
name: string;
age: number;
}
, 콤마 대신 ; 세미콜론으로 줄바꿈을 한다. 그냥 안쓰고 줄바꿈만 해도 된다.
interface IPerson {
name: string;
age: number;
}
let data: IPerson = { name: 'jack', age: 32 }
let data2: IPerson = { age: 32 } // 어느 하나의 속성이라도 없으면 오류
let data3: IPerson = { name: 'jack', age: 32, etc: true } // 많아도 오류
선택적 프로퍼티 (Optional Property)
인터페이스의 속성 뒤에 ? 물음표를 붙여서 무조건적으로 있어야하는 속성이 아닌 선텍 속성으로 만들 수 있다.
interface IPerson {
name: string;
age: number;
etc?: boolean
}
let data: IPerson = { name: 'jack', age: 32 }
let data: IPerson = { name: 'jack', age: 32, etc: true }
익명 인터페이스 (Anonymous Interface)
interface 키워드 없이 익명의 인터페이스를 만들 수 있다.
let a: {
name: string
age: number
etc?: boolean
} = { name: 'jack', age: 32, etc: true }
익명 인터페이스는 함수의 파라미터에서 주로 쓰인다.
function print(data: { name: string, age: number }) {
console.log(data.name, data.age);
}
읽기전용 프로퍼티 (Read-only Property)
속성 이름 앞에 readonly 키워드를 붙여 변경이 불가능하게 할 수 있다.
interface IPerson {
readonly name: string;
readonly age: number;
}
let p1: IPerson = { name: 'jack', age: 32 };
p1.age = 22; // 오류
흡사 const 와 같지만 const는 변수에 사용하고 속성에는 readonly를 사용한다.
읽기전용 배열 (Read-only Array)
ReadonlyArray<T> 타입으로 읽기 전용 배열을 생성할 수 있다.
배열을 재할당하거나 수정할 수 없다.
let arr: ReadonlyArray<number> = [1,2,3];
arr.push(4); // 오류
arr[0] = 100; // 오류
arr = [10,20,30]; // 오류
arr.splice(0,1); // 오류
인터페이스 상속
extends 키워드를 사용하여 인터페이스를 상속받을 수 있다
interface IPerson {
name: string;
age: number;
}
interface IStudent extends IPerson {
grade: number;
}
const student: IStudent = {
name: 'jack',
age: 20,
grade: 1
}
복수의 인터페이스 상속도 가능하다.
interface IPerson {
name: string;
age: number;
}
interface IStudent {
grade: number;
}
interface IHighStudent extends IPerson, IStudent {}
const highStudent: IHighStudent = {
name: 'jack',
age: '20',
grade: 1
}
인터페이스는 인터페이스 뿐만 아니라 클래스도 상속받을 수 있다. 단, 멤버는 상속되지만 구현까지 상속하지 않는다.
class Person {
constructor(public name: string, public age: number){}
}
interface IStudent extends Person {
grade: number;
}
const student: IStudent = {
name: 'jack',
age: 20,
grade: 1
}
참고 자료
Do it 타입스크립트 프로그래밍
Typescript-Handbook
18 May 2021
|
Typescript
Typescript Day 02 - 타입
타입 주석 (Type Annotation)
타입스크립트는 자바스크립트의 변수 선언을 확장해 타입을 명시할 수 있다. 이를 타입 주석이라 한다
let 변수명: 타입 = 값
let num: number = 1
let auth: boolean = true
let name: string = 'jack'
let data: object = {}
타입 추론 (Type Inference)
타입스크립트는 자바스크립트와의 호환성을 위해 타입 주석을 생략할 수 있다. 컴파일러는 = 연산자 오른쪽의 값에 따라 타입을 추론하여 지정한다.
let num = 1 // number로 판단
let auth = true // boolean으로 판단
num = '1'; // 오류, 한번 타입이 정해지면 다른 타입 넣을 수 없음
let score; // 아무 값도 주지 않으면 any 타입이 됨
const name = 'jack' // const는 상수이기에 선언시 반드시 초기화가 필요
any 타입
자바스크립트와의 호환성을 위해 어떤 종류의 값도 저장할 수 있는 any 타입을 제공한다.
any는 다른 모든 타입의 최상위 타입이다.
let a: any = 0
a = true
a = 'jack'
a = {}
any 타입은 타입의 일부만 알고 전체를 알지 못할 때 유용하다. 예를 들어, 여러 타입이 섞인 배열
let list: any[] = [1, true, 'jack']
null과 undefined
타입스크립트에서 null과 undefined는 타입이기도 하고 값이기도 하다.
let u: undefined = undefined
let n: null = null
null과 undefined는 다른 모든 타입의 최하위 타입이다.
타입이 undefined면 string, number 등 상위 타입의 값을 가질 수 없다. 그 반대는 가능하다.
타입 단언 (Type Assertions)
타입스크립트에서는 타언어의 타입변환이 아닌 타입 단언이라는 용어를 사용한다.
타입 변환과 유사하지만 런타임에 영향을 미치지 않고, 오직 컴파일러만 이를 이용한다.
(<타입>객체)
(객체 as 타입)
두 가지 형태가 있다. 똑같은데 리액트에서는 as를 사용하도록 하자
interface IName {
name: string;
}
let obj: Object = { name: 'jack' };
let name1 = (<IName>obj).name; // jack
let name2 = (obj as IName).name; // jack
참고 자료
Do it 타입스크립트 프로그래밍
Typescript-Handbook
18 May 2021
|
React
react-router-dom 새로고침해야 작동하는 경우
react-router-dom 사용 시 어떤 특정 작업 후에 다시 페이지를 이동시켜야하는 경우,
예를 들어 게시글을 삭제 후 다시 home으로 돌아가야하는 경우에 history로 이동하면
새로고침을 해야 게시글이 삭제되는 것을 볼 수 있었다.
/* 이전 코드 */
import React from 'react';
import { deletePost } from '../actions/index';
function postShow({ history }) {
const onClickDelete = () => {
deletePost(id);
history.push('/');
};
return (
<div>
<button onClick={onClickDelete}>
DELETE
</button>
</div>
);
}
export default postShow;
여기서 history를 사용할 경우 페이지 reload 없이 단순히 url만 변경되기 때문에 이전의 화면이 그대로 남아있다.
history 대신 window.location.replace()를 사용해야한다.
/* 수정 후 코드 */
import React from 'react';
import { deletePost } from '../actions/index';
function postShow() {
const onClickDelete = () => {
deletePost(id);
window.location.replace('/');
};
return (
<div>
<button onClick={onClickDelete}>
DELETE
</button>
</div>
);
}
export default postShow;
14 May 2021
|
로그포스
2021-05-14 TIL - 수료
학원 대면수업 (15:30~22:00) 팀 프로젝트 발표 및 수료식 - 2020년 11월 19일. KG IT뱅크에서의 국비지원 교육 시작일이었다. 작년 재직중이던 회사를 퇴사하며 다짜고짜 학원에 전화해서 상담을 받았던 그 날이 아직도 기억에 생생하다. 그리고 2021년 5월 14일. 오늘은 국비지원 수료식이었다. 대략 6개월정도의 교육기간을 거치며 처음엔 30명으로 시작했던 정원도 19명으로 줄어있었다. 코로나19로 인해 원래 예정보다 한 달이나 뒤로 밀린데다가 엎진 데 겹친 격으로 6개월중 3개월은 비대면 수업을 해야했다. 우여곡절도 많고 탈도 많았지만 막상 수료식 날짜에 이르니 복잡 미묘한 기분이 들었다. 실제로 얼굴을 보고 지낸지는 3개월 남짓이지만 매일매일 6시간 이상씩 얼굴을 마주보며 지낸 동기들의 이름과 얼굴은 오랫동안 기억하고 싶다.
‘개발자가 되는 꿈’ 이라기보다는 그저 궁금했다. 전혀 다른 전공을 가진 친구들, 그리고 친형까지도 그렇게 재밌다고 말하는 개발이라는게 도대체 무엇인지. ‘내 적성에 맞고 내가 즐기며 잘할 수 있는 일이 혹시 개발이 아닐까?’라는 생각이 확신으로 바뀔 무렵, 나는 퇴사를 결심했다. 생활코딩과 책을 병행하며 독학을 하다가 국비지원 교육이 시작되었고 지난 6개월이 눈 깜짝할 새에 지나갔다고 느낄정도로 열심히 달려왔다. 수업시간 6시간과 오전, 새벽까지 합해 못해도 하루 12시간씩은 공부에 매진했던것 같다. ‘고통스럽지만 이악물고 버티자’라기보다는 어느샌가 개발을 즐기고 있었다. 특히 미니 프로젝트와 팀 프로젝트가 정말 재미있었고 취업 전에 1~2개의 프로젝트를 더 해볼 생각이다.
개발자들 사이에서는 국비지원에 대한 안좋은 인식이 있다고 들었지만, 비전공자에 시작이 좀처럼 어려워 개발을 하고 싶지만 무엇을 해야할지 몰랐던 나에게는 무상 교육의 국비지원 시스템은 참 고마울 따름이었다. 한 가지 안타까운 것은 국비지원이 java 언어 위주의 교육이어서 다른 언어 선택을 할 수 없다는 것이지만 어찌됐건 기본기를 닦는다는 관점에서는 나쁘지는 않았다. 나중에 javascript를 따로 공부하기 시작했을 때에도 겹치는 내용이 많아서 도움이 많이 되었다. 무엇보다 팀 프로젝트를 하나 챙겨갈 수 있다는게 가장 좋았다.
국비지원은 걸음마를 가르치는 곳이고 걷는 방법을 배웠으니 이제 스스로 길을 걸어나가야한다. 이제부터가 본게임이고 시작인 것이다. 마음 맞는 친구들과 스터디 그룹을 결성해서 취업 전까지의 정보 공유와 코딩 테스트 공부를 같이 하기로 했다. 이것도 국비지원의 순기능인듯하다. 지금 하고 있는 React, Typescript 공부를 마치면 React 프로젝트를 하면서 코딩테스트 공부를 병행할 것이다. 그리고 2021년이 다 가기 전에, 나는 개발자가 되어있을 것이다.
내일은 하루 쉬자
오늘의 한 줄 총평 : 明日はお休みの日
