본문 바로가기 메뉴 바로가기

공부 기록일지📚

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

공부 기록일지📚

검색하기 폼
  • 분류 전체보기 (387)
    • Frontend (278)
      • CSS, HTML (50)
      • CSS 프레임워크 (5)
      • JavaScript (114)
      • TypeScript (22)
      • react.js (49)
      • Next.js (9)
      • jQuery (8)
      • WIL😎 (20)
    • 코딩테스트 (27)
      • 알고리즘 & 자료구조 개념 (18)
      • 연습문제 (9)
    • 프로그래밍 (77)
      • Node.js (6)
      • Python (3)
      • 유용한 사이트 | 정보 (16)
      • Git, Github (24)
      • 정리하지 못한 내용 (3)
      • CS 지식 (25)
    • private (1)
      • interest (0)
      • 자격증 (1)
  • 방명록

Frontend (278)
[TypeScript] Promise와 Awaited 분석

TS에서 프로미스는 Promise 타입으로 표시합니다. const p1 = Promise.resolve(1) //Promise .then((a) => a + 1) //Promise .then((a) => a + 1) //Promise .then((a) => a.toString()); // Promise //then을 전부 다 실행시킨 최종 결괏값을 p1에 리턴한다. const p2 = Promise.resolve(2); // Promise const p3 = new Promise((res, rej) => { setTimeout(res, 1000); }); Promise.all([p1, p2, p3]).then((result) => console.log(result)); //결과: ['3',2,undefi..

Frontend/TypeScript 2023. 1. 9. 22:07
[TypeScript] Required, Record, NonNullable 타입

