본문 바로가기

전체 글302

[CRA, TS, styled-component] 카드뽑기 프로젝트 (관리자 페이지) 디자인 2022. 9. 16.
[객체타입] readonly, 인덱스드 시그니처, 맵드 타입스 // 수정할 수 없는 타입 readonlyinterface A { readonly a: string, b: string } type B = { a: string, b: string, c: string, d: string }// 인덱스트 시그니처type C = { [ key: string ]: string }// 맵드 타입스type D = "Human" | "Mamal" | "Animal"type E = { [ key in D ]: string }type Ee = { [ key in D ]: D }const aaa: E = { Human: "a", Mamal: "b", Animal: "c" }const aaa: Ee = { Human: "Human", Mamal: "Mamal", Animal: "Anima.. 2022. 9. 15.
Type guard / narrowing / predicates 타입 가드를 사용하는 이유는 보통 fetch 로 union 타입의 데이터를 가져올때이다. 만약 API 호출로 받아온 데이터의 타입이 string인데 toFixed(n) 과 같은 메서드를 사용했을때 에러를 발생시킨다. 당연히 그 뒤에 오는 코드들도 실행되지 않으니 큰 문제가될 수 있다. 타입가드, 타입 좁히기할때 사용할 수 있는 방법으로는.. ■ Primitive value check- typeof : 원시값(string, number, boolean) 을 체크한다. ■ Reference value check- instanceof : class only ■ Object's key name check- key in obj : 객체에서 key 값이 있는지 확인 ■ Object array check- isArr.. 2022. 9. 13.
타입스크립트 공부 1. node.js 설치 - npm init -y 실행 → package.json 파일이 생성되고 해당 프로젝트는 node.js로 운영이된다. 2. TS설치 - npm i typescript 3. TSC 실행 - npx tsc : ts파일을 js파일로 변환 - npx tsc --init → tsconfig.json 생성 tsconfig.json 옵션 중 allowJs 주석을 풀어 활성화시키면 자바스크립트를 사용가능하다. 옵션은 나중에 더 알아보자 타입스크립트는 자바스크립트의 변수, 매개변수, 리턴값에 타입을 설정하는 것이 전부이다. 타입을 설정하는 행동을 "타이핑 한다"라고 한다. 종류: string, number, undefined, null, any, symbol, bigint 1. TS문법: 1. .. 2022. 9. 8.
[개인 프로젝트] 카드뽑기 프로젝트 [소개] 랜덤 뽑기를 통해 나만의 캐릭터를 보관하고 캐릭터들로 덱을 구성해 친구들과 내기를 할 수 있는 서비스입니다. [기능] 1. 이미지 감지(detection)의 결과를 바탕으로 임의 캐릭터 생성 2. 생성된 캐릭터를 성장시켜 덱을 만들 수 있다. 3. 다른 유저와의 상호작용(실시간 대화, 친구 추가, 메시지 전달) [세부내용] 1. 이미지를 업로드하여 이미지에서 감지된 인물에 대한 감정값을 바탕으로 캐릭터를 제공합니다. 2. 캐릭터에 설정된 스탯은 최초 1 ~ 5 사이 랜덤으로 설정됩니다. 3. 사용자는 캐릭터를 보관할 수 있고 캐릭터를 업그레이드 할 수 있습니다. 4. 레벨업을 할때마다 5 ~ 20 사이 활률에 따라 스탯이 결정됩니다. 예를 들어 제일 높은 수치인 20은 1%, 10은 15%의 확.. 2022. 9. 6.
useRef (feat. useEffect) https://velog.io/@juno7803/React-useRef-200-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0 [React] useRef 200% 활용하기 useRef, 제대로 알고 사용해봐요 😁 velog.io const inputRef = useRef(null); ↑ TypeScript에서의 사용법 2022. 8. 12.