4월 넷째주 프론트엔드 뉴스레터

 

 

🔖 목차

1. 모놀리스와 마이크로 아키텍쳐
2. 웹팩5 모듈 페더레이션과 마이크로 프론트엔드
3. Puppeteer로 브라우저 테스트하기
4. 크롬 개발자 도구 Source 패널로 디버깅하기
5. Cheetah-Grid - 초고속 데이터 테이블 오픈소스
6. 모듈 의존성을 그래프로 확인하기
7. 코딩테스트 연습
8. 컨퍼런스 정보

 

 

💡 모놀리스와 마이크로 아키텍쳐

Micro FrontEnd — Vue JS

• 모놀리스 아키텍쳐 : 하나의 큰 돌덩어리처럼 프로젝트가 하나로 뭉쳐져 있는 구조.
• 마이크로 아키텍쳐 : 단일 책임을 지는 여러 프로젝트 조각으로 구성된 구조.
  • 독립적인 코드베이스를 가졌기 때문에 프로젝트의 각 파트를 리팩토링하거나, 아키텍쳐를 바꾸거나, 프레임워크 변경도 쉽다.
  • 각각의 프로젝트는 작고 깔끔해지고, 유지보수 용이해짐

 

 

💡 웹팩5 모듈 페더레이션과 마이크로 프론트엔드

Micro-frontends: Module Federation with WebPack 5

• 모듈 페더레이션이 등장한 배경

1. 우리가 보통 웹팩을 사용하는 방법
- 프로젝트 src 폴더에 번들링해야하는 기능들이 많아질 수록 빌드 아웃풋 파일의 사이즈도 커진다.

2. 이 문제를 해결할 방법은 없을까?
- 첫 렌더링에 모든 코드를 로드하지 않게 코드를 청크로 분할하는 것이 코드 스플리팅
- 엔트리 포인트를 몇 개 더 추가할 수 있지만, 청크끼리 모듈을 중복 사용할 경우 어차피 청크 크기가 증가한다.
- 따라서 비동기 동적 import를 사용해 레이지 로딩을 구현

3. 하지만 빌드 아웃풋을 다른 청크로 분할할 뿐만 아니라 다른 프로젝트로 분할할 수 있다면 어떨까?
- 빌드를 다른 프로젝트로 분할해버리자!
- 앱마다 별도의 빌드 프로세스를 수행

4. 효과
- 큰 팀은 더 작고 효율적인 팀으로 나누어 프론트에서 백엔드 팀까지 스케일을 확장할 수 있고
- 새로운 기능이 필요할 때 다른팀에게 의존하지 않는 자율팀이 생긴다.

• 모듈 연합 : 서로 다른 애플리케이션 간 코드를 동적 로딩해서 공유할 수 있는 자바스크립트 아키텍쳐
• 호트스 : 페이지 로드 시 가장 먼저 초기화되는 웹팩 빌드 (메인 앱)
• 리모트 : 호스트가 일부 사용하는 또 다른 웹팩 빌드 (서브 앱)
• 양방향 호스트 : 어떤 앱이라도 먼저 로드되면 호스트가 된다. 모든 앱이 리모트이자 호스트 상태.
• 웹팩 5의 ModuleFederationPlugin 사용시 리모트 앱의 webpack 설정 미리보기

plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      library: { type: 'var', name: 'app2' },
      filename: 'remoteEntry.js',
      exposes: {
        // 밖으로 공유할 컴포넌트, 라우트 등을 작성
        './Counter': './src/components/Counter',
      },
      shared: ['react', 'react-dom'], // 공유할 종속성 작성
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],

 

 

💡 Puppeteer로 브라우저 테스트하기

addyosmani/puppeteer-webperf

• 크롬 브라우저를 백그라운드에서 제어할 수 있는 API를 제공하는 노드 기반 라이브러리.
• Headless Browser : 브라우저를 띄워서 확인할 필요없이 백그라운드에서 가상렌더링을 수행하며, 실제 브라우저와 똑같이 돔 트리를 그리고 스크립트 엔진을 구동한다.
• 웹페이지 성능 이슈 진단
• 지루한 화면 테스트 작업 자동화 (form submit, UI 테스트, 키보드 입력 등)
• PDF, 스크린샷 저장 가능

 

 

💡 크롬 개발자 도구 Source 패널로 디버깅하기

Debugging JavaScript Efficiently with Chrome DevTools

• 개발자 도구에는 8개의 패널이 있다.

- Elements : DOM 노드와 스타일 속성을 검사하고 수정
- Console : 자바스크립트 코드를 보고 실행.
- Source : 자바스크립트 디버깅
- Network : 네트워크 관련
- Performance : 속도 분석과 최적화
- Memory : 메모리 사용 추적, 관련 이슈 수정
- Application : 로컬스토리지, 세션스토리지, 쿠키, 인덱스DB 등 검사
- Security : 인증과 보안 이슈를 디버깅
- Lighthouse : 앱 품질, 성능, 접근성, SEO 등 검사

• Source 패널에서 쓸만한 디버깅 기능들. 

1. 브레이크포인트 추가
    - console.log() 및 새로고침보다 생산적인 디버깅 방법이다.
2. 로컬, 클로져, 전역 변수의 변화 확인
    - 브레이크 포인트로 함수실행 멈춰진 상태에서 변수 값을 수정해볼 수 있다.
3. 단축어 생성, 저장, 실행하기
    - Snippets 메뉴에서 새로운 단축코드를 생성해서 사용가능
4. 호출 스택 확인하기
    - 비동기 함수가 많은 경우 호출 과정을 보기 쉽다.
5. 블랙박싱
    - 디버깅 시 스크립트 몇 개를 제외하고 실행하고 싶은 경우가 있다.
    - `Add script to ignore list` 를 사용하면 해당 스크립트는 실행되지 않는다.

 

 

💡 Cheetah-Grid - 초고속 데이터 테이블 오픈소스

future-architect/cheetah-grid

• 100만개의 레코드를 화면 끊김없이 쭉 볼 수 있다.
• vue.js API 지원

 

 

💡 모듈 의존성을 그래프로 확인하기

pahen/madge

• 복잡한 모듈 의존성을 시각적인 그래프로 확인할 수 있다.
• CSS 전처리기도 확인 가능

 

 

👩‍💻 코딩테스트 연습

프로그래머스 코딩테스트 연습 > 2019 카카오 개발자 겨울 인턴십 > 크레인 인형뽑기 게임

코딩테스트 연습 - 크레인 인형뽑기 게임

• 인형을 뽑은 후 같은 인형을 터뜨려서 사라진 인형의 개수를 return 하는 함수를 완성해주세요.
• 테스트케이스, 효율성 커버리지 100% 목표!

 

 

🎙 컨퍼런스 정보

토스 slash 21 개발자 컨퍼런스

토스 개발자 컨퍼런스 SLASH

• 04.28(수) - 30(금) 3일간 매일 오후 7시 진행
• 마이크로 프론트엔드 도입기, 비동기처리, 번들사이즈 최소화, 빌드속도 개선 등 다양한 프론트엔드 토픽 다룸

 

 

 

---

 

📢 뉴스레터 구독하기

• 프론트엔드 개발 공부 및 영어 실력 향상을 위해 한 주간 읽은 외신 기사들을 아카이빙하고 있습니다.
• 개발을 공부하는 학생, 주니어 프론트엔드 개발자의 구독을 환영합니다! 메일로 함께 읽어요 👋

📩 뉴스레터 구독하기