Frontend Developer

React에서 순환 참조 문제 해결하기

AGAL — Wed, 23 Oct 2024 18:13:28 +0900

React 프로젝트를 진행하다 보면 종종 순환 참조(Circular Dependency) 문제에 직면할 때가 있습니다. 순환 참조는 두 개 이상의 모듈이 서로를 직접적으로 또는 간접적으로 참조하는 경우 발생합니다. 이 문제는 런타임 에러를 발생시키고 애플리케이션이 제대로 동작하지 않게 만듭니다.

이 글에서는 React에서 React.lazy()와 import()를 사용하여 순환 참조 문제를 해결하는 방법에 대해 알아보겠습니다.

문제 상황

React와 Material-UI(MUI)를 사용하여 커스텀 텍스트 필드와 셀렉트 필드 컴포넌트를 개발하던 중 순환 참조(circular dependency) 문제에 직면했습니다. 구체적으로, StyledSelectField 컴포넌트가 CustomTextField를 참조하고, 동시에 CustomSelectField가 StyledSelectField를 참조하는 상황이었습니다.

// StyledCustomField.tsx
import { CustomTextField } from "./CustomTextField";

// CustomSelectField.tsx
import { StyledCustomField } from "./CustomSelectField.styles";

이로 인해 다음과 같은 오류가 발생했습니다:

Uncaught ReferenceError: Cannot access 'CustomTextField' before initialization
    at CustomSelectField.styles.tsx:4:41

해결 방법: React.lazy()와 동적 import 활용

이 문제를 해결하기 위해 React의 lazy() 함수와 동적 import()를 사용했습니다. 다음은 해결 코드입니다:

import { styled } from "@mui/material";
import { lazy } from "react";

const CustomTextField = lazy(() =>
  import("@design-system/shared/ui/").then((module) => ({ default: module.CustomTextField })),
);

export const StyledSelectField = styled(CustomTextField)(() => ({
  "& .MuiInputBase-input ": {
    lineHeight: "inherit",
  },
}));

코드 설명

lazy() 함수: React의 lazy() 함수는 동적으로 컴포넌트를 불러올 수 있게 해줍니다. 이는 코드 분할(code splitting)을 가능하게 하여, 필요한 시점에 컴포넌트를 로드할 수 있습니다.
동적 import(): import() 함수를 사용하여 CustomTextField 컴포넌트를 동적으로 불러옵니다. 이 방식은 모듈을 비동기적으로 로드하여 순환 참조 문제를 해결합니다.
then() 메서드: 동적 import가 완료된 후, then() 메서드를 통해 모듈에서 CustomTextField 컴포넌트를 추출합니다.
styled() 함수: MUI의 styled() 함수를 사용하여 동적으로 불러온 CustomTextField에 추가적인 스타일을 적용합니다.

이 접근 방식은 CustomTextField의 로딩을 지연시켜 순환 참조 문제를 해결합니다. StyledSelectField가 정의될 때 CustomTextField의 실제 구현은 아직 로드되지 않았기 때문에, JavaScript 엔진은 순환 참조를 감지하지 않습니다.

순환 참조 해결을 위한 다른 방법들

모듈 구조 재설계: 컴포넌트 간의 의존성을 재검토하고, 가능하다면 구조를 변경하여 순환 참조를 제거합니다.
공통 기본 컴포넌트 생성: 여러 컴포넌트가 공유하는 기본 스타일과 기능을 가진 새로운 컴포넌트를 만들어 사용합니다.
HOC(Higher-Order Component) 패턴 사용: 스타일을 적용하는 HOC를 만들어 여러 컴포넌트에 재사용합니다.
Context API 활용: 공통 스타일이나 속성을 Context를 통해 제공하여 직접적인 import를 줄입니다.
스타일 분리: 스타일을 별도의 파일로 분리하여 컴포넌트 간 직접적인 의존성을 줄입니다.

결론

순환 참조는 React 애플리케이션 개발 시 자주 마주치는 문제 중 하나입니다. lazy()와 동적 import()를 활용한 해결 방법은 코드의 구조를 크게 변경하지 않으면서도 효과적으로 문제를 해결할 수 있는 방법입니다.

이 방법은 특히 대규모 프로젝트에서 유용하며, 코드 분할의 이점도 함께 얻을 수 있습니다. 그러나 상황에 따라 다른 해결 방법들도 고려해 볼 수 있으며, 프로젝트의 구조와 요구사항에 가장 적합한 방법을 선택하는 것이 중요합니다.

순환 참조 문제에 직면했을 때, 이러한 다양한 해결 방법들을 고려하여 가장 적절한 방법을 선택하면, 더 견고하고 유지보수가 용이한 React 애플리케이션을 개발할 수 있을 것입니다.

React 프로젝트에서 SVG 파일 최적화 및 컴포넌트화

AGAL — Mon, 21 Oct 2024 10:00:48 +0900

React 프로젝트에서 SVG 파일을 효율적으로 사용하려면, SVGR을 이용해 SVG 파일을 React 컴포넌트로 변환하고, SVGO를 사용해 파일을 최적화할 수 있습니다. 이 글에서는 pnpm, Vite, React, TypeScript 환경에서 이를 구현하는 방법을 단계별로 설명합니다.

1. 필수 패키지 설치하기

먼저, 필요한 패키지를 설치합니다. pnpm을 사용하여 프로젝트의 개발 의존성으로 추가합니다.

pnpm add -D @svgr/rollup @svgr/cli svgo

