TypeScript

[VanillaJS, React] 마우스 따라다니는 원 만들기(feat. requestAnimationFrame)

잘 만들어진 인터랙티브 웹들을 보며 저건 어떻게 만드는걸까 항상 궁금했었다. 인프런을 둘러보다가 몇 줄로 끝내는 인터랙티브 웹 개발 노하우라는 강의를 발견했고, 기초적인 것들을 만들어봐야겠다고 생각했다. 몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편] - 인프런 | 강의 짧은 시간에 실무에서 가장 많이 사용하는 인터랙티브 스킬을 알려드립니다., - 강의 소개 | 인프런 www.inflearn.com 가장 첫 실습인 마우스를 따라다니는 원 만들기를 해보려고 한다. VanillaJS로 구현해보기 HTML 먼저 box라는 클래스명을 가진 div를 하나 만들어준다. CSS .box { background-color: lightgray; border-radius: 50%; width: 80px; height..

[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...

[TIL] 23.01.15 타입스크립트 핸드북 - More on Functions(2)

함수 오버로드 몇몇 자바스크립트 함수는 다양한 인수의 개수, 타입을 통해 호출될 수 있다. (eg. Date를 생성하고 인수로 타임스탬프 하나만 받을 수도 있고 월, 일, 연도를 받는 함수를 만들 수도 있다.) 타입스크립트에서는 이를 오버로드 시그니처를 작성함으로써 묘사할 수 있다. 그러기 위해 함수 시그니처 몇 개(보통 2개 이상)를 적은 후 함수 본문을 작성하면 된다. function makeDate(timestamp: number): Date; // 오버로드 시그니처 1 function makeDate(m: number, d: number, y: number): Date; // 오버로드 시그니처 2 function makeDate(mOrTimestamp: number, d?: number, y?: ..

[TIL] 23.01.11 타입스크립트 핸드북 - More on Functions(1)

https://www.typescriptlang.org/ko/docs/handbook/2/functions.html Documentation - More on Functions TypeScript에서 함수가 어떻게 동작하는지 알아봅시다. www.typescriptlang.org 함수 타입 표현식 함수를 설명하는 가장 간단한 방법은 함수 타입 표현식이다. function greeter(fn: (a: string) => void) { fn("Hello, World"); } function printToConsole(s: string) { console.log(s); } greeter(printToConsole); (a: string) => void는 문자열 타입 a를 하나의 매개변수로 가지고 반환값이 없는 ..

[TIL] 22.12.30 타입스크립트 핸드북 - Everyday Types

타입스크립트를 프로젝트에서는 많이 사용해봤지만 개념을 제대로 공부해본 적은 없기 때문에 핸드북 내용을 정리해보려 한다. 자료는 공식 타입스크립트 핸드북과 캡틴판교님의 타입스크립트 핸드북을 참고할 예정. 타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 변환해주는 컴파일 과정을 거쳐야 한다. 타입스크립트를 써야 하는 이유 에러의 사전 방지 타입스크립트를 사용하면 에러를 사전에 방지할 수 있다. // math.js function sum(a, b) { return a + b; } 위의 코드는 두 숫자의 합을 구하는 함수 코드이다. sum(10, 20); // 30 sum('10', '20'); //1020 숫자 10과 20을..

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..

React 스톱워치 구현하기(TS)

스톱워치를 구현해야하는 과제가 있어서 직접 구현해보았다. StopWatch.tsx import { useState, useEffect } from 'react' const StopWatch = () => { const [time, setTime] = useState(0) const [isRunning, setIsRunning] = useState(false) useEffect(() => { let interval: NodeJS.Timer | undefined if (isRunning) { interval = setInterval(() => { setTime((prevTime) => prevTime + 10) }, 10) } else { clearInterval(interval) } return () =>..

Next.js에서 mui 사용하기(TypeScript)

얼마 전에 진행했던 기업 사전 과제에서 Next.js에 css 프레임워크를 적용하라는 조건이 있어 mui를 적용하게 되었다. react에서 개발할 때는 패키지 설치만 하면 간단하게 사용할 수 있었는데 Next.js에서는 추가적인 설정이 필요했다. mui 설치 먼저 mui를 설치한다. npm install @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles // or yarn add @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles CssBaseline 설정 CssBaseline은 Next.js에서 mui를 쓰기 위해서 필수적인 것은 ..