Angular 는 Zone.js 로 모든 비동기 작업을 감싸고, 비동기 완료 시 자동으로 Change Detection 을 트리거한다.

하지만 외부 라이브러리나 DOM 이벤트 콜백은 Angular Zone 외부에서 실행되기 때문에, 뷰 업데이트가 자동으로 일어나지 않는다.

이 때, ngZone.run() 을 호출해 Angular Zone 안으로 복귀시키면 변경된 데이터를 UI에 반영할 수 있다.

3rd-party 이벤트 예제

someJsLib.onEvent(payload => {
  // 이 콜백은 Angular Zone 밖
  this.ngZone.run(() => {
    this.data = payload;
    // run() 내부라서 CD 자동 실행
  });
});

1. 외부 콜백 실행
2. ngZone.run() 진입
3. this.data 변경
4. Change Detection
5. 뷰 업데이트

그 외 사용할 수 있는 곳

• WebSocket 메시지 수신: 서버 푸시 데이터를 UI에 반영

• 3rd‑party 콜백: 차트 라이브러리, 맵 API 이벤트

• FileReader, IndexedDB 콜백 등

  • 단, run()을 남발하면 매번 Change Detection이 일어나 성능 저하로 이어질 수 있으니, 이벤트 빈도가 높지 않은 곳에만 사용하거나, 꼭 필요한 부분만 감싸야한다.

#2. runOutsideAngular()

Angular Zone 안에서는 모든 이벤트가 CD를 트리거하기 때문에,

특히 스크롤, mousemove, resize 같은 반복 빈도 높은 이벤트를 처리하면 성능에 큰 부담이 된다.

이럴 때 runOutsideAngular() 를 사용해 Zone을 벗어나 이벤트를 등록하면, 불필요한 CD를 피할 수 있다.

scroll 최적화 예제

this.ngZone.runOutsideAngular(() => {
  fromEvent(window,'scroll').pipe(throttleTime(100))
    .subscribe(() => {
      const y = window.scrollY;
      if (y > 200) {
        this.ngZone.run(() => this.scrollY = y);
      }
    });
});

1. runOutsideAngular() 로 모든 스크롤 이벤트가 Zone 밖에서 실행 -> CD 미발생
2. throttleTime(100)으로 이벤트 빈도 제어
3. 조건 통과 시 (y > 200) 에만 run() 호출해 UI 업데이트

mousemove 최적화 예제

this.ngZone.runOutsideAngular(() => {
  fromEvent(window, 'mousemove')
    .pipe(throttleTime(200))
    .subscribe((e: MouseEvent) => {
      const coords = { x: e.clientX, y: e.clientY };
      // 마우스가 화면 중앙 근처일 때만 UI 업데이트
      if (coords.x > window.innerWidth/2) {
        this.ngZone.run(() => {
          this.cursorPos = coords;
        });
      }
    });
});

1. Zone 밖에서 스트림 생성
2. RxJS 연산자로 빈도 제어 (throttleTime/debounceTime)
3. 조건(혹은 결과) 만족 시에만
4. Zone 안으로 복귀해 UI 업데이트 (ngZone.run())

왜 이렇게 처리를 할까🤔?

• 매 프레임마다(60fps) 발생하는 이벤트를 Zone 안에서 처리하면 매번 CD → 성능 저하

• Zone 밖에서 빈도 제어 후, 정말 필요한 순간에만 Zone 안으로 복귀

=>효과: Raw scroll 처리: 30fps 미만으로 뚝뚝 끊김, throttleTime+runOutside/run 적용: 55–60fps 유지

(참고) throttleTime vs. debounceTime

throttleTime, debounceTime 선택의 기준

• throttleTime(ms): 최초 이벤트 방출 후, 지정한 ms 동안은 이후 이벤트 무시 스크롤 / scroll, mousemove 같은 빈번한 이벤트 제어
• debounceTime(ms): 마지막 이벤트가 발생하고 지정한 ms 동안 추가 이벤트 없을 때 최종 이벤트만 방출 / 검색어 입력 후 최종 키 입력 시점 처리 (검색 API 호출)

// 1) throttleTime: 스크롤 위치 감지
this.ngZone.runOutsideAngular(() => {
  fromEvent(window, 'scroll')
    .pipe(throttleTime(100))
    .subscribe(() => {
      // 초당 최대 10번(1000/100)만 동작
      this.ngZone.run(() => this.scrollY = window.scrollY);
    });
});

// 2) debounceTime: 검색어 입력
fromEvent(searchInput.nativeElement, 'keyup')
  .pipe(
    map((e: any) => e.target.value),
    debounceTime(300)      // 마지막 입력 후 300ms 동안 입력 없을 때만
  )
  .subscribe(query => {
    this.searchService.search(query).subscribe(results => this.items = results);
  });

=> throttleTime은 “지속적으로 많은 이벤트 중 간헐적으로 한 번만” 처리,

debounceTime은 “마지막 이벤트가 완전히 멈춘 뒤에 한 번만” 처리

#3. onMicrotaskEmpty vs. onStable

Zone 이벤트 흐름

Angular(Zone.js)는 microtask와 macrotask 두 가지 큐를 관리한다.

• microtask: Promise 콜백, queueMicrotask 등 → 우선 순위가 높아 macrotask 직후에 실행
• macrotask: setTimeout, setInterval, DOM 이벤트, XHR 등

Zone 이벤트 실행 순서

1. 하나의 macrotask 실행
   • 예: setTimeout 콜백, I/O 이벤트, DOM 이벤트, setInterval 등
2. 해당 macrotask 내에서 스케줄된 모든 microtask 처리
   • 예: Promise.then, queueMicrotask, MutationObserver 콜백 등
3. 렌더링(Optional)
   • 브라우저가 필요하다면 화면을 갱신
4. 다음 macrotask 로 이동

=> “macrotask → microtask → (렌더링) → 다음 macrotask” 순서로 동작

onMicrotaskEmpty

onMicrotaskEmpty 는 모든 macrotask 가 끝난 직후, 그리고 그 사이에 발생한 모든 microtask 도 완료된 시점에 발생한다.

Angular 내부 로직 중 “Promise 기반 초기화”가 끝난 바로 다음 순간에 특정 코드를 실행하고 싶을 때, 예: 서비스 초기화(init().then()), 라우터 가드 canActivate() Promise 처리 직후 같은 때 사용 가능하다.

this.ngZone.onMicrotaskEmpty.pipe(take(1)).subscribe(() => {
  console.log('모든 Promise 콜백 처리 완료 직후');
});

pipe(take(1)): 스트림에서 첫 번째(next) 알림을 받은 즉시 그 값을 구독자에게 전달하고 메모리 누수 없이 자동으로 구독이 해제 (unsubscribe)

onStable

onStable 은 모든 macrotask + microtask 가 완전히 끝나고, Zone 이 "완전히 유휴(idle)" 상태가 된 뒤에 발생한다.

앱 초기 렌더링 + 비동기 데이터 바인딩이 모두 끝난 뒤에 실행할 로직, ex. Analytics 초기화: 모든 컴포넌트가 로딩된 뒤 스크립트 로드 / Layout 측정: ViewChild,ElementRef 로 DOM 크기를 정확히 측정 할 때 사용가능하다.

this.ngZone.onStable.pipe(take(1)).subscribe(() => {
  console.log('모든 비동기 작업(타이머, HTTP, 이벤트) 종료 후');
});

Analytics & layout 측정 예제

