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

 

 

🔖 목차

1. 프론트 개발자가 웹팩을 공부해야하는 4가지 이유
2. NPM CLI v7.0 주요기능 5개 살펴보기
3. 코드리뷰에 대한 우리의 접근법
4. 테스트 가능한 순수 함수 작성하기
5. CSS 논리적 속성과 tailwind 플러그인
6. 성능향상을 위한 동적 import
7. 코딩테스트 연습

 

 

💡 프론트 개발자가 웹팩을 공부해야하는 4가지 이유

Why Frontend Developers Need to be Webpack Experts

1. 개발 생산성 향상

• Hot module replacement (HMR) 기능은 애플리케이션 전체 새로고침을 방지해줘서 변경된곳만 업데이트 해줌.
• 기본적으로 뷰, 리액트 프레임워크에서 지원하는 기능

2. 안쓰는 코드 가지 치기 🍂

• 프로젝트에 안쓰는 코드나 공유 라이브러리가 많다면 앱 로딩 시간이 길어짐.
• 트리 쉐이킹은 이렇게 js 모듈을 번들링할 때 불필요한 코드를 제거해주는 기능.
• 번들링 : 기능별로 모듈화 했던 자바스크립트 파일들을 묶어준다 ⇒ 웹팩이 하는 일

3. 코드 스플리팅 기능을 통한 앱 로딩 시간 최적화

• 코드를 여러번 분할하여 필요한 번들만 로딩 → 성능개선
• 크롬 개발자 도구를 열고 ctrl+shift+P 팔레트를 통해 Coverage를 검색해서 리로딩해보면 사용하지 않는데도 파싱된 코드가 많다는 걸 확인할 수 있다.

4. 마이크로 프론트엔드 지원

• module federation 기능 : 런타임에 다른 애플리케이션에서 동적으로 코드를 가져올 수 있는 자바스크립트 아키텍쳐

 

 

💡 NPM CLI v7.0 주요기능 5개 살펴보기

NPM CLI v7.0- The Top Five Features That Grabbed My Attention

1. 워크스페이스 지원

• package.json에 워크스페이스를 정의하면 여러개의 하위 프로젝트 의존성을 루트레벨에서 관리 가능.
• 과거엔 하위 프로젝트마다 node_modules가 있었지만 이제는 다 루트에서 관리하기 때문에 프로젝트 구조 깔끔해짐

2. 출력 로그가 좋아졌다

• 표 레이아웃 등이 사라져서 읽기 쉬워짐

3. 피어 종속성 자동 설치

• 리액트15로 개발하다가 리액트16을 필요로하는 패키지를 설치하면 두 리액트 버전 모두에 의존해야하니까 라이브러리 불안정해지는 상황 발생. 이때 리액트16을 피어 종속성으로 추가함.
• 이런걸 npm이 알아서 해준다.

4. Yarn 호환성 - 쉬운 마이그레이션

• npm 6버전은 yarn.lock 파일을 안보고 최신 패키지를 설치한다.
• 하지만 npm 7버전부턴 알아서 yarn 의존성도 잘 설치해준다.

5. npx에 대해 더 나은 프롬프트 메세지 제공

• 설치 전 사용자 확인을 묻는다.

 

 

💡 코드리뷰에 대한 우리의 접근법

Looks Good To Me: Making code reviews better for remote-first teams

• 코드리뷰의 목표는 무엇인가?
  1. 프로덕션 환경 전에 결함 발견
  2. 좋은 예시와 패턴 공유
  3. 대체할 수 있는 접근법과 관점 논의
  4. 모든 레벨의 개발자가 학습 가능
  5. 유용한 문서나 자료를 연결하기 위해
  6. 팀 전체에 지식 제공
  7. 질문하고 이해 확인하기
  8. 코드의 가독성 및 유지보수성 향상
  9. 문서 요구사항 확인
  10. 작업이 표준 품질을 충족하는지 확인
  11. 변경사항에 대한 근거 기록
  12. 주니어 개발자 코칭해주기
  13. 코드베이스의 주인의식 향상
  14. 영향을 받는 다른 팀에게 변경사항 알려주기
  15. 위 모든 사항들
