Frontend Developer Sophie 🌿

본문 바로가기

PROJECT

최신 글

Typescript - Interfaces (Typescript에서 Object의 모양을 알려주는 방법 / 상속받기_extends) ✅ Typescript에서 Object의 모양을 알려주는 방법 : type 키워드를 사용하여 오브젝트의 모양을 알려주는 방법 : interface 키워드를 사용하여 오브젝트의 모양을 알려주는 방법 공통점 차이점 Type 오브젝트의 모양을 결정하는 역할이다. type 키워드는 interface 키워드에 비해 좀 더 활용할 수 있는게 많다. Interface interface는 오브젝트의 모양을 특정한다는 오직 한가지 용도만 가지고 있다. : Type type Team = 'red'| 'blue' |'yellow' type Health = 1 | 5 | 10 type Player = { nickname: string, team: Team, hea.. 2022.12.23
Typescript - Function(Generic) 배열을 받고, 그 배열의 요소를 print해주는 함수 만들기 call signatures를 만들고 사용될 concrete type으로 작성하기! type SuperPrint ={ (arr: number[]): void, (arr: boolean[]): void, (arr: string[]): void, (arr: (number|boolean)[]): void, } const superPrint: SuperPrint = (arr) => { arr.forEach(i => console.log(i)) } superPrint([1, 2, 3, 4]) superPrint([true, false, true]) superPrint(['a', 'b', 'c']) superPrint([1, 2, true, false]).. 2022.12.22
Typescript - Function(call signatures, Overloading) Call signatures // call signatures 이란? // ex.(a:number, b:number) => number // 인자의 타입이랑 함수의 반환 타입을 알려줌. // call signatures를 선언하는 방법 1) type Add = (a:number, b: number) => number; const add : Add = (a, b) => a + b // call signatures를 선언하는 방법 2) type Add = { (a:number, b: number) : number } const add : Add = (a, b) => a + b // 잘못 사용된 예 const add : Add = (a, b) => {a + b} // Error: Type 'void' is n.. 2022.12.22
Typescript - readonly, Tuple, any, unknown, void, never readonly // readonly는 요소들을 읽기전용으로 만듬. const numbers : readonly number[] =[1,2,3,4,5] numbers.push(1) // 작동하지 않는다. const array : number[] = [1,2,3,4,5] array.push(1) // 작동이 된다. Tuple // 정해진 개수와 순서에 따라 배열 선언 const user: [string, number, boolean] = ["aaa", 1, true] any // 무엇이든 입력할 수 있게된다. // 타입체크를 '비활성화' 시켜버린다. const a : any[] = [1,2,3,4] const b : any = true a + b // 오류가 나지 않음. // any의 사용은 좋지않으며, .. 2022.12.22
Justgram 프로젝트 ► Justgram 프로젝트 • 레포지토리 주소 Justgram-React-repo < 바로가기 ► Project 소개 소셜 네트워크 서비스(SNS) instagram 클론하는 프로젝트 개발 기간 | 2022-09-01 ~ 2022-09-08 instagram의 login & home 컴포넌트 구현하기 작업 기간 구현한 기간 2022-09-01 ~ 2022-09-08 Technlogies Front-end HTML | CSS | JAVASCRIPT | REACT | STYLED-COMPONENTS 1. Login Page 1) 로그인 페이지 레이아웃 실제 instagram 로그인 페이지 참고하여 디자인 2) ID, PW validation 정규식을 사용을 사용하여 아래의 조건에 맞으면 버튼 활성화 되도록.. 2022.10.03

인기 글

티스토리툴바