dev_yyy

[GitHub] 한 레포에 여러 프로젝트를 넣는 방법

yangseon — Wed, 11 Jan 2023 14:57:50 +0900

⚡️ 프로젝트에서 backend api를 clone 받고 frontend 프로젝트를 시작할 때 하나의 레포에 합치는 방법

1. 폴더 생성

2. VS code 실행

3. 생성된 폴더에서 터미널을 실행

4. git init

5. 레포지토리 생성 (README.ms 포함해서 생성)

6. git clone 레포주소

7. 클론해준 부모레포의 디렉토리로 이동

8. git create-react-app frontend(폴더이름)

9. 다른 프로젝트 클론 받아오기 ( 자식 레포를 remote 로 등록 )

⓵ git remote add [remote name] [child git 주소]

⓶ remote name : 원하는 이름 ( 의미없음 )

⓷ child git 주소 : 클론 받아올 레포주소

10. subtree 명령어로 등록

git subtree add --prefix=[parent 레포지토리에 저장할 폴더명] [child의 remote 이름] [원격 branch name]

11. git clone 다른레포 주소

11. 끝

backend / frontend 각각의 폴더에서 push

[ETC] SPA vs MPA와 SSR vs CSR

yangseon — Thu, 5 Jan 2023 23:30:54 +0900

⚡️ SPA vs MPA

SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이다.
MPA(Multiple Page Application)는 여러 개(Single)의 Page로 구성된 Application이다.
MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다. 매번 전체 페이지가 다시 렌더링 된다.
반면 SPA는 웹 에플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드한다.
그 이후 새로운 페이지 요청이 있을 때, 페이지 갱신에 필요한 데이터만 전달 받아서 페이지를 갱신한다.
그래서 SPA를 CSR(Client Side Rendering) 방식으로 렌더링한다고 말한다.
그래서 MPA를 SSR(Server Side Rendering) 방식으로 렌더링한다고 말한다.

⚡️ MPA(Multiple Page Application)

여러 개(Single)의 Page로 구성된 Application이다.
MPA는 SSR(Server Side Application) 방식으로 렌더링한다.
새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.
페이지 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.

⚡️ MPA 장점

1. SEO(검색엔진 최적화) 관점에서 유리하다.

MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받는다.
따라서 검색엔진이 페이지를 크롤링하기에 적합하다.

2. 첫 로딩 매우 짧다.

서버에서 이미 렌더링해 가져오기 때문이다.
그러나 클라이언트가 JS 파일을 모두 다운로드하고 적용하기전 까지는 각각의 기능은 동작하지않는다.

⚡️ MPA 단점

1. 새로운 페이지를 이동하면 ‘깜빡’인다. (UX)

매 페이지 요청마다 리로딩(새로고침) 발생.
새로운 페이지를 요청할 때마다 전체 페이지를 다시 렌더링하기 때문이다.

2. 페이지 이동시 불필요한 템플릿도 중복해서 로딩 (성능)

3. 서버 렌더링에 따른 부하

4. 모바일 앱 개발시 추가적인 백엔드 작업 필요 (생산성)개발이 복잡해질 수 있다.

⚡️ SPA(Single Page Application)

한 개(Single)의 Page로 구성된 Application이다.
SPA는 CSR(Client Side Rendering) 방식으로 렌더링한다.
단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩한다.
그 후에는 데이터를 받아올 때만 서버와 통신한다.
즉, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여주는 방식이다.
이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것이다.
필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.
Angular, React, Vue 등 프론트엔드 기술들이 나오면서 크게 유행하고 있다.그런데 CSR 방식으로 만든 SPA 앱은 검색엔진최적화(SEO)가 어렵다.
일반적인 SPA 앱을 검색로봇 입장에서 보면 모든 페이지의 소스가 아래와 같이 보이다.
검색엔진이 색인을 할 만한 컨텐츠가 존재하지 않는 것이다.

⚡️ SPA 장점

1. 자연스러운 사용자 경험 (UX)

전체 페이지를 업데이트 할 필요가 없기 때문에 빠르고 ‘깜빡’ 거림이 없다.

2. 필요한 리소스만 부분적으로 로딩 (성능)

SPA의 Application은 서버에게 정적리소스를 한 번만 요청한다.그리고 받은 데이터는 전부 저장해놓는다. (캐시=Cache)

3. 서버의 템플릿 연산을 클라이언트로 분산 (성능)

4. 컴포넌트별 개발 용이 (생산성)

5. 모바일 앱 개발을 염두에 둔다면 동일한 API를 사용하도록 설계 가능 (생산성)

⚡️ SPA 단점

JavaScript 파일을 번들링해서 한 번에 받기 때문에 초기 구동 속도가 느리다. (Webpack의 code splitting으로 해결 가능)
검색엔진최적화(SEO)가 어려움 (SSR로 해결 가능)
보안 이슈 (프론트엔드에 비즈니스 로직 최소화)

SSR에서는 사용자에 대한 정보를 서버측에서 세션으로 관리를 하지만
CSR 방식에서는 클라이언트측의 쿠키말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.

⚡️ SSR이 렌더링하는 방식

