재영님의 생활기록부

마이크로 프론트엔드 도입 실패 사례와 필요성

chojy010 — Fri, 27 Sep 2024 18:38:27 +0900

⚫ 배경

프론트엔드에서 마이크로 프론트엔드 아키텍처를 도입하려고 했습니다. 기존의 모놀리식 프론트엔드는 프로젝트가 커지면서 배포 주기가 길어지고, 팀 간 협업이 어려워지며, 기능 추가나 수정 시 전체 애플리케이션에 영향을 미치는 문제가 자주 발생했습니다. 특히 하나의 작은 변경 사항을 배포하기 위해서도 전체 애플리케이션을 다시 빌드하고 배포해야 하는 부담이 커졌습니다. 이를 해결하기 위해 마이크로 프론트엔드를 도입하여 팀별로 독립적인 배포와 관리를 할 수 있도록 설계 하려했습니다.

⚫ 실패 사례: 기존 모놀리식 시스템의 문제점

아래는 실제로 회사에서 모놀리식 아키텍처를 사용하면서 경험한 문제점과 그로 인한 실패 사례들 입니다.

1. 확장성 문제

모든 기능이 하나의 코드베이스에 결합되어 있었기 때문에, 새로운 기능을 추가하거나 기존 기능을 수정할 때마다 전체 애플리케이션을 빌드하고 배포해야 했습니다. 작은 업데이트조차도 전체 시스템에 영향을 미쳤고, 이로 인해 배포 시간이 길어지면서 서비스 가용성에 문제가 발생했습니다.

주요 문제
작은 업데이트에도 전체 애플리케이션을 빌드하고 배포해야 하므로 배포 시간이 김
실패 사례
회사의 배포 과정 중 예상보다 긴 빌드 및 배포 시간으로 인해 서비스가 일시적으로 중단되었고, 이로 인해 사용자가 중요한 기능을 이용하지 못하는 상황이 발생했습니다.

2. 유지보수 비용 증가

여러 팀이 동일한 코드베이스에서 작업하고 있었고, 이로 인해 코드 충돌이 빈번하게 발생했습니다. 특히 각 팀이 동시에 여러 기능을 개발하거나 수정할 때, 서로의 작업이 충돌하면서 유지보수 과정이 복잡해지고, 문제를 해결하는 데 많은 시간과 리소스가 소요되었습니다.

주요 문제
코드 충돌이 자주 발생하고, 이를 해결하기 위한 추가 리소스와 시간이 필요
실패 사례
두 팀이 각각 다른 기능을 개발하는 과정에서 코드 충돌이 발생했습니다. 이를 해결하기 위해 추가적인 회의와 코드 병합 작업이 필요했으며, 이로 인해 전체 프로젝트 일정이 지연되었습니다. 고객의 요구사항에 빠르게 대응하지 못해 추가적인 수정 작업이 필요했고, 일정과 리소스 관리에 어려움을 겪었습니다.

3. 배포 주기 지연

모놀리식 구조에서는 새로운 기능을 추가하거나 버그를 수정할 때마다 전체 애플리케이션을 다시 테스트하고 빌드해야 했습니다. 이는 배포 주기를 지연시키고, 경쟁사보다 늦은 시기에 기능을 출시하게 되어 시장에서 경쟁력을 잃는 상황이 자주 발생했습니다.

주요 문제
전체 시스템을 다시 테스트하고 빌드하는 데 많은 시간이 소요
실패 사례
새로운 기능을 추가한 후, 전체 애플리케이션을 테스트하고 빌드하는 과정에서 예상보다 시간이 오래 걸렸습니다. 결과적으로 배포 일정이 2주 이상 지연되었고, 경쟁사는 같은 기능을 더 빨리 출시하여 시장에서 주도권을 잃게 되었습니다. 이로 인해 매출 감소와 브랜드 신뢰도 하락이 발생했습니다.

4. 기술적 부채 증가

모놀리식 시스템에서는 시간이 지남에 따라 기술적 부채가 쌓였습니다. 새로운 기능을 추가할 때 기존 코드와의 결합도가 높아지면서 코드 복잡성이 증가했고, 오래된 프레임워크를 유지하는 것이 점점 더 부담이 되었습니다. 특히 Vue.js의 오래된 버전을 사용하면서, 최신 버전으로 업그레이드하려 했지만, 의존성 문제로 인해 업그레이드가 어려웠습니다. 기술 업그레이드를 시도하더라도 전체 시스템에 큰 영향을 미쳐 많은 리소스와 시간이 소요되었습니다.