• 모든 코드 리뷰는 질문하고, 지식을 공유하고 대안을 생각할 수 있는 기회다.
• 코드리뷰는 점수를 매기거나 검토자가 작성자보다 더 잘 알고있음을 증명하는 연습이 아니다.
• 작성자와 검토자 모두 결과에 긍정적인 기여를 했고 과정 중 무언가를 배워가는 것이 이상적이다.
• 코드에 대한 피드백은 개인에 대한 평가로 받아들여선 안된다.
• 우리는 모두가 최선의 의도로 행동했다고 가정한다.
• 불평 대신 개선을 위한 구체적인 조치를 제안한다.
• 우리는 품질을 위해 노력하지만 '완벽함'을 목표로 하지는 않는다. (완벽한 코드는 어차피 존재하지 않는다.)
• 페어리뷰, 그룹리뷰 등 잦은 리뷰 사이클 만들기

bbc/simorgh

(전체 번역 예정)

 

 

💡 테스트 가능한 순수 함수 작성하기

Functional Programming: Pure Functions - SitePoint

순수 함수?

• 사이드 이펙트 없이 출력값이 입력값에 의해서만 결정되는 함수.
• 함수가 리턴값 계산을 제외하고 다른 동작을 수행하면 불순하다.

전역 상태 피하고 로컬 상태 유지하기

• 함수가 다른 전역변수에 의존하면 불순하다.
• 애들이 어떻게 서로 연관되어 있는지 추적하는 건 힘들다.

재현 가능한 결과

• 함수가 순수하고, 값들이 검사하기 쉬울 경우 테스팅, 디버깅하기 쉽다.
• 인자 넘겨주고 출력확인하면 테스트 끝!
• 컨텍스트 설정, 리퀘스트, 사용자 등 방해되는 사이드이펙트가 필요없다.

안전하게 계산결과 캐싱

• 순수함수는 참조가 투명하다. 입력에 대해 한번만 출력 계산.
• 순수함수를 통해서만 안전하게 계산결과를 캐싱하고 재사용할 수 있다.

레이지 로딩 (Laziness)

• 순수함수는 사이드이펙트를 일으키지 않기 때문에 호출하지 않아도, 리턴값을 사용하지 않아도 상관없다.
• 호출 최적화.

 

 

💡 CSS 논리적 속성과 tailwind css 플러그인

CSS Logical Properties and Values Level 1

• 우리가 사용하는 쓰기모드(글의 흐름 방향)는 왼→오 흐름이지만 모든 언어가 이와 같지 않다.
• CSS를 사용할 때, 다른 쓰기모드에 대응하기 위해서 left, right 와 같은 물리적 속성값이 아닌 start, end 같은 상대적이고 논리적인 속성값이 필요하다.
• tailwind css로 논리적 속성값을 사용할 수 있는 플러그인이 있다.

stevecochrane/tailwindcss-logical

 

 

💡 [Vue.js] 성능향상을 위한 동적 import

Dynamic Imports in Vue.js for better performance

• 필요할 때만 동적으로 코드를 Import 하도록 구현하면 초기 로딩 속도 향상 가능.
• 웹팩의 lazy loading과 코드 스플리팅 기능이 적용되는 부분 : 비동기 컴포넌트, 라우터, 뷰엑스 모듈
• 사용예시 영상

// 일반적인 import 사용
import MyComponent from "~/components/MyComponent.js";

// 비동기 import 사용
const MyComponent = () => import("~/components/MyComponent.js");

 

 

👩‍💻 코딩테스트 연습

코딩테스트 연습 - 완주하지 못한 선수

코딩테스트 연습 - 완주하지 못한 선수

• 마라톤에 참가자 배열과 완주자 배열이 주어질 때, 완주하지 못한 선수를 return 하는 함수를 작성해주세요.
• 테스트케이스, 효율성 커버리지 100% 목표!

 

 

 

---

📢 뉴스레터 구독하기

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

📩 뉴스레터 구독하기