03 Jun 2021
|
로그포스
2021-06-03 TIL
-
오늘 한 것
- 짤해 프로젝트 상세, 편집페이지 완성, 찜하기, 다운로드기능, SNS공유 기능 - 이미지 다운로드의 COR 이슈를 피하기 위해서 정말 갖은 노력을 한 것 같다. 자세한 내용은 따로 블로그에 포스팅을 해놓았다. 이미지 다운로드 기능이 해결되니 나머지는 순탄(?)하진 않아도 그럭저럭 풀렸다. 카카오톡은 워낙 api가 사용하기 쉽게 되어있어서 문제없이 해결되었다. 편집 페이지에서 이미지 위에 글씨를 얹을 수 있어야하는데 canvas를 사용하지 않고 css를 inline style로 적어 react에서 동적으로 바뀔 수 있게 해주었다. 문제는 이 역시 다운로드가 되어야했다. 하는 수 없이 이미지를 cloudinary에 호스팅해서 다시 다운받는 식으로 해결해야했다. 그리고 로그인한 유저가 짤주머니에 짤을 추가하는 기능을 구현했는데 이름만 다르지 장바구니와 마찬가지였다. firebase의 사용법을 열심히 찾아서 db에 저장하고 빼오는 것까지 완성했다.
- 리액트 tutorial 프로젝트 - 오히려 이 프로젝트가 나에겐 힐링인듯.
- 내일 할 것
- 짤해 프로젝트 - 짤주머니 삭제 기능, 버튼들 기능 전부 구현, 배포
- 리액트 tutorial 프로젝트
오늘 많은 기능을 구현할 수 있어서 뿌듯했다.
오늘의 한 줄 총평 : 내일 완성하려나?
02 Jun 2021
|
Typescript
Typescript Day 07 - 배열과 튜플
배열
타입스크립트에서 배열의 타입은 타입[]이다
let stringArr: string[] = ['1','2','3'];
let numberArr: number[] = [1,2,3];
type IPerson = { name: string, age?: number };
let personArr: IPerson[] = [{name: 'jack'},{name:: 'jane', age: 32}];
문자열과 배열 간 변환
문자열 => 배열 변환 시 split의 사용법
const split = (str: string, delim: string = ''): string[] => str.split(delim);
console.log(split('hello')); // ['h','e','l','l','o']
console.log(split('h-e-l-l-o', '-')); // ['h','e','l','l','o']
배열 => 문자열 변환 시 join의 사용법
const join = (arr: string[], delim: string = ''): string => arr.join(delim);
console.log(join(['h','e','l','l','o'])); // hello
console.log(join(['h','e','l','l','o'], '-')); // h-e-l-l-o
제네릭 방식 타입
배열을 다룰 때에는 string[]처럼 타입이 고정된 배열보다는 타입의 변수인 제네릭 타입을 사용하는 것이 편리하다.
const arrLength = <T>(array: T[]): number => array.length;
let numArray: number[] = [1,2,3];
let strArray: string[] = ['1','2','3'];
console.log(arrLength(numArray)); // 3
console.log(arrLength(strArray)); // 3
튜플
튜플 타입으로 요소의 타입과 개수가 고정된 배열을 만들 수 있다.
let tuple:[string, number] = ['123', 123];
tuple = [123, '123']; // 오류
튜플 사용법 예시
type ResultType = [boolean, string];
const do = (): ResultType => {
try {
//...
} catch(err) {
return [false, err.message]
}
}
참고 자료
Do it 타입스크립트 프로그래밍
Typescript-Handbook
02 Jun 2021
|
Typescript
Typescript Day 06 - this
this
인스턴스는 기본적으로 this 키워드를 사용할 수 있다. (arrow function 제외)
타입스크립트는 this의 잘못된 사용을 감지할 수 있다.
타입스크립트에서 this가 가리키는 것을 명시하려면 아래와 같이 사용한다
function 함수명(this: 타입) {
//...
}
interface IPerson {
name: string;
init(this: IPerson): () => {};
}
let jack: IPerson = {
name: 'jack',
init: function(this: IPerson) {
return () => {
return this.name;
}
}
}
let getName = jack.init();
console.log(getName()); // jack
콜백에서의 this
콜백으로 함수가 전달될 때 this를 구분해주어야 할 때가 있다.
interface Element {
addClickListener(onclick: (this: void, e: Event) => void): void;
}
class Handler {
info: string;
onClick(this: void, e: Event) {
console.log('clicked');
}
}
let handler = new Handler();
element.addClickListener(handler.onClick);
참고 자료
Do it 타입스크립트 프로그래밍
Typescript-Handbook
02 Jun 2021
|
로그포스
2021-06-02 TIL
-
오늘 한 것
-
짤해 프로젝트 상세페이지 작성, 카드 액션 추가 - 상세페이지 버튼들의 기능을 구현해야하는데 이미지 다운로드에서 벌써 막혔다. CORS 이슈 때문에 google search API에서 가져온 이미지 링크를 클라이언트에서 다운받을 수가 없었다. 서버리스로 개발중이라 프론트단에서 어떻게든 해결해야하는데 흠.. 내일 더 방법을 찾아봐야겠다.
-
타입스크립트 이론 정리 - 타입스크립트에서의 배열과 튜플에 대해 공부하고 정리했다.
-
리액트 tutorial 프로젝트 - 아직은 강의 초반이라 프로젝트가 쉬운것만 나온다. 이정도 쯤이야.
- 내일 할 것
- 타입스크립트 이론 정리
- 짤해 프로젝트 - 상세, 편집페이지 완성, 찜하기, 다운로드기능, SNS공유 기능
- 리액트 tutorial 프로젝트
오늘 이미지 다운로드에서 막혀버린 탓에 많은 시간을 잡아먹었다.
내일은 일정에 맞춰서 최대한 많은 기능들을 구현해야겠다.
오늘의 한 줄 총평 : 조금 더 속도를 높이자
01 Jun 2021
|
Typescript
Typescript Day 05 - 함수
함수
매개변수와 반환값의 타입주석은 일반적으로 생략이 가능하지만 좋지 않다
function 함수명(매개변수1: 타입1, 매개변수2: 타입2): 반환타입 {
//...
}
const 함수명 = (매개변수1: 타입1, 매개변수2: 타입2): 반환타입 => {
//...
}
void 타입
아무런 값을 반환하지 않는 함수는 반환 타입이 void이다.
void는 함수의 반환 타입으로만 사용하도록 하자.
함수 시그니처
변수의 타입처럼 함수의 타입을 시그니처라고 한다.
(타입1, 타입2...) => 반환타입
const print: (string, number) => void = function(name: string, age: number): void {
//...
}
// 매개변수가 없을 시
const pring: () => void = function(): void {
//...
}
Type Alias
함수 시그니처를 별칭으로 만들어서 사용할 수 있다
type print = (string, number) => void;
const a: print = function(name: string, age: number): void {};
undefined 주의사항
interface IName {
name: string
}
function getName(o: IName) {
return o.name;
}
let name = getName(undefined); // 오류
undefined는 최하위 타입이므로 매개변수에 undefined를 넣어도 오류가 발생하지 않지만, return o.name 구문에서 undefined.name이 되므로 런타임 시 타입 오류가 발생한다.
이를 고려하려면 예외처리를 해주어야한다.
interface IName {
name: string
}
function getName(o: IName) {
return o !== undefined ? o.name : 'unknown';
}
let name = getName(undefined); // unknown
// 선택 속성에 대한 예외 처리
interface IAge {
age?: number
}
function getAge(o: IAge) {
return o !== undefined && o.age ? o.age : 0;
}
let age1 = getAge(undefined); // 0
let age2 = getAge(null); // 0
let age3 = getAge({age: 30}); // 30
선택적 매개변수 (Optional Parameter)
function aa(arg1: string, arg2?: number): void {}
// 선택적 매개변수가 있는 함수의 타입
type OptionalFunc = (string, number?) => void;
콜백 함수
함수 표현식을 매개변수로 받을 수 있다. 매개변수 형태로 동작하는 함수를 콜백함수라고 한다.
const init = (callback: () => void): void => {
console.log(1);
callback();
console.log(2);
}
init(() => console.log(3));
// 1
// 3
// 2
중첩 함수
함수는 변수에 담아 사용할 수 있으므로 또 다른 함수를 중첩할 수 있다.
const calc = (val: number, cb: (number) => void): void => {
let add = (a, b) => a + b;
let multi = (a, b) => a * b;
let result = multi(add(1,2), val);
cb(result);
}
calc(30, (result: number) => console.log(result)); // 90
객체 반환 시 주의
arrow function으로 객체 반환 시 return을 생략하고 다음과 같이 작성하면 오류가 발생한다.
type Person = {name: string, age: number}
const a = (name: string, age: number): Person => {name, age} // 오류, 복합 실핼문으로 해석
const a = (name: string, age: number): Person => ({name, age})
객체 반환 시 중괄호를 괄호로 한번 더 감싸야한다.
매개변수 비구조화 할당
매개변수에도 비구조화 할당 적용이 된다.
type Person = { name: string, age: number };
const print = ({name, age}: Person): void => {
console.log(name, age);
};
색인 key, value로 객체 만들기
key, value 값으로 객체를 만들 수 있다.
const makeObject = (key, value) => ({ [key]: value });
const person = makeObject('name', 'jack'); // { name: jack }
타입스크립트에서는 key, value 형태의 타입을 색인 기능 타입(Indexable Type)이라고 한다
type IndexableType = {
[key: string]: string
}
const makeObj = (key: string, value: string): IndexableType => ({[key]: value});
const person = makeObj('name', 'jack'); // { name: jack }
참고 자료
Do it 타입스크립트 프로그래밍
Typescript-Handbook