주요 문제
기술 업그레이드나 변경이 어렵고, 새로운 기능 추가 시 코드 복잡도가 증가
실패 사례
오래된 Vue.js 프레임워크를 최신 버전으로 업그레이드하려고 했으나, 전체 시스템의 의존성이 너무 높아 업그레이드가 불가능했습니다. 결국, 기존 버전을 유지할 수밖에 없는 상황이 발생했습니다. 이로 인해 기능 추가 및 유지보수가 원활하게 진행되지 못했고, 프로젝트가 수개월 동안 지연되었습니다. 기술적 부채를 해결하기 위해 추가적인 자원이 투입되었지만, 의존성 문제로 인해 지속적으로 어려움을 겪었습니다.

5. 장애 발생 시 전체 시스템에 영향

하나의 모듈에서 발생한 작은 오류가 전체 시스템에 영향을 미치는 문제가 자주 발생했습니다. 특정 기능에서 발생한 문제가 전체 애플리케이션을 중단시키는 경우가 많았으며, 이로 인해 고객들이 서비스를 사용할 수 없게 되는 상황이 빈번하게 발생했습니다. 서비스 중단은 고객 신뢰도에 큰 타격을 주었고, 이로 인해 사용자 이탈이 늘어났습니다.

주요 문제
한 모듈의 오류가 전체 애플리케이션에 영향을 미침
실패 사례
회사의 주문 처리 모듈에서 작은 오류가 발생했는데, 이 오류가 결제 전체 시스템에 영향을 미쳐 주문이 정상적으로 처리되지 않는 상황이 발생했습니다. 그 결과 사용자들이 결제를 진행할 수 없게 되었고, 서비스가 1시간 이상 중단되었습니다. 이로 인해 시간당 100만 원 이상의 매출 손실이 발생하여 고객들은 결제를 완료하지 못해 불만이 커졌습니다.

⚫ MSA 및 마이크로 프론트엔드 도입의 필요성

기존 모놀리식 아키텍처에서는 확장성 문제, 유지보수 비용 증가, 배포 지연, 기술적 부채, 그리고 장애 발생 시 전체 시스템에 영향을 미치는 문제 등 다양한 한계가 존재했습니다. 이러한 문제들은 시간이 지남에 따라 비즈니스 성과와 서비스 품질에 큰 영향을 미쳤으며, 이를 해결하기 위해서는 마이크로서비스 아키텍처(MSA) 및 마이크로 프론트엔드의 도입이 필수적입니다.

1. 확장성 문제 해결

모놀리식 구조에서는 모든 기능이 하나의 코드베이스에 결합되어 있어 작은 기능 업데이트에도 전체 시스템을 빌드하고 배포해야 했습니다. MSA 및 마이크로 프론트엔드는 각 기능을 독립된 서비스로 분리하여 각 서비스가 독립적으로 빌드 및 배포될 수 있습니다. 이를 통해 배포 시간을 단축하고, 특정 서비스의 기능 추가나 수정이 전체 시스템에 영향을 미치지 않도록 할 수 있습니다.

- 도입 이유 -

독립적 배포: 각 기능별로 독립적으로 배포 가능하여, 서비스 가용성을 유지
빠른 확장: 필요한 부분만 빠르게 확장 가능, 전체 시스템에 영향을 주지 않음

2. 유지보수 비용 감소

모놀리식 시스템에서는 여러 팀이 동일한 코드베이스에서 작업함으로 인해 코드 충돌이 자주 발생하고, 이를 해결하는 데 많은 리소스와 시간이 소요되었습니다. 반면 MSA 및 마이크로 프론트엔드를 도입하면 각 팀이 독립적으로 관리하는 서비스나 모듈을 별도로 유지할 수 있어 코드 충돌이 줄어들고, 유지보수의 복잡성을 대폭 줄일 수 있습니다.

- 도입 이유 -

팀 간 독립성: 각 팀은 자신들의 영역에서 독립적으로 작업 가능
유지보수 효율성: 코드 충돌 감소, 유지보수 비용 절감

3. 배포 주기 단축

새로운 기능을 추가할 때마다 전체 애플리케이션을 빌드하고 테스트해야 하므로 배포 주기가 길어질 수밖에 없었습니다. 마이크로 프론트엔드를 도입하면 각 모듈이 독립적으로 테스트 및 배포될 수 있으므로 배포 주기가 단축되고, 빠르게 새로운 기능을 추가하여 시장에 대응할 수 있습니다.