@svgr/rollup: Vite에서 SVGR을 사용할 수 있게 해주는 플러그인입니다.
@svgr/cli: SVGR의 CLI 도구로, SVG를 React 컴포넌트로 변환합니다.
svgo: SVG 파일을 최적화하는 도구입니다.

2. Vite 설정에 SVGR 추가하기

Vite 설정 파일에 SVGR 플러그인을 추가하여 SVG 파일을 React 컴포넌트로 변환할 수 있도록 합니다.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from '@svgr/rollup';

export default defineConfig({
  plugins: [
    react(),
    svgr(),
  ],
});

svg.d.ts 파일 수정하기

TypeScript에서 SVG 파일을 모듈로 인식할 수 있도록 선언 파일을 추가합니다. src 디렉토리에 svg.d.ts 파일을 생성하고 다음 내용을 추가합니다:

// src/svg.d.ts
declare module '*.svg' {
  import React from 'react';
  const src: string;
  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement>
  >;
  export default src;
}

tsconfig.json 파일 수정하기

TypeScript Config 설정에서 svg.d.ts 파일이 포함되도록 include 옵션에 다음 내용을 추가합니다:

{
	기존 컴파일 설정...
  	"include": ["src", "custom.d.ts", "svg.d.ts"]
   }

3. SVGO로 SVG 파일 최적화하기

SVGO는 SVG 파일에서 불필요한 데이터를 제거하여 최적화합니다. 터미널에서 직접 실행할 수 있습니다:

pnpm svgo path/to/your/file.svg -o path/to/your/optimized-file.svg

또는, SVGR 설정에 SVGO를 통합하여 자동으로 최적화되도록 할 수 있습니다:

    기존 vite 설정...
    svgr({
      svgoConfig: {
        plugins: [
          {
            name: "preset-default",
            params: {
              overrides: {
                removeViewBox: false,
              },
            },
          },
        ],
      },
    }),

4. React 컴포넌트로 SVG 사용하기

이제 프로젝트 내에서 SVG 파일을 React 컴포넌트처럼 사용할 수 있습니다:

import React from 'react';
import { ReactComonent as Logo } from './logo.svg';

const App = () => (
  <div>
    <Logo />
  </div>
);

export default App;

Shadow DOM

AGAL — Fri, 9 Dec 2022 13:57:57 +0900

[출처: https://javascript.info/shadow-dom]

Shadow DOM

Shadow DOM은 캡슐화를 위해 사용됩니다. 이를 통해 구성 요소는 고유한 "섀도우" DOM 트리를 가질 수 있으며 기본 문서에서 실수로 액세스할 수 없으며 로컬 스타일 규칙 등을 가질 수 있습니다.

Built-in shadow DOM

복잡한 브라우저 컨트롤이 어떻게 생성되고 스타일이 지정되는지 생각해 본 적이 있습니까? (예 <input type="range">)

브라우저는 그것들을 그리기 위해 내부적으로 DOM/CSS를 사용합니다. 그 DOM 구조는 일반적으로 우리에게 숨겨져 있지만 개발자 도구에서 볼 수 있습니다. 예를 들어 Chrome에서는 개발자 도구에서 "Show user agent shadow DOM" 옵션을 활성화해야 합니다.

그러면 <input type="range">다음과 같이 보입니다.

위에 #shadow-root에 보이는 것을 "shadow DOM"이라고 합니다.

일반 JavaScript 호출 또는 선택기로 내장된 Shadow DOM 요소를 가져올 수 없습니다. 이들은 일반 자식이 아니라 강력한 캡슐화 기술입니다. 위의 예에서 유용한 속성 "pseudo"를 볼 수 있습니다. 그것은 비표준이며 역사적인 이유로 존재합니다. 다음과 같이 CSS와 함께 스타일 하위 요소를 사용할 수 있습니다.

<style>
/* make the slider track red */
input::-webkit-slider-runnable-track {
  background: red;
}
</style>

<input type="range">

Shadow tree

DOM 요소에는 두 가지 유형의 DOM 하위 트리가 있을 수 있습니다.

Light tree – HTML 자식으로 구성된 일반 DOM 하위 트리입니다. 이전 장에서 본 모든 하위 트리는 "가벼움"이었습니다.
Shadow tree – HTML에 반영되지 않은 숨겨진 DOM 하위 트리로, 엿보는 눈에서 숨겨집니다.

element에 둘 다 있는 경우 브라우저는 그림자 트리만 렌더링합니다. 그러나 우리는 Shadow tree와 Light tree 사이에도 일종의 구성을 설정할 수 있습니다. 구성 요소 내부를 숨기고 구성 요소 로컬 스타일을 적용하기 위해 사용자 지정 요소에서 Shadow tree를 사용할 수 있습니다.

예를 들어 이 <show-hello> 요소는 Shadow tree에서 내부 DOM을 숨깁니다.

<script>
customElements.define('show-hello', class extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = `<p>
      Hello, ${this.getAttribute('name')}
    </p>`;
  }
});
</script>

<show-hello name="John"></show-hello>

이것이 Chrome 개발 도구에서 DOM이 보이는 방식이며 모든 콘텐츠는 "#shadow-root" 아래에 있습니다.

먼저 elem.attachShadow({mode: …})를 호출하면 섀도우 트리가 생성됩니다. 두 가지 제한 사항이 있습니다.

하나의 element 는 하나의 섀도우 루트만 만들 수 있습니다.
'elem'은 사용자 정의 요소이거나 “article”, “aside”, “blockquote”, “body”, “div”, “footer”, “h1…h6”, “header”, “main” “nav”, “p”, “section”, or “span” 이며, <img>와 같은 다른 요소는 Shadow tree를 호스트할 수 없습니다.

