240624 TIL_개인 프로젝트5 (), TypeScript 강의 ( type ), CSS (GlobalStyle, tailwind )

미밍·2024년 6월 24일
0

우당탕탕 개발 일기

목록 보기
62/108

개인 프로젝트 시작~!

이번엔 강의 시간이 4시간밖에 안 돼서 한 번 돌리고 다시 필요한 부분 들어갈 예정!

TypeScript

JS의 모든 기능을 포함하고, 추가적인 기능을 제공

yarn create vite [프로젝트 이름] --template react-ts

e.g.
yarn create vite myProject --template react-ts

type

기본 타입

Boolean : 참 또는 거짓
number : 숫자 (정수, 실수)
string : 텍스트 데이터
배열 : 기본 타입에 [] 이 붙은 타입
튜플 (tuple) : 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열 number[], string[]처럼 같은 타입의 원소만 가질 수 있음

e.g. const person : [string, number, boolean] = ['jon', 25m true]

enum : 열거형 데이터 타입, 다양한 상수를 보다 이해하기 쉬운 문자열 이름으로 접근하고 사용할 수 있게 하는 타입 (상수의 그룹화 / 기본값이 0)

가변 타입

(예외 사례)
any : 어떤 타입의 값이든 저장할 수 있음 (*가급적으로 사용하지 않는 것을 추천)
unknown : any와 비슷하지만, 더 안전! => 타입 단언을 통해 타입 보장하여 사용 가능
union : 타입을 string | number | boolean 등으로 표기... 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용

선택적 타입

상수/변수?. 타입

readonly

읽기 전용
그냥 타입 앞에 readonly 적어놓으면 값을 변경할 수 없다.

void

아무것도 리턴하지 않는 함수를 표기할 때 쓰는 타입으로, 보통 지정해줄 필요는 없다.

global style, tailwind

아무 생각 없이 전역에 global style 적용 + 테일윈드로 css 하던 중...

(어차피 스타일 컴포넌츠도 필요했고, 쓰다가 css 파일 만들기 싫어서 테일윈드로 인라인 작업 중이었다...)

근데 테일윈드로 보더가 안 먹는 사태 발생...

설마~~ 하고 글로벌 스타일 빼니까 그제야 테일윈드가 된다.

둘이 충돌이 있었다. 바보. 이런 실수 안 하기로....

profile
프론트앤드; Frontend

0개의 댓글