
[TS] 제네릭 / 유틸리티 타입
2022. 7. 6. 05:16
프로그래밍/TypeScript
1. 제네릭 제네릭을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용 할 수 있다. 선언할 때는 타입 파라미터만 적어주고 생성하는 시점에 사용하는 타입을 결정한다. 매개변수의 타입이 바뀌었는데 동일한 함수를 재사용하고 싶다면 함수 오버로드를 사용하거나 유니언 타입을 사용할 수 있다. 다른 타입들도 배열로 만들어서 전달 할 경우 아래와 같아진다. 이럴 때 사용할 수 있는 것이 제네릭이다. 사이의 타입 파라미터 T는 타입을 전달 받아 함수에서 사용할 수 있게 해준다. 함수 호출시 타입을 기입해주지 않아도 타입 스크립트는 전달되는 매개변수를 보고 어떤 타입인지 알고 있다. 혹은 옵션 객체의 모습이 정해져 있다면 아래와 같이 작성할 수 있다. showName 함수는 매개변수를 받아서 그 객체의 na..

[TS] 함수 / 리터럴, 유니온, 교차 타입 / 클래스
2022. 7. 5. 19:57
프로그래밍/TypeScript
· 1. 함수 함수 타입 정의는 다음과 같이 한다. function add(num1: number, num2: number): number { return num1 + num2; } function add(num1: number, num2: number): void { console.log(num1 + num2); } function isAdult(age: number): boolean { return age > 19; } 인터페이스처럼 함수의 매개변수도 옵셔널로 지정할 수 있다. name이 있으면 name을 쓰고 없으면 world를 출력하게 하는 코드다. 하지만 호출할 때 매개변수가 없어서 빨간 줄이 나타났다. name이 없을 때의 코드가 있지만 타입스크립트에서는 보다 명시적으로 알려줘야 한다. 아래와..

[TS] 타입스크립트 사용 이유 / 기본 타입 / 인터페이스
2022. 7. 5. 01:18
프로그래밍/TypeScript
※ 브라우저들은 타입스크립트를 이해하지 못하기 때문에 타입스크립트를 자바스크립트로 변환해서 로드해야 실행 가능 1. 타입스크립트를 사용하는 이유 // 자바스크립트 코드 function add(num1, num2) { console.log(num1 + num2); } add(); add(1); add(1,2); add(3,4,5); add('hello', 'world'); 더보기 NaN NaN 3 7 "helloworld" add(1,2)를 제외하고는 원하는 결과가 나오지 않는다. add()의 경우에는 아무 인수도 전달하지 않았으니까 num1과 num2 모두 undefined가 되었고, undefined끼리 더했으니 NaN이 나온다. 하지만 자바스크립트는 아무런 경고도 주지 않았고, 실수가 분명함에도 심지..

네이버 부스트 캠프 7기 1차 코딩 테스트 후기
2022. 6. 30. 03:32
기타
1차 코테이고 작년 후기들 보니까 프로그래머스 Lv.1~2 수준이라길래 별로 큰 걱정은 안 했다. 준비는 그냥 프로그래머스 Lv.2 카카오 문제 풀어보기 근데 막상 끝나고 보니 작년보다 훨씬 어렵다고 했고 0솔이 속출했다. 문제는 오류가 있고 그러다 보니 노래방처럼 시간은 자꾸 추가되고... 얼레벌레 우당탕탕 그 자체 오픈채팅방 투표 보니까 약 520명 중 0솔 30%, 0.5솔(일부 테케 통과) 40%, 1솔 23% 몇 천명이 지원했을 테니 1솔도 전체 인원 기준 몇 백 명은 될 거라고 생각해서 컷 기준을 1솔로 잡지 않을까 했는데 0.1솔인 사람들도 많이 붙은 것 같다. 2차 코딩에서 많이 거르려고 하는 것 같다. 코딩 문제 2개, cs 객관식 10개가 나왔고 주어진 시간은 1시간 40분 + 추가 시..

[React] Link와 useNavigate
2022. 6. 23. 14:06
프로그래밍/React
Link import * as React from "react"; import { Link } from "react-router-dom"; function UsersIndexPage({ users }) { return ( Users {users.map((user) => ( {user.name} ))} ); } react-router-dom에서 제공하는 Link 컴포넌트는 DOM에서a 태그로 변환 내부적으로 a 태그를 통해 작동되고 사용법도 비슷하지만, 실제 동작은 일반적인 a 태그와 다르게 페이지 자체를 새로고침 하지는 않음 (History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장) 페이지가 새로고침 될 경우 현재 렌더링 되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링 → 컴포..