본문 바로가기

typescript6

[TS|TIP] 회전된 사각형을 내접하는 사각형(BoundingBox) 구하기 회전된 사각형을 내접하는 사각형(BoundingBox) 구하기해당 아이디어를 기억해놓기 위한 기록이다. 아래는 순서대로 BoundingBox를 구하기 위한 함수들이다.가능한 한 함수가 하나의 기능을 하도록 구현하였다.  1. 각도를 라디안(radians)으로 변환하는 함수const toRadians = (angle: number): number => { return (angle * Math.PI) / 180;}; 2. 회전한 사각형의 경계 계산에 사용되는 코사인, 사인 값을 구하는 함수const getCosSin = (radians: number): { cos: number; sin: number } => { return { cos: Math.abs(Math.cos(radians).. 2024. 7. 24.
[DX] ESLint, Prettier 무엇인지 알고 설정해보기 들어가면서ESLint와 Prettier는 React의 기능이 아니지만, React 프로젝트에서 자주 사용하는 도구이기 때문에 해당 카테고리에 기술한다.  Prettier와 Lint를 사용하지 않으면 다음과 같은 문제가 발생할 수 있다.  - 의도하지 않은 구현 실수 때문에 에러가 발생하는 경우(예를 들어, 일관되지 않게 function과 arrow function를 혼용하여 this 바인딩이 의도한대로 발생하지 않는 문제) - 협업하는 인원이 많아질수록 개개인별 코드짜는 스타일이 달라 가독성이 떨어지는 경우(예를 들어, 줄바꿈이 4줄코드와 2줄인 코드의 연속적인 충돌 혹은 사용하지 않는 인자들의 잔재) 이러한 문제들은 작지만 신경 쓰이는 부분들로, 개발 생산성을 저하시킬 수 있다. (사실 필자가 겪은 .. 2024. 6. 3.
[Typescript] Typescript란? Typescript가 Javascript로 변해야하는 이유는? 목차 1. Typescript가 만들어진 배경과 정의 2. ES5, ESNext와 Typescript의 차이가 무엇인가 3. Typescript가 Javascript로 변해야하는 이유 Typescript(타입스크립트) 1. Typescript가 만들어진 배경과 정의 요즘 대부분의 회사에서 자바스크립트가 아닌 타입스크립트를 사용한다. 타입스크립트란, 자바스크립트가 가진 여러 문제를 해결하고 보완하기 위해 만들어진 언어이다. 여기서 여러 가지 문제라고 한다면 아래를 살펴보자. 더보기 동적 타입: 자바스크립트는 동적 타입 언어이므로 변수의 타입을 선언하지 않고 사용할 수 있다. 이는 개발자가 변수의 타입을 실수로 잘못 사용하거나, 의도치 않은 타입 변환으로 인한 오류가 발생할 수 있음을 의미합니다. 타입 체크.. 2023. 5. 24.
[Javascript] 문자열의 마지막 문자 가져오기 문자열의 마지막 문자 가져오기 파이썬에서 문자열의 마지막 요소를 가져오려면 배열 a의 a[-1]를 가져오면 됐었다. (아주 간편한 친구였다..!) 자바스크립트에서는 배열 마지막 요소를 -1의 인덱스로 가져오게 된다면, 아래와 같이 오류가 발생한다. 문자열의 마지막 문자를 가져오는 방법은 여러가지가 있겠지만, 기록하고자 하는 총 4가지 방법이 있다. 1. charAt()으로 마지막 문자 가져오기 charAt(index)는 index의 문자를 가져온다. 문자열의 마지막 index는 str.length - 1으로 계산 가능하다. '문자열 str의 길이를 length로 계산하고, index는 0으로 시작하기 때문에 -1을 해주면 마지막 문자열의 index이다. const str = "Hello, World"; .. 2023. 5. 20.
[Javascript] 문자열을 숫자 배열로 변환하는 방법 - split(",").map(Number) 문자열을 숫자 배열로 변환하는 방법 여러 숫자를 입력 받고 배열로 만들어야하는 과정이 있었다. 예를 들어, 1, 2, 3, 4 를 입력하면 [1, 2, 3, 4]로 저장되게끔 만들어지게끔. split()으로 값 분리 - split() 함수 내 인자로 구분 | map(Number) - 배열 내 원소 숫자로 변환 문제 1 ','(콤마)를 구분점으로 값을 분리하기에 split(",")을 활용한다. split으로 숫자들을 분리하면 원하는 값처럼 숫자가 아닌 문자열로 들어가게 된다. 해결 1 이때 split 함수뒤에 .map(Number)만 써주면 자동으로 문자가 숫자로 바뀌어 배열로 들어가게 된다. 문제 2 모든 사용자가 1, 2, 3, 4와 같이 ','(콤마)와 띄어쓰기를 온전하게 입력하지 않을 수도 있다. .. 2023. 4. 20.
[Typescript] 타입스크립트에서 JSON import하는 방법 타입스크립트에서 JSON import하는 방법 // *.ts import testJSON from "./testJSON"; 자바스크립트에서 json을 import 하는 방법은 위와 같이 import 하면 된다. 하지만, 타입스크립트로 전환하게 된다면 타입스크립트는 기본적으로 JSON 파일 확인을 지원하지 않기 때문에 json을 가져오기 위해 별도의 설정이 필요하다. 간단하게 tsconfig.json 파일에서 "resolveJsonModule":true의 주석을 풀어줌으로써 typescript 파일에서 JSON 파일을 import 할 수 있다. // tsconfig.json { "compilerOptions": { "resolveJsonModule": true, // more awesome compiler.. 2023. 4. 9.