- 도입 이유 -

빠른 배포: 각 기능별로 빠르게 배포하여 배포 주기 단축
시장 대응력 강화: 경쟁사보다 빠르게 새로운 기능을 출시할 수 있음

4. 기술적 부채 해결

기술 업그레이드 시 의존성 문제로 전체 시스템에 영향을 미치는 경우가 많았습니다. 마이크로 프론트엔드 아키텍처를 도입하면 각 서비스가 독립적으로 동작하므로, 특정 서비스만 기술 업그레이드나 프레임워크 교체가 가능합니다. 이를 통해 전체 시스템에 영향을 주지 않고 필요한 부분만 개선할 수 있어 기술적 부채를 단계적으로 해결할 수 있습니다.

예를 들어, 일부 서비스는 Vue.js, 다른 서비스는 React나 Next.js를 사용하는 등 다양한 기술을 병행하며 필요한 부분만 유연하게 업그레이드할 수 있습니다. 이를 통해 개발팀은 최적의 기술을 선택하고, 기술 부채를 효과적으로 관리할 수 있습니다.

- 도입 이유 -

부분적 기술 업그레이드: Vue.js나 React, Next.js 등 다양한 프레임워크를 개별 서비스에 적용하고, 특정 모듈만 유연하게 업그레이드 가능
유연한 기술 도입: 전체 시스템에 영향을 미치지 않고 각 마이크로 프론트엔드 서비스에 적합한 기술을 독립적으로 도입하고 운영할 수 있음

5. 장애 발생 시 전체 시스템에 영향 방지

MSA와 마이크로 프론트엔드는 서비스를 개별적으로 운영하기 때문에, 특정 모듈에서 문제가 발생하더라도 전체 시스템에 영향을 주지 않도록 고립할 수 있습니다. 이를 통해 장애 발생 시에도 부분적인 서비스 중단만 발생하고, 주요 서비스는 정상적으로 유지됩니다.

- 도입 이유 -

장애 고립: 특정 서비스에서 발생한 문제를 전체 시스템에 전파하지 않음
안정성 강화: 서비스 전체 중단을 방지

⚫ 차이점

항목	모놀리식 아키텍처 (AS-IS)	마이크로 프론트엔드 아키텍처 (TO-BE)
배포 구조	하나의 단일 번들 파일로 모든 기능을 포함	여러 개의 독립 번들로 기능이 나누어져 있음
개발 프로세스	모든 기능이 단일 레포지토리에서 관리, 각 팀이 동일한 코드베이스 사용	각 기능/모듈이 개별 레포지토리에서 관리, 팀마다 독립적인 코드베이스 사용 가능
빌드 시간	전체 애플리케이션을 빌드해야 하므로 시간이 오래 걸림	각 모듈만 빌드하면 되므로 빌드 시간이 짧음
배포 주기	전체 애플리케이션을 한 번에 배포, 배포 주기가 길어질 수 있음	각 모듈 별로 독립적으로 배포, 배포 주기가 짧음
코드 복잡도	하나의 코드베이스에 모든 코드가 몰려 있어 복잡도가 높아짐	각 모듈별로 코드를 분리하여 복잡도가 낮아짐
팀 간 협업	팀 간의 협업이 어려움, 코드 충돌 및 의존성 문제가 빈번하게발생	각 팀이 독립적인 모듈을 관리하므로 협업이 용이, 의존성 문제 감소
서비스 성능	전체 번들을 로드하기 때문에 초기 로딩 속도가 느려질 수있음	필요한 모듈만 로드하여 초기 로딩 속도가 빨라짐
페이지 로드	모든 기능을 한 번에 로드해야 하므로 페이지 로드 시 성능 저하	필요할 때 모듈을 동적으로 로드하여 사용자경험을 향상 시킴
기능 격리	모든 기능이 단일 애플리케이션내에 포함되어있어 문제 발생시 전체 서비스에 영향	각 기능이 독립적으로 관리되어 문제가 발생해도 다른 기능에 영향 없음
테스트	전체 애플리케이션을 테스트해야 함	개별 모듈 단위로 테스트 가능
디버깅	단일 코드베이스에서 디버깅이 복잡함	각 모듈별로 디버깅 가능, 문제를 쉽게 격리 가능
데브옵스 전략	단일 CI/CD 파이프라인에서 모든 기능을 관리해야 함	각 모듈별로 CI/CD 파이프라인을 독립적으로 설정 가능
기능 출시 속도	기능 출시가 느리며 전체 배포 주기에 의존	각 모듈 별로 빠르게 기능을 출시 가능
오류 및 장애 처리	단일 장애 발생 시 전체 시스템에 영향	오류가 발생해도 해당 모듈에만 한정, 전체 서비스는 정상 작동
의존성	모든 의존성이 하나의 프로젝트에 포함되며, 의존성 충돌 가능성 높음	각 모듈이 독립적이므로 의존성 충돌 문제 최소화
재사용성	코드 재사용이 제한적	각 모듈을 독립적으로 재사용 가능, 다른 프로젝트에 쉽게 적용 가능
기술 스택	단일 기술 스택으로 제한	각 모듈별로 다른 기술 스택을 사용할 수 있음
보안 및 인증	전체 시스템에 대한 단일 인증/보안 체계 필요	각 모듈별로 독립적인 인증 및 보안 체계 설정 가능
코드 분리	단일 코드베이스로 코드 분리가 어려움	각 모듈별로 코드 분리가 되어 유지보수가 용이