import { Component, NgZone, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { take } from 'rxjs/operators';

// (가상의) Analytics, Chart 라이브러리 인터페이스
declare const Analytics: { init: () => void };
declare const ChartLib: { create: (el: HTMLElement, w: number, h: number) => void };

@Component({
  selector: 'app-analytics-layout-demo',
  template: `
    <div #chartContainer class="chart-container">
      <!-- 차트가 여기 렌더링됩니다 -->
    </div>
  `
})
export class AnalyticsLayoutDemoComponent implements AfterViewInit {
  @ViewChild('chartContainer', { static: true })
  chartContainer!: ElementRef<HTMLElement>;

  constructor(private ngZone: NgZone) {}

  ngAfterViewInit() {
    // 1) Change Detection + Promise 등 microtask 직후 → Analytics 초기화
    this.ngZone.onMicrotaskEmpty
      .pipe(take(1))
      .subscribe(() => {
        console.log('onMicrotaskEmpty: Analytics.init() 호출');
        Analytics.init();
      });

    // 2) setTimeout, HTTP 등 macrotask까지 모두 완료된 뒤 → Layout 측정 및 차트 생성
    this.ngZone.onStable
      .pipe(take(1))
      .subscribe(() => {
        const el = this.chartContainer.nativeElement;
        const { width, height } = el.getBoundingClientRect();
        console.log(`onStable: 차트 크기 ${width}x${height}로 초기화`);
        ChartLib.create(el, width, height);
      });

    // (옵션) 강제로 macrotask 하나 삽입해 보기
    setTimeout(() => {
      console.log('0ms 타이머 완료 (macrotask 예시)');
    }, 0);
  }
}

1. ngAfterViewInit 진입
2. Angular가 뷰 초기화 → Change Detection 수행
3. Promise 콜백, queueMicrotask 등 마이크로태스크가 처리된 후 → onMicrotaskEmpty 이벤트 발생 → Analytics.init()
4. setTimeout, HTTP 요청, 기타 매크로태스크가 모두 끝난 후 → onStable 이벤트 발생 → getBoundingClientRect()로 정확한 컨테이너 크기 측정 후 차트 렌더링

실행 순서

onMicrotaskEmpty: Analytics.init() 호출
0ms 타이머 완료 (macrotask 예시)
onStable: 차트 크기 800x400로 초기화

onMicrotaskEmpty: Analytics.init() 호출 – 뷰 초기화 + Change Detection 후, 마이크로태스크 큐가 비워지는 시점에 바로 발생한다.

0ms 타이머 완료 (macrotask 예시) – setTimeout(..., 0) 매크로태스크가 실행된 직후 콘솔에 찍힌다.

onStable: 차트 크기 {width}x{height}로 초기화 – 모든 macrotask(여기서는 타이머)와 남은 microtask가 끝나고 Zone이 완전 유휴가 된 뒤에 발생하며, getBoundingClientRect()로 읽어온 실제 컨테이너 크기가 찍힌다.

#4. setTimeout 의 Zone 내부 vs. 외부 차이

Zone.js는 브라우저의 macrotask API (setTimeout, setInterval, DOM 이벤트, XHR 등)를 후킹(patch) 한다.

각 타이머 호출 시 “현재 Zone” 정보를 함께 저장 → 콜백 실행 시 자동으로 그 Zone으로 복귀한다.

Angular Zone 내부 (run())

// Angular Zone 내부
setTimeout(() => {
  this.msg1 = 'Zone 내부 setTimeout 완료';
  // 이 시점에 Change Detection(CD) 자동으로 실행
}, 500);

• 동작:

  1. 타이머 예약 시 Zone 컨텍스트 기록
  2. 500ms 후 콜백 실행 → Zone.js가 자동으로 ngZone.run() 효과를 주어 CD 트리거
  3. 뷰가 즉시 갱신

• 장점: 코드가 간결

• 주의: 폴링(polling) 등 반복 타이머가 많으면 CD 부담 증가

Angular Zone 외부 (runOutsideAngular()) 타이머

this.ngZone.runOutsideAngular(() => {
  setTimeout(() => {
    this.msg2 = 'Zone 외부 setTimeout 완료';
    // 아직 CD가 일어나지 않았다!
    // 강제 복귀 필요:
    this.ngZone.run(() => {
      this.msg2 += ' → run() 복귀 후 반영';
    });
  }, 1000);
});

• 동작:
  1. runOutsideAngular()로 Zone 바깥에서 타이머 예약 → 콜백도 Zone 바깥에서 실행
  2. 첫 번째 this.msg2 변경 시 CD 미발생 → 뷰 미반영
  3. ngZone.run() 호출 → CD 트리거 → 뷰에 최종 문자열 반영
• 장점: 불필요한 CD를 피할 수 있어, 반복 타이머나 폴링 시 성능 유리
• 주의: UI 반영 시점을 명확하게 관리 필요

실시간 알림 폴링 예제

ngOnInit() {
  this.ngZone.runOutsideAngular(() => {
    this.pollSub = timer(0, 5000).subscribe(() => {
      this.notificationService.getNewCount()
        .subscribe(count => {
          if (count > this.lastCount) {
            // 변화가 있을 때만 Zone 복귀
            this.ngZone.run(() => {
              this.newCount = count;
            });
          }
          this.lastCount = count;
        });
    });
  });
}

ngOnDestroy() {
  this.pollSub.unsubscribe();
}

• 폴링 성능
  • 매 5초마다 HTTP 요청 → 콜백 내부에서만 UI 반영
  • 불필요한 CD(false positive) 제거 → 전체 앱 반응성 향상

요약 & tip

• runOutsideAngular() + 조건부 run() 조합으로,
  • 불필요한 CD 제거
  • 필요할 때만 UI 업데이트
• 사용처: 폴링, 애니메이션, 마우스/키보드 이벤트 처리 등
• 리소스 해제: 구독/타이머 해제 반드시 (unsubscribe(), clearInterval)

Redis 설치 (Windows)

Windows에서 redis 다운로드 받기 MS 공식 github에서 2016년 버전이 끝이다. 최대한 최근 버전이 필요해서 서치하던 중 링크 에서 새로운 윈도우 버전을 다운로드 받을 수 있다.

msi 로 설치 > C:Program Files/Redis 폴더에서 Redis가 설치된 것을 확인할 수 있다.

Cluster 구성

가장 기본으로 설치되는 포트 6379이 아닌 최소 구성 조건인 master node 3개 127.0.0.1:7000, 127.0.0.1:7001, 127.0.0.1:7002 로 구성한다.

각 노드 폴더 생성

# C:Program Files/Redis
$ mkdir 7000
$ mkdir 7001
$ mkdir 7002

conf file 생성

C:Program Files/Redis/redis.7000.conf, redis.7001.conf, redis.7002.conf 생성 각 포트에 맞게 아래 conf file 내용 변경 필요

port 7000
daemonize yes
logfile ./7000/log_7000.txt
cluster-enabled yes
cluster-config-file nodes.conf
cluster-node-timeout 3000
appendonly yes
dir ./7000

redis 실행

$ redis-server redis.7000.conf
$ redis-server redis.7001.conf
$ redis-server redis.7002.conf

cluster 시작

$ redis-cli --cluster create 127.0.0.1:7000 127.0.0.1:7001 127.0.0.1:7002 --cluster-replicas 1

cluster info 확인

$ redis-cli -c -p 7000
127.0.0.1:7000> cluster info
cluster_state:ok
cluster_slots_assigned:16384
cluster_slots_ok:16384
cluster_slots_pfail:0
cluster_slots_fail:0
cluster_known_nodes:3
cluster_size:3
cluster_current_epoch:3
cluster_my_epoch:1
cluster_stats_messages_ping_sent:3847
cluster_stats_messages_pong_sent:3855
cluster_stats_messages_sent:7702
cluster_stats_messages_ping_received:3853
cluster_stats_messages_pong_received:3847
cluster_stats_messages_meet_received:2
cluster_stats_messages_received:7702

추가) service 로 관리

service 등록해서 사용

등록 및 실행

$ cd Redis # redis 위치하는 폴더
$ redis-server --service-install redis.7000.conf --service-name redis7000
$ redis-server --service-install redis.7001.conf --service-name redis7001
$ redis-server --service-install redis.7002.conf --service-name redis7002

$ redis-server --service-start --service-name redis7000
[19584] 29 Apr 11:28:09.104 # Redis service successfully started.
$ redis-server --service-start --service-name redis7001
[13072] 29 Apr 11:28:13.634 # Redis service successfully started.
$ redis-server --service-start --service-name redis7002
[20996] 29 Apr 11:28:17.145 # Redis service successfully started.

종료 및 해지

$ redis-server --service-stop --service-name redis7000
$ redis-server --service-stop --service-name redis7001
$ redis-server --service-stop --service-name redis7002

$ redis-server --service-uninstall --service-name redis7000
$ redis-server --service-uninstall --service-name redis7001
$ redis-server --service-uninstall --service-name redis7002

#2. Spring

Redis 설정

⭐주의⭐ node 주소는 현재 ip 그대로 적으면 오류날 수 도 있다. (127.0.0.1:7000 으로 적어보기)

RedisConfig.java

@EnableCaching
@Configuration
@RequiredArgsConstructor
@Slf4j
public class RedisConfig implements CachingConfigurer {
    private final AppProperties appProperties;

    @Bean
    public LettuceConnectionFactory redisConnectionFactory() {
        Set<String> nodes = new HashSet<>();
        for (String node : appProperties.getRedisClusterNodes()) {
            try {
                nodes.add(node.trim());
            } catch (RuntimeException ex) {
                throw new IllegalStateException("Invalid redis sentinel property nodes {} : {}" + node, ex);
            }
        }

        RedisClusterConfiguration clusterConfiguration = new RedisClusterConfiguration(nodes);
        clusterConfiguration.setMaxRedirects(5);
        LettuceClientConfiguration clientConfiguration = LettuceClientConfiguration.builder()
                .commandTimeout(Duration.ofMinutes(1))
                .readFrom(ReadFrom.REPLICA_PREFERRED)
                .build();

        return new LettuceConnectionFactory(clusterConfiguration,clientConfiguration);
    }

    private ObjectMapper objectMapper() {
        PolymorphicTypeValidator ptv = BasicPolymorphicTypeValidator
                .builder()
                .allowIfSubType(Object.class)
                .build();

        return new ObjectMapper()
                .findAndRegisterModules()
                .enable(SerializationFeature.INDENT_OUTPUT)
                .disable(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS)
                .configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES,false)
                .registerModule(new JavaTimeModule())
                .activateDefaultTyping(ptv, ObjectMapper.DefaultTyping.NON_FINAL);
    }

    @Bean
    public RedisTemplate<String,Object> redisTemplate() {
        final RedisTemplate<String,Object> redisTemplate = new RedisTemplate<>();
        redisTemplate.setKeySerializer(new StringRedisSerializer());
        redisTemplate.setValueSerializer(new GenericJackson2JsonRedisSerializer(objectMapper()));
        redisTemplate.setHashKeySerializer(new StringRedisSerializer());
        redisTemplate.setHashValueSerializer(RedisSerializer.java());
        redisTemplate.setConnectionFactory(redisConnectionFactory());
        return redisTemplate;
    }


    @Bean
    public RedisCacheConfiguration cacheConfiguration() {
        return RedisCacheConfiguration.defaultCacheConfig()
                .disableCachingNullValues()
                .computePrefixWith(cacheName -> "prefix::" + cacheName + "::")
                .serializeKeysWith(RedisSerializationContext.SerializationPair.fromSerializer(new StringRedisSerializer()))
                .serializeValuesWith(RedisSerializationContext.SerializationPair.fromSerializer(
                        new GenericJackson2JsonRedisSerializer(objectMapper())
                ));
    }

    @Override
    @Bean
    public CacheManager cacheManager() {
        return RedisCacheManager.builder(this.redisConnectionFactory())
                .cacheDefaults(this.cacheConfiguration())
                .build();
    }

    @Override
    public CacheErrorHandler errorHandler() {
        return new CacheErrorHandler() {
            @Override
            public void handleCacheGetError(RuntimeException exception, Cache cache, Object key) {
                log.warn(exception.getMessage(), exception);
            }

            @Override
            public void handleCachePutError(RuntimeException exception, Cache cache, Object key, Object value) {
                log.warn(exception.getMessage(), exception);
            }

            @Override
            public void handleCacheEvictError(RuntimeException exception, Cache cache, Object key) {
                log.warn(exception.getMessage(), exception);
            }

            @Override
            public void handleCacheClearError(RuntimeException exception, Cache cache) {
                log.warn(exception.getMessage(), exception);
            }
        };
    }
}

Service 구현

@Service
@Slf4j
@RequiredArgsConstructor
public class TestService {