'mode' 옵션은 캡슐화 수준을 설정합니다. 다음 두 값 중 하나를 가져야 합니다.

"open" – Shadow root를 elem.shadowRoot로 사용할 수 있습니다.
모든 코드는 요소의 섀도우 트리에 액세스할 수 있습니다.
"closed" – elem.shadowRoot는 항상 null입니다.

우리는 attachShadow에 의해 반환된 참조에 의해서만 Shadow DOM에 액세스할 수 있습니다(아마도 클래스 내부에 숨겨져 있을 것입니다). <input type="range">와 같은 브라우저 고유의 Shadow tree는 "closed" 이며, 액세스할 방법이 없습니다.

attachShadow에 의해 반환되는 Shadow root는 element 와 같습니다. innerHTML 또는 DOM 메서드(예: append)를 사용하여 채울 수 있습니다. Shadow root가 있는 요소를 "Shadow tree host"라고 하며 Shadow tree host 속성으로 사용할 수 있습니다.

// {mode: "open"}으로 가정하고, 그렇지 않으면 elem.shadowRoot는 null입니다.
alert(elem.shadowRoot.host === elem); // true

Encapsulation

Shadow DOM은 기본 문서와 강력하게 구분됩니다.

Shadow DOM 요소는 light DOM의 querySelector에 표시되지 않습니다. 특히, Shadow DOM 요소는 light DOM의 ID와 충돌하는 ID를 가질 수 있습니다. ID는 Shadow tree 내에서만 고유해야 합니다.
Shadow DOM에는 자체 스타일시트가 있습니다. 외부 DOM의 스타일 규칙은 적용되지 않습니다.

예를 들어

<style>
  /* 문서 스타일은 #elem(1) 내부의 shadow tree에 적용되지 않습니다. */
  p { color: red; }
</style>

<div id="elem"></div>

<script>
  elem.attachShadow({mode: 'open'});
    // shadow tree 는 고유 스타일이 있습니다. (2)
  elem.shadowRoot.innerHTML = `
    <style> p { font-weight: bold; } </style>
    <p>Hello, John!</p>
  `;

  // <p> 는 shadow tree 내부의 쿼리에서만 볼 수 있습니다. (3)
  alert(document.querySelectorAll('p').length); // 0
  alert(elem.shadowRoot.querySelectorAll('p').length); // 1
</script>

문서의 스타일은 그림자 트리에 영향을 주지 않습니다.
하지만 내부 스타일이 작동합니다.
섀도우 트리의 요소를 가져오려면 트리 내부에서 쿼리해야 합니다.

대체 텍스트 가이드

AGAL — Wed, 5 Oct 2022 21:24:32 +0900

구체적이고 간결하다

가능한 한 적은 수의 단어를 사용하십시오. 개체의 색상이 관련이 있습니까? 배경의 날씨가 관련이 있습니까? 사람의 머리색이 중요합니까? 콘텐츠 작성자는 이 정보가 메시지에 추가되거나 삭제되는지 여부를 판단해야 합니다. *문자 제한은 100-150입니다. (권장 125자)

미학이 아닌 정보를 기술하라

"밝은 파랑새의 그래픽"과 같이 그림이 어떻게 보이는지 설명하지 마십시오. "트위터 아이콘"과 같이 이미지 콘텐츠가 무엇이며 어떤 역할을 하는지 설명합니다.

이미지의 기능에 대해 생각하기

콘텐츠 작성자는 이유가 있어 웹 페이지에 이미지를 추가합니다. 내가 왜 이것을 포함하고 있는지 자문해 보십시오. 그것을 포함함으로써 내가 전달하려는 메시지는 무엇입니까? 이 설명을 포함하지 않으면 어떤 추가 정보와 의미를 놓칠 수 있습니까? 팁: 전화로 누군가에게 이미지를 설명한다고 상상해 보십시오.

일반 구두점 사용

쉼표 및 마침표와 같은 일반적인 구두점을 사용하면 화면 판독기(및 최종 사용자)가 텍스트를 더 쉽게 이해할 수 있습니다.

장식 이미지의 경우 대체 텍스트를 비워 둡니다.

인터넷은 긴 텍스트 페이지를 나누거나 콘텐츠의 느낌을 향상시키는 데 사용되는 장식적인 이미지로 가득 차 있습니다. 이는 콘텐츠를 게시하는 기술, 과학 또는 기업 사이트에서 일반적입니다.스크린 리더 사용자는 일반적으로 웹 페이지의 분위기, 느낌 및 미학이 관련이 없다는 데 동의합니다. 중요한 콘텐츠의 접근성을 방해해서는 안 됩니다.

저작권 정보 또는 사진 크레딧을 포함하지 마십시오.

사진 작가의 이름, 크리에이티브 커먼즈 라이선스 또는 추가 저작권 정보를 대체 텍스트에 포함할 필요가 없습니다. 이미지 아래 캡션에 더 적합한 귀중한 단어를 낭비합니다.

"~의 사진" 또는 "~의 이미지"로 시작하지 마십시오.

매일 스크린 리더를 사용하는 사람들은 img 요소의 의미 때문에 이미지에 도달했다는 것을 알게 될 것입니다. 이 정보는 불필요하고 귀중한 설명 단어를 낭비합니다.

복잡한 이미지의 경우 다른 곳에서 추가 설명 제공