Monolithic Architecture

단일 번들에서 모든 기능이 통합되어 관리되므로, 배포 주기가 길고 유지보수에 어려움이 따릅니다.
팀 간 협업에서 의존성 문제가 발생하기 쉽고, 전체 애플리케이션을 다시 빌드하고 배포해야 하므로 시간이 오래 걸립니다.
성능 저하와 장애 시 전체 시스템에 영향을 미칩니다.

Micro Frontend Architecture

기능을 독립적인 모듈로 나누어 관리하므로, 개발 속도와 배포 속도가 빠르며, 팀 간 협업이 원활합니다.
성능 최적화가 용이하며, 장애 발생 시에도 해당 모듈에만 영향을 미쳐 전체 시스템 안정성을 보장할 수 있습니다.

JavaScript에서의 Early Return: 코드 가독성과 효율성 향상하기

chojy010 — Mon, 12 Aug 2024 11:24:39 +0900

React.js

Early Return이란 무엇인가요?

특정 조건이 충족되면 즉시 함수에서 반환(return)하는 것을 말합니다. 이렇게 하면 if-else 블록 내에 전체 함수 로직을 감싸는 대신, 코드를 단순화하고 중첩 블록의 수를 줄여 가독성을 높일 수 있습니다.

Early Return의 장점

1. 코드를 더 간단하게 만들어 복잡한 중첩 구조를 피할 수 있습니다.

2. 코드를 이해하기 쉽기 때문에 유지보수가 용이합니다.

3. 불필요한 코드를 실행하지 않으므로 효율성을 높일 수 있습니다.

전통적인 접근 방식

우선 early return을 사용하지 않은 전통적인 접근 방식을 살펴보겠습니다.

사용자가 성인인지 확인하고, 성인일 경우 일부 작업을 수행하는 함수를 고려해 보겠습니다.

function checkIfAdult(age) {
    if (age >= 18) {
        console.log("당신은 성인입니다.");
        // 성인을 위한 추가 로직
    } else {
        console.log("당신은 성인이 아닙니다.");
    }
}

= 이 코드는 간단해 보이지만, 조건과 로직이 추가될수록 복잡해질 수 있습니다. 중첩이 깊어질수록 코드의 흐름을 따라가기가 어려워집니다.

Early Return을 사용한 접근 방식

이제 early return을 사용하여 동일한 문제를 해결해 보겠습니다.

function checkIfAdult(age) {
    if (age < 18) {
        console.log("당신은 성인이 아닙니다.");
        return;
    }

    console.log("당신은 성인입니다.");
    // 성인을 위한 추가 로직
}

= 조건이 충족되지 않는 경우 함수를 즉시 종료할 수 있습니다. 이렇게 하면 코드가 더 간결해지고 가독성이 높아집니다.

Early Return의 실제 예제

입력 값이 유효한지 확인하고, 유효하지 않으면 함수를 종료합니다.

function processInput(input) {
    if (!input) {
        console.error("입력이 없습니다.");
        return;
    }

    if (typeof input !== 'string') {
        console.error("입력이 문자열이 아닙니다.");
        return;
    }

    console.log(`입력된 문자열: ${input}`);
    // 입력이 유효할 경우 추가 로직
}

processInput(); // 입력이 없습니다.
processInput(123); // 입력이 문자열이 아닙니다.
processInput("안녕하세요"); // 입력된 문자열: 안녕하세요

= 입력 값이 없거나 문자열이 아닌 경우 함수를 즉시 종료함으로써 불필요한 추가 로직 실행을 방지하고 코드를 더 간결하게 만들었습니다.

