TS

[TIL] 23.03.15 TS 핸드북 - Typeof Type Operator

https://www.typescriptlang.org/ko/docs/handbook/2/typeof-types.html Documentation - Typeof Type Operator 타입 컨텍스트에서 typeof 연산자 사용하기. www.typescriptlang.org typeof 타입 연산자 자바스크립트에 이미 typeof 연산자가 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/typeof typeof - JavaScript | MDN typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다. developer.mozilla.org 타입스크립트는 타입 컨텍스트에서 변수나 프로퍼티의 타..

[TIL] 23.03.13 타입스크립트에서 효율적으로 상수 관리하기

효율적으로 상수 관리하기 타입스크립트에서는 포괄적인 타입(string, number, ...) 외에도 정확한 값을 타입으로 설정하는 것이 가능하다. let title: 'typescript'; title = 'javascript'; // Type 'javascript' is not assignable to type 'typescript' 타입스크립트에서는 컴파일러가 자동으로 타입을 추론하는 기능을 제공한다. let은 변수의 값을 언제든 바꿀 수 있기 때문에 더 포괄적인 타입으로 값을 추론하고, const의 경우는 변경이 불가능하기 때문에 리터럴 타입으로도 추론된다. let title = 'typescript'; // let title: string const content = 'typescript; //..

[TIL] 23.03.08 TS 핸드북 - More on Functions

https://www.typescriptlang.org/ko/docs/handbook/2/functions.html#%EB%82%98%EB%A8%B8%EC%A7%80-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98%EC%99%80-%EC%9D%B8%EC%88%98 Documentation - More on Functions TypeScript에서 함수가 어떻게 동작하는지 알아봅시다. www.typescriptlang.org 나머지 매개변수와 인수 나머지 매개변수(Rest Parameter) 정해지지 않은 수의 인수를 받아들이는 함수를 Rest Parameter를 이용해 정의할 수 있다. function multiply(n: number, ...m: number[]) { return m...

React Infinite Carousel 만들기(TS)

저번에 과제를 진행하면서 캐러셀을 직접 구현해보았다. 생각보다 고려할 부분도 많았지만 재밌었다 :) 일단 좌, 우 버튼을 클릭해 양쪽으로 이동할 수 있고, 옆으로 넘기는 방식의 터치 이벤트로도 이동할 수 있도록 구현했다. React 무한 캐러셀 구현 Home/index.tsx import Carousel from 'components/Carousel' const CAROUSEL_IMAGES = [ 'https://img.freepik.com/free-photo/vivid-blurred-colorful-background_58702-2545.jpg', 'https://img.freepik.com/premium-vector/abstract-pastel-color-background-with-pink-purp..

TypeScript에서 FormData로 이미지 업로드하기

React+TypeScript로 프로젝트 개발 중 프로필 사진 변경 기능을 추가하기 위해 formData에 이미지를 추가해서 보내주려고 하는데 안되서 삽질 좀 했다. 😕 왜 안돼..? const [image, setImage] = useState(); const handleInfoSubmit = async (e: FormEvent) => { e.preventDefault(); const formData = new FormData(); formData.append('profilePicture', image); // ... } 기존에 자바스크립트에서 formData를 보낼 때는 다른 것들과 마찬가지로 append를 해서 보내면 됐었는데 ts는 그렇게 하도록 두지 않았다. :( 오류 메시지 Argument o..

[TIL] 22.05.09 프리온보딩 Day 5 - TypeScript

기업과제를 앞두고 타입스크립트를 공부해봤다. (정말 간단하게 맛보기..) TypeScript for JavaScript Programmers https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html 타입 정의하기(Defining Types) 형태를 명시적으로 나타내기 위해서 interface로 선언. interface User { name: string; id: number; } 이제 변수 선언 뒤에 : TypeName의 구문을 통해 자바스크립트 객체가 새로운 interface의 형태를 따르고 있음을 선언할 수 있다. interface User{ ... } // --- cut --- const user: User = { name:..