TIL - 2021.07.25

주말이 지나가서 슬프지만 자기전에 작성하는 TIL 😢

👉 오늘 한 일

• React Native 개발
• TypeScript 공부
• 머리 자르기

👉 공부한 내용

• 새로 가게 된 사무실(사이드 프로젝트 겸 팀에 들어갔다)에 가서 또 공부를 했다. 앱을 살펴보다 보니 조금씩 수정 해야할 거 같은 부분이 보여서 살펴보면서 수정했다. 데이터가 없는 아이디로 로그인을 하면 Flatlist의 EmptyComponent를 보여주는데 흰 배경이 아닌 부분이 있었다. EmptyComponent나 Tab의 screen을 수정해야하는 주 알았는데 생각보다 쉽게 해결하는 방법이 있었다. Flatlist의 style을 주면 되는 것이었다😱 그래도 해결돼서 다행이다. 그리고 곳곳에 사이즈 수정해야하는 부분들이 보여서 수정했는데 계속 여러 기기에서 테스트 해봐야 할 거 같다.
• URL 복사를 하면 복사가 성공했다고 알려줘야하는데 expo 문서에서 알려주는 react-native-root-toast 라이브러리를 사용했다. 라이브러리 사용 방법은 간단해서 금방 적용했다. 기획팀에 요청해서 문구도 바꿔서 더 수정할 사항은 없을 거 같다.
• TypeScript 공부를 했다. 계속 해야지하다가 적용을 못하고 있었는데 이번에 코딩 애플님의 타입스크립트 쓰는 이유 & 필수 문법 10분 정리 영상을 보고 조금 정리를 했다.
  간단한 변수 타입 지정 부분을 정리했다.

let 이름 :string = 'kim';
// string은 타입
let 이름 = 123; // 에러 발생

let 이름 :string[] = ['kim', 'park'];
// 이 변수엔 string 담긴 arrary만 가능
let 이름 :string[] = [123, 'park']; // 에러 발생

let 이름 :{name?: string} = {name : 'kim'}
// object
// name 속성은 ?를 사용해 옵션으로 설정, name이 없어도 상관 x


// 다양한 타입이 들어올 수 있게 하려면 Union type
let 이름 :string | number = 123; // 에러 x

// 타입은 변수에 담아쓸 수 있음
// 참고로 타입명은 주로 대문자로 사용
type = 내타입 = string | number;
let 이름 :내타입 = 123;

// 함수에 타입 지정 가능
function 함수(x :number) :number {
	return x * 2
}
// (x :number) - 파라미터가 number
// () :number - return 값이 number

// array에 쓸 수 있는 tuple 타입
type Member = [number, boolean];
let john: Member = [123, true]

// object에 타입지정해야할 속성이 너무 많으면

type Member = {
	[key :string] : string
}
let john : Member = {name: 'kim'}
// name: string
// age: string
// 이런식으로 지정하면 추가될 때마다 지정해야함
// [key :string] 이렇게하면 모든 object 속성

// Class에도 가능
class User {
	name :string; //미리 변수를 만들어둬야 함
	constructor(name :string) {
		this.name: string;
	}
}

공식 문서랑 유튜브 영상들을 보면서 좀 더 공부하고 플젝들에 적용을 해봐야겠다.

☕️ 잡담

형들이랑 사무실에 가서 따로 공부를 했다. 백엔드 쪽 하는 형들이랑 가서 형들끼리는 같이 얘기했는데 끼지는 못했다 ㅠㅠ 그래도 같이 개발쪽 얘기 하면서 인사이트를 넓힐 수 있어서 좋았다. 내일 회사 가서 노티 부분 마무리하고 배포를 할 수 있으면 좋겠다...!

---

📑 참고사이트

• magicismight/react-native-root-toast - react-native-root-toast github
• 타입스크립트 쓰는 이유 & 필수 문법 10분 정리 - 코딩애플님 유튜브