Cloc (Count Lines of Code) : 코드 라인 수 세기

chojy010 — Wed, 7 Aug 2024 15:43:28 +0900

다양한 프로그래밍 언어로 작성된 코드의 라인 수를 세어주는 도구입니다. 프로젝트 규모를 파악하는 데 유용합니다.

설치

brew install cloc

프로젝트의 코드 라인 수 파악하기

// 분석하고자 하는 디렉토리 이동
CD [디렉토리]

// 현재 디렉토리 내 전체 코드 라인 계산
cloc ./*

결과

-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
JavaScript                      10            200            150           1200
HTML                             5             50             20            500
CSS                              3             30             10            300
-------------------------------------------------------------------------------
SUM:                            18            280            180           2000
-------------------------------------------------------------------------------

각 언어별로 파일 수, 빈 줄 수, 주석 줄 수, 실제 코드 줄 수를 보여줍니다.

SWR vs TanStack: 실시간 데이터와 서버 상태 관리를 위한 모듈 비교

chojy010 — Mon, 5 Aug 2024 15:59:02 +0900

최신 데이터를 신속하게 가져오고, 상태 관리를 효율적으로 하는 것은 매우 중요합니다. SWR과 TanStack은 이러한 요구를 충족시키기 위해 많이 사용되는 두 가지 주요 라이브러리입니다. 이 두 라이브러리는 모두 유사한 목적을 가지고 있지만, 각자의 철학과 기능에 있어 차이점이 있습니다.

SWR : 무한 스크롤을 위한 데이터 페칭

SWR (Stale-While-Revalidate)은 Vercel에서 개발한 React 훅 라이브러리로, 데이터 페칭을 단순화하고 최신 데이터를 유지하는 데 중점을 둡니다.

[주요 특징]

1. 자동 재검증: 데이터를 불러올 때 캐시된 데이터를 먼저 보여주고, 백그라운드에서 최신 데이터를 가져와 자동으로 업데이트합니다.

2. 간단한 API: 매우 직관적인 API를 제공하여 초기 설정이 쉽습니다.

3. 최소한의 설정: 추가적인 설정 없이도 기본 기능을 충분히 활용할 수 있습니다.

4. 캐싱과 데이터 동기화: SWR은 HTTP 캐싱과 유사한 방식으로 작동하여 데이터를 효율적으로 동기화합니다.

5. Revalidation: 백그라운드에서 데이터를 다시 가져와 UI를 최신 상태로 유지합니다.

6. 폴링(Polling) 기능: 주기적으로 데이터를 갱신할 수 있습니다.

예시

import useSWR from 'swr';

const fetcher = url => fetch(url).then(res => res.json());

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return <div>Hello, {data.name}!</div>;
}

SWR : 강력한 캐시와 유연한 설정

TanStack (React Query)은 서버 상태를 관리하고, 캐시와 동기화하는 것을 주요 목표로 하는 라이브러리입니다. 다소 복잡한 설정을 요구하지만, 그만큼 강력한 기능을 제공합니다.

[주요 특징]

1. 고급 캐시 제어: 캐시 만료, 리페치 등 고급 캐시 전략을 세밀하게 조정할 수 있습니다.

2. 광범위한 설정 옵션: 다양한 훅과 설정 옵션을 통해 원하는 기능을 구현할 수 있습니다.

3. 서버 상태 관리: 서버 상태와 클라이언트 상태를 분리하여 관리할 수 있습니다.

4. 데이터 무효화: 특정 이벤트 후 데이터를 무효화하고 다시 가져올 수 있습니다.

5. 배치 업데이트: 여러 쿼리를 동시에 업데이트하고 관리할 수 있습니다.

6. DevTools: 개발 중 쿼리 상태를 시각적으로 확인할 수 있는 DevTools를 제공합니다.

예시

import { useQuery } from '@tanstack/react-query';

const fetchUser = async () => {
  const res = await fetch('/api/user');
  return res.json();
};

function Profile() {
  const { data, error, isLoading } = useQuery(['user'], fetchUser);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Failed to load</div>;

  return <div>Hello, {data.name}!</div>;
}

[차이점 요약]

특징	SWR	TanStack (React Query)
자동 재검증	백그라운드에서 자동 재검증	고급 설정으로 데이터 무효화 및 재검증 가능
API 사용성	매우 직관적, 설정이 간단	다양한 설정 옵션과 복잡한 기능 제공
캐시 관리	간단한 캐시 관리	고급 캐시 전략 제공
폴링(Polling)	기본 제공	커스텀 설정 가능
데이터 무효화	없음	특정 이벤트 후 데이터 무효화 가능
DevTools	없음	DevTools를 통해 쿼리 상태 시각화
커뮤니티와 지원	Vercel 지원, Next.js와 통합	광범위한 커뮤니티 지원, 다양한 플러그인 제공
설정 난이도	낮음	중간에서 높음

[결론]

SWR과 TanStack은 각기 다른 상황에서 빛을 발할 수 있는 훌륭한 도구입니다. 프로젝트의 요구사항과 팀의 숙련도에 따라 적합한 도구를 선택하는 것이 중요합니다.

개인적으로는 간단한 데이터 페칭과 자동 재검증이 필요한 경우 SWR,

복잡한 캐시 전략과 서버 상태 관리를 원하는 경우 TanStack을 추천합니다.

Storybook을 사용하여 React 컴포넌트 문서화 및 테스트하기

chojy010 — Thu, 1 Aug 2024 05:00:46 +0900

Storybook이란?

UI 컴포넌트를 위한 개발 환경입니다. Storybook을 사용하면 애플리케이션과 독립적으로 컴포넌트를 개발하고, 각각의 컴포넌트를 다양한 상태에서 시각화할 수 있습니다. 또한, 팀 내에서 컴포넌트를 공유하고, 문서화하며, UI 개발 속도를 높이는 데 큰 도움을 줍니다.

Storybook의 주요 기능

1. 독립적인 컴포넌트 개발: 애플리케이션과 분리된 환경에서 개별 컴포넌트를 개발할 수 있습니다.

2. 인터랙티브한 문서화: 컴포넌트의 다양한 상태를 스토리로 작성하여 시각적으로 문서화할 수 있습니다.

3. 애드온을 통한 확장성: 다양한 애드온을 사용하여 Storybook의 기능을 확장할 수 있습니다.

4. 자동화된 테스트: 컴포넌트의 UI 변화를 시각적으로 테스트하고 확인할 수 있습니다.

1. Storybook 설치 및 초기화

먼저, Storybook을 설치하고 초기화해보겠습니다. 아래 명령어를 실행하여 Storybook을 프로젝트에 추가합니다.

npx sb init

2. Storybook 설정 파일 수정

storybook/main.js 파일을 열어 아래와 같이 수정합니다.

// storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
};

3. TypeScript와 Storybook 설정

TypeScript를 사용하려면 tsconfig.json 파일에 Storybook 관련 타입 정의를 추가해야 합니다.

// tsconfig.json

{
  "compilerOptions": {
    "types": ["@storybook/react"]
  }
}

4. 예제 컴포넌트와 스토리 파일 생성

src/components 폴더에 Button.tsx 파일을 생성하고, 간단한 버튼 컴포넌트를 작성합니다.

// src/components/Button.tsx

import React from 'react';

interface ButtonProps {
  label: string;
}

const Button: React.FC<ButtonProps> = ({ label }) => {
  return <button>{label}</button>;
};

export default Button;

// Button.stories.tsx

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import Button from './Button';

export default {
  title: 'Example/Button',
  component: Button,
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Button',
};

5. Storybook 실행

밑에 명령어를 실행하면 로컬 서버가 시작되고, 브라우저에서 http://localhost:6006을 열어 Storybook 인터페이스를 확인할 수 있습니다.

npm run storybook

React와 TypeScript로 프로젝트 시작하기

chojy010 — Thu, 1 Aug 2024 02:19:03 +0900

1. 새로운 React 프로젝트 생성

먼저, create-react-app을 사용하여 새로운 프로젝트를 생성합니다. 이때 TypeScript 템플릿을 사용하여 프로젝트를 초기화합니다.

npx create-react-app my-typescript-app --template typescript
cd my-typescript-app

2. TypeScript 설정 파일 확인

프로젝트 루트 디렉토리에 있는 tsconfig.json 파일을 열어 TypeScript 설정을 확인합니다. 기본 설정으로 충분하지만, 필요에 따라 설정을 수정할 수 있습니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

3. 첫 번째 TypeScript 컴포넌트 만들기

src/components 폴더를 만들고, 그 안에 Button.tsx 파일을 생성합니다.

import React from 'react';

interface ButtonProps {
  label: string;
}

const Button: React.FC<ButtonProps> = ({ label }) => {
  return <button>{label}</button>;
};

export default Button;

4. 프로젝트 실행

밑에 명령어를 실행하면 로컬 서버가 시작되고, 브라우저에서 http://localhost:3000을 열어 React 애플리케이션을 확인할 수 있습니다.

npm run start

React 기초: 주요 개념과 기능 이해하기

chojy010 — Sun, 9 Jun 2024 22:05:52 +0900

JavaScript 라이브러리로서 사용자 인터페이스를 구축하기 위해 널리 사용됩니다.

이 글에서는 React의 핵심 개념들을 정리하고, 각각의 기능을 어떻게 활용할 수 있는지 알아보겠습니다.

▣ 컴포넌트 (Components)

React의 기본 빌딩 블록은 컴포넌트입니다. 각 컴포넌트는 독립적으로 작동하며, 재사용 가능하고 계층적으로 조합하여 복잡한 UI를 구성할 수 있습니다.

클래스형 컴포넌트: 상태 관리와 라이프사이클 기능을 사용할 수 있습니다

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

함수형 컴포넌트: 간단하고 효율적인 컴포넌트 생성이 가능하며, 훅을 사용하여 상태와 라이프사이클을 관리합니다.

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

▣ JSX (JavaScript XML)

JSX는 HTML과 유사하게 생겼지만 JavaScript를 확장한 문법입니다. JSX를 사용하면 React 엘리먼트를 쉽게 작성하고, 읽기 쉬운 코드로 UI를 정의할 수 있습니다.

const element = <h1 className="greeting">Hello, world!</h1>;

▣ Props (Properties)

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. 이를 통해 컴포넌트 간에 정보를 공유하고, 동적인 컴포넌트를 만들 수 있습니다. Props는 읽기 전용이며, 컴포넌트 내부에서 변경할 수 없습니다.

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Welcome name="Sarah" />;
}

▣ State (상태)

State는 컴포넌트의 상태를 관리하는 데이터입니다. 사용자와의 상호작용에 따라 동적으로 변화하는 UI를 만들기 위해 필수적입니다. useState 훅을 통해 함수형 컴포넌트에서도 상태를 쉽게 관리할 수 있습니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

▣ 이벤트 처리 (Event Handling)

React에서 이벤트를 처리하는 방법은 매우 간단합니다. onClick, onChange와 같은 JSX 속성을 사용하여 이벤트 핸들러를 정의하고, 사용자의 액션에 따라 특정 로직을 실행할 수 있습니다.

import React, { useState } from 'react';

function TextInput() {
  const [value, setValue] = useState('');

  function handleChange(event) {
    setValue(event.target.value);
  }

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

▣ 조건부 렌더링 (Conditional Rendering)

조건에 따라 다른 컴포넌트를 렌더링하거나 보이지 않게 할 수 있습니다. React에서는 JavaScript의 조건문이나 삼항 연산자를 사용하여 이를 구현합니다. 이는 복잡한 사용자 인터페이스의 다양한 부분을 효율적으로 관리할 수 있게 해줍니다.

function Welcome(props) {
  return <div>{props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}</div>;
}

▣ 리스트와 키 (Lists and Keys)

리스트 렌더링은 반복되는 데이터를 효율적으로 표시하는 방법입니다. 각 리스트 아이템에 고유 key를 제공하여, React가 어떤 아이템이 변경, 추가, 또는 삭제되었는지 식별할 수 있게 합니다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

▣ 라이프사이클과 훅 (Lifecycle and Hooks)

React 클래스 컴포넌트는 라이프사이클 메서드를 통해 컴포넌트의 생성부터 소멸까지 관리합니다. 함수형 컴포넌트에서는 useEffect, useState, useContext와 같은 훅을 사용하여 비슷한 작업을 수행할 수 있습니다.

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>Seconds: {seconds}</div>;
}

▣ 포털 (Portals)

포털은 부모 컴포넌트의 DOM 계층 구조를 벗어나 필요한 곳에 UI를 렌더링할 수 있게 해줍니다.

ex). 모달, 팝업, 툴팁 등

import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    children,
    document.getElementById('modal-root')
  );
}

function App() {
  return <Modal><div>This is a modal!</div></Modal>;
}

▣ Context API

Context API는 React 애플리케이션 전역에서 데이터를 공유할 수 있는 방법을 제공합니다. 이를 통해 props 드릴링 없이 여러 컴포넌트 간에 상태를 공유할 수 있습니다.

import React, { useContext, createContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemeButton() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Switch Theme
    </button>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemeButton />
    </ThemeProvider>
  );
}

웹 성능 향상을 위한 필수 기술: 자바스크립트 경량화(Minify)의 이해와 적용

chojy010 — Sun, 9 Jun 2024 21:44:42 +0900

웹 페이지의 로딩 속도는 사용자 경험과 검색 엔진 순위에 결정적인 영향을 미칩니다. 이를 개선하는 강력한 방법 중 하나가 바로 '경량화(minify)'입니다. 이 글에서는 경량화가 무엇인지, 왜 중요한지, 그리고 어떻게 적용할 수 있는지에 대해 알아보겠습니다.

경량화의 중요성

경량화는 코드에서 불필요한 공백, 줄바꿈, 주석을 제거하여 파일 크기를 줄이는 과정입니다. 이 작업은 페이지 로딩 시간을 단축시키고, 네트워크 비용을 절감하여 모바일 사용자에게도 큰 이점을 제공합니다. 또한, 더 빠른 로딩 시간은 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.

경량화 기술

공백 제거: 코드 내의 모든 불필요한 공백을 제거합니다.
줄바꿈 삭제: 코드의 줄바꿈을 제거하여 파일의 라인 수를 최소화합니다.
주석 삭제: 코드 설명을 위한 주석을 제거합니다.
변수 및 함수 이름 단축: 가능한 한 짧은 이름으로 변경하여 추가 공간을 절약합니다.

적용 예시

경량화 전

function addNumbers(a, b) {
    return a + b;
}

경량화 후

function addNumbers(a,b){return a+b;}

도구

UglifyJS: 자바스크립트 코드를 압축하고 난독화하는 데 사용됩니다.
Terser: ES6+ 코드를 지원하는 UglifyJS의 포크입니다.
CSSNano: CSS 파일을 최적화하고 경량화하는 도구입니다.

결론

경량화(Minify)는 웹 성능을 최적화하고 사용자 경험을 향상시키는 필수적인 과정입니다. 이 기술을 웹 개발 프로젝트에 적용함으로써, 더 빠른 로딩 시간과 향상된 SEO 이점을 누릴 수 있습니다.

코드 보호 : 자바스크립트 난독화의 중요성

chojy010 — Sun, 9 Jun 2024 21:43:36 +0900

난독화는 소프트웨어 개발에서 중요한 보안 조치 중 하나입니다. 이 글에서는 난독화가 무엇인지, 왜 중요한지, 그리고 자바스크립트 코드에 어떻게 적용할 수 있는지에 대해 살펴보겠습니다.

난독화의 중요성

보안 강화: 공개적으로 접근 가능한 클라이언트 사이드 코드를 보호하여, 해킹 및 무단 복제를 방지합니다.
지적 재산 보호: 소스 코드 내에 포함된 로직이나 알고리즘을 보호하여, 개발자의 지적 재산권을 유지합니다.
리버스 엔지니어링 방지: 코드의 이해와 분석을 어렵게 만들어, 경쟁사나 악의적 사용자에 의한 역공학을 어렵게 합니다.

난독화 기법

변수 및 함수 이름 변경: 의미 있는 이름을 갖는 변수나 함수의 이름을 짧고 무의미한 문자로 변경합니다.
코드 구조 변경: 코드의 실행 순서를 변경하거나 로직을 복잡하게 재구성하여, 원래의 코드 흐름을 알아보기 어렵게 합니다.
문자열 인코딩: 코드 내의 문자열 리터럴을 인코딩하고, 실행 시점에 디코딩하여 사용합니다.
더미 코드 추가: 기능적으로는 무의미하거나 실행되지 않는 코드를 추가하여, 분석을 더 어렵게 만듭니다.

적용 예시

경량화 전

function calculateArea(width, height) {
    return width * height;
}

경량화 후

var a='calculateArea', b=function(c,d){return c*d}; window[a]=b;

도구

UglifyJS: 이 도구는 자바스크립트 코드를 난독화하고 압축하는 기능을 제공합니다. 변수 및 함수 이름을 변경하고, 코드를 최소화합니다.
JavaScript Obfuscator Tool: 웹 기반 도구로, 코드 구조를 변경하고, 문자열을 인코딩하는 등 다양한 난독화 옵션을 제공합니다.

결론

난독화는 코드 보안을 강화하는 중요한 단계입니다. 특히, 웹 애플리케이션 개발에서는 클라이언트 사이드 스크립트가 외부에 노출되어 있기 때문에 난독화를 통해 추가적인 보호층을 제공할 수 있습니다.