    @Cacheable(value="CACHE_NAME", key="#testType")
    public String getTestType(TestType testType) {
        return testMapper.selectTestType(testType); // testTypeResult
    }
}

redis 저장 확인

$ redis-cli -c -p 7000
127.0.0.1:7000> get prefix::CACHE_NAME::testType # cacheConfiguration perfix 확인
testTypeResult #저장된값

참고

• NoSQL:레디스 zip버전 윈도우 로컬서버
• [Redis] redis cluster 간단하게 구성해보기
• [Redis] Spring 3.x Redis 적용기(AOP)
• 레디스 서버 시작하고 사용하기

크로스 사이트 스크립팅(XSS)은 가장 흔한 웹 앱 취약점 중 하나로 공격자가 웹사이트에 악성 클라이언트 사이드 코드를 삽입할 수 있도록 하는 보안 취약점 공격이다.

v-html

HTML 코드를 사이트에 렌더링 하기 위해서는 어떻게 해야할까? Vue.js 의 경우, v-text나 {{}}는 있는 그대로 문자열을 렌더링하기 때문에 HTML 코드 형태로 렌더링하기 위해서는 v-html을 사용해야 한다.

그러나 v-html은 innerHTML 기반이기 때문에 XSS 위협이 있다.

vue.js 공식 문서에도 v-html을 사용하기 위해서는 신뢰할 수 있는 콘텐츠에서만 사용하라는 안내문구가 있으며,

eslint를 적용한 IntelliJ에서도 경고를 보여주는걸 확인할 수 있다.

물론 innerHTML 기반이기 때문에 <script></script> 와 같은 누구나 알 수 있는 코드는 삭제되지만 이외의 <img srcset=",,,,,x" onerror="alert(1)"> 와 같은 코드는 바로 실행되는것을 알 수 있다.

해결

html을 보여주지 않을 수 없으니 그렇다면 어떻게 적용해야할까?

해결 방법을 찾아보니 v-dompurify-html, santize-html 와 같은 라이브러리로 쉽게 해결할 수 있었다. 그 중 2024년 1월 기준 가장 많이 사용하고 있는 dompurify 를 적용한 v-dompurify를 사용해서 v-html 필터링을 적용했다.

적용 방법

1. 설치

   // vue 2 이하
   npm install vue-dompurify-html@vue-legacy
   

// vue 3 이상 npm install vue-dompurify-html