특정 상황에서는 125자가 이미지로 전달되는 모든 정보를 전달하기에 충분하지 않을 수 있습니다. 수학 방정식, 인포그래픽, 순서도와 같은 이미지가 좋은 예입니다. 화면 판독기 사용자를 페이지나 웹사이트의 다른 위치에 있는 텍스트 기반 설명으로 안내하는 대체 텍스트를 포함해야 할 수도 있습니다. 복잡한 이미지를 위한 대체 텍스트 작성에 대한 Penn State University의 지침 읽기

대체 텍스트가 필요하지 않은 경우

이미지가 장식적일 때, 즉 페이지에 표시되는 나머지 정보에 더 이상의 맥락이나 의미를 추가하지 않습니다. 다른 예는 다음과 같습니다.

링크에 이미지를 사용하지만 링크의 목적을 이해하기 위해 이미지가 필요하지 않은 경우
이미 텍스트 레이블이 있는 아이콘
중요한 정보가 이미 본문에 효과적으로 전달된 다이어그램 또는 차트

대체 텍스트 테스트 절차

1. 의미 있는 이미지 (텍스트 이미지, 행동을 시작하거나 의미를 전달하거나 응답을 촉구하는 데 사용 되는 기능적 이미지, 이미지 지도 등)

alt="" 아닌지 확인 (텍스트 문자열이 비어 있지 않은지 확인)
aria-role="presentation" 이 아닌지 확인
aria-role="none" 이 아닌지 확인
aria-hidden이 "true" 로 설정되어 있지 않은지 확인

2. 장식 이미지 (순수한 장식이거나 시각적 서식 지정에만 사용)
*다음 절차중 하나 이상 참인지 체크

aria-role="presentation"
aria-role="none"
aria-hidden="true"
alt=""
css(background)를 통해 이미지 삽입

3. 보안 문자
*다음 절차중 하나라도 수행 못할 시 실패

텍스트 문자열이 비어 있지 않은지 확인
텍스트 문자열이 CAPTCHA의 목적을 식별하고 설명하는지 확인
시각이 없는 사용자와 청각이 없는 사용자를 위해 최소한 대체 형식의 CAPTCHA가 제공되는지 확인

4. 텍스트 이미지 (로고 또는 브랜드 이름의 일부인 로고 유형 또는 텍스트)

텍스트를 사용하면 텍스트 이미지와 동일한 시각적 표현 및 효과를 얻을 수 없는지 확인
텍스트 이미지를 사용자의 요구 사항에 맞게 시각적으로 사용자 지정할 수 있는지 확인 (웹 콘텐츠를 통해 사용자는 글꼴, 크기, 색상 및 배경 설정을 지정할 수 있으며 이러한 설정에 따라 텍스트의 모든 이미지가 제공)

Reference

https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/ https://ictbaseline.access-board.gov/06Images/#accessibility-requirements https://ictbaseline.access-board.gov/06Images/#62-test-procedure-for-decorative-images

대용량 이미지 분기 처리

AGAL — Fri, 30 Sep 2022 20:34:37 +0900

사용 배경

페이지 로드시 바로 보여지는 화면인 경우 대용량 로드로 인해 흰 화면 노출로 성능 이슈 야기

모니터 해상도 증가 및 retina 디스플레이 등 1920을 훨씬 상회하는 이미지로 인해 PC는 1920, 2560, 3840 각각 해상도에 맞게 지원 필요

사용 범위

메인 이미지나 Stories 등에 배경처럼 전체사이즈로 들어가는 이미지

적용 사항

webP를 활용하여 이미지 용량 개선 (통상적으로 jpg, png 보다 가벼우나 추출 설정상 jpg가 더 가벼운 경우에는 jpg 사용 - DP 팀과 협의) (iOS11 이상 지원이므로 iOS10 이하 브라우저 지원할 지 여부 체크 - DP 팀과 협의)

웹/모바일 디바이스에 따른 반응형 이미지 동적 로드가 가능한 <picture> 태그 사용 (웹/모바일간 비율이 상이하며 나타나는 레이아웃 문제는 css로 제어)

<picture>
	<source media="(max-width: 1024px)" srcset="모바일_이미지_src">
	<source media="(min-width: 1024px)" srcset="
			 웹_1920_이미지_src 1920w,
			 웹_2560_이미지_src 2560w,
			 웹_3840_이미지_src 3840w">
	<img src="웹_1920_이미지_src" alt="">
</picture>

*<video>태그 지원하지 않음

Axios

AGAL — Wed, 28 Sep 2022 20:02:36 +0900

Axios

서드파티 라이브러리로 CDN 혹은 npm 이나 yarn과 같은 패키지 매니저를 통해 설치하여 프로젝트에 추가할 수 있습니다.

Axios는 브라우저 혹은 node.js 환경에서 실행할 수 있습니다.

설치하기

NPM을 사용하여 설치

npm install axios

Yarn을 사용하여 설치

yarn add axios

그 후 프로젝트에서 import 해야 합니다.

import axios from "axios";

만약 브라우저에서 Axios를 사용한다면 아래와 같이 CDN을 사용할 수 있습니다.

문법

fetch와 문법은 비슷하나, 다양한 방법으로 요청할 수 있습니다.

axios(url, {
  // 설정 옵션
});

HTTP 메서드를 붙일 수도 있습니다.

axios.get(url, {
  // 설정 옵션
});

fetch 메서드처럼 HTTP 메서드 없이 요청할 경우 기본적으로 GET 요청을 생성합니다.

axios(url);

또, 두 번째 인자를 사용해서 커스텀 설정하는 것도 가능합니다.

axios(url, {
  method: "get", // 다른 옵션도 가능합니다 (post, put, delete, etc.)
  headers: {},
  data: {},
});

아래처럼 작성할 수도 있습니다.

