본문 바로가기

TypeScript11

[React/TypeScript] React-Spilt-Table 오픈소스 라이브러리 Inner Circle 두 번째 프로젝트 '오픈소스 라이브러리 프로젝트' 활동에서 만든 라이브러리. https://www.npmjs.com/package/react-split-table react-split-tableA React component for creating split tables with resizable columns and rows.. Latest version: 0.0.20, last published: a day ago. Start using react-split-table in your project by running `npm i react-split-table`. There are no other projects in the npm regiwww.npmjs.com 아래의 순서로.. 2025. 4. 21.
[Inner Circle] FE과정 3-4주차 정리 25/04/07번들링, tsconfig에 대해서도 보기 25/04/08왜 useEffect 밖에서 실행한 함수는 ref(엘리먼트)값이 없을까?useEffect는 렌더링 직후 실행되기 때문.반면 일반 함수는 렌더링 중에 실행되기 때문에 엘리먼트가 렌더링되지 않은 시점이기 때문에 없다. 25/04/09에러 핸들링 시에 에러 바운더리를 이용해보고 싶다.(그냥)리렌더링시 state와 ref와 일반변수의 차이: 일반변수는 값이 안남아있음. state와 ref는 남아있음.state와 ref의 가장 큰 차이는 "값 변경" 시임. state는 값이 변경되면 리렌더링을 유발함.또 다른 차이는 ref는 항상 최신 값이라는 점. state는 렌더링이 끝나야 최신 값을 얻을 수 있음.고민되는것: 프리티어 쓰기멘토링: 요새는 .. 2025. 4. 16.
[Inner Circle] FE과정 1주차 정리 Inner Circle 진행하면서 알게된 사실을 블로그에도 포스팅... 스택 : vite + TS + CSS 25/03/24forEach보단 for of문을 쓰자. (가독성+효율성 면에서 더 낫다)DOM 엘리먼트 변수에 붙이는 $ prefix는 최근 잘 안쓰인다. (jQuery 시절에나 쓰였다고...)import/export를 쓰려면 태그 안에 type="module"를 붙이면 된다. 안써도 되면 안붙여도 된다. 25/03/25타입 단언 (as ...) 는 웬만해선 안 쓰는 게 좋다. (차라리 narrowing이 낫다고 한다.)document.querySelector()는 제네릭 타입을 지정할 수 있다.input[type=number] 엘리먼트는 valueAsNumber로 값을 가져올 수 있다.비슷한 .. 2025. 3. 25.
[TypeScript] Record 해시 테이블로 switch문 대체하기 이것은 회사 후임분이 자주 쓰시던 팁인데, 좋아보여서 나도 사용해보기로 했다.일단 기존에 작성하던 방법은 아래와 같은 예시이다.export enum CharacterType { LANCER, ROUXLS, RALSEI}export const getCharacterOrderByName = (name: string) => { switch (name) { case "lancer": return CharacterType.LANCER; case "rouxls": return CharacterType.ROUXLS; case "ralsei": return CharacterType.RALSEI; }} enu.. 2025. 3. 6.
[TypeScript] 파라미터 전달에 대한 고찰 오늘은 그냥 간단한 글입니다. type PrintUser = (name: string, age: number) => void;const printUser: PrintUser = (name, age) => { console.log(name, age);};printUser("aa", 10);뷰에서 커스텀 훅이 리턴하는 함수를 호출할 일이 있었는데 위와 같은 방법(함수형 개별인자 타입)으로 호출하였다.왜냐면 뷰에서 객체를 만들기가 싫었기 때문이다. (코드가 지저분해져서)하지만 이러한 방식은 순서가 바뀌었을 때도 타입스크립트에서 잡아줄 수 없는 상황이 될 수 있기 때문에, 위험성이 있다. type User = {name: string; age: number};const printUser = (user: Use.. 2025. 2. 20.
[TypeScript] enum, const enum, as const enum, const enum 비교나는 상수를 선언할 때 습관적으로 enum을 사용했었는데, 타입스크립트에서 enum보다는 const enum을 사용하는 게 더 좋다는 글을 보았다. enum ColorType { RED, BLUE, GREEN}console.log(ColorType.RED); // 0const enum ColorType { RED, BLUE, GREEN}console.log(ColorType.RED); // 0 enum의 문제는런타임에 객체를 만들기 때문에 오버헤드가 발생한다.사용되지 않는 코드들도 번들에 포함되어 번들 용량이 증가한다. (즉, Tree Shaking이 안 된다.)  const enum을 사용하면 위의 문제들이 해결되지만, 제한이 있다.리버스 매핑이 안 .. 2025. 2. 10.
[TypeScript] 유틸리티 타입 (Partial, Required, Record, Pick, Omit, Exclude) 소개유틸리티 타입(Utility Types)은 개발자의 편의를 위해 타입스크립트가 제공하는 특수한 타입들이다. 기존의 타입을 조작한 여러가지 유용한 타입을 만들 수 있다.  상황타입스크립트를 사용하면서 Interface로 타입을 정의하게 되는데, 어떤 변수를 정의할 때는 일부분의 필드만을 사용하고 싶다. 이런 상황이라면, 유틸리티 타입을 고려해볼 수 있다.  Documentation - Utility TypesTypes which are globally included in TypeScriptwww.typescriptlang.org   Partial, Requiredinterface User { name: string; age: number;}const user: Partial = { n.. 2024. 12. 12.
[TypeScript] 타입스크립트의 TS7053 오류와 타입 추론 타입스크립트에서 TS7053 오류가 발생하는 경우를 살펴보자.우선 아래 코드를 보자.const obj = { name: "doringri",};let propertyName = "name";console.log(obj[propertyName]); // TS7053 error 자바스크립트라면 아무런 문제가 없는 코드지만, 타입스크립트는 에러를 표시한다.하지만 propertyName을 const로 정의하면 어떨까? const obj = { name: "doringri",};const propertyName = "name";console.log(obj[propertyName]); // doringri 에러 없이 잘 출력된다. 타입스크립트는 어떤 변수를 선언하거나 초기화할 때 타입 추론을 .. 2024. 11. 30.
[TypeScript] 타입스크립트의 Duck Typing과 Freshness Duck Typing타입스크립트의 타입 추론은 값의 형태에 기반하여 이루어지는데, 이걸 구조적 서브타이핑(Structural SubTyping) 또는 덕 타이핑(Duck Typing)이라고 한다. Java 등에서 사용하는 명목적 서브타이핑(Nominal SubTyping)은 명시적으로 타입이나 상속 관계를 지정해주어야 하는 반면, 구조적 서브타이핑은 객체의 프로퍼티를 기반으로 타입을 호환시킨다. // 명목적 서브타이핑 예시type Animal = { name: string; age: number;}// Duck은 Animal에게 상속받았다고 관계를 명시해두고 있음type Duck = Animal & { isBirdFluInfected: boolean;} 위 코드에서 Duck 타입으로 선언.. 2024. 11. 29.
[TypeScript] 타입스크립트 기초 회사에서 타입스크립트를 사용한지는 좀 됐지만 정작 문서를 제대로 살펴본 적은 없다는 걸 깨달았습니다.신입 분이 공부하는 걸 보고 제 자신을 되돌아보게 되었습니다. 나는 과연 얼마나 알고 있는 걸까,, 아래 문서를 정리한 포스트입니다. Handbook - The TypeScript HandbookYour first step to learn TypeScriptwww.typescriptlang.org 1. 타입 추론(Types by Inference)변수 정의 시 명시적으로 타입을 지정해주지 않아도 타입스크립트는 알아서 타입을 생성합니다.// 명시적으로 타입 지정let name: string = "doringri";// 이래도 알아서 string 타입으로 사용함let name = "doringri"; 2... 2024. 7. 3.
[JavaScript/TypeScript] 반복문 안에 있는 비동기 처리 방법 프로젝트 중 반복문을 돌면서 비동기 요청을 해야 하는 상황이 있어서 찾아보았습니다.타입을 작성하는 게 이해가 쉬울 것 같아서 TypeScript로 작성하였습니다.  1. forEach무조건 비동기적으로 처리됨.const nums: number[] = [1, 2, 3];nums.forEach(num => { axios.get(`127.0.0.1:8080/${num}`) .then(() => console.log(num));});요청 순서는 1, 2, 3의 순서지만 비동기적이므로 응답이 먼저 오는 순서대로 로그가 찍힌다.async나 await로도 동기 처리가 되지 않는다.   2. for 또는 for-ofasync와 await을 사용함으로써 순서대로 처리가 가능함. 아래 코드에서는 for-of 문.. 2024. 5. 10.

티스토리툴바