Required 분석 { interface Profile { name?: string; age?: number; married?: boolean; } type Name = Profile["name"]; type R = { //-? 의미: 옵셔널(?)을 빼라 라는 의미("-"의 명칭은 modifier ?) //T라는 인터페이스의 프로퍼티의 key를 가져올 때 optional은 빼고 가져오라는 의미 [key in keyof T]-?: T[key]; }; //type Required = { [P in keyof T]-?: T[P]; } // P = key // Readonly //type Readonly = { readonly [P in keyof T]: T[P]; }; //만약에 남의 타입을 가져올 때 re..

Frontend/TypeScript 2023. 1. 2. 22:27
[TypeScript] Utility Types - Partial/ Omit / Pick / Exclude / Extract

Partial interface Profile { name: string; age: number; married: boolean; } const cong: Profile = { name: "cong", age: 27, married: false, }; //Partial의 기능: 프로퍼티들을 전부 "?" 옵셔널로 만들어 준다.(필수값이었던 것들을) const noMarriedCong: Partial = { name: "cong", age: 28, }; Partial 을 직접 구현해보기 //Partial을 직접 구현해보기 //맵드 타입스랑 인덱스드 시그니처 사용 type Name = "Human" | "Animal"; //keyof 뒤에는 interface가 올 수 있다. (type alias도 가능, js..

Frontend/TypeScript 2022. 12. 30. 22:22
[TypeScript] 타입스크립트 오버로딩, 에러핸들링

오버로딩 타입을 하나로만 정의하는 것이 베스트긴하지만 다 정의하지 못할 때 사용한다.(제네릭으로 깔끔하게 못만들겠다 싶을때 쓰면 좋을듯) 오버로딩을 했으면 실제 구현부에서는 any를 사용해도 된다. (아래 추가설명) 함수도 앞에 declare키워드를 붙이고 오버로딩이 가능하다. (declare키워드가 붙은 함수는 TS를 속여 body부분을 작성해주지 않고 선언부만 적어도 된다.) -> 여기서 실제 사용할 때의 구현부 타입은 any로 지정해줘도 된다(오버로딩된 타입들이 제대로 작성되어 있다면). // declare를 함수 앞에 붙이면 선언만하고 구현부(body부분)는 쓰지 않아도 TS가 인식하기로는 구현부는 다른 곳에 있구나 //라고 속일 수 있다. declare function add(x: number,..

Frontend/TypeScript 2022. 12. 30. 21:40
[TypeScript] <제네릭> , 'is' and 'as'

제네릭 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이다. 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다. TS에서 제네릭은 클래스, 인터페이스, 함수에서 쓸 수 있음(제네릭 함수, 제네릭 인터페이스, 제네릭 클래스) 제네릭은 타입에 대한 함수라고 생각하면 된다는 ..제로초님 (선생님의 머리를 갖고싶어요) function add(x: T, y: T): T { return x + y } add(1, 2); add(1, 2); add('1', '2'); add('1', '2'); add(1, '2'); 제네릭 선언 위치 기억하기 function a() {} class B(..

Frontend/TypeScript 2022. 12. 27. 23:49
[TypeScript] 빈객체, 객체 타입, 클래스 추가 개념

타입스크립트 4.8 업데이트에 추가된 타입 {} Object (대문자로 시작) -> 이 두가지 타입은 모든 타입을 가리키며 모든 값을 받을 수 있다. (null과 undefined는 제외) unknown도 any와 마찬가지로 모든 값을 받을 수 있는데 unknown이 4.8버전부터 {} | null | undefined 와 같이 성립되기 때문에 조건문에 들어갔을 때 아래와 같이 된다. const z: unknown = "hi"; //모든 타입이 들어가기 때문에 hi도 들어갈 수 있다. if (z) { z; //z의 타입이 {}이다. 파라미터로 들어온 z 는 unknown인데 true일때는 {}인 것 } else { z; //unknown } 실제로 객체 타입은 object가 있는데 string의 원시값을..

Frontend/TypeScript 2022. 12. 26. 23:53
[TypeScript] 타입 가드(좁히기), 커스텀 타입 가드

//타입 좁히기(타입 가드) { function numOnStr(a: number | string) { // if (typeof a === "string") { // a.split(","); // } else { // a.toFixed(1); // } a.toFixed(1); // number면 쓸 수 있지만 string일수도 있기 때문에 Error } numOnStr("123"); numOnStr(1); } -> 매개변수 타입이 number라면 toFixed 메서드를 사용할 수 있지만 string일수도 있기 때문에 내부에서 바로 쓰게되면 빨간 줄로 에러가 뜬다. TS에러 메세지가 여러 줄이 뜰 때에는 결국에는 마지막 줄을 보면 된다. 마지막 줄에 원인이나 해결방법이 나와있다. 위에 a.toFixed를 ..

Frontend/TypeScript 2022. 12. 24. 21:50
[You Don't know JS | this 와 객체 프로토타입, 비동기와 성능 ] Chapter 1 ~ 2

CHAPTER 1 this에 대한 오해들 function identify() { return this.name.toUpperCase(); } function speak() { let greeting = 'hello, I am' + identify.call(this); console.log(greeting); } let me = { name: 'alex', }; let you = { name: 'rachel', }; identify.call(me); identify.call(you); //me & you 의 이름 대문자변환 speak.call(me); //hello, I amALEX speak.call(you); //hello, I amRACHEL -> indentify()와 speak() 두 함수는 객체..

Frontend/JavaScript 2022. 12. 16. 22:21
이전 1 ··· 7 8 9 10 11 12 13 ··· 35 다음
이전 다음
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
  • reactAPI
  • getStaticPaths
  • aspect-ratio
  • 타입스크립트 장점
  • float 레이아웃
  • 항해99프론트
  • 프리렌더링확인법
  • Prittier
  • grid flex
  • 형제 요소 선택자
  • text input pattern
  • tilde caret
  • 타입스크립트 DT
  • 틸드와 캐럿
  • 프리온보딩 프론트엔드 챌린지 3월
  • 부트캠프항해
  • nvm 설치순서
  • && 셸 명령어
  • getServerSideProps
  • is()
  • nvm경로 오류
  • 원티드 프리온보딩 프론트엔드 챌린지 3일차
  • 원티드 FE 프리온보딩 챌린지
  • fs모듈 넥스트
  • D 플래그
  • 항해99프론트후기
  • 원티드 3월 프론트엔드 챌린지
  • 원티드 프리온보딩 FE 챌린지
  • ~ ^
  • 항해99추천비추천
more
«   2025/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바