axios({
  method: "get",
  url: url,
  headers: {},
  data: {},
});

JSON 데이터 처리

아래 예제에서는 JSONPlaceholder라는 REST API에 GET 요청을 통해 투두 리스트의 아이템을 가져옵니다.

const url = "<https://jsonplaceholder.typicode.com/todos>";

axios
	.get(url)
	.then((response) => console.log(response.data));

Axios를 사용하면 응답 데이터를 기본적으로 JSON 타입으로 사용할 수 있습니다.

응답 데이터는 언제나 응답 객체의 data 프로퍼티에서 사용할 수 있습니다.

자동 문자열 변환(stringify)

이제 JSONPlaceholder API를 사용해서 데이터를 전송해보겠습니다.

이를 위해서는 데이터를 JSON 문자열로 직렬화 해야 합니다.

POST 메서드로 JavaScript 객체를 API로 전송하면 Axios가 자동으로 데이터를 문자열로 변환해줍니다.

const url = "<https://jsonplaceholder.typicode.com/todos>";

const todo = {
  title: "A new todo",
  completed: false,
};

axios
  .post(url, {
    headers: {
      "Content-Type": "application/json",
    },
    data: todo,
  })
  .then(console.log);

Axios로 post 요청을 할 때 요청 본문(request body)으로 보내고자 하는 data는 data 프로퍼티에 할당합니다.

컨텐츠 유형 헤더도 설정할 수 있습니다. 기본적으로 axios는 Content-Type을 application/json으로 설정합니다.

에러 처리

Promise가 거부(reject)되면 .catch()를 사용하여 에러를 처리할 수 있습니다.

.catch()를 사용한 일반적인 에러 처리는 다음과 같습니다.

const url = "<https://jsonplaceholder.typicode.com/todos>";

axios
  .get(url)
  .then((response) => console.log(response.data))
  .catch((err) => {
    console.log(err.message);
  });

Axios의 promise는 상태 코드가 2xx의 범위를 넘어가면 거부(reject)합니다.

에러 객체에 응답(response) 또는 요청(request) 프로퍼티가 포함되어 있는지 확인하여 에러에 대한 자세한 정보를 확인할 수 있습니다.

.catch((err) => {
	// 에러 처리
	if (err.response) {
		// 요청이 이루어졌고 서버가 응답했을 경우
	  const { status, config } = err.response;

    if (status === 404) {
      console.log(`${config.url} not found`);
    }
    if (status === 500) {
      console.log("Server error");
    }

  } else if (err.request) {
    // 요청이 이루어졌으나 서버에서 응답이 없었을 경우
    console.log("Error", err.message);
  } else {
    // 그 외 다른 에러
    console.log("Error", err.message);
  }
});

에러 객체의 response 프로퍼티는 클라이언트가 2xx 범위를 벗어나는 상태 코드를 가진 에러 응답을 받았음을 나타냅니다.

에러 객체의 request 프로퍼티는 요청이 수행되었지만 클라이언트가 응답을 받지 못했음을 나타냅니다.

요청 또는 응답 속성이 모두 없는 경우는 네트워크 요청을 설정하는 동안 오류가 발생한 경우입니다.

응답 시간 초과 / 요청 취소

HTTP 클라이언트에서 HTTP 요청이 시간 초과될 경우,

Axios에서는 timeout 속성을 설정 객체에 추가하여 요청이 종료될 때까지의 시간을 밀리초로 지정할 수 있습니다.

다음 예제에서는 만약 요청이 4초 이상 걸릴 경우에 종료하고 console창에 error를 로깅하고 있습니다.

const url = "<https://jsonplaceholder.typicode.com/todos>";

axios
  .get(url, {
    timeout: 4000, // 기본 설정은 '0'입니다 (타임아웃 없음)
  })
  .then((response) => console.log(response.data))
  .catch((err) => {
    console.log(err.message);
  });

취소 토큰을 통한 요청 취소

아래와 같이 CancelToken.source팩토리를 사용하여 취소 토큰을 만들 수 있습니다.

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 에러 핸들링
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 요청 취소하기 (메시지 파라미터는 옵션입니다)
source.cancel('Operation canceled by the user.');

실행자 함수를 CancelToken 생성자에 전달하여, 취소 토큰을 만들수도 있습니다.

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // 실행자 함수는 취소 함수를 파라미터로 받습니다.
    cancel = c;
  })
});

// 요청 취소하기
cancel();

Reference

https://meticulous.ai/blog/fetch-vs-axios/

https://axios-http.com/kr/docs/cancellation

Cross-site Scripting(XSS)

AGAL — Tue, 27 Sep 2022 20:50:15 +0900

정의

HTML 삽입(HTML Injection) 취약점이 발생하는 지점은 웹 브라우저에서 전달되는 값이 HTML 내에 출력되는 곳이다. HTML삽입이 가능하면 대부분의 공격은 자바스크립트(Javascript)를 이용한다. 이 때문에 다른 곳에서(cross-site) 전달되는 스크립트를 실행(scripting)한다고 하여 일반적으로는 크로스 사이트 스크립트(Cross-site Script, Cross-site Scripting)라고 많이 알려져 있다.

XSS 종류와 공격 방법

XSS 종류

1. Reflected XSS
이름 그대로 반사하는 형태의 공격이다. DB에 저장하여 공격하는 게 아닌 1회용 공격으로 볼 수 있다. 이유는 클라이언트가 직접 누르도록 유도하기 때문이다.기본적으로 URL을 통해 스크립트 공격을 진행한다. 블랙 해커는 웹 페이지를 통해 클라이언트에게 악의적인 스크립트를 포함한 URL을 클라이언트에게 보낸다. 예를 들면 이메일, 쪽지 등 어떠한 방법이라도 가능하다. 해당 주소로 유도만 하면 되기 때문이다. 이후 클라이언트가 해당 주소를 클릭하게 되면 악의적인 스크립트가 실행된다.

