본문 바로가기
반응형

전체 글

 (501)
[한 입 크기로 잘라먹는 타입스크립트] 타입 조작하기 1. 타입 조작이란 타입을 조작한다는 것은 기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 것이다. 2. 인덱스드 엑세스 타입 인덱스드 엑세스 타입은 인덱스를 이용해 다른 타입 내의 특정 프로퍼티의 타입을 추출하는 타입이다. 인덱스드 엑세스 타입은 객체, 배열, 튜플에 사용할 수 있다. 복잡하고 큰 타입으로 부터 잘게 나눈 것의 타입을 뽑아낼 수 있어 실무에서 자주 쓰인다. 1) 객체 프로퍼티의 타입 추출하기 다음과 같은 게시글을 표현하는 객체 타입이 있다고 가정해보자. interface Post { title: string; content: string; author: { id: number; name: string; age: number..
[한 입 크기로 잘라먹는 타입스크립트] 제네릭 1. 제네릭 소개 제네릭이란 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어 주는 기능이다. 제네릭 함수는 두루두루 모든 타입의 값을 다 적용할 수 있는 그런 범용적인 함수이다. 다음과 같이 제네릭 함수를 선언할 수 있다. function func(value: T): T { return value; } let num = func(10); // number 타입 함수 이름 뒤에 꺽쇠를 열고 타입을 담는 변수인 타입 변수 T를 선언하고 파라미터와 반환값의 타입을 T로 설정한다. T에 어떤 타입이 할당될 지는 함수가 호출될 때 결정된다. func(10) 처럼 Number 타입의 값을 아규먼트로 전달하면 파라미터 value에 Number 타입의 값이 저장되면서 T가 Number..
[한 입 크기로 잘라먹는 타입스크립트] 인터페이스 1. 인터페이스 인터페이스란 타입 별칭과 동일하게 타입에 이름을 지어주는 또 다른 문법이다. 인터페이스는 타입 별칭과 문법만 조금 다를 뿐 기본적인 기능은 거의 같다고 볼 수 있다. interface Person { name: string; age: number; } const person: Person = { name: "이정환", age : 27 }; // 선택적 프로퍼티 interface Person { name: string; age?: number; } const person: Person = { name: "이정환", // age: 27, }; // 읽기 전용 프로퍼티 interface Person { readonly name: string; age?: number; } const person..
[한 입 크기로 잘라먹는 타입스크립트] 함수 타입 1. 함수타입 자바스크립트 함수를 다른 사람에게 설명하는 가장 좋은 방법은 이 함수가 어떤 매개변수를 받고 어떤 값을 반환 하는지 이야기 하는 것이다. 그럼 타입스크립트에서는 어떤 타입의 매개변수를 받고, 어떤 타입의 값을 반환하는지 이야기 하면 된다. function func(a: number, b: number): number { return a + b; } 화살표 함수의 타입 정의 방식도 함수 선언식과 동일하다. const add = (a: number, b: number): number => a + b; # 파라미터 기본값 설정하기 다음과 같이 함수의 파라미터에 기본값이 설정되어있으면 타입이 자동으로 추론된다. 이럴 경우 타입 정의를 생략해도 된다. function introduce(name = ..
[한 입 크기로 잘라먹는 타입스크립트] 타입스크립트 이해하기 1. 타입스크립트 이해하기 타입스크립트를 이해한다는 말은 타입스크립트가 어떤 기준으로 타입을 정의하고, 어떤 기준으로 타입들간의 관계를 정의하고, 어떤 기준으로 타입스크립트 코드의 오류를 검사 하는지 그 원리와 동작 방식을 낯낯이 살펴본다는 말이다. 중요한 문법 들만 쏙쏙 뽑아서 달달 외우듯이 빨리 배워서 빨리 프로젝트에 타입스크립트를 적용하는것도 방법이 될 수 있긴 하지만 타입스크립트는 문법만 외워서 대부분의 상황에 잘 써먹을 수 있을 만큼 만만한 언어는 아니다. 원리와 개념에 대한 수준급의 이해가 없다면 새롭거나 어려운 문제를 맞닥뜨렸을때 스스로의 힘으로 해결하기 힘들다. 결론은 뭐다? 뭘 배우던 시간을 가지고 천천히 배워나가야 한다. 급할 때 볼 수 있는 타입스크립트 중요 문법 모음도 있다. htt..
[한 입 크기로 잘라먹는 타입 스크립트] 타입스크립트 기본 1. 기본 타입 기본 타입(내장 타입) = 타입스크립트가 자체적으로 제공하는 타입 2. 원시 타입 원시 타입(Primitive Type) = 동시에 한 개의 값만 저장할 수 있는 타입 원시 타입이 아닌 배열이나 객체 같은 비 원시 타입들은 동시에 여러 개의 값들을 저장할 수 있는 반면, number, string, boolean 등의 원시 타입은 단 하나의 값만 저장 가능하다. 1) number 타입 자바스크립트에서 숫자를 의미하는 모든 값을 포함하는 타입. 단순 정수 뿐만 아니라 소수, 음수, Infinity, NaN등의 특수한 숫자들도 포함한다. 변수의 이름 뒤에 콜론(:)과 함께 변수의 타입을 정의하는 문법 = ‘타입 주석’ or ‘타입 어노테이션’ // number let num1: number ..
오심테 기능 추가 시간 관계 상 Next JS를 체험해볼 수 있는 난이도 및 양을 고려하여 많은 기능을 만들지 못했다. 목표는 SQL 개발자 전까지 테스트 목록, 테스트, 테스트 공유 기능을 만드는 것이였다. 만들면서 욕심이 생겨 추가하고 싶었던 기능이 몇 가지가 더 있어서 추후 오심테를 리팩토링 하거나 기능을 추가할 수 있는 시간적 여유가 생기면 어떤 것을 하고 싶은지 순위 별로 정리해놓자. # 기능 추가 1. 로그인 기능 추가 - OAuth 사용하여 로그인 - 해보고 싶은 테스트 찜 하기 - 찜해놓은 테스트 목록 보기 2. 심리 테스트 소셜 공유 - 카카오톡으로 공유할 수 있는 기능 추가 3. 심리 테스트 결과 통계 - 각 답변 별 유저 선택 비율 보기
[회고] 토이 프로젝트 '오심테' 회고 프로젝트 명 : 오심테(오늘의 심리테스트) 프로젝트 기간 : 2023.05.17 ~ 2023.06.08 프로젝트 소개 : 카테고리 별 심리 테스트 모음집 다양한 심리 테스트를 하나의 플랫폼에서 빠르고 간편하게 찾기 심심할 때, 시간 때울 때, 아이스 브레이킹이 필요할 때 가볍게 즐기기 가족, 친구, 연인과 테스트를 공유하며 추억 쌓기 기술 스택 : NextJS, React, Javascript, TailwindCSS, Recoil, Firebase, Vercel 배포 링크 : psy-test-flame.vercel.app 깃허브 링크 : https://github.com/sweetyr928/Psy-Test 나의 첫 토이 프로젝트, '오심테'를 마무리 짓는다. 동생과 심리테스트를 즐겨했었다. 자기 전에 누..
반응형

티스토리툴바