TypeScript8 [TIL] 2023.05.20 Typescript 기본 타입 지정 let project: { member: string[]; days: number; started: boolean } = { member: ['kim', 'park'], days: 30, started: true, }; Union type let age: string | number = 'kim'; let name: (string | number) = 100;. let array: (number | string)[] = [1,'2',3] let object: {data : (number | string) } = { data : '123' } let 학교: { score: (number | boolean)[]; teacher: string; friend: string | string[]; .. 2023. 5. 20. [TIL] 내일배움캠프 React 과정 2023.03.11 setState를 props로 넘길 때 type 지정하기 해당 setState에 마우스를 올리면 타입이 뜬다. 이걸 복사해서 type 값으로 넣어주면 된다. interface를 하나 만들어서 setState에 복사한 내용을 넣는다. 그리고 Dispatch와 SetStateAction은 따로 import를 해주어야 한다. 그리고 props에 이 interface를 이용해서 타입 지정을 한다. 회고 typescript any 제거 프로젝트🫠 102개에서 겨우 88개로 줄였다..... 오전에 분양모음집 확인하는데 갑자기 아파트 매매 실거래가 불러오는 API가 404가 떠서 심장이 철렁했다. 나 분명히 아무것도 안 건드렸는데 뭐지...? 하다가 다행히 국토교통부에서 점검(?)으로 인해 API 제공이 중단될 수 .. 2023. 3. 11. [TIL] 내일배움캠프 React 과정 2023.02.20 Today I Learned 오후 3시에 원장님께 기본 기능 시연하고 피드백받기 로그인 모달, 회원가입 페이지 UI 구현 typescript에서 styled-components에 여러 개의 props를 넘길 경우 처음에는 props의 타입을 이렇게 지정해 줬었는데 CategoryBtn 하단으로 새로운 스타일 컴포넌트를 작성해도 폰트 색상이 원래대로 적용이 안 돼서 뭔가 이상한가 하는 생각에 문제를 찾다가 타입 지정을 뭔가 잘못해 준 거 같다는 것을 발견했다. interface CategoryBtnStyledProps { bg: string; text: string; border: string; } export const CategoryBtn = styled.button` padding: 0 17px; h.. 2023. 2. 21. [WIL] 내일배움캠프 열두 번째 주_Typescript 드디어 이번 주에 타입스크립트를 배웠다. 스파르타에서 제공되는 강의는 너무 개념적인 내용들이라 처음에는 이해하는 데 어려움이 있었지만 예전에 redux로 만들었던 투두리스트를 타입스크립트를 이용해서 리팩토링하는 과정을 거치면서 타입스크립트를 좀 더 이해하게 된 거 같다. 근데 사실 아직 타입스크립트의 큰 장점은 느끼지 못했고 가끔 발생하는 타입 에러 때문에 번거롭기만 한 기분이다. 아직 규모가 작은 프로젝트만 경험해봐서 그런 걸까? 무튼 컴파일 타임에 에러를 잡아준다는 건 확실히 좋은 거 같다. 앞으로 계속 프로젝트를 경험하다 보면 타입스크립트를 유용하게 쓰게 될 날이 오겠지! Typescript로 리팩토링한 github 링크 https://github.com/heereal/TO-DO-LIST-Types.. 2023. 1. 24. [TIL] 내일배움캠프 React 과정 2023.01.22 Today I Learned GOLLA 팀 프로젝트 회의 카카오 API로 마커 클릭 이벤트 구현하기 Typescript 에러 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. 처음부터 타입스크립트로 프로젝트를 생성한 게 아니라 CRA로 프로젝트를 생성한 다음에 typescript를 따로 설치했더니 다음과 같은 에러가 떴다. 이때 해결 방법은 에러가 발생하는 컴포넌트에 import React from 'react' 해주기! typescript .d.ts 파일이란? .d.ts 파일 (선언 코드만 담긴 파일) 구현부가 아닌 선언부만을 작성하는 용도의 파일을 의미한다. JS 코드로 .. 2023. 1. 22. [TIL] 내일배움캠프 React 과정 2023.01.18 Today I Learned Typescript로 React TO-DO-LIST 리팩토링하기 Recoil 공부 공식 문서 https://recoiljs.org/ko/docs/introduction/getting-started/ 참고 영상 https://www.youtube.com/watch?v=t934FOlOMoM typescript로 react project 만들기 index.tsx 에러 const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); as HTMLElement라고 타입을 지정해줘야 한다. typescript에서 styled-components 사용하기 npm i --save-dev @types/sty.. 2023. 1. 18. [TIL] 내일배움캠프 React 과정 2023.01.17_Typescript Today I Learnend Typescript 기초 강의 수강 Type Alias (사용자 정의 타입) // type.ts type Hero = { name: string; power: number; height: number; }; import type { Hero } from './type'; const hero1: Hero = { name: '슈퍼맨', power: 1000, height: 190, }; // 동일함 const printHero = (hero: { name: string; power: number; height: number }) => { const printHero = (hero: Hero) => { console.log(hero.name, hero.power); }; cons.. 2023. 1. 17. [TIL] 내일배움캠프 React 과정 2023.01.16_Typescript Today I Leraned TypeScript 공부하기 Typescript vs Javascript Type Typescript는 정적 타입 Javascript는 동적 타입 let num = 3; num = '삼'; Javascript는 어떤 변수에 숫자, 문자, 배열, 객체 등 아무거나 할당 가능하다. Typescript는 처음에 숫자 (number)를 할당했으니 number에 string를 할당할 수 없다고 에러가 난다. Time (변수의 type 결정 시점) Typescript는 컴파일 타임 (compile time): 작성한 소스 코드가 어떠한 것(js, binary 등)으로 변환되는 과정 -> IDE(VS Code)에서 에러가 날 상황을 빨간 줄로 미리 알려준다. Javascript는 런타임 .. 2023. 1. 16. 이전 1 다음
