ALL

바닐라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..

BrowserRouter와 HashRouter, 뭐가 다를까? (feat. React Router)

CRA로 리액트 프로젝트를 생성하면, 기본적으로 react-router-dom을 사용하게 됩니다. 이 react-router-dom은 두 가지 라우터를 제공합니다. 바로 BrowserRouter와 HashRouter죠. 이 두 개념은 react-router-dom에만 해당되는 이야기는 아닙니다. BrowserRouter는 HTML5의 history API를 사용한 방식이고, HashRouter는 URL의 hash를 사용한 방식입니다. 리액트를 사용하지 않고 직접 라우터를 직접 구현한다 하더라도, 우리는 이 방식 중 하나를 선택할 수 있습니다. react-router 우선은 리액트 라우터에 대해 잠깐 살펴봅시다. SPA가 등장하기 전에는 어떻게 페이지를 이동시켰을까요? 를 사용해서 직접 url을 변경시켰습..

6. 다이어그램으로 보는 도메인 모델 | 객체지향의 사실과 오해 6장

길을 지나가는 사람에게 물어보는 방법은 기능적이고 해결책 지향적인 접근법, 길을 지도를 보고 찾아가는 방법은 구조적이고 문제 지향적인 접근법이다. 지도는 구체적인 기능이 아닌 구조를 제공하며, 다양한 목적을 위해 재사용될 수 있다. 지도는 기능에 비해 상대적으로 잘 변하지 않는 안정적인 지형 정보를 기반으로 하기 때문에, 요구사항이 변함에도 수용할 수 있다. 즉, 기능이 아니라 구조를 기반으로 모델을 구축하는 편이 좀 더 범용적이고 이해하기 쉬우며 변경에 안정적이다. 객체지향은 안정적인 구조를 기반으로 시스템을 구조화한다. 자주 변경되는 기능이 아니라 안정적인 구조를 따라 역할, 책임, 협력을 구성하라. 모든 소프트웨어 제품의 설계에는 기능과 구조의 측면이 존재하며 조화를 이루도록 해야 한다. 기능 측면..

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..

바닐라JS(TS)로 리액트 SPA 구현하기 | (1) 기본 세팅

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 별도의 SPA 라이브러리 없이 Single page application을 만들어봅시다! 언어는 타입스크립트, 번들러는 웹팩을 사용하도록 하겠습니다. html과 css 웹팩 플러그인도 함께 설치하고, 바벨 트랜스파일러도 설치합시다. 저는 sass를 사용하기 위한 추가적인 설치를 함께 해주었습니다. devDependencies @babel/cli @babel/core @babel/preset-env @babel/preset-typescript babel-loader css-loader html-loader html-webpack-..