타입스크립트

바닐라JS(TS)로 리액트 SPA 구현하기 | (6) JSX 구현해보기

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 JSX란? React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 마크업과 로직을 모두 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. JSX도 결국엔 표현식입니다. 컴파일이 끝나면, JSX는 JavaScript 객체로 인식됩니다. 이전 글에서, 우리는 마크업과 해당 엘리먼트 내의 로직을 따로 분리하여 코드를 작성했었습니다. JSX를 구현하여 이를 함께 포함할 수 있도록 해봅시다! JSX를 구현한 후, 우리는 컴포넌트 내 렌더함수에서 다음과 같은 형태로 컴포넌트를 작성하게..

바닐라JS(TS)로 리액트 SPA 구현하기 | (5) 간단한 웹 구현해보기

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 컴포넌트와 라우터가 만들어졌으니, 한번 애플리케이션을 띄워봅시다! src/index.ts import { initRouter, Route } from "./core/BrowserRouter"; // 또는 HashRouter import Main from "./pages/Main"; import Component from "@/core/Component"; import "./scss/index.scss"; import Sub from "./pages/Sub"; const routes: Route[] = [ { path: "/", ..

바닐라JS(TS)로 리액트 SPA 구현하기 | (4) 클래스로 BrowserRouter 구현

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 이번 글에서는 BrowserRouter를 구현해보도록 하겠습니다! 1. Route 타입 정의 export type Route = { path: string; page: typeof Component; }; 이는 HashRouter와 동일합니다. 2. Router 구조 class Router { $app: HTMLElement; routes: { [key: string]: typeof Component; } = {}; fallback: string = "/"; constructor() {} // 생성자 initEvent() {} ..

바닐라JS(TS)로 리액트 SPA 구현하기 | (3) 클래스로 HashRouter 구현

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 라우터를 구현하는 대표적인 방법에는 두 가지가 있습니다. 바로 BrowserRouter와 HashRouter인데요, 이 둘의 차이에 대해 잘 모르신다면 아래의 글을 먼저 읽어주세요 :) [BrowserRouter와 HashRouter, 뭐가 다를까? (feat. React Router)] HashRouter와 BrowserRouter를 모두 구현해 볼 텐데요, 이번 글에서는 HashRouter에 대해 먼저 다루어보도록 하겠습니다. 1. Route 타입 정의 export type Route = { path: string; page..

1. 타입스크립트 내려다보기 | 타입스크립트 프로그래밍 1~2장

준수하면 좋을 규칙 가장 최신 자바스크립트 문법과 기능 사용하기(esnext) 가능하면 스프레드를 활용하여 자료구조를 불변으로 만들기 모든 것에 타입을 붙이고, 가능하면 구체적인 타입으로 추론될 수 있게 하기. 명시적 타입을 너무 남용하지 않기. 재사용할 수 있는 범용 코드를 만들려 노력하기 (다형성) 자바스크립트에는 포인터나 참조가 없다. 그 대신 값과 참조 타입을 사용한다. 값은 불변이다. (문자열, 숫자, 불) 참조는 보통 가변이다. (배열과 객체 같은 자료구조나 함수) 타입스크립트는 더 안전한 프로그램을 구현할 수 있게 한다. 안전한은 타입 안정성이다. 타입을 이용해 프로그램이 유효하지 않은 작업ㅇ르 수행하지 않도록 방지한다 자바스크립트는 명백히 잘못된 동작임에도 넘어가곤 한다. 자바스크립트는 프..

13. 타입스크립트로 마이그레이션하기 | 이펙티브 타입스크립트 8장 (END)

자바스크립트 프로젝트에서 발견된 버그의 상당수는 타입스크립트를 사용했다면 컴파일 시점에서 미리 방지했을 수 있었을 것이다. 58. 모던 자바스크립트로 작성하기 타입스크립트는 특정 버전의 자바스크립트로 컴파일하는 기능도 갖고 있다. (즉, 트랜스파일러) 마이그레이션을 어디서부터 시작해야 할지 모르겠다면 최신 버전의 자바스크립트로 바꾸는 것부터 시작하자. 1. ECMAScript 모듈 사용하기 es6 버전부터 모던 자바스크립트라고 부른다. es6부터는 import/export를 사용하는 ECMAScript 모듈이 표준이 되었다. ES 모듈 시스템은 모듈 단휘로 전화할 수 있게 해주기 때문에 점진적 마이그레이션이 원활해진다. // CommonJS // a.js const b = require("./b"); c..

12. 코드를 작성하고 실행하기 | 이펙티브 타입스크립트 7장

53. 타입스크립트 기능보다는 ECMAScript 기능을 사용하기 TC39(자바스크립트 표준 기구)는 내장 기능을 추가해왔다. 그러면서 타입스크립트 초기 버전과의 호환성 문제가 발생했다. 타입스크립트는 자바스크립트의 신규 기능을 그대로 채택하고 타입스크립트 초기 버전과의 호환성을 포기했다. 그렇게 TC39는 런타임 기능을 발전시키고, 타입스크립트 팀은 타입 기능만 발전시킨다는 원칙을 세우고 지켜오고 있다. 이 원칙이 세워지기 전에 이미 사용되고 있던, 타입 공간과 값 공간의 경계를 혼란스럽게 만드는, 피해야 하는 기능을 살펴보자. 다음 기능들으 ㅣ경우에는 타입 정보를 제거한다고 자바스크립트가 되지는 않는다. 1. 열거형(enum) enum Flavor { VANILLA = 0, CHOCOLATE = 1,..

바닐라JS(TS)로 리액트 SPA 구현하기 | (2) 클래스로 컴포넌트 구현

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 리액트 컴포넌트와 유사한 구조를 class로 만들어 봅시다! 1. Component 구조 export interface PropsType {} export interface StateType {} export default class Component { target: Element; props: P; state: S; constructor() {} // 생성자 setup() {} // 기본적인 선언 및 할당 template() { // element 반환 return "" } render() {} mount() {} updat..