MPA는 페이지를 이동할 때마다 새로운 페이지를 요청한다.
모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형태로 응답한다.
이 과정을 서버 사이드 렌더링(SSR)이라고 부른다.
서버 사이드 렌더링의 장점은 SEO이다.
전통적인 MPA의 경우 브라우저에서 JavaScript 코드가 동작하기 전에도 완성된 형태의 템플릿 (HTML에 데이터가 삽입된 상태)을 서버로 부터 전달받는다.
이 때문에 검색로봇이 페이지를 크롤링하기에 매우 적합하다.

⚡️ CSR이 렌더링하는 방식

최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고
이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링하는 방식이다.
SEO가 어렵다는 큰 단점이 있다.

[React] Mock Data

yangseon — Thu, 5 Jan 2023 00:44:11 +0900

⚡️ Mock Data 란?

프론트엔드 개발을 진행하다 보면, UI 구성에 필요한 백엔드 API가 완성되지 않은 상황에서 개발을 진행해야 할 수도 있습니다. 이러한 경우Mock Data를 만들어 사용한다.

Mock Data란 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 데이터입니다.

⚡️ Mock Data 를 사용하는 이유

1. 백엔드 API가 미완성인 상태에서도 작업에 차질 없이 개발할 수 있습니다.

2. 백엔드 API의 구성을 미리 맞춰볼 수 있습니다.

3. 실제로 API 통신을 진행할 때 원활하게 할 수 있습니다.

⚡️ Mock Data 생성

Mock Data는 실제 서버에서 보내주는 데이터의 형식과 동일하게 만들어야 하기 때문에 .json 확장자 파일로 JSON 형식의 데이터를 생성합니다.

1. 상품 리스트

동일한 형태의 상품 컴포넌트가 리스트로 나열되어있는 형태이기 때문에 배열로 각 상품의 데이터를 관리할 수 있도록 합니다.

// public/data/recommendData.json

[
  {
    "id": 1,
    "name": "[돈마루] 한돈 삼겹살 2종 (냉장)",
    "discount_rate": 5,
    "discounted_price": 12967,
    "original_price": 13650,
    "is_sold_out": false
  },
  {
    "id": 2,
    "name": "엔다이브 2~3입",
     ...
  },
 ...
]

2. 상품 상세페이지

상품 상세 페이지의 경우 동일한 형태의 여러 데이터가 나열되는 것이 아닌 한 상품의 데이터이기 때문에, 객체로 해당 상품의 데이터를 관리합니다.

// public/data/productData.json

{
  "id": 3,
  "image_url": "https://img-cf.kurly.com/shop/data/goods/1648203571907l0.jpg",
  "name": "[콜린스그린] 더 오렌지 1000mL",
  "short_description": "물 한방울 넣지 않고 순수한 오렌지 과육을 짜낸 100% 착즙 오렌지 주스",
  "discounted_price": 14080,
  "discount_rate": 20,
  "original_price": 17600,
  "unit_text": "1병",
  "weight": "1000ml",
  "delivery_type": [
    { "id": 0, "text": "샛별배송" },
    { "id": 1, "text": "택배배송" }
  ],
...
}

⚡️ Mock Data 위치

public
└── data
├── recommendData.json
├── productData.json
└── ...

⚡️ Mock Data 사용

// RecommendList.js

import React, { useState, useEffect } from 'react';
import ProductCard from './ProductCard/ProductCard';
import './RecommendList.scss';

const RecommendList = () => {
  const [productList, setProductList] = useState([]);

  useEffect(() => {
    fetch('/data/recommendData.json', {
      method: 'GET'
    })
      .then(res => res.json())
      .then(data => {
        setProductList(data);
      });
  },[]);

  return (
    <div className="recommendList">
      <h1>이 상품 어때요?</h1>
      <div className="listWrapper">
        {productList.map(product => {
          return (
            <ProductCard
              key={product.id}
              product={product}
            />
          );
        })}
      </div>
    </div>
  );
}

export default RecommendList;

⚡️ Summary

Mock Data는 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만든 모조 데이터입니다.
Mock Data를 활용하면 백엔드의 API가 미완성인 상태에서도 차질없이 개발을 진행할 수 있고, 백엔드와 API 구성을 미리 맞춰볼 수 있기 때문에 실제 API 통신을 원활하게 할 수 있습니다.
Mock Data는 public 폴더 하위의 data 폴더에서 관리합니다.
실제 데이터를 불러오는 시점에 fetch 메서드를 통해 Mock Data를 받아올 수 있도록 합니다.

[React] 상수 데이터

yangseon — Thu, 5 Jan 2023 00:22:42 +0900

⚡️ 상수 데이터란?

페이지를 구성하다 보면 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해 가져올 필요가 없는 데이터들이 있습니다. 이런 데이터들을 상수 데이터로 만들어 UI를 구성할 수 있습니다. 즉 상수 데이터란 이름 그대로 변하지 않는 정적인 데이터를 의미합니다.

⚡️ 상수 데이터를 사용하는 이유?

반복되는 UI를 하드코딩으로 일일이 만들어두게 되면 코드가 길어져서 가독성에 좋지 않고

수정이 필요할 시 해당하는 부분을 찾기 힘들어 유지보수가 어렵다는 문제가 있습니다.

하지만 상수 데이터를 활용하면 Array.map() 메서드와 조합해서 반복되는 UI를 보다 간결하게 표현할 수 있습니다.

이후 수정이 필요한 경우 레이아웃은 map 메서드에서 return하는 JSX 부분만,

내용은 상수 데이터 부분만 수정해주면 되기 때문에 유지보수 또한 용이해집니다.

⚡️ 상수 데이터 활용 전

import React from 'react';

const Footer = () => {
  return (
    <footer>
      {/* 생략 */}
      <ul>
        <li>
          <a href="https://github.com/terms">Terms</a>
        </li>
        <li>
          <a href="https://github.com/privacy">Privacy</a>
        </li>
        ...
        <li>
          <a href="https://github.com/about">About</a>
        </li>
      </ul>
    </footer>
  );
};

export default Footer;

⚡️ 상수 데이터 활용

1. 선언한 상수 데이터와 map 메서드를 활용해 실제 코드에 적용

// Footer.js

import React from 'react';

const Footer = () => {
  return (
    <footer>
      {/* 생략 */}
      <ul>
        {FOOTER_INFO_LIST.map((info) => (
          <li key={info.id}>
            <a href={info.link}>{info.text}</a>
          </li>
        ))}
      </ul>
    </footer>
  );
};

export default Footer;

const FOOTER_INFO_LIST = [
  { id: 1, link: 'https://github.com/terms', text: 'Terms' },
  { id: 2, link: 'https://github.com/privacy', text: 'Privacy' },
  ...
  { id: 11, link: 'https://github.com/about', text: 'About' },
];

2. map 메서드에서 return하는 javascript를 컴포넌트화하고, props로 넘겨주는 방식으로도 활용

// Footer.js

import React from 'react';

const Footer = () => {
  return (
    <footer>
      {/* 생략 */}
      <ul>
        {FOOTER_INFO_LIST.map((info) => (
          <FooterInfo key={info.id} link={info.link} text={info.text} />
        ))}
      </ul>
    </footer>
  );
};

export default Footer;

⚡️ 선언 위치

1. 컴포넌트 파일 내부에서 선언

⓵ 상수 데이터가 해당 컴포넌트 내에서만 사용되고 가독성을 해치지 않는다면, 컴포넌트 파일 내부에서 상수 데이터를 선언해 사용

⓶ 컴포넌트의 state나 props 등, 컴포넌트 리렌더링 시 변하는 값을 포함하는 상수 데이터는 컴포넌트 내부에서 작성

⓷ 컴포넌트가 리렌더링 될 때마다 새로 선언되고 할당될 필요가 없는 상수 데이터는 컴포넌트 외부에서 작성

// Footer.js

import React from 'react';

const Footer = () => {
  return (
    <footer>
      {/* 생략 */}
      <ul>
        {FOOTER_INFO_LIST.map((info) => (
          <FooterInfo key={info.id} link={info.link} text={info.text} />
        ))}
      </ul>
    </footer>
  );
};

export default Footer;

const FOOTER_INFO_LIST = [
  { id: 1, link: 'https://github.com/terms', text: 'Terms' },
  { id: 2, link: 'https://github.com/privacy', text: 'Privacy' },
  ...
  { id: 11, link: 'https://github.com/about', text: 'About' },
];

2. 별도 파일로 분리

⓵ 상수 데이터가 해당 컴포넌트 뿐만 아니라 다른 컴포넌트에서도 공통적으로 사용되는 경우

⓶ 상수 데이터의 길이가 너무 길어서 가독성을 해치는 경우

// data.js

export const FOOTER_INFO_LIST = [
  { id: 1, link: 'https://github.com/terms', text: 'Terms' },
  { id: 2, link: 'https://github.com/privacy', text: 'Privacy' },
  ...
  { id: 11, link: 'https://github.com/about', text: 'About' },
];

이 경우, 해당 파일에서 export한 상수 데이터를 사용할 컴포넌트에서 import하여 사용

// Footer.js

import React from 'react';
import { FOOTER_INFO_LIST } from './data';

const Footer = () => {
  return (
    <footer>
      {/* 생략 */}
      <ul>
        {FOOTER_INFO_LIST.map((info) => (
          <li key={info.id}>
            <a href={info.link}>{info.text}</a>
          </li>
        ))}
      </ul>
    </footer>
  );
};

export default Footer;

⚡️ Summary

상수 데이터란 UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API 등을 통해서 가져올 필요가 없는 정적인 데이터입니다.
반복되는 UI 구조는 상수 데이터와 map 메서드를 활용해 간결하게 표현할 수 있습니다.
상수 데이터를 활용하면 UI를 효율적으로, 확장성 있게 구성할 수 있으며 유지보수가 용이합니다.
상수 데이터는 컴포넌트 파일 내부에서 선언하거나, 별도의 파일로 분리해서 사용할 수 있습니다.

[CSS] Sass & Scss ( Syntactically Awesome Style Sheets )

yangseon — Wed, 4 Jan 2023 23:41:10 +0900

⚡️Sass 와 Scss 차이점

// .sass

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

// .scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

⓵ sass 문법을 활용한 방법 ⓶ scss 문법을 활용한 방법
sass보다 scss 문법을 사용하는 것을 권장하고 있습니다.

왜냐하면 sass의 문법 개선을 통해 나온 것이 scss이기도 하고,

scss가 더 넓은 범용성과 CSS의 호환성 등의 장점이 있기 때문입니다.

⚡️CSS Preprocessor

웹 페이지를 만들면서 CSS를 이용해 다양한 스타일을 적용하고 관리할 수 있고, 다양한 기능들을 적용할 수 있지만 문법이 불편해서 막상 적용하기 힘든 부분들이 있습니다. 이러한 불편함을 개선하고자 나온 기술이 CSS Preprocessor 즉, CSS 전처리기입니다.

CSS 전처리기가 하는 일

여러 가지 기능들을 문법적으로 편리하게 작성할 수 있도록 제공하는 전처리기의 양식에 맞게 파일을 미리 작성해두면, 그걸 최종적으로 실제 실행 전에 처리를 해줘서 브라우저가 읽을 수 있는 CSS 파일로 변환해 주는 일을 합니다.

⚡️ Scss 설치

$ npm install sass

라이브러리 설치 방법은 위와 같습니다. 터미널에서 프로젝트 폴더로 이동한 뒤 위와 같은 명령어를 작성하면 설치가 가능합니다.

// package.json

{
  "name": "westagram-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "sass": "^4.14.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "3.4.3"
  }
}

설치가 완료되었다면, 위처럼 package.json의 dependencies 항목에서 해당 패키지 명과 버전이 추가되었는지 확인해 줍니다.

⚡️ Scss의 활용

1. Nesting

컴포넌트 간 CSS가 겹치지 않도록 설정하는 방법으로 className을 전부 다르게 적용하거나, 자손결합자 기능을 활용해 설정할 수 있지만, 여러 문제점과 불편한 점이 있다고 언급했습니다. 이러한 부분을 Sass에서 사용하는 nesting 방식을 통해 해결할 수 있습니다.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

2. 변수

CSS 스타일을 작성하다 보면 동일한 스타일 속성인데,

여러 곳에서 사용되거나 오타가 나기 쉬운 속성들을 변수로 만들어 그 변수를 원하는 곳에 넣어서 사용하는 기능이 있습니다.

( rgb로 컬러를 구현하거나, HEX 코드로 컬러를 구현할 때 )

// Sass 변수 활용 예시

$primary-color: #333;

body {
  border: 1px solid black;
  color: $primary-color;
}

.inverse {
  background-color: $primary-color;
  color: white;
}

3. & 선택자

Nesting 내부에서 & 선택자는 부모 선택자로 치환됩니다. 예를 들어, button 태그에 스타일을 부여하고, 해당 버튼에 hover 효과도 부여하고 싶다면 아래와 같이 구현할 수 있습니다.

// Sass & 선택자 활용 예시

button {
  width: 200px;
  height: 50px;

  &:hover {
    width: 400px;
    height: 100px;
  }
}

/* Compile to CSS */

button {
  width: 200px;
  height: 50px;
}

button:hover {
  width: 400px;
  height: 100px;
}

4. mixin

mixin은 앞선 변수 기능과 마찬가지로 중복되는 스타일 속성이 있을 때 사용하는 방법인데,

중복되는 스타일 속성이 여러 개가 있을 때 한 번에 묶어서 사용하기 좋은 방법입니다.

//variables.scss

@mixin flex($justify: center, $align: center, $direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
}

@mixin font($size: 16px, $height: 1, $spacing: normal, $weight: 500) {
  font-size: $size;
  font-weight: $weight;
  letter-spacing: $spacing;
  line-height: $height;
}
 
$primary-color: #5655a5;
$subPrimary-color: #8887c0;
$background-color: #f0f3fa;
$white-color: #fff;

@import '../../../../styles/variables.scss';

.errorChartPresenter {
  @include flex(space-between, center, column);
  width: 60.6771vw;
  height: 41.4583vw;

  .lineBarChartBox {
    @include flex(center, center, 'null');
    width: 100%;
    height: 19.2708vw;
    background: $white-color;
    border-radius: 0.7813vw;
   }
  }

⚡️ Summary

Sass는 CSS 문법을 조금 더 편하게 작성할 수 있다.
scss 문법으로 작성한 파일을 실행 전에 처리를 해줘서 브라우저가 읽을 수 있는 CSS 파일로 변환해 주는 CSS 전처리기입니다.
기존 CSS 파일의 확장자를 scss로 변경하면 scss 문법이 사용 가능해 집니다.
Sass의 nesting, mixin 등 다양한 기능을 활용해서 문법적으로 조금 더 편하게 스타일을 작성할 수 있습니다.

[TypeScript] 조건문으로 타입만들기 & infer

yangseon — Mon, 2 Jan 2023 17:15:49 +0900

⚡️삼항연산자

자바스크립트 기본 문법 중에 삼항연산자라는게 있습니다.

if가 들어갈 수 없는 곳들에 간략하게 if문을 넣을 수 있는 방법입니다.

조건문 ? 참일때실행할코드 : 거짓일때실행할코드
3 > 1 ? console.log('맞아요') : console.log('아님')

⚡️조건부로 타입만들기

type Age<T> = T;

이러면 이제 Age<number> 이렇게 쓰면 그 자리에 number가 남습니다.

(타입변수에도 타입파라미터 넣기 가능)

if문을 사용하여 만약 T가 string이면 string, 그게 아니면 unknown 를 남기도록 하고싶다.

그럴때 타입 조건식은 주로 extends 키워드와 삼항연산자를 이용합니다.

"extends는 왼쪽이 오른쪽의 성질을 가지고 있냐" 라는 뜻으로 사용할 수 있기 때문에

조건식 용도로 사용가능합니다.

type Age<T> = T extends string ? string : unknown;
let age : Age<string> //age는 string 타입
let age2 : Age<number> //age는 unknown 타입

1. "T라는 파라미터가 string 성질 가지고 있냐? 그러면 string 남기고 아니면 unknown 남겨라"

2. <string> 넣으면 string, <number> 넣으면 unknown을 남겨줍니다.

3. 이게 if문 쓰는 방법입니다.

4. 아직 타입이 확실하지 않은 <타입파라미터> 다룰 때 많이 사용합니다.

⚡️infer 키워드

조건문에 사용할 수 있는 특별한 infer 키워드가 있습니다.

infer 키워드는 지금 입력한 타입을 변수로 만들어주는 키워드입니다.

평상시에 사용하지 않지만 나오면 읽을 줄은 알아야하니 간단히 이해만 하길...

type Person<T> = T extends infer R ? R : unknown; 
type 새타입 = Person<string> // 새타입은 string 타입입니다

1. infer 키워드는 조건문 안에서만 사용가능합니다.

2. infer 우측에 자유롭게 작명해주면 타입을 T에서 유추해서 R이라는 변수에 집어넣어라~ 라는 뜻입니다.

3. 그래서 위의 예제에서 <string> 이렇게 타입파라미터자리에 string 집어넣으면 R은 string이 됩니다.

4. R을 조건식 안에서 맘대로 사용가능합니다.

이런 식으로 타입파라미터에서 타입을 추출해서 쓰고싶을 때 쓰는 키워드라고 보시면 됩니다.

⚡️infer 키워드 사용 용도

1. array 안에 있던 타입이 어떤 타입인지 뽑아서 변수로 만들어 때

type 타입추출<T> = T extends (infer R)[] ? R : unknown; 
type NewType = 타입추출< boolean[] > // NewType 은 boolean 타입입니다

(infer R)[] 이렇게 하면 array가 가지고 있던 타입부분만 쏙 뽑아서 R 변수에 할당할 수 있습니다.

2. 함수의 return 타입이 어떤 타입인지 뽑아서 변수로 만들어 때

type 타입추출<T> = T extends ( ()=> infer R ) ? R : unknown; 
type NewType = 타입추출< () => number > // NewType은 number 타입입니다

타입파라미터에 <함수>를 집어넣었습니다. 그 타입파라미터에 있는 return 타입을 뽑아서 R이라는 변수에 담는 코드입니다.

일정한 규칙이 있다기 보다 그냥 타입을 추출하는 식으로 이해하면 되겠습니다.

(문제1) 타입 파라미터로

1. array 타입을 입력하면

2. array의 첫 자료가 string이면 string 타입을 그대로 남겨주고

3. array의 첫 자료가 string이 아니면 unknown 을 남겨주려면 어떻게 타입을 만들어놔야할까요?

(동작예시)

let age1 :Age<[string, number]>;
let age2 :Age<[boolean, number]>;

이러면 age1의 타입은 string, age2의 타입은 unknown이 되어야합니다. (array나 tuple이나 그게 그거임)

이걸 만족하는 type Age를 만들어봅시다.

(정답)

type Age<T> = T extends [string, ...any] ? T[0] : unknown;
let age1 :Age<[string, number]>;
let age2 :Age<[boolean, number]>;

이러면 정말 age1은 string, age2는 unknown이 됩니다.

(문제2) 함수의 파라미터의 타입을 뽑아주는 기계를 만들어보십시오.

타입뽑기<(x :number) => void> //이러면 number가 이 자리에 남음
타입뽑기<(x :string) => void> //이러면 string이 이 자리에 남음

아무튼 함수의 파라미터타입이 남아야합니다.

(정답)

type 타입뽑기<T> = T extends (x: infer R) => any ? R : any;
type a = 타입뽑기<(x :number) => void>

이러면 a라는 타입이 number로 잘 남습니다.

참고로 함수만 들어올 수 있게 제한을 두고 싶으면

언제나 T 라는 함수 파라미터 만들 때 extends로 제한을 두면 됩니다.

[TypeScript] object 타입 변환기 만들기

yangseon — Mon, 2 Jan 2023 13:32:11 +0900

⚡️object를 다른 타입으로 변환하고 싶을 때

모든 속성들에 문자가 들어오는 타입을 갑자기 숫자가 들어오도록 바꾸고 싶을 때

처음부터 타입을 다시 작성하는 것이 아니라 mapping을 이용하면 됩니다.

⚡️keyof 연산자

keyof 연산자는 object 타입에 사용하면

object 타입이 가지고 있는 모든 key값을 union type으로 합쳐서 내보내줍니다.

object의 key를 뽑아서 새로운 타입을 만들고 싶을 때 사용하는 연산자입니다.

interface Person {
  age: number;
  name: string;
}
type PersonKeys = keyof Person;   //"age" | "name" 타입됩니다
let a :PersonKeys = 'age'; //가능
let b :PersonKeys = 'ageeee'; //불가능

Person 타입은 age, name 이라는 key를 가지고 있었기 때문에

이제 PersonKeys는 정말 'age' | 'name' 타입이 됩니다.

literal type이네요

interface Person {
  [key :string]: number;
}
type PersonKeys = keyof Person;   //string | number 타입됩니다
let a :PersonKeys = 'age'; //가능
let b :PersonKeys = 'ageeee'; //가능

Person 타입은 모든 문자 key를 가질 수 있기 때문에

keyof Person 이렇게 하면 string 타입이 됩니다.

실은 string | number 타입이 됩니다. object key값에 숫자 넣어도 문자로 치환되어서 그렇습니다.

[key :number] 이렇게 숫자만 들어올 수 있게 해놓고 keyof Person 을 하면 number 타입이 됩니다.

(참고) 자바스크립트는 .keys() 이런거 붙이면 key값을 array자료로 담아줍니다.

⚡️Mapped Types

object안에 있는 속성들을 다른 타입으로 한번에 변환하고 싶을 때 타입변환기를 사용합니다.

type Car = {
  color: boolean,
  model : boolean,
  price : boolean | number,
};

type Car의 모든 속성을 string 타입으로 바꿔야 될 때

속성이 3개면 직접 다시 만들어도 되겠지만 100개면 어쩌죠? 매우 귀찮습니다.

type Car = {
  color: boolean,
  model : boolean,
  price : boolean | number,
};

type TypeChanger <MyType> = {
  [key in keyof MyType]: string;
};

type 새로운타입 = TypeChanger<Car>;

let obj :새로운타입 = {
  color: 'red',
  model : 'kia',
  price : '300',
}

1. TypeChanger 처럼 생긴 타입을 만들고

2. [ 자유작명 in keyof 타입파라미터 ] : 원하는 타입

3. 이렇게 입력하시면 object 타입을 입력했을 때 속성명은 그대로지만 다른 타입으로 변환해주는 변환기를 만들 수 있습니다.

4. in 키워드는 왼쪽이 오른쪽에 들어있냐라는 뜻이고

5. keyof는 오브젝트 타입에서 key값만 union type으로 뽑아주는 역할입니다.

(결과) 새로운타입은 color, model, price 속성을 가지고 있으며 전부 string 타입이 됩니다.

key 값이 100개 있는 object 타입을 변경할 일이 있으면 쓰도록 합시다.

(문제1) 다음 타입을 변환기를 돌려보십시오.

type Bus = {
  color : string,
  model : boolean,
  price : number
}

type Bus의 color, model, price 속성을 전부 string 또는 number 타입으로 바꿔주세요

1. 변환기 하나 만드시고

2. 기존 Bus 타입을 변환기 돌려서 위 조건을 충족하는 새로운 타입을 하나 만들어보십시오.

(정답)

type Bus = {
  color : string,
  model : boolean,
  price : number
}

type TypeChanger <MyType> = {
  [key in keyof MyType]: string|number;
};

type NewBus = TypeChanger<Bus>

(문제2) 이런 변환기는 어떻게 만들어야할까요?

object안에 들어있는 모든 속성을 string, number 이렇게 고정된 타입으로 변환해주는게 아니라

내가 원하는 타입을 입력하면 그걸로 변환해주는 범용성 좋은 변환기를 만들어보십시오.

(정답)

type Bus = {
  color : string,
  model : boolean,
  price : number
}

type TypeChanger <MyType, T> = {
  [key in keyof MyType]: T;
};

type NewBus = TypeChanger<Bus, boolean>;
type NewBus2 = TypeChanger<Bus, string[]>

1. TypeChanger 쓸 때마다 타입파라미터를 T 자리에 하나 더 입력할 수 있게 됩니다.

2. 그러면 이제 오브젝트 모든 속성은 T로 바뀜

3. NewBus 살펴보시면 모든 속성이 boolean으로 바뀌어있습니다.

4. NewBus2 살펴보시면 모든 속성이 string[] 으로 바뀌어있습니다.

[TypeScript] object index signatures

yangseon — Mon, 2 Jan 2023 13:05:28 +0900

⚡️object 자료에 타입을 미리 만들어주고 싶은 경우

1. object 자료에 어떤 속성들이 들어올 수 있는지 아직 모르는 경우
2. 타입지정할 속성이 너무 많은 경우
index signatures 를 사용하면 편리합니다.

⚡️index signatures

object 용 타입을 하나 만들고 싶습니다.

근데 아직 어떤 속성이 들어올지 모르는 경우 index signatures 사용

interface StringOnly {
  [key: string]: string
}

let obj :StringOnly = {
  name : 'kim',
  age : '20',
  location : 'seoul'
}

1. StringOnly 라는 interface를 하나 만들었습니다.

2. 근데 안에 타입을 적을 때 [어쩌구 : string] : string 이렇게 적으면

3. 모든 string으로 들어오는 key값에 할당되는 value는 string 이어야합니다~ 라는 타입이 됩니다.

4. 쉽게 말하면 { 모든속성 : string } 이라는 뜻과 동일합니다.

5. 이제 이 object에 들어오는 모든 속성은 우측에 string을 가져야합니다.

6. 코드 한 줄로 모든 속성 타입지정이 가능해서 편리할 수 있습니다.

interface StringOnly {
  age : number,   ///에러남 ㅅㄱ
  [key: string]: string,
}

interface StringOnly {
  age : string,   ///가능  
  [key: string]: string,
}

[ ] 이 문법은 다른 속성과 함께 사용할 수 있지만

{ 모든 속성 : string, age : number } 이건 뭔가 논리적으로 말이 되지 않아 금지시킵니다.

interface StringOnly {
  age : number,   ///가능
  [key: string]: string | number,
}

이건 가능합니다.

{ 모든속성 : string | number, age : number } 이렇게 해주면 논리적으로 말이 됩니다.

⚡️array 형태도 가능

자바스크립트에서 array와 object는 크게 다를게 없는 같은 자료형입니다.

let obj = {
  0 : 'kim'
  1 : '20',
  2 : 'seoul'
}
console.log(obj[2]) //이러면 'seoul' 출력됨

1. 위 코드를 보면 array랑 똑같이 사용가능합니다.

2. 아무튼 object로도 array 처럼 사용가능

(object 자료도 대괄호쳐서 안에 있는 데이터 뽑을 수 있습니다)

interface StringOnly {
  [key: number]: string,
}

let obj :StringOnly = {
  0 : 'kim'
  1 : '20',
  2 : 'seoul'
}

1. [ ] 여기 안에 key값의 타입을 number 로 지정할 수도 있습니다. (대괄호 안엔 string 또는 number만 가능)

2. 그럼 이제 object의 키값이 숫자로 들어오는 경우 value로 string을 가져야한다는 타입입니다.

3. 쉽게 말하면 { 모든숫자속성 : string } 이라는 뜻과 동일합니다.

4. 그래서 array처럼 쓰고싶은 object가 있으면 저렇게 타입지정도 가능하다는 소리입니다.

5. 숫자 key만 넣을거면 그냥 array + tuple 타입 쓰는게 더 직관적일 수 있습니다.

⚡️Recursive Index Signatures

(방법1)

interface MyType {
  'font-size' : {
    'font-size' : {
      'font-size' : number
    }
  }
}

let obj = {
  'font-size' : {
    'font-size' : {
      'font-size' : 14
    }
  }
}

1. object 안에 object 안에 object가 들어있습니다.

2. 직접 interface 안에 {} 이걸 3번 중첩되게 만드셔도 되긴 하지만

3. 귀찮을 경우 이런 테크닉을 사용할 수 있습니다.

(방법2)

interface MyType {
  'font-size': MyType | number
}


let obj :MyType = {
  'font-size' : {
    'font-size' : {
      'font-size' : 14
    }
  }
}

1. 'font-size' 속성은 MyType 이거랑 똑같이 생겼다고 타입을 만들었습니다.

2. 그리고 object자료가 4중첩 5중첩 X중첩되어도 대응가능

(문제1) 다음 자료의 타입을 지정해보십시오.

let obj = {
  model : 'k5',
  brand : 'kia',
  price : 6000,
  year : 2030,
  date : '6월',
  percent : '5%',
  dealer : '김차장',
}

(정답)

type Car = {
  [key :string] : number | string
}

let obj :Car = {
  model : 'k5',
  brand : 'kia',
  price : 6000,
  year : 2030,
  date : '6월',
  percent : '5%',
  dealer : '김차장',
}

유연한 타입지정이 가능하지만 엄격하지 않아서

버그를 잡아준다는 장점은 없어질 수 있습니다.

(문제2) 다음 object 자료의 타입을 interface 써서 만들어보십시오.

let obj = {
  'font-size' : 10,
  'secondary' : {
    'font-size' : 12,
    'third' : {
      'font-size' : 14
    }
  }
}

(정답)

interface MyType {
  'font-size' : number,
  [key :string] : number | MyType,
}

let obj = {
  'font-size' : 10,
  'secondary' : {
    'font-size' : 12,
    'third' : {
      'font-size' : 14
    }
  }
}

1. MyType을 만들었는데 여기 안엔 'font-size' 속성, 그리고 모든 문자 속성이 들어갈 수 있습니다.

2. 모든 문자 속성이 들어오면 number | MyType을 가져야한다고 타입지정해놨습니다.

3. object 안에 object를 집어넣어도 MyType 타입과 비슷하게 생기면 통과시켜줍니다.

[TypeScript] implements 키워드

yangseon — Mon, 2 Jan 2023 12:39:08 +0900

⚡️implements 키워드

interface는 object 타입지정할 때 사용합니다.
class 타입을 확인하고 싶을 때도 interface 문법을 사용할 수 있습니다.
( 근데 implements 키워드도 필요함 )

class Car {
  model : string;
  price : number = 1000;
  constructor(a :string){
    this.model = a
  }
}
let 붕붕이 = new Car('morning');

1. class Car 로부터 생산되는 object들은 model과 price 속성을 가지게 됩니다.

2. 근데 class가 model, price 속성을 가지고 있는지 타입으로 확인하고 싶을 때

사용방법 - interface + implements 키워드로 확인

interface CarType {
  model : string,
  price : number
}

class Car implements CarType {
  model : string;
  price : number = 1000;
  constructor(a :string){
    this.model = a
  }
}
let 붕붕이 = new Car('morning');

1. class 이름 우측에 implements를 쓰고 interface 이름을 쓰면

2. "이 class가 이 interface에 있는 속성을 다 들고있냐" 라고 확인이 가능합니다.

3. 속성을 다 갖고 있으면 실행이 되고 빠진 속성이 있으면 에러로 알려줍니다.

⚡️implements는 타입지정문법이 아닙니다

implements라는건 interface에 들어있는 속성을 가지고 있는지 확인만하라는 뜻입니다.

class에다가 타입을 할당하고 변형시키는 키워드는 아닙니다.

interface CarType {
  model : string,
  tax : (price :number) => number;
}

class Car implements CarType {
  model;   ///any 타입됨
  tax (a){   ///a 파라미터는 any 타입됨 
    return a * 0.1
  }
}

1. CarType에 있던 model : string 이런게 반영되는건 아닙니다. class 안에서의 model은 any 타입입니다.

2. class 함수도 마찬가지로 함수에 있던 number 타입이 전혀 반영되지 않습니다.

( 결론 ) implements는 class의 타입을 체크하는 용도지 할당하는게 아님을 명심합시다.

[TypeScript] d.ts 파일 이용하기

yangseon — Mon, 2 Jan 2023 12:28:57 +0900

⚡️d.ts 파일 이용하기

d.ts 파일은 타입만 저장할 수 있는 파일형식입니다. ( definition의 약자인 d가 들어감 )

1. 타입정의만 따로 저장해놓고 import 해서 쓸 때 사용
2. 프로젝트에서 사용하는 타입을 쭉 정리해놓을 레퍼런스용으로 사용

⚡️타입만 따로 d.ts에 모아놓으려면

export type Age = number;
export type multiply = (x :number ,y :number) => number
export interface Person { name : string }

1. 파일이름.d.ts 라고 작성하신 파일은 타입 정의만 넣을 수 있습니다.

( type 키워드, interface 키워드 이런식으로 정의 )

2. 함수의 경우 함수에 { } 중괄호 붙이기는 불가능합니다. 파라미터 & return 타입만 지정가능합니다.

3. 정의해둔 타입은 export 해서 써야합니다.

4. d.ts 파일은 ts 파일이 아니기 때문에 그냥 써도 ambient module이 되지 않습니다.

5. 그래서 export를 추가해줘야 다른 ts 파일에서 가져다쓸 수 있습니다.

6. 한 번에 많은 타입을 export 하고 싶은 경우 namespace에 담든가

7. 아니면 자바스크립트 배운 사람처럼 import * as 어쩌구 문법을 쓰십시오.

⚡️d.ts 파일을 레퍼런스용으로 쓰려면

ts파일마다 d.ts 파일을 자동생성하시면 됩니다.

(tsconfig.json)

{
    "compilerOptions": {
        "target": "es5",
        "module": "es6",
        "declaration": true,
    }
}

1. tsconfig에다가 declaration 옵션을 true로 바꿔주면 됩니다.

2. 그럼 저장시 자동으로 ts파일마다 d.ts 파일이 옆에 생성됩니다.

(index.ts)

let 이름 :string = 'kim';
let 나이 = 20;
interface Person { name : string } 
let 사람 :Person = { name : 'park' }

(index.d.ts)

declare let 이름: string;
declare let 나이: number;
interface Person {
    name: string;
}
declare let 사람: Person;

1. 이런 파일이 생성됩니다. (안생기면 import 문법 다 지워보세요)

2. 어쩌구.d.ts 라는 파일엔 어쩌구.ts 파일에 있는 모든 변수와 함수 타입정의가 들어있습니다.

3. 자동생성의 경우 따로 수정하거나 그럴 순 없어서 그냥 레퍼런스용으로 사용하거나 하시면 됩니다.
(수정해도 어쩌구.ts 저장시 자동생성이라 의미없음)

⚡️export 없이 d.ts 파일을 글로벌 모듈 만들기

원래 d.ts 파일은 import export 없어도 로컬모듈입니다.

그래서 다른 ts파일에서 import를 해서 쓸 수 밖에 없는데

이게 귀찮으면 d.ts를 글로벌 모듈로 만들어보십시오.

파일이 많아지면 섞이기 때문에 굳이 왜 하나 싶지만

프로젝트 내에 types/common 이런 폴더 두개를 만드시고

tsconfig.json 파일에 "typeRoots": ["./types"] 이런 옵션을 추가해주면 됩니다.

이러면 ts 파일 작성할 때 타입없으면 자동으로 여기서 타입 찾아서 적용해줌

- 다만 이걸 쓸 경우 파일명.d.ts 자동생성 기능은 끄는게 좋을 듯 합니다.

- d.ts 파일명은 기존 ts 파일명과 안겹치게 작성하는게 좋습니다.

- 하지만 이런거 쓰다가 로컬 타입과 저런 글로벌 타입이 겹치면 불안전 합니다.

- 결론) import export가 안전합니다.

⚡️유명한 JS 라이브러리들은 d.ts 파일을 제공

1. 라이브러리 모아놓은 github repository

Definitely Typed github repository에 대부분 라이브러리의 타입정의 파일을 찾을 수 있을 수 있습니다.

2.타입정의된 npm 패키지

TypeSearch 여기 들어가면 npm으로 라이브러리 설치시 타입스크립트 타입정의된 버전을 따로 찾아서 설치하실 수 있습니다.

타입이 정의된 라이브러리를 npm으로 설치하면 node_modules/@types 이런 경로에 타입이 설치됩니다.

그리고 타입스크립트 컴파일러는 자동으로 여기 있는 타입 파일을 참고해서 타입을 가져오게 되어있습니다.

(참고) "typeRoots" 옵션이 있을 경우 node_modules/@types 폴더를 추가해야합니다. 아니면 그냥 "typeRoots" 옵션을 제거합니다.

혹은 따로 타입부분만 설치할 수도 있습니다.

예를 들어 타입파일이 제공되지 않는 jQuery 같은 경우

npm install --save @types/jquery

이렇게 강제로 설치하시면 이제 jQuery 문법 사용할 때 타입정의 안하셔도 됩니다.