2. 적용
```ts
// main.ts
import Vue from 'vue';
import App from './App.vue'
import VueDOMPurifyHTML from 'vue-dompurify-html';

Vue.use(VueDOMPurifyHTML);

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 테스트 HTML5 Security Cheatsheet에 있는 테스트가 다 통과하는지 확인한다.

참고

• [vue] v-html은 사용하고 싶지만, 크로스 사이트 스크립팅은 피하고 싶어

예전에는 프론트엔드가 복잡하지 않아 테스트를 잘 진행하지 않았다. 그러나 프론트엔드의 규모가 커지고, 백엔드의 다양한 기능들이 프론트엔드로 옮겨오면서 관리할 필요성이 생기기 시작했다. 프론트엔드 관리와, 코드 퀄리티가 중요해지면서 프론트엔드 테스트도 필요하게 되었다.

이러한 테스트는 코드가 의도한대로 동작하는 것을 보장해준다. 즉, 개발자가 스스로 테스트하는 것이 아닌 자동화시켜 놓치는 부분 없이 의도한 기능대로 동작한다는 것을 보장한다.

유지보수 시 코드를 수정하다보면 사이드이팩트를 알 수 없다. 때문에 개발자들은 점점 기존에 동작하고 있는 코드를 수정하기 꺼려하고, 기존의 코드를 리팩토링해서 사용하기 보다는 중복된 기능을 가진 코드를 생성하는 것을 선호한다. 프로젝트에는 중복되는 코드와 나쁜 코드가 점점 쌓이고 결국 프로젝트는 손쓸 수 없는 상태가 된다.

프로젝트가 더 복잡해지기 전에 테스트를 도입하자!

테스트 종류

프론트엔드의 테스트 종류로는 유닛테스트, 통합테스트, E2E 테스트가 있다.

간단하게 정리하자면 아래와 같다.

• Unit test (단위테스트): 함수 하나, 컴포넌트 하나와 같이 코드의 작은 부분을 테스트
• Integration test (통합테스트): 서로 다른 시스템들의 상호작용이 잘 이뤄지는지 테스트
• E2E test (종단 간 테스트): 사용자와 어플리케이션의 상호작용이 잘 이뤄지는지 테스트

예를 들자면 한 게임에서 유저가 몬스터를 잡는다는 상황을 가정한다.

• 유저가 몬스터에게 달려가는 Move 함수

• 유저가 몬스터를 때리는 Attack 함수
• 몬스터를 잡고 난 후 전리품을 수집하는 Gather 함수

유닛테스트 는 각 함수에 이런저런 입력 값을 줘봐서 잘 되는지 테스트하는 것이고, 통합테스트 는 유저가 몬스터를 잡고 전리품을 수집할 때 실제로 DB에 잘 저장됬는지 테스트하는 것, e2e 테스트 는 실제 유저가 되어 이 모든 일련의 과정이 정상적으로 돌아가는지 테스트해 보는 것이다.

그래서 어떤테스트를 해야하는가? 🤔

이 테스트를 모두 수행하는지에 대한 대답은 그렇다. 이다. 테스트를 관리하는 데 사용되는 수많은 이론 중 하나인 테스트 피라미드 그림을 참고해보면 단계별 테스트의 비중과 비용을 알 수 있다. (실제로는 모래시계형처럼 통합테스트가 제일 적은 경우도 발생한다.)

테스트 도입

회사에서 프로젝트 성격에 맞춰 테스트 도입해보기로 결정했고 FE 프레임워크가 적용되지 않은 레거시 프로젝트와 프레임워크가 적용된 최근 프로젝트에 테스트 도입에 대해 포스트해보려고 한다.

참고

• 프론트엔드 테스트 해야할까? - (1)
• [TIL] Unit test, Integration test, e2e test 그리고 TDD
• E2E 테스트 도입 경험기

Reporter 설치

library 설치

npm install -D mochawesome
npm install -D cypress-mochawesome-reporter

cypress.config.js

report 관련 설정

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  reporter: 'cypress-mochawesome-reporter',
  video: false,
  reporterOptions: {
    charts: true,
    reportPageTitle: 'Cypress Inline Reporter',
    embeddedScreenshots: true,
    inlineAssets: true, //Adds the asserts inline
  },
  e2e: {
    experimentalStudio: true,
    setupNodeEvents(on, config) {
      require('cypress-mochawesome-reporter/plugin')(on);
    },
  },
});

실행

npx cypress run --e2e

Report 결과

terminal

reports 폴더

video 가 true인 경우에는 video 생성 (false로 하는 경우 기존 video가 사라지니 주의)

index.html 내부 상세하게 기재

Unit Test?

단위테스트란 최소 단위의 함수, 컴포넌트 등을 테스트한다.

Unit Test vs. E2E Test

Unit Test

• 주어진 함수, 클래스 또는 컴포저블에 제공된 입력 정보가 의도하는 출력 또는 side-effect를 생성하는지 확인
• 테스트가 빠르게 실행됨
• 정확한 문제 식별 가능
• 그러나, 단위 테스트를 통과했음에도 불구하고 전체 어플리케이션이 여전히 작동하지 않을 수 있음
• Tool: Jest

E2E Test

• 여러 페이지에 걸쳐 있는 기능을 확인하고, 프로덕션으로 빌드되는 Vue 앱처럼 실제 네트워크 요청
• 한 번에 많은 항목 테스트 가능
• 실행 속도가 느림 (최대 1시간 이상 걸릴 수 있음)
• 실패 원인을 정확히 찾아낼 수 없음
• 외부 서비스나 API에 의존하는 E2E 테스트는 어플리케이션 자체에는 문제가 없지만 서비스가 중단되어 실패할 수 있음
• Tool: Cypress, Nightwatch

Unit Test Tools

javascript 테스트 중 인기 있는 라이브러리는 Jest와 Jasmine이다.

Jest 사용

library 설치

npm install -D jest
npm install -D jest-environment-jsdom
npm install -D eslint-plugin-jest

package.json

script: {
  'test': 'jest'
}

###

😢 오류 해결

import 오류

Jest encountered an unexpected token 오류 발생

import 자체를 읽지 못하는 이슈로, babel-jest로 javascript code transformation 필요. babel-jest 설치 및 설정이 필요하다.

해결방법

1. babel-jest 설치

npm install -D babel-jest

2. jest.config.js 옵션 추가

   const config = {
   transform: {
    '\\.js$': '<rootDir>/node_modules/babel-jest',
   },
   }

module import 오류

Cannot find module '@/common' from '__test__/common.test.js' 오류 발생

import { isNullString } from '@/common'; 라인에서 발생하는 오류로, @ alias 선언이 안돼있어 module import 시 파일 경로를 찾지 못해 발생하는 오류

해결방법

1. jest.config.js 옵션 추가

   const config = {
   moduleNameMapper: {
    '\\.(css|less|scss)$': '<rootDir>/<파일 경로>/styleMock.js',
   }
   }

Library 내부 css 오류

SyntaxError: Unexpected token . 오류 발생

import './stype.css'; 라인에서 발생하는 오류로, 사용하고 있는 library 내부에서 css를 import해서 사용하고 있을 때 발생하는 오류

해결방법

1. styleMock.js 파일 생성

export default {};

2. jest.config.js 옵션 추가

const config = {
  moduleNameMapper: {
    '\\.(css|less|scss)$': '<rootDir>/<파일 경로>/styleMock.js',
  }
}

jquery-ui jQuery 선언 오류

jquery-ui library 사용중 ReferenceError: jQuery is not defined 오류 발생

jquery-ui node_modules/dist/jquery-ui.js 내부 jQuery 선언이 돼있지 않아 발생하는 오류로, jest 실행 전 환경설정 파일 읽어들일 수 있도록 수정

해결방법

1. test-env.js 파일 생성

import $ from 'jquery';
global.$ = global.jQuery = $;

2. jest.config.js 옵션 추가

const config = {
  setupFiles: ['<rootDir>/<파일 경로>/test-env.js'],
}

E2E는 End to End 의 약자로 어플리케이션의 흐름을 처음부터 끝까지 테스트하는 것을 의미한다. API 연동도 테스트 항목에 포함되므로 일반적으로 목(Mock) 서버를 사용하지 않으며 최대한 실제 시스템을 사용하는 사용자 관점에서 시뮬레이션 한다.

Unit Test vs. E2E Test

Unit Test

• 주어진 함수, 클래스 또는 컴포저블에 제공된 입력 정보가 의도하는 출력 또는 side-effect를 생성하는지 확인
• 테스트가 빠르게 실행됨
• 정확한 문제 식별 가능
• 그러나, 단위 테스트를 통과했음에도 불구하고 전체 어플리케이션이 여전히 작동하지 않을 수 있음
• Tool: Jest

E2E Test

• 여러 페이지에 걸쳐 있는 기능을 확인하고, 프로덕션으로 빌드되는 Vue 앱처럼 실제 네트워크 요청
• 한 번에 많은 항목 테스트 가능
• 실행 속도가 느림 (최대 1시간 이상 걸릴 수 있음)
• 실패 원인을 정확히 찾아낼 수 없음
• 외부 서비스나 API에 의존하는 E2E 테스트는 어플리케이션 자체에는 문제가 없지만 서비스가 중단되어 실패할 수 있음
• Tool: Cypress, Nightwatch

참고 Vue > 테스트에서는 왜 테스트를 해야하고, 어떤 테스트 유형이 있는지 자세히 작성되어 있다.

E2E Test Tools

테스트를 위한 툴로는 Cypress, Nightwatch, Playwright, Puppeteer, Selenium 등이 있다. npm trends에 따르면 2023년 10월 기준으로 1년간 cypress가 가장 많이 다운로드 됐다.

일반적으로 Nightwatch와 Cypress를 가장 많이 사용한다.

공식 Vue 팀이 추천하는 E2E Test뿐만 아니라 컴포넌트 테스트도 지원하는 Cypress 를 적용해보자. (Chronium 브라우저와 Firefox만 지원)

Cypress 적용

npm install -D cypress
npm install -D eslint-plugin-cypress

.eslintrc.js

extends: ['plugin:cypress/recommended']

package.json

"scripts": {
  "test": "cypress open",
},

cypress 실행 시 아래와 같은 화면에서 continue 후 chrome 으로 실행

npm test

cypress 관련 폴더 생성 및 cypress UI

Cypress Studio

cypress를 사용하며 테스트 코드를 모두 작성할 수 있지만 cypress studio를 이용해 손쉽게 테스트 코드를 작성할 수 있다.

Cypress Studio 활성화

1. cypress open > settings > Project settings Project settings에서 확인해보면 experimentalStudio 라는 옵션이 있다. 현재는 disabled 상태로 활성화시켜보자.

2. cypress.config.js 수정

experimentalStudio: true 를 cypress.config.js에 추가하면 cypress 창이 새로 열리게된다. 이후 Project settings를 보면 활성화 상태인 것을 확인할 수 있다.

Cypress Studio 사용

1. example.studio.cy.js 파일 생성 후 수정

2. 원하는 테스트 동작 입력

3. 코드 확인

코드가 알아서 생성된다.

with CI/CD Tools

Cypress를 사용 시 CI/CD Tools 에서 자동으로 테스트할 수 있다. 현재 회사에서 사용하고 있는 Teamcity에서 script 내부에 cypress test 실행하는 코드를 작성한 다음 build 하게 되면 자동으로 테스트 가능하다. 이 때, cypress version이 특정돼있는 docker 선택해야한다.

npm install cypress
npm run test

논의 사항

• mock 서버를 만들기보다는 실 서버에서 테스트해야한다. => test 서버는 어디로?
• 전체를 테스트해야하므로 범위를 지정해야한다

참고

• E2E 테스트 도입 경험기
• FE개발자의 성장 스토리 12 : Angular E2E 테스팅 경험기
• Unit vs E2E Testing for Vue.js
• How to Set up And Run Cypress Test Cases in CI/CD TeamCity?
• E2E 테스트와 나이트왓치
• [React] Cypress로 E2E테스트하기

=> terminal 환경을 git bash로 바꾸자!

Settings 변경

1. Settings > terminal 검색
2. Tools > Terminal
3. Application Settings > Shell path
4. "C:\Program Files\Git\bin\sh.exe" -login -i 입력
5. IntelliJ restart

Javascript에서 객체의 깊은 복사를 위해 여러 방식을 사용했다. Javascript는 이제 structuredClone() 이라는 깊은 복사를 위한 전역 메소드를 지원한다.

전역 structuredClone() 메소드는 깊은 복사를 생성한다.

structuredClone()의 기능을 설명하기 전 얕은 복사와 깊은 복사에 대해 간단하게 설명한다.

얕은 복사

Javascript에서 값을 복사하는 경우 거의 항상 얕은(shallow) 복사이다. 중첩된 객체의 경우 복사된 객체를 변경하면 원본에도 영향을 주게 된다.

Array.prototype.slice

Array.prototype.slice 는 얕은 복사를 수행하기 때문에, 모든 값을 독립적으로 복사할 수 없다.

const arr = [1, 2, [3, 4]];
const copied = arr.slice();

isSameObject(arr, copied); // true

copied[2].push(5);
isSameObject(arr, copied); // true

Spread Operator

펼침 연산자를 통해서도 값의 복사를 수행할 수 있다. 아래 예시와 같이 객체가 이터러블임이 확인이되면 for-loop 과 같은 단순한 반복문을 통해 모든 요소를 하나씩 옮겨 담는다.

const b = [1, 2, 3];
const a = [ ...b ];

// 위를 실행했을 때, 내부적으로 일어나는 일
var a = [];
for (var i = 0; i < b.length; i += 1) {
  a.push(b[i]);
}

이러한 이유로 펼침 연산자 역시 중첩 구조를 복사하지 못한다.

const arr = [1, 2, [3, 4]];
const copied = [ ...arr ];

isSameObject(arr, copied); // true

copied[2].push(5);
isSameObject(arr, copied); // true

Object.assign

Object.assign의 경우에도 마찬가지로 중첩 구조를 복사하지 못한다.

const arr = [1, 2, [3, 4]];
const copied = Object.assign([], arr);

isSameObject(arr, copied); // true

copied[2].push(5);
isSameObject(arr, copied); // true

깊은 복사

깊은(deep) 복사는 얕은 복사의 반댓말로, 복사된 객체를 변경해도 원본에 영향을 주지 않는다. 깊은 복사도 객체의 속성을 하나씩 복사하지만, 다른 객체에 대한 참조를 찾으면 재귀적으로 해당 객체의 복사본도 생성한다.

JSON.parse(JSON.stringify)

JSON.stringify은 입력 값으로 넘어온 데이터를 문자로 변형을 시켜주는 메소드이고, JSON.parse 는 JSON.stringify로 변형된 문자를 다시 원래 객체로 되돌려주는 역할을 한다.

const arr = [1, 2, [3, 4]];
const copied = JSON.parse(JSON.stringify(arr));

isSameObject(arr, copied); // true

copied[2].push(5);
isSameObject(arr, copied); // false

이는 객체 순환을 통해 값을 옮겨담는 과정이 아닌, 문자열로 변경 후 그것을 다시 해석해 원본 객체로 변경하는 과정에서 자바스크립트의 문자열(string) 이라고 불리는 데이터 타입이 immutable primitive type, 즉 불변성의 형질을 띠는 원시 타입이기 때문이다.

이 패턴은 몇가지 단점이 있는데 다음과 같다.

1. 재귀 데이터 구조: 재귀적인 데이터 구조로 JSON.stringify()를 사용하면 에러가 발생한다.
2. 내장 함수 유형: Map, Set, Date, RegExp, ArrayBuffer를 포함한 값이 있을 경우 에러가 발생한다.
3. 함수: 함수를 폐기한다.

기능 및 제한 사항

structuredClone()은 구조적 복제는 순환되는 데이터 구조를 처리할 수 있고, 내장 데이터 타입을 지원할 수 있으며 일반적으로 더 강력하고 더 빠르다.

기능

structuredClone()은 깊은 복사를 하는 데 사용될 수 있으며 아래와 같이 순환 참조도 지원한다.

// 값과 스스로를 순환 참조하는 객체 생성
const original = { name: "MDN" };
original.itself = original;

// 복제
const clone = structuredClone(original);

console.assert(clone !== original); // 동일하지 않은 객체 (같지 않은 동일성)
console.assert(clone.name === "MDN"); // 같은 값을 가집니다.
console.assert(clone.itself === clone); // 순환 참조가 보존됩니다.

structuredClone()를 사용해 객체를 복제하는 경우, 각 객체에 대한 변경은 다른 객체에 영향을 주지 않는다.

const mushrooms1 = {
  amanita: ["muscaria", "virosa"],
};

const mushrooms2 = structuredClone(mushrooms1);

mushrooms2.amanita.push("pantherina");
mushrooms1.amanita.pop();

console.log(mushrooms2.amanita); // ["muscaria", "virosa", "pantherina"]
console.log(mushrooms1.amanita); // ["muscaria"]

제한 사항

1. 프로토타입: 객체의 프로토타입 체인을 폐기한다.
2. 함수: 객체에 함수가 있는 경우 폐기된다.
3. 복제 불가: Error와 DOM 노드는 복제가 불가능하다.

성능

성능 테스트 결과에 따르면 structuredClone()이 JSON.parse(JSON.stringify) 보다 빠르다는것을 알 수 있다.

브라우저 호환성

Chrome, Edge 등 브라우저에서 모두 사용 가능하다.

결론

Javascript에서 깊은 복사본을 만들어야 하는 경우 다른 라이브러리를 사용하지 않고 자체적으로 제공하는 structuredClone()를 사용하면 될 것 같다.

참고

• structuredClone() global function
• StructuredClone에 대해 꼭 알아두세요! JavaScript에서 깊은 복사가 가능해져요.
• WATCHA - 깊은 복사 얕은 복사

TypeScript란 Microsoft에서 개발 및 유지 관리 하는 오픈소스 프로그래밍 언어이다.

TypeScript는 ES5의 Superset이므로 기존의 자바스크립트(ES5) 문법을 그대로 사용할 수 있다. 쉽게 말해 JavaScript에 타입을 부여한 언어이다.

JavaScript vs. TypeScript

• JavaScript
  • 동적 타이핑 (Dynamic Typing)
  • 변수나 반환값의 타입을 사전에 지정하지 않는다.
  • 타입 결정 이후에도 같은 변수에 여러 타입의 값을 교차하여 할당 가능하다.
  • 런타임 시 에러를 발생시킨다.
• TypeScript
  • 정적 타이핑 (Static Typing)
  • 타입을 명시적으로 선언한다.
  • 타입이 선언된 이후에는 변경할 수 없다.
  • 컴파일 시 에러를 발생시킨다.
  • JavaScript와 달리 브라우저에서 실행하려면 compile해야한다.

🤔 TypeScript를 쓰는 이유?

크게 에러의 사전 방지 및 코드 가이드 및 자동완성을 통한 개발 생산성 향상을 위해 사용한다.

에러의 사전 방지

// js
function sum(a, b) {
    return a + b;
}

// ts
function sum(a: number, b:number) {
    return a + b;    
}

sum(10, 20);    // ex1
sum('10', '20');    // ex2

sum 함수를 이용하여 ex1과 같이 숫자 10과 20을 더하게 되면 js, ts 모두 20을 얻을 수 있다.

ex2와 같이 숫자 대신 문자열을 더하게 될 경우 js는 1020 이라는 결과를 반환한다. 그러나, ts의 경우 컴파일 단계에서 오류를 발생시켜 의도하지 않은 코드의 동작을 예방할 수 있다.

코드 자동 완성과 가이드

TypeScript를 사용하게되면 Visual Studio Code 와 같은 개발 툴의 기능을 최대로 활용할 수 있다.

JavaScript로 코드를 작성하게 되면 작성 시점에 변수의 타입을 모르기 때문에 API를 사용할 수 없다. 그러나 TypeScript로 코드를 작성하게 되면 타입이 지정되어 있기 때문에 해당 타입에 대한 API를 미리 보기로 볼 수 있고 빠르고 정확하게 작성할 수 있다.

📑 기본 타입

JavaScript에서 추가된 데이터 타입이 있다.

• tuple
• enum
• any
• void
• never

Boolean

let isTrue: boolean = false;

Number

let num: number = 6;

String

let name: string = "typescript";

Array

let arr: number[] = [1, 2, 3];    // []
let arr: Array<number> = [1, 2, 3];    // 제네릭 배열 타입

Tuple

요소의 타입과 개수가 고정된 배열을 표현 가능하다.

let arr: [string, number];
arr = ["hello", 1];

console.log(arr[0].substring(1));    // 정해진 인덱스에 위치한 요소에 접근 가능

Enum

특정 값이 어떤 Color enum멤버와 매칭되는지를 알고 싶을 때, 이 값을 이용하면 일치하는 enum 멤버의 이름을 알아낼 수 있다.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

Any

알지 못하는 타입을 표현해야 할 경우 타입 검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과시킬 때 사용한다.

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // success

또한, any 타입은 타입의 일부만 알고 전체는 알지 못할 때 사용한다. 예를 들어, 여러 다른 타입이 섞인 배열을 다룰 수 있다.

let list: any[] = [1, true, "free"];

list[1] = 100;

Void

변수에는 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입이다. 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰인다.

let unuseful: void = undefined;
function warnUser(): void {
    console.log("This is my warning message");
}

Null and Undefined

// 이 밖에 이 변수들에 할당할 수 있는 값이 없다!
let u: undefined = undefined;
let n: null = null;

기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입이다.

하지만, --strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능하다.

Never

함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입이다.

// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
  while (true) {

  }
}

Object

object는 원시 타입(Primitive Type)이 아닌 타입을 나타낸다.

변수 선언 시 let을 사용하는 이유

값이 변하지 않는 변수는 const를, 값이 변하는 변수는 let을 사용하여 선언한다. var는 절대로 사용하지 않도록 한다.

• let: 중복 선언 불가능 > 블럭 내부의 변수는 외부에서 사용 불가능
• var: 중복 선언 가능 > 블럭 내부의 변수를 외부에서 사용 가능

var foo = 123;
console.log(foo); //123

{
    var foo=456;  // 중복선언이 가능, 위에 선언된 애를 블럭내에서도 참조가 되버림
}
console.log(foo); //456 , 블럭밖에서도 참조가 됩니다. 

let foo2_ = 789;
console.log(foo2_); //789
{
    let foo2_:number = 456; 
    // 중복선언이 불가능. 같은 변수를 두번 선언 할 수 없음. 
    // /위에걸 쓰는게 아니고 블럭내의 변수하나를 새로 만드는것
    let bar:number = 456;
    console.log(foo2_);
    console.log(bar); //456
}
foo2_ = 567;
console.log(foo2_); //789

⚙ TypeScript 개발 환경 설정

1. TypeScript 컴파일러 설치

$ npm install -g typescript

2. ts 파일 작성 (test.ts)

let helloWorld = "Hello World!!";
const user = {
    name: "TypeScript",
    id: 0,
};

3. ts 파일 컴파일

$ tsc test.ts

4. JavaScript 코드로 변환 (test.js)

var helloWorld = "Hello World!!";
var user = {
    name: "TypeScript",
    id: 0,
};

• tsconfig.json에서 컴파일 옵션 수정이 가능하다.

📚 참고

• 타입스크립트 - 번역본
• 이제는 타입스크립트를 배워야합니다. (to 자바스크립트 개발자)
• Typescript 와 함께 요람에서 무덤까지 1부
• TypeScript의 소개와 개발 환경 구축
• Typescript를 이용한 Node.js API 서버 프로그래밍
• 8장. 리액트 프로젝트에서 타입스크립트 사용하기
• 리액트 + 타입스크립트
• 뷰에 타입스크립트 적용하기
• TS 환경설정
• 타입스크립트 핸드북
• 컴파일옵션 정리

지금은 이런 프론트엔드 프레임워크가 익숙하지만 예전부터 지금까지 어떤식으로 프론트엔드를 개발해왔는지 간략하게 적어본다.

초기 프론트엔드

HTML, CSS

HTML 파일을 만들어서 수정하면 되는 아주 기본적인 방법이다. <style>, <link> 태그 사용을 통해 CSS를 적용한다.

JSP, jQuery

JSP (Java Server Pages)는 Server Side 스크립트 언어로 페이지에 동적 데이터를 반영할 수 있지만, 새로 필요한 정보가 있는 경우 새로고침이나 페이지 이동을 통해 서버에서 페이지를 다시 읽어야하는 불편함이 있다.

ajax 가 나오면서 페이지 이동 없이 서버에 요청하고 받을 수 있게 되었고 변경된 데이터를 jQuery를 이용해 DOM을 간편하게 변경할 수 있다.

Angular JS

Angular JS는 구글에서 등장한 프레임워크이다.

View와 Model간 양방향 바인딩을 통해 jQuery로 DOM 조작을 하는 불편함에서 벗어날 수 있었다. 데이터를 $scope에 저장한 다음 template에 Angular 문법을 사용하면 화면을 자동으로 갱신해준다.

그러나 주기적으로 $scope의 데이터의 변경을 확인하는 Digest Loop/Cycle 방식으로 프로젝트의 규모가 커질수록 굉장히 느려지고 데이터의 흐름이 모호해지기 시작했다.

이러한 문제로 Angular JS는 2.0으로 버전을 올리면서 Angular로 구분되었고 기존 1.0과 호환이 되지 않는다.

Angular JS 이후로 프론트앤드에서 고려해야하는 사항

1. 새로운 데이터 변경 감지 방법 필요
2. 데이터 변경이 감지되었을 때 뷰를 빠르고 효율적으로 그리기
3. 1. 2.가 효율적이기 위해 웹페이지의 구조를 더 작은 단위로 만들기

React

React는 모든 화면을 컴포넌트라 불리는 단위로 쪼개고, 이 컴포넌트를 재사용해서 만드는 Component-based Development를 적용했다. (3. 웹페이지 구조를 더 작은 단위로 만들기)

그렇다면 컴포넌트간 데이터 흐름은 어떻게 될까? React는 부모 컴포넌트에서 자식 컴포넌트로 prop을 통해 데이터를 전달하는 것만 가능하고, 컴포넌트 내부에서는 스스로 변경하는 state를 통해 데이터 변화를 감지한다. prop이 변경되면 prop을 전달한 부모 컴포넌트가 자식 컴포넌트에게 render를 알려주고 state가 변경되면 setState 메소드가 스스로 render를 실행한다. (1. 새로운 데이터 변경 감지 방법이 필요)

prop, state가 변경될때마다 뷰를 통으로 그리는 경우 성능은 어떻게 될까? 이를 해결하기 위해 Virtual DOM이란 개념이 나온다. Virtual DOM이란 DOM을 복사한 데이터 구조로, 실제로 DOM을 조작하지 않고 Virtual DOM을 그린 다음 현재 Virtual DOM과 메모리상의 데이터를 비교해서 실제 변경사항만 DOM에 반영한다. (2. 데이터 변경이 감지되었을 때 뷰를 빠르고 효율적으로 그리기)

// JSX

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode)

// 일반 JavaScript로 컴파일하면?
class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

단방향 바인딩 vs. 양방향 바인딩 ? 링크 참고

Vue

Angular JS에서 편리하게 사용하던 템플릿을 React에서는 바로 뷰를 그리는 JSX를 채택해 러닝커브가 높았다면 Vue는 (1. 새로운 데이터 변경 감지 방법이 필요) (2. 데이터 변경이 감지되었을 때 뷰를 빠르고 효율적으로 그리기) 에 템플릿을 추가했다.

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<style scoped>
button {
  font-weight: bold;
}
</style>

Svelte

Svelte 튜토리얼에서 보게되면 .svelte 파일에 svelte 문법에 따라 코드를 작성하면, svelte가 컴파일해 JS와 CSS output을 만들어준다.

jQuery처럼 개발자가 데이터 변경을 감시하고 갱신의 효율을 따지지 않는 것처럼 svelte도 svelte 컴파일러가 대신 DOM을 조작하는 코드를 작업해준다.

🤔 그래서 Why Vue?

React를 사용하지 않는 이유는 뭔가요? 🙄

현재 가장 많이 사용하고 있는 React를 사용하지 않는 이유는 뭔가요? 에 대한 대답은 Vue의 러닝커브가 낮아서이다. React는 프레임워크라기 보다는 '라이브러리' 라고 부를정도로 다양한 라이브러리가 있고, 그만큼 자유도가 높다. 자유도가 높다는 말은 좋은 말이지만 한편으로 익숙하지 않은 사람이 시작하기에는 러닝 커브가 높다. Vue는 template화 돼있어서 처음 접하는 사람도 익숙하게 사용할 수 있는 장점이 있다.

어떤 프레임워크를 사용하는지에 대한 답은 없지만 현재 진행하고 있는 프로젝트에 맞게 프레임워크를 선택해서 사용하면 된다.

참고

• 짧게 써보는 웹 프론트엔드의 역사
• Angular, React, Vue는 어떻게 등장하게 되었을까?

Intellij 에 분명히 javascript debugger가 있는데 어떻게 사용하는지 제대로 알지 못하고 1. debugger; 2. console.log() 3. chrome devtools > sources 를 사용중이었다. Intellj로 어떻게 디버깅하는지 열심히 구글링을 해도 몰랐는데 드디어 해결 완료.

Chrome과 Intellij를 이용해 디버깅하는 방법은 다음과 같다. (Intellij 2021.1.3 기준)

webpack.config.js

개발 환경에서 디버깅 진행

module.export = {
  mode: 'development',
  devtool: 'inline-source-map',
}

Intellij debugger

Plugin 설치

아래 2가지 plugin이 설치돼있어야 한다.

• JavaScript and TypeScript
• JavaScript Debugger

debugger setting

1. Run > Edit Configurations...

2. + JavaScript Debug

3. 기본 설정 세팅 Name, URL, Browser를 다음과 같이 설정한다.

4. 🌟 Chrome 세팅 🌟 가장 중요한 Chrome 세팅. Chrome에서 자체적으로 막고있어서 제대로 안됐었다. Chrome 세팅에 --remote-allow-origins=* 를 추가한다.

5. (선택) javascript debug 실행 전 서버 실행 debug 실행 전 webpack 실행을 위해 Before launch에 npm 관련 설정을 추가한다. package.json을 선택하면 자동으로 scripts가 입력돼 선택 가능하다.

run debug 🐞 ~!

1. 설정한 javascript debug 선택 후 디버그 모드로 실행한다.

Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있다.

프록시 객체를 사용하면 속성 가져오기, 설정 및 정의와 같은 기본 객체 작업을 재정의 할 수 있다. 프록시 객체는 일반적으로 속성 액세스를 기록하고, 입력의 유효성을 검사하고, 형식을 지정하거나, 삭제하는 데 사용된다.

즉, 프록시 객체는 대상 객체를 트랩을 통해 기본 명령을 재정의해서 사용한다.

매개변수

• target: 프록시할 원본 객체
• handler: 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의하는 객체

사용 방법

대상 객체인 target 객체를 만들고, new Proxy() 로 프록시 객체를 생성한다.

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler1 = {};

const proxy1 = new Proxy(target, handler1);

프록시 객체인 proxy1 의 모양은 다음과 같다.

Proxy {}
  > [[Handler]]: Object
  > [[Target]]: Object
  > [[IsRevoked]]: false

핸들러에서 아무런 작업을 하지 않기 때문에 원래 대상처럼 작동한다.

console.log(proxy1.message1); // hello
console.log(proxy1.message2); // everyone

프록시를 커스텀하기 위해서 handler를 정의한다. (트랩 함수 추가)

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler2 = {
  get(target, prop, receiver) {
    return "world";
  }
};

const proxy2 = new Proxy(target, handler2);

handler에서 get하는 동시에 world를 return하게 했으므로 기존 값이 아닌 world가 출력된다.

console.log(proxy2.message1); // world
console.log(proxy2.message2); // world

Reflect 를 이용해 다음과 같이 재정의할 수 있다.

const target = {
  message1: "hello",
  message2: "everyone"
};

const handler3 = {
  get(target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
    return Reflect.get(...arguments); // target[propertyKey] 값을 반환, target[prop] 값이 undefined가 아닌 TypeError 발생
  },
};

const proxy3 = new Proxy(target, handler3);

console.log(proxy3.message1); // hello
console.log(proxy3.message2); // world

Reflect 🤔 ? 하나의 네임스페이스에 모인 API로 Object 보다 더 깔끔하게 구현 가능하다. ESLint Rule Preset 사용 시 no-prototype-builtins 규칙으로 인해 obj.hasOwnProperty 사용을 못하고 Object.prototype.hasOwnProperty.call 를 사용해야하는데, Relect를 사용한다면 깔끔하게 코드 작성 가능하다. Object.prototype.hasOwnProperty.call(obj, 'prop'); -> Reflect.has(obj, 'prop');

Proxy in Vue

Composition API - 반응형 데이터 에서 'reactive는 프록시 객체를 반환한다.' 에서의 프록시 객체가 이때까지 살펴봤던 프록시 객체이다.

@vue > reactivity.cjs.js 파일에서 reactive와 ref 코드를 살펴보자.

reactive

createReactiveObject 에서 살펴볼 수 있듯이 new Proxy 로 프록시 객체를 반환하는 것을 볼 수 있다.

function reactive(target) {
    // if trying to observe a readonly proxy, return the readonly version.
    if (isReadonly(target)) {
        return target;
    }
    return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
}

function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {
    if (!shared.isObject(target)) {
        {
            console.warn(`value cannot be made reactive: ${String(target)}`);
        }
        return target;
    }
    // target is already a Proxy, return it.
    // exception: calling readonly() on a reactive object
    if (target["__v_raw" /* ReactiveFlags.RAW */] &&
        !(isReadonly && target["__v_isReactive" /* ReactiveFlags.IS_REACTIVE */])) {
        return target;
    }
    // target already has corresponding Proxy
    const existingProxy = proxyMap.get(target);
    if (existingProxy) {
        return existingProxy;
    }
    // only specific value types can be observed.
    const targetType = getTargetType(target);
    if (targetType === 0 /* TargetType.INVALID */) {
        return target;
    }
    const proxy = new Proxy(target, targetType === 2 /* TargetType.COLLECTION */ ? collectionHandlers : baseHandlers);
    proxyMap.set(target, proxy);
    return proxy;
}

간단히 pseudo-code 로 나타내면 다음과 같다.

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key)
    }
  })
}

ref

reactive 와 다르게 프록시 객체를 반환하지 않고 getter/setter 를 사용하는 것을 볼 수 있다.

function ref(value) {
    return createRef(value, false);
}

function createRef(rawValue, shallow) {
    if (isRef(rawValue)) {
        return rawValue;
    }
    return new RefImpl(rawValue, shallow);
}

class RefImpl {
    constructor(value, __v_isShallow) {
        this.__v_isShallow = __v_isShallow;
        this.dep = undefined;
        this.__v_isRef = true;
        this._rawValue = __v_isShallow ? value : toRaw(value);
        this._value = __v_isShallow ? value : toReactive(value);
    }
    get value() {
        trackRefValue(this);
        return this._value;
    }
    set value(newVal) {
        const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
        newVal = useDirectValue ? newVal : toRaw(newVal);
        if (shared.hasChanged(newVal, this._rawValue)) {
            this._rawValue = newVal;
            this._value = useDirectValue ? newVal : toReactive(newVal);
            triggerRefValue(this, newVal);
        }
    }
}

간단히 pseudo-code 로 나타내면 다음과 같다.

function ref(value) {
  const refObject = {
    get value() {
      track(refObject, 'value')
      return value
    },
    set value(newValue) {
      value = newValue
      trigger(refObject, 'value')
    }
  }
  return refObject
}

📚 참고

• Javascript
• MDN web docs - proxy
• JavaScript Proxy. 근데 이제 Reflect를 곁들인

주목할만한 새로운 기능

많은 변경들 중 Vue3에서 주목해야할 새로운 기능은 아래와 같다.

• Composition API
• <script setup>
• Fragments
• Emits Component Option
• v-bind in <style>
• key usage on v-for, v-if

Composition API, <script setup>, Emits Component Option, v-bind in <style> 은 Vue 2.7 에서도 사용가능하다.

Composition API

Vue2에서는 data, computed, methods, created, watch를 모두 하나씩 생성해야 했지만 Vue3에서는 Composition API를 통해 setup 함수 안에서 모두 생성할 수 있다. 이 때, setup 함수 안에서 생성한 data는 this로 접근하지 않는다.

Composition API를 사용하는 가장 큰 장점은 목적에 맞는 코드를 모듈화해 유연하고 확장이 가능하다.

자세한 내용은 링크 에서 확인 가능하다.

<script setup>

Composition API를 사용하게되면서 SFC(Single-File Components) 내에서 사용가능하며 다음과 같은 이점이 있다.

• 더 적은 상용구로 간결한 코드 작성
• typescript 사용 시 props와 emit 선언
• 런타임 성능 향상 (템플릿이 <script setup>과 같은 scope에 있는 render 함수로 컴파일 되어 proxy가 불필요)
• IDE 타입 추론 성능 향상

Top-level bindings are exposed to template

기존 setup() 함수 내에서 return해서 사용했던 것과 다르게 <script setup> 사용 시 return 없이 사용 가능하다.

<script setup>
import { ref } from 'vue'

// variable
const count = ref(0)
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}
</script>

<template>
  <button @click="log">{{ msg }}</button>
  <button @click="count++">{{ count }}</button>
</template>

import 사용도 마찬가지이다.

<script setup>
import { capitalize } from './helpers'
</script>

<template>
  <div>{{ capitalize('hello') }}</div>
</template>

Using Components

component를 바로 사용할 수 있다.

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

defineProps() & defineEmits()

props와 emits를 defineProps()와 defineEmits()로 선언 가능하다.

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

Usage alongside normal <script>

일반 <setup>과 함께 사용 가능하다.

<script>
// normal <script>, executed in module scope (only once)
runSideEffectOnce()

// declare additional options
export default {
  inheritAttrs: false,
  customOptions: {}
}
</script>

<script setup>
// executed in setup() scope (for each instance)
</script>

더 많은 설정은 공식 문서에서 확인 가능하다.

Fragments

Vue2에서는 단일 루트 노드만을 지원했지만 Vue3는 다중 루트 컴포넌트를 지원한다. 그러나 공식적으로는 단일 루트를 지향하는것이 좋다 한다.

// vue 2
<template>
  <!-- OK -->
  <div></div>
</template>
<template>
  <!-- ERROR -->
  <div></div>
  <div></div>
</template>

// vue 3
<template>
  <!-- OK -->
  <div></div>
  <div></div>
</template>

Emits Component Option

Vue2에서는 별도로 emit을 지정하는 부분이 없었지만 Vue3 에서는 props와 마찬가지로 emit을 정의할 수 있다. array 형식으로 정의하거나 object 형식으로 선언할 수 있다.

// vue 3
// array 형식
<script>
export default {
  emits: ['check', 'submit'],
  methods: {
    submitMethod() {
      this.$emit('submit', { email, password });
    }
  }
}
</script>

// object 형식
<script>
export default {
  emits: {
    click: null,    // validation이 필요 없는 경우
    submit: (payload) => {    // validation이 필요한 경우
      if (payload.email && payload.password) {
        return true;
      } else {
        console.warn(`Invalid submit event payload!`);
        return false;
      }
    }
  },
  methods: {
    submitMethod() {
      this.$emit('submit', { email, password });
    }
  }
}
</script>

v-bind in <style>

v-bind로 template에서 정의한 변수를 style에서 사용 가능하다.

// vue 3
<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

key usage on v-for, v-if

Vue3에서는 key를 자동으로 생성해주고 있으므로 직접 key 설정하는것을 권장하지 않는다.

v-if

// vue 2
<div v-if="condition" key="yes">Yes</div>
<div v-else key="no">No</div>

// vue 3
<div v-if="condition">Yes</div>
<div v-else>No</div>

Vue2에서 <template> 태그에는 key를 사용할 수 없어 child component에 설정해야 했지만 Vue3에서는 <template> 태그에도 key 를 설정할 수 있다.

// vue 2
<template v-for="item in list">
  <div :key="'heading-' + item.id">...</div>
  <span :key="'content-' + item.id">...</span>
</template>

// vue 3
<template v-for="item in list" :key="item.id">
  <div>...</div>
  <span>...</span>
</template>

✨Composition-API 배경

기존의 vue2 버전에서는 직관적인 확인이 어렵고 재사용성이 떨어진다. 이러한 문제를 해결하기 위해 composition API를 사용한다.

기존 Vue 2

<template>
    <div>
        <h1>{{ countWithUnit }}</h1>
        <button @click="increase">Increase</button>
        <button @click="decrease">Decrease</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        }
    },
    computed: {
        countWithUnit() {
            return this.count + '입니다'
        }        
    },
    methods: {
        increase() {
            ++this.count
        },
        decrease() {
            --this.count
        }
    }
}
</script>

• 같은 기능임에도 불구하고 data, computed, methods에 코드가 흩어져있다.

Composition-API 사용

<template>
    <div>
        <h1>{{ countWithUnit }}</h1>
        <button @click="increase">Increase</button>
        <button @click="decrease">Decrease</button>
    </div>
</template>

<script>
import { ref, computed } from '@vue/composition-api'

const useCount = () => {
    const count = ref(0)
    const countWithUnit = computed(() => count.value + '입니다')
    const increase = () => ++count.value
    const decrease = () => --count.value

       return { countWithUnit, increase, decrease }
}

export default {
    setup() {
        const { countWithUnit, increase, decrease } = countWithUnit()

        return {
            countWithUnit,
            increase,
            decrease
        }
    }
}
</script>

• count의 기능에 대한 값과 로직 값이 모두 useCount 함수 내에 모여있다.
• React의 Hooks와 유사하다.
• 목적에 맞는 코드를 모듈화하여 유연하고 확장이 가능하다.

📌 #1. LifeCycle

기존 Vue2

<script>
export default {
    mounted() {

    },
    updated() {

    },
    destroyed() {

    },
}
</script>

Composition-API

<script>
import {
    onMounted,
    onUpdated,
    onUnmounted
} from '@vue/composition-api

const funcion1 = () => {
    onMounted(() => {
        // mounted1
    })
}

const funcion2 = () => {
    onMounted(() => {
        // mounted2
    })
}

export default {
    setup() {
        function1()    // mounted1
        function2()    // mounted2

        onUpdated(() => {
            // updated
        })

        destroyed(() => {
            // unmounted (destroyed)
        })
    }
}
</script>

• 기존에는 컴포넌트당 하나의 생명주기 훅을 사용했지만, Composition-API를 사용할 경우 여러개를 사용할 수 있다.

LifeCycle

📌 #2. 반응형 데이터 (reactive, ref)

반응형 데이터는 값이 변경됨에 따라 이를 감지하고 해당 값에 종속된 작업(Side Effect)이 수행된다.

기존 Vue 2

data() 내부에 선언을 통해 반응형 데이터를 만든다.

<template>
    <div>
        {{ message }}        
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello World!!'
        }
    }
}

</script>

Composition-API

Composition-API의 경우, 2가지 유형(reactive, ref)으로 반응형 데이터를 만든다.

<script>
import { reactive, ref, computed } from '@vue/composition-api

export default {
    setup() {
        // 1. reactive
        const reactiveValue = reactive({ name: 'sooni'})
        reactiveVlaue.name    // sooni

        // 2. ref
        const refValue = ref(10)
        refValue.value    // 10
    }
}
</script>

reactive

• 오직 객체만 받는다.
• reactive는 인자로 받은 객체와 완전히 동일한 프록시 객체를 반환한다.
• 원본 객체에 접근하는 것과 동일하게 값에 접근 가능하다.
• reactive를 통해 생성된 객체는 모두 깊은(Deep) 감지를 수행한다.

ref

• 모든 원시타입(Primitive) 값을 포함한 여러가지 타입의 값을 받는다.
• value 속성을 통해 접근 및 변경할 수 있다.

ref 객체는 원본 값을 value라는 속성에 담아두고 변경을 감시하는 객체이며, reactive는 원본 객체 자체에 변경을 감지하는 옵저버를 추가하여 그대로 반환한 값이다.

isRef, toRefs

어떤 유형의 값인지 확인하기 위한 isRef, reactive 값을 ref 값으로 변환하는 toRefs가 존재한다.

isRef

ref값과 reactive값에 따라 다르게 처리해야 할 경우 사용한다.

<script>
import { reactive, ref, isRef } from '@vue/composition-api

export default {
    setup() {
        const reactiveValue = reactive({ name: 'sooni' })
        const refValue = ref(10)

        const printValue = obj => {
            console.log(isRef(obj) ? obj.value : obj)
        }
    }
}
</script>

• ref 값의 경우 value 속성을 통해 데이터에 접근하므로 ref인 경우 obj.value를 출력하고, ref가 아닌 경우(reactive) obj를 그대로 출력하도록 구현된 모습이다.

toRefs

<script>
import { reactive, ref, isRef } from '@vue/composition-api

const useMousePoint = () => {
    const pos = reactive({ x: 0, y: 0 })
    return toRefs(pos)    // convert to ref
}

export default {
    setup() {
        const { x, y } = useMousePosition()

        return {
            x,
            y
        }
    }
}
</script>

• useMousePoint에 있는 pos 객체의 각각의 값을 사용하고 싶은 경우, reactive를 toRefs를 통해 ref 값으로 변환한다.

📌 #3. Computed

<template>
    <div>
        <h1>{{ value2x }}</h1>
    </div>
</template>

<script>
import { ref, computed } from '@vue/composition-api'

export default {
    setup() {
        const myValue = ref(10)
        const value2x = computed(() => myValue * 2)

        return {
            value2x
        }
    }
}
</script>

• getter 함수가 반환하는 값에 대해 변경 불가능한 반응형 데이터를 반환한다.

참고

• [Vue 3] Composition API 살펴보기

/public/META-INF/context.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xml>
<Context docBase="/usr/local/apache/webapps/{name}" path="/{path}" reloadable="true">
    <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
    <WatchedResource>WEB-INF/rewrite.config</WatchedResource>
</Context>

/public/WEB-INF/rewrite.config

RewriteRule ^(.*?)\.(css|images|js)$ - [L]
RewriteRule ^(.*)$ /index.html

당연히 Apache라고 생각했던 나를 반성하며 tomcat에서 vue-router 적용하는 방법으로 다른 글 포스팅을 통해 따라했다.

tomcat에 적용하기

tomcat-server-9.0.73

#1. server.xml 파일 수정 <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" /> 추가

      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

        <!-- SingleSignOn valve, share authentication between web applications
             Documentation at: /docs/config/valve.html -->
        <!--
        <Valve className="org.apache.catalina.authenticator.SingleSignOn" />
        -->
        <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

        <!-- Access log processes all example.
             Documentation at: /docs/config/valve.html
             Note: The pattern used is equivalent to using pattern="common" -->
        <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
               prefix="localhost_access_log" suffix=".txt"
               pattern="%h %l %u %t &quot;%r&quot; %s %b" />

      </Host>

#2. rewrite.config 파일 만들기 ${tomcat_home}/conf/Catalina/localhost/rewrite.config

RewriteCond %{REQUEST_PATH} !-f
RewriteCond %{REQUEST_PATH} !-d
RewriteCond %{REQUEST_URI} !^/images/(.*)$
RewriteCond %{REQUEST_URI} !^/css/(.*)$
RewriteCond %{REQUEST_URI} !^/js/(.*)$
RewriteCond %{REQUEST_URI} !^/favicon.ico
RewriteRule ^/${context}/(.*) /${context}/index.html

context에 내가 설정한 context 이름을 설정해주면 된다. tomcat에 여러 앱을 배포한다면..? 모든 경로를 다 설정해줘야 하는건가? 애플리케이션경로/WEB-INF/rewrite.config 는 제대로 동작하지 않아서 일단 임시로 이렇게 적용했다. web.xml 설정해주는 것과 다르게 콘솔창에서 404 에러가 뜨지 않는다.

참고

• https://jiurinie.tistory.com/105
• https://datajoy.tistory.com/116

npm run dev에서는 멀쩡하게 잘 동작하던 router가 deploy만 하면 제대로 동작하지 않는 경우에 임시방편

분명히 router > redirect까지 잘 되는데! 새로고침을 하게되면 index.html을 제대로 못띄워서발생하는 문제인듯 (SPA)

vue-router에서는 Apache를 사용하는 경우 httpd.conf 를 수정하라 하는데 tomcat을 사용하고 있어서 임시 방편으로 pulic 폴더에 WEB-INF 폴더를 만들고 web.xml을 아래와 같이 만든다.

/public/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0" metadata-complete="true">
    <display-name>vue-vite project</display-name>
    <description>vue-vite project</description>
    <error-page>
        <error-code>404</error-code>
        <location>/</location>
    </error-page>
</web-app>

그리고 router는 다음과 같이 설정해준다. 웬만하면 404 페이지는 따로 만들어주자.

/src/router/index.ts

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: 'b',
      component: () => import('@/layouts/AView.vue'),
      children: [
        {
          name: 'b',
          path: 'b',
          component: () => import('@/views/BView.vue'),
        },
      ],
    },
    {
      path: '/:pathMatch(.*)*',
      name: 'not-found',
      component: () => import('@/views/NotFoundView.vue'),
    },
  ],
});

export default router;

그 후 npm run build하고 deploy 시 새로고침을 해도 제대로 동작하는 것을 볼 수 있다. 물론 console에는 404에러가 뜬다.. => 다른 방법으로 해결

(404 error, when you reload in a project using vue3, vite, and vue-router)

이후에 node가 만들어지고 서버에서 js를 사용할 수 있게 되면서 require 함수, module.exports를 쓰는 CommonJS 방식의 모듈이 만들어졌다.

서버 프로그래밍은 코드를 미리 만들고 파일에서 코드를 동적으로 불러오는 데 제한이 없지만, 브라우저는 js를 저장하지 못하고 매번 불러와야했다. CommonJS와 다르게 비동기가 가능한 Asynchronous Module Definition (AMD)라는 방식으로 브라우저에서 돌아가는 모듈을 만들었다.

하지만 이 방식은 여러 파일을 로딩해야했고, js 파일을 동시에 여러개 호출 시 속도 문제 발생 및 특정 js 파일의 로딩이 지연되면 전체가 늦어지는 문제가 있어 역시 널리 쓰이지 않게 됐다.

참고
CommonJS와 AMD의 JavaScript 모듈화: https://d2.naver.com/helloworld/12864

번들

여러 개 파일을 비동기로 로딩하는 것이 문제라면 그냥 처음부터 파일을 하나로 합쳐서 전달하는건 🤔?!

결국 사람들은 여러개의 파일을 나눠서 개발할 수 있도록 모든 파일을 하나로 합친 하나의 번들(Bundle)을 만들었다.

번들링

번들링(Bundling)이란 웹 어플리케이션을 제공하기 위해 분리된 모듈을 묶어주는 작업으로, 하나의 번들을 만드는 작업을 의미한다.

app

// app.js
import { add } from './common.js';

console.log(add(1, 2)); // 3

// constant.js
export const add = (a, b) => {
   return a + b;
}

bundle

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

console.log(add(1, 2)); // 3

번들러

번들러는 번들링을 작업하는 도구로 대표적으로 Webpack, Rollup, Parcel, Browserify 등이 있다.

번들러는 서로 의존성이 있는 여러 JS 파일(모듈)들을 하나의 번들 파일로 묶어주는 역할을 한다. 이 때, 꼭 JS 파일만 가능한 것이 아닌 웹팩의 로더(Loader)를 통해 다양한 타입의 파일들도 번들링 가능하다.

개발자가 직접 모든 JS 파일의 변수를 확인해 중복 선언을 피해야했던 것과 다르게, 번들러를 통해 모듈 단위 개발이 편리해졌다.

그러나, 수천개의 js 모듈이 있는 프로젝트라면 Webpack을 이용해 개발 서버를 실행할 때 굉장히 긴 시간을 기다릴 수 있다 🤯

Vite

Vite는 Vue.js 팀이 개발한 웹 개발용 빌드 도구이다. 프랑스어로 매우 빠르다 를 의미한다.

그래서 왜 Vite를 사용해야하는가

지루할 정도로 길었던 서버 구동

개발 서버 실행 시 전체 파일을 처음부터 번들링하는 콜드 스타트 방식과 다르게 vite는 dependencies, source code 두가지 카테고리로 나누어 개발 서버를 시작하게 한다.

Vite는 사전 번들링과 ESM(ECMAScript Modules) 기반의 번들링을 통해 빠른 개발을 제공한다.

Webpack개발 서버 실행 시 전체 파일을 처음부터 번들링하지만, vite는 설치와 동시에 수정이 잘 일어나지 않는 의존성 패키지(컴포넌트 라이브러리와 같은 모듈)들을 Esbuild를 사용해 사전 번들링 해두고, 수정이 잦은 내부 소스 코드는 브라우저에서 Native ESM을 이용해 을 이용해 소스 코드를 제공하도록 하고 있다. 즉, 브라우저가 곧 번들러라는 의미이다. 따라서 조건부 동적 import 이후의 코드는 현재 화면에서 실제로 사용이 되어야만 처리가 된다.

ESM (ECMAScript Modules) 자바스크립트 네이티브 모듈, 브라우저 자체에서 모듈 기능을 지원하기 위한 스펙이다. import, export를 이용해서 특별한 라이브러리 없이 js 코드를 모듈화해서 작성하면 브라우저가 이해할 수 있게됐다.

Esbuild go 언어로 작성된 자바스크립트를 위한 번들러. 타입스크립트의 타입 체킹이나 프론트엔드 언어 (Vue, Angular) 지원, 핫 모듈 리로딩을 포함한 개발 서버 오픈 등 번들링과 관계 없는 기능들은 일체 없다. 기존 빌드 속도보다 100배는 빠르지만 esbuild를 사용하지 않는 이유이다.

느린 소스코드 갱신

기존 번들러 기반 개발 진행 시, 소스 코드 업데이트를 하면 번들링 과정을 다시 거쳐야했다. 이를 위해 HMR(Hot Module Replacement)라는 대안이 나왔으나 완전하게 시간을 개선할 순 없었다.

Vite는 ESM을 이용해서 HMR을 지원한다. 어떤 모듈이 수정되면 vite는 수정된 모듈과 관련된 부분만 교체하고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달한다.

그러나, vite는 개발 환경에서는 빠른 속도를 가진 Esbuild를 사용하지만 빌드 과정에서는 코드 스플리팅(Code-splitting)과 CSS 관련 처리가 미비해 Rollup 번들러를 사용한다. 같은 모듈을 import하는 것을 매번 요청해서 가져오면 비효율적이고, 최적의 퍼포먼스를 내기 위해서는 번들링하는 게 좋기 때문이다.

// vite.config.ts
rollupOptions: {
  input: {
    main: resolve(__dirname, './index.html'),
  },
  output: {
    manualChunks: {
      // Split external library from transpiled code.
      vue: ['vue', 'vue-router', 'pinia'],
      vuetify: ['vuetify', 'vuetify/components', 'vuetify/directives'],
    },
  },
},

HMR (Hot Module Replacement) 브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정이다.

Code splitting 번들한 여러 코드 혹은 컴포넌트를 분리하는 것으로, 필요에 따라 특정한 컴포넌트만 로딩하거나 병렬로 로딩할 수 있다. webpack에서는 const Home = () => import(/* webpackChunkName: "home" */ './Home.vue'); 처럼 webpackChunkName를 지정하면 해당 이름으로 파일이 분리되어 빌드된다.

그래서 vite?

항상 모든 기술을 선택하는 데 있어서 무조건적으로 좋은건 없다 생각한다. 이번 프로젝트는 최신 기술을 사용해보는 데 의의를 두기 위해 vite를 선택했다. Webpack과 어떤 점이 다른지 개발 속도가 향상됐다는데 얼마나 향상됐길래 vite라는 이름을 사용하는지 궁금해서 사용했다.

build가 훨씬 빠른 장점이 있고, 기존 프로젝트에서 webpack을 vite로 migration할 수 있는지 여부는 확인해보면 좋을 것 같다.

참고

• https://humanwater.tistory.com/2
• https://tech.wonderwall.kr/articles/Vite/
• https://tech.cloudmt.co.kr/2023/02/23/build-fast-webpack-to-vite-migratiokn/
• https://vitejs-kr.github.io/guide/why.html
• https://yozm.wishket.com/magazine/detail/1620/

🔨사용한 기술

1. Vue3
2. Vite
3. Vuetify3
4. typescript
5. pinia

react로 개발해보고 싶었지만 시간이 부족해서 기존에도 사용했던 vue를 사용했다. 너무 느렸던.. Webpack을 대신해 속도가 엄청 빨라졌다는 Vite도 이번에 사용해봤다. 확실히 속도면에서 엄청나게 향상된 점을 알 수 있다. 매번 릴리즈 될 것이라는 Vuetify3도 사용해보고 기존에 사용하고 있는 typescript, pinia까지 적용했다.

📌아마도 목차

1. Webpack vs. Vite : Webpack대신 사용한 Vite란?
2. Vue3 : Vue2와의 차이
3. Vuetify3 : Vuetify2와의 차이
4. typescript : javascript와의 차이 (기존에도 typescript 사용중)
5. pinia : vuex와의 차이 (기존에도 pinia 사용중)
6. 자잘한 이슈들 : 🤦...