typescript4 [React][Typescript] 타입스크립트 개념 심화 목차 구조적 서브타이핑//구조적 서브타이핑//이름이 다른 객체라도 가지고 있는 속성이 동일하다면//타입스크립트는 서로 호환 가능하다.interface Pet { name: string;}interface Cat{ name: string; age: number;}let pet : Pet;let cat: Cat = {name: "zag", age: 2};pet = cat;//함수도 가능function greet(pet: Pet){ console.log(pet.name);}greet(cat);//class, interface, type, 모두 구조적 서브 타이핑 가능 값과 타입 공간에 동시에 존재하는 심볼인 class 와 enumclass Rectangle { "height": numb.. 2024. 8. 30. [React][TypeScript] 타입스크립트에 대해 알아보자 목차 타입스크립트가 무엇이고 왜 써야하는지 그리고 활용 방법에 대해 알아보자 타입스크립트란?타입스크립트는 자바스크립트의 단점을 보완하기 위해 만들어진 정적 타입 언어(static type language)이다.자바스크립트가 확장된 언어이기 때문에 기존 자바스크립트의 기능을 모두 사용할 수 있고 브라우저에서 실행하기 위해서 컴파일(complile)이라는 변환 과정을 거쳐야 한다. 타입스크립트는 왜 써야 하는거지?1. 에러의 방지// jsfunction sum(a, b) { return a + b;}// tsfunction sum(a: number, b: number) { return a + b;} number 타입에 문자열을 할당할 수 없다고 에러가 발생하게 되어 의도하지 않은 코드의 동작을 예방할.. 2024. 8. 28. [재활용 프로젝트][리액트] 카카오 api 맵 코드 리뷰하면서 배운 점 정리 목차 내가 코드 리뷰를 받고 수정하면서 배운 점을 적어 보고자 한다. 프로젝트를 하면서 많은 것을 배우는 것 같다.. 받은 요청 수정사항 수정 사항 만들기 전에는 브랜치를 새로 파자 git branch fix-version git add . git commit -m "수정사항 완성 버전" 수정 사항 브랜치를 안만들고 수정했다가 실행이 잘 안되서 애를 먹었다.. 아래 있는 깃 명령어로 되돌렸다 ㅠㅠ git restore . //커밋 전으로 모든 파일을 되돌림 .env.local .env.local -> git에 올리게 되면 api키, 비밀번호 등 개발을 하면서 보이면 안될 것들을 숨겨줌 쓰는 방법 //.env.local 파일 REACT_APP_KAKAO_MAP_KEY = afdfaewfaffaef1123 .. 2024. 4. 5. [재활용 프로젝트][리액트] 카카오 api 분류별 마커 표시 컴포넌트화 목차 저번 맵 불러오는 것에 이어서 마커들을 버튼을 누를때 마다 종류별로 보이게끔 해보았다.그 과정에서 리액트로 컴포넌트화하고 리팩토링한 것을 정리해 보려고 한다.타입을 지정해주는 과정에서 많은 것을 배운 것 같다. 완성 모습완성되어 버튼을 누를때 마다 바뀌는 모습이다.. data.ts 마커들을 종류별로 저장하기 위해 만든 파일이다.import { Position, MarkerProps } from './Marker';// 인터페이스를 임포트 받아 상속을 통해 확장한 모습이다.export interface DataMarkerProps extends MarkerProps { name: string;}// 이름, 위치, origin을 속성으로 가진다.const markers: DataMarkerProps[.. 2024. 4. 3. 이전 1 다음 728x90
