TYPESCRIPT18 리액트와 타입스크립트 Props로 작업하기 App.tsx import React from "react"; import TodoList from "./components/TodoList"; // 1 const App: React.FC = () => { const todos = [{ id: "t1", text: "타입스크립트 공부 마무리" }]; return ( // 2 ); }; export default App; 리액트에서 제공하는 Function Component 타입이고 JSX를 리턴합니다. TodoList 컴포넌트로 todos를 전달합니다. TodoList.tsx import React from "react"; // 1 interface TodoListProps { items: {id: string, text: stri.. 2023. 4. 11. 장소 선택 및 공유 구글 API 연습 기초 세팅 index.html 주소를 입력해주세요 찾기 app.css html { font-family: sans-serif; } #map { width: 90%; height: 20rem; border: 1px solid #ccc; margin: 2rem auto; display: flex; justify-content: center; align-items: center; text-align: center; } form { text-align: center; margin: 2rem auto; } 입력된 주소의 좌표 가져오기 https://developers.google.com/maps/documentation/geocoding/start?hl=ko 시작하기 | Geocoding API | Google .. 2023. 4. 10. 웹팩(Webpack) 사용하기 웹팩(Webpack)이란 무엇이며 왜 필요한가 다음과 같이 지금까지 진행했던 프로젝트 네트워크 탭을 확인하면 폭포 형태의 차트를 볼 수 있습니다. 이는 HTTP 요청을 설정하는 데 걸리는 셋업 시간을 나타낸 것입니다. 보시다시피 파일이 매우 작더라도 모든 HTTP 요청을 위한 여분의 셋업으로 인해 시간이 다소 소요되는 것입니다. 모든 HTTP 요청에는 베이스 오버헤드(base overhead), 지속(duration)이 발생합니다. 지금은 모든 것들이 로컬 개발 서버 환경에서 이루어지고 있기 때문에 설정이 매우 빠르게 진행됩니다. 하지만 웹에서 실행하는 경우 이렇게 다수의 요청이 있다면 HTTP 요청의 양만으로 인해 다량의 대기시간이 발생하고 프로젝트가 느려질 수 있습니다. 그렇기 때문에 브라우저 지원에.. 2023. 4. 7. 모듈과 네임스페이스 네임스페이스 작업하기 drag-drop-interfaces.ts namespace App { export interface Draggable { dragStartHandler(event: DragEvent): void; dragEndHandler(event: DragEvent): void; } export interface DragTarget { dragOverHandler(event: DragEvent): void; dropHandler(event: DragEvent): void; dragLeaveHandler(event: DragEvent): void; } } 기존에 프로젝트에서 app.ts에 모두 몰려있던 코드를 나누는 작업입니다. 일단 드래그&드롭 인터페이스만 따로 빼서 파일을 만들고 네임스페이스.. 2023. 4. 6. 연습 프로젝트 4 드로그 앤 드롭 구현을 위한 인터페이스 활용하기 // 1 interface Draggable { dragStartHandler(event: DragEvent): void; dragEndHandler(event: DragEvent): void; } ... class ProjectItem extends Component implements Draggable // 2 { private project: Project; get persons() { if (this.project.people === 1) { return "1 person"; } else { return `${this.project.people} persons`; } } constructor(hostId: string, project: Project.. 2023. 4. 4. 연습 프로젝트 3 상속 & 제네릭 추가하기 // 1 abstract class Component { templateElement: HTMLTemplateElement; hostElement: T; element: U; constructor( templateId: string, hostElementId: string, insertAtStart: boolean, newElementId?: string ) { this.templateElement = document.getElementById( templateId )! as HTMLTemplateElement; this.hostElement = document.getElementById(hostElementId)! as T; const importedNode = document.. 2023. 4. 3. 연습 프로젝트 2 렌더링 프로젝트 목록 class ProjectList { templateElement: HTMLTemplateElement; hostElement: HTMLDivElement; element: HTMLElement; // 1 // 2 constructor(private type: 'active' | 'finished') { this.templateElement = document.getElementById( "project-list" )! as HTMLTemplateElement; this.hostElement = document.getElementById("app")! as HTMLDivElement; const importedNode = document.importNode( this.templateE.. 2023. 3. 31. 연습 프로젝트 1 기본 HTML 파일은 다음과 같습니다. Title Description People ADD PROJECT DOM 요소 선택 및 OOP 렌더링 class ProjectInput { // 1 templateElement: HTMLTemplateElement; hostElement: HTMLDivElement; element: HTMLFormElement; constructor() { this.templateElement = document.getElementById( "project-input" // 2 3 )! as HTMLTemplateElement; this.hostElement = document.getElementById("app")! as HTMLDivElement; // 4 const impor.. 2023. 3. 30. 데코레이터 데코레이터는 추가적인 구성과 추가적인 로직을 더 할 수 있게 합니다. 먼저 tsconfig.json 파일에서 이 부분을 수정해야 데코레이터를 문제없이 쓸 수 있습니다. "experimentalDecorators": true 데코레이터 만들기 function Logger (constructor: Function) { console.log('Logging...'); console.log(constructor); } // 여기 @Logger class Person { name = 'KIM'; constructor() { console.log('Creating person object...'); } } const pers = new Person(); console.log(pers); 데코레이터 함수는 관행적으로.. 2023. 3. 28. 이전 1 2 다음
