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

 

 

🔖 목차

1.   프레임워크   : Nuxt3 Beta 릴리즈!
2.   TDD   : 깔끔한 테스트 코드 작성을 위한 BASIC 원칙
3.   라이브러리   : 당신에게 moment.js는 필요없어요.
4.   자바스크립트   : 이벤트 버블링과 캡쳐링
5.   인사이트   : Vuetify 라이브러리를 만들고 연 3억 이상 버는 중
6.   코딩테스트   : 오픈 채팅방
7.   이벤트   : 10월 컨퍼런스 정보

 

 

💡 Nuxt 3 Beta 릴리즈!

Introducing Nuxt 3 Beta

• Nuxt 2 보다 20% 더 가벼워진 코어 사이즈, 빨라진 빌드 속도
• 새로운 Nitro 서버 엔진 사용 : 크로스 플랫폼, 서버리스, API routes, 자동 코드 스플리팅 기능 지원
• Vue 3 기반, 타입스크립트 지원

 

 

💡 깔끔한 테스트 코드 작성을 위한 BASIC 원칙

Writing clean JavaScript tests with the BASIC principles

많은 코드베이스에서 테스트 코드가 사라지고있다

배포 후 운영 환경에서 버그가 발생하는 것이 최악의 일이라고 생각하나요?

아니요, 테스트를 건너뛰고 신뢰성을 잃은 것이 최악의 일입니다.

간단한 테스트 코드부터 작성하자

완전 평평하고, 의존성 없이 독립적이고, 복잡한 문장이 없는 코드를 작성해도 된다면 즐거운 마음이 들거다.

너무 쉬우니까!

BASIC 원칙

• Black-box : 어떻게 작동하는지 테스트하지 않고, 어떤 일을 하는지 눈에 띄는 결과에 집중.
• Annotative : 주석처럼 코드만 봐도 무슨 의도인지 예측 가능한 구조를 가져야한다.
• Single Door : 한 가지 동작에만 집중. 하나의 액션으로 부터 발생한 하나의 결과만 확인
  • 각 테스트 범위를 하나의 결과로 좁히면 테스트 시간 단축 + 근본 원인 쉽게 분석 가능
  • 부수효과가 있기 때문에 하나 이상의 결과가 나와도 괜찮다. 목표는 간단하고 짧은 테스트!
• Independent : 다른 테스트의 부작용에 엮이지 않도록 독립된 상태여야 한다.
• Copy only what’s necessary : 다른 개발자가 테스트할 경우 사전 이해가 필요한 세부 내용을 테스트 안에 포함시켜야 한다.

 

 

💡 당신에게 moment.js는 필요없어요.

GitHub - you-dont-need/You-Dont-Need-Momentjs: List of functions which you can use to replace moment.js + ESLint Plugin

• 모먼트는 유명한 날짜 라이브러리이지만, 객체지향 방식의 복잡한 API와 큰 번들 사이즈 때문에 성능 저하를 일으킬 수 있다.
• 트리쉐이킹을 할 수 없고, mutable하다는 큰 단점을 남긴 상태로 개발이 중단되었다.
• 위 저장소는 moment.js 사용이 필요없는 코드를 eslint로 알려주는 플러그인이다.

모먼트 라이브러리 대안

• day.js : 모먼트랑 비슷한 객체지향 API 형태를 제공하고, 코어 사이즈가 훨씬 작으며 Immutable하다.
• date-fns : 함수형으로 구현되었고, 트리쉐이킹 가능, Immutable한 순수함수에 타입스크립트 지원까지

mutable : 객체의 메모리 주소가 '변경될 수 있는' 상태. 값이 바뀔 경우 사용중인 모든 곳에 부수효과가 발생하기 때문에 에러 유발 가능.

트리쉐이킹 : 기능별로 구현한 자바스크립트 파일을 하나로 묶는 번들링 작업에서 불필요한 코드를 제거하는 웹팩 기능

 

 

💡 이벤트 버블링과 캡쳐링

Event Bubbling and Capturing in JavaScript

이벤트 플로우

<section onclick="alert('section 클릭!')">
    <p onclick="alert('문단 클릭!')">
        <button onclick="alert('버튼 클릭!')">버튼</button>
    </p>
</section>

• 위와 같이 중첩된 요소들이 각각 같은 이벤트를 가진 경우, 버튼 클릭 시 부모 요소의 클릭 이벤트까지 모두 실행된다.
• 이벤트 흐름은 부모 요소 → 타겟 요소로 전파된 다음 다시 부모로 전파된다.
  • 캡쳐 : window 객체에서 이벤트 전파 시작 → 타겟 요소 상위까지 도달
  • 타겟 : 타겟 요소 도착.
  • 버블 : 캡쳐의 반대. 윈도우 객체까지 위로 전파됨.
• 왜 '버블링' 이라고 부르지? ⇒ 어항에서 거품이 보글보글 올라온다고 생각해보기...

이벤트 전파 해결 방법

function eventHandler(event) {
    event.stopPropagation();
}

이벤트 핸들러 함수에 전달된 이벤트 객체에서 stopPropagation() 메소드를 사용하면 타겟요소 외에 발생되는 이벤트 전파를 막을 수 있다.

 

 

💡 Vuetify 라이브러리를 만들고 연 3억 이상 버는 중

I Built A $300K/Year Vue.js Component Library - Starter Story

• 오픈소스로 수입을 만든 방법 : 유료 콘텐츠 및 컨설팅 제공, 사이트 내 광고수익, 후원금
  • 개발자들의 지원을 받아 운영되기 때문에 운영비용이 크게 들지 않았음.
  • Vue 생태계 내 많은 사람들과 협력 관계 유지하여 작은 광고 자리 마련.
• Vue 개발 초기 단계에 꽂혀서 공부 시작하고 오픈소스 기여함.
• 사용자 유지 방법 : 무료&멋진 기능이라는 가치에 초점을 맞춰서 뉴스레터, SNS, 깃허브, 디스코드를 통해 사람들을 모았다.
  • 커뮤니티 구축은 고객과 장기적으로 소통할 수 있는 좋은 방법.
  • 잘 큐레이팅 된 문서로 사이트 트래픽을 높임

 

 

👩‍💻 코딩테스트 연습

프로그래머스 코딩테스트 연습 > 2019 KAKAO BLIND RECRUITMENT > 오픈채팅방

코딩테스트 연습 - 오픈채팅방

• 오픈채팅방 기록으로 관리자 메시지를 출력하는 함수를 완성해주세요.
• 테스트케이스, 효율성 커버리지 100% 목표!

 

 

🎙 10월 컨퍼런스 정보

핵토버페스트 2021

Hacktoberfest '21

• 10월 한달동안 진행
• 오픈소스 생태계 활성화를 위해 매년 개최되는 큰 규모의 행사
• 깃허브/깃랩 오픈소스 저장소에 4개의 Pull Request를 요청하여 승인이 되면 티셔츠를 받을 수 있음

 

FEConf 2021

FEConf2021

• 10.30(토) 11:00~16:40 유튜브 라이브로 진행
• 웹 접근성, 마이크로 프론트엔드, 상태관리, Vue3, 시스템 디자인 등 프론트엔드 토픽 다룸

 

 

---

 

 

📢 뉴스레터 구독하기

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

📩 뉴스레터 구독하기