2.Stored XSS
저장된 XSS 공격, Reflected XSS와 달리 지속적으로 활용할 수 있다. 주로 게시판, 쪽지함 등과 같은 저장형 형태의 게시글에서 많이 이용된다.게시판 게시글은 웹서버 및 데이터베이스와 연동하여 저장되고 출력된다. 블랙 해커는 게시글을 작성할 때 악성 스크립트를 포함시켜서 올린다. XSS 공격에 주의 깊게 봐야 할 기법은 Drive by download이다.

3. DOM based XSS
DOM은 기반 XSS 공격. 일반적으로 DOM 기반 XSS 취약점이 있는 브라우저를 대상으로 진행한다.피해자의 브라우저가 HTML 페이지를 구문 분석할 때마다 공격 스크립트가 DOM 생성의 일부로 실행되면서 공격한다. 페이지 자체는 변하지 않으나, 페이지에 포함되어 있는 브라우저 측 코드가 DOM 환경에서 악성코드로 실행된다. *DOM 기반 XSS는 서버와 관계없이 브라우저에서 발생하는 것이 차이점이다.

XSS 공격 대응 방법

Content Security Policy (CSP) 실행 CSP : https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
**innerHTML 대신 textContent 사용**
// Bad latestReview.innerHTML = 'Pizza is <img src="wrongLocation" onError='alert("You're hacked")'> delicious!!' // Good latestReview.textContent = 'Pizza is <img src="wrongLocation" onError='alert("You're hacked")'> delicious!!'
입력 값 검증 (입력 값 제한)
- 입력 데이터의 길이 제한하기
- 지정된 문자 또는 형식으로 입력되었는지 확인
- 정해진 규칙을 벗어난 입력 값들은 무효화 시키기
출력 값 검증 (입력 값 치환) 스크립트로 해석될 여지가 있는 특수 문자들을 인코딩해서 보여줘야 한다.변경 전 변경 후 변경 전 변경 후

& & " "

< < ' '

> > / /

( ( ) )
Modern Framework 사용 프론트엔드를 위한 모던 프레임워크는 (React, Angular 등) 또한 웹사이트를 악의적인 공격으로부터 다양한 보안 방식을 제공
스크립트 영역에 출력 자제 이벤트 핸들러 영역에 스크립트가 삽입되는 경우 보호 기법들을 우회할 수 있기 때문에 사용자의 입력을 출력하는 것을 최대한 자제, 필요한 경우 대응 방안과 함께 사용해야 한다.
// 예시 코드 <script> var user_name='0oooo'; alert(user_name); </script> // 공격 코드 0oooo'; alert(document.cookie); // <script> var user_name='0oooo'; alert(document.cookie); //'; alert(user_name); </script>
보안 라이브러리 사용
- MS에서 개발한 AntiXSS 라이브러리, OWASP
- 네이버에서 개발한 Lucy-Xss-Servlet-Filter 라이브러리

XSS 공격 벡터

<body> 태그 이벤트 속성은 "body" 태그를 통해 제공되는 경우 스크립트의 소스가 될 수도 있다.

<div>태그	이 태그는 배경 참조도 포함하여 <table>과 같은 방식으로 스크립트를 참조하는데 사용할 수 있다.
<table> 태그	background 속성이 일반적으로 이미지를 참조하는 경우 문제가 되는 스크립트를 참조하도록 손상될 수 있다.
<object> 태그	이 태그를 사용하여 외부 사이트의 스크립트를 포함할 수 있다.
<iframe> 태그	피싱 공격에 효과적인 이 벡터를 XSS 공격이 현재 페이지에 다른 HTML 페이지를 삽입할 수 있도록 한다.
<input> 태그	일부 브라우저는 이 벡터를 통한 조작이 허용된다.
<img> 태그	사용중인 브라우저에 따라 이 속성은 유용할 수 있따.
<link> 태그	이 태그는 외부 스타일 시트에 연결하는 일반 사용 대신 스크립트를 포함할 수 있다.
<script> 태그	스크립트 태그는 외부 Java script 코드를 참조하는데 사용할 수 있으므로 가장 간단한 XSS 태그이다. 공격자는 스크립트 태그 내에 악성코드를 삽입할 수 있다.
JS 이벤트	공격자가 사용하는 또 다른 태그인 이벤트 속성은 다양한 태그에 적용된다. "onerror" 및 "onload"와 같은 속성이 예이다.

*공격 벡터 : 해커가 컴퓨터나 네트워크에 접근하기 위해 사용하는 경로나 방법

Reference

https://tofusand-dev.tistory.com/92

https://gogomalibu.tistory.com/163

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=lstarrlodyl&logNo=221941738753

https://myungjjju.tistory.com/38

도메인 (domain) - 인터넷 기본 도메인 , 호스트, 포워딩 알아보기 | 생활코딩

AGAL — Thu, 17 Mar 2022 14:12:33 +0900

도메인

IP란?

인터넷에 연결되어 있는 장치(컴퓨터, 스마트폰, 타블릿, 서버 등등)들은 각각의 장치를 식별할 수 있는 주소. 예) 115.68.24.88

도메인이란?

IP를 이해하고 기억하기 쉽게 각 IP에 이름을 부여한 것

출처 : https://opentutorials.org/course/228/1450

도메인의 구성요소

컴퓨터의 이름과 최상위 도메인으로 구성되어 있다.

opentutorials.org
- opentutorials : 컴퓨터의 이름
- org : 최상위 도메인 - 비영리단체
daum.co.kr
- daum : 컴퓨터의 이름
- co : 국가 형태의 최상위 도메인을 의미
- kr : 대한민국의 NIC에서 관리하는 도메인을 의미

URL의 이해

도메인은 장치를 식별하기 위한 주소
URL은 서버가 가지고 있는 다양한 컨텐츠를 식별하기 위한 주소 (URL = 도메인 + 경로)
예를 들어서 https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/module/121/298.png가 있을 때
- 도메인 : opentutorials.org
- URL : https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/module/121/298.png

도메인 검색 및 구입

도메인 선정의 고려사항

선호하는 최상위 도메인을 선택한다. com
쓰임에 맞는 최상위 도메인을 선택한다. 비영리 서비스인 생활코딩의 홈페이지는 .org
도메인 이름에 최상위 도메인을 포함시킨다. 예를들면, flickr.com 는 flic.kr, delicious.com은 del.icio.us
짧을수록 좋다.
키보드 자판상에서 좌우 대칭이 입력하기에 편리하다.
악의적인 선점에 대비해서 예비 도메인을 구입하는 것이 유리

호스트 설정

호스트란?

네트워크에 연결되어 있는 컴퓨터들을 호스트라고 한다.

호스트 설정이란?

도메인을 호스트의 IP에 연결하는 행위

도메인과 호스트의 관계도

하나의 도메인으로 여러 개의 호스트에 연결하기

포워딩 설정

포워딩이란?

도메인으로 접근한 사용자를 다른 도메인으로 보내는 행위 예를 들어 ooo2.org로 사용자가 접근하면 opentutorials.org로 보낸다.

보통 호스트를 설정할 수 없을 때 사용한다.

유동 포워딩 : 브라우저 URL이 포워딩된 URL로 변경

고정 포워딩 : 브라우저 URL이 현재 URL로 고정

호스트 설정과 포워딩의 차이점

호스트 설정은 도메인과 IP를 연결시키는 것.

포워딩은 다른 도메인으로 보내는 것이기 때문에 포워딩한 사용자의 URL이 변경된다.

네임서버

네임서버란?

도메인에 해당하는 IP를 알려주는 서비스

네임서버의 역할과 동작

hosts 파일

브라우저가 도메인에 해당하는 IP를 찾는 순서

local cache를 검색한다.
hosts 파일을 검색한다.
도메인 네임서버을 검색한다.

hosts 파일의 위치

Unix, Unix-like, POSIX		/etc/hosts[2]
Microsoft Windows	3.1	%Windir%HOSTS
	95, 98/98SE, Me	%WinDir%hosts[3]
	NT, 2000, XP (x86 & x64),[4] 2003, Vista, 7	%SystemRoot%system32driversetchosts[5]
Windows Mobile		Registry key underHKEY_LOCAL_MACHINECommTcpipHosts
AppleMacintosh	9 and earlier	System Folder: Preferences or System folder
	Mac OS X 10.0 – 10.1.5 [6]	(Added through NetInfo or niload)
	Mac OS X 10.2 and newer	/private/etc/hosts [6] (or /etc/hosts, since /etc is a symbolic link to /private/etc)
Novell NetWare		SYS:etchosts
OS/2 &eComStation		"bootdrive":mptnetc
Symbian	Symbian OS 6.1–9.0	C:systemdatahosts
Symbian	Symbian OS 9.1+	C:private10000882hosts
MorphOS	NetStack	ENVARC:sys/net/hosts
AmigaOS	4	DEVS:Internet/hosts
Android		/system/etc/hosts (or /etc/hosts, since /etc is asymbolic link to /system/etc)
iOS	iOS 2.0 and newer	/private/etc/hosts (or /etc/hosts, since /etc is asymbolic link to /private/etc)
TOPS-20		<SYSTEM>HOSTS.TXT
Plan 9		/lib/ndb/hosts

host 파일을 수정하는 이유

특정 도메인의 환경을 테스트를 해야 하는데 해당 도메인의 소유권이 없거나 해당 도메인이 다른 상황에서 사용되고 있을 때 도메인을 직접 사용할 수 있다.

정규표현식 패턴 - 정규표현식 | 생활코딩

AGAL — Fri, 8 Oct 2021 18:12:30 +0900

※ 예제 설명

정규표현식 === 소스 첫 매치 모두 매치

위치

^

: 캐럿 뒤에 나오는 패턴이 소스 상에서 시작 위치에 있을 때만 매치

^who === who is who

&

: 달러 앞에 나오는 패턴이 소스 상에서 끝 위치에 있을 때만 매치

who$ === who is who

이스케이핑

\

: 백슬래시 뒤에 나오는 문자를 정규표현식에서 의미가 있는 문법적 요소(^, $, 등)가 아닌 일반 문자로 변환

^\$ === $12-$13

*escape(이스케이프) : 코드 상에서 어떤 역할로부터 탈출(해제) 시켜 준다.

모든 문자

.

: 모든 문자(≒character)를 매치

.... === test of point

특정 문자

[]

: 스퀘어 브라켓(대괄호) 안에 있는 문자 중 일치하는 문자 하나를 매치

[oyu] === How do you do?
[dH]. === How do you do?
[owy][yow] === How do you do?

-

: 대시 앞에 나오는 문자부터 대쉬 뒤에 나오는 문자까지의 범위

[C-F] === ABCDEFGH

^

: 스퀘어 브라켓 안에서의 캐럿은 부정의 의미

[^C-F] === ABCDEFGH

서브 패턴

()

: 퍼렌씨시스(소괄호) 안에 파이프(수직선)로 분리한 문자 중 일치하는 문자를 매치

(on|ues|rida) === Monday Tuesday Friday

수량자

*

: 아스테리스크(별표) 앞에 나오는 패턴이 있을 수도 있고 없을 수도 있는 것을 의미 (0개 ~ 여러개) ≒ {0,}

a*b === aab abc bc
[-@]* === -@- *** -- *** -@-

+

: 플러스(더하기) 앞에 나오는 패턴이 하나 이상 있음을 의미 (1개 ~ 여러개) ≒ {1,}

a+b === aab abc bc
[^ ] === -@- *** -- *** -@-

?

: 퀘션(물음표) 앞에 나오는 패턴이 없거나 하나인 경우를 의미 (0개 ~ 1개) ≒ {0,1}

a?b === aab abc bc
-@?@?@?- === X--X-@-XX-@@@@-XX-@@-XX

{}

: 브레이스(중괄호) 안에 있는 숫자만큼 브레이스 앞에 있는 패턴을 매치

[els]{5} === the darkness bind them
[els]{2,3} === them all darkness
[a-z]{3,} === One ring to bring // {3,} 은 3개 이상 매치

* 콤마(쉼표)로 매칭되는 개수의 범위를 정한다. 예를 들어 {1, 3} 은 1개에서 3개까지 매치

※ 수량자(*, +, ?) 뒤에 ?가 있을 경우 해당 수량자의 최소값으로 매치

r.*? === One ring to bring // 0개 매치
r.+? === One ring to bring // 1개 매치
r.?? === One ring to bring // 0개 매치

※ 탐욕적 vs 게으른 수량자

<div>.+<\/div> === <div>text</div> <div>text2</div> // .+ 는 탐욕적 선택자
<div>.+?<\/div> === <div>text</div> <div>text2</div> // .+? 는 게으른 선택자

경계

: word(단어) 를 매체

[a-z]\w* === A1 B2 c3 d_4 e:5 ffGG77--__--

2. 모듈패턴으로 기존 코드 개선하기 - 견고한 JS 소프트웨어 만들기 | 김정환

AGAL — Thu, 2 Sep 2021 17:43:09 +0900

클릭 카운터 모듈 (ClickCounter)

: 카운터 데이터를 다루는 모듈 (전역 공간에 있는 counter 변수를 ClickCounter 안에서 관리하자)

첫번째 스펙

"ClickCounter 모듈의 getValue() 는 카운터 값을 반환한다."

> git checkout --force ClickCounter-spec-1

두번째 스펙

"ClickCounter 모듈의 increase() 는 카운터 값을 1만큼 증가한다."

> git checkout --force ClickCounter-spec-2

beforEach는 it 함수 호출 직전에 실행되는 자스민 함수.

describe(() => {
  beforeEach(() => {})	// 1
  afterEach(() => {})	// 3
  it(() => {})		// 2
})

중복 코드를 beforeEach로 옮기자.

※ 중복 코드를 제거한 코드를 DRY(Don't Repeat Yourself) 하다.

클릭 카운트 뷰 모듈 (ClickCounte View)

카운터 데이터는 돔(DOM)에 반영되어야 한다. 데이터를 출력하고 이벤트 핸들러를 바인딩하는 일을 담당할 것이다.

첫번째 스펙

"ClickCounterView 모듈의 updateView()는 카운트 값을 출력한다."

> git checkout --force ClickCountView-spec-1

Q) 데이터를 조회할 ClickCounter를 어떻게 얻을까? 데이터를 출력할 돔 엘리먼트는 어떻게 테스트 할까?

A) 주입하자

- ClickCounter는 객체를 만들어 파라미터로 전달 받자

- 데이터를 출력할 돔 엘리먼트를 만들어 전달 받자

TDD 방식으로 사고하다 보면 이런 식으로 필요한 모듈을 주입받아 사용하는 경향이 생김

하나의 기능 단위로 모듈을 분리할 수 있기 때문에 단일 책임 원칙을 지킬 수 있다.

Q) ClickCountView에 의존성 주입이 되었는지는 어떻게 체크할까?

A) 의존성 주입을 테스트하는 코드를 작성한다.

두번째 스펙

"ClickCounterView 모듈의 increaseAndUpdateView()는 카운트 값을 증가하고 그 값을 출력한다."

> git checkout --force ClickCountView-spec-2

# 테스트 더블

단위 테스트 패턴으로, 테스트하기 곤란한 컴포넌트를 대체하여 테스트하는 것. 특정한 동작을 흉내만 낼뿐이지만 테스트 하기에는 적합하다.

더미(dummy): 인자를 채우기 위해 사용
스텁(sturb): 더미를 개선하여 실제 동작하게끔 만든 것. 리턴값을 하드코딩한다.
스파이(spy): 스텁과 유사, 내부적으로 기록을 남기는 추가 기능
페이크(fake): 스텁에서 발전한 실제 코드.
목(mock): 더미, 스텁, 스파이를 혼합한 형태

자스민에서는 테스트 더블을 스파이스(spies)라고 부른다. spyOn(), createSpy() 함수를 사용할 수 있다.

세번째 스펙

"클릭 이벤트가 발생하면 increaseAndUpdateView()를 실행한다."

> git checkout --force ClickCountView-spec-3

클릭 이벤트 핸들러(increseAndUpdateView)를 바인딩할 돔 엘리먼트(triggerEl)를 주입 받자.