개발을 시작할 때 일어나는 고민들

Yudrey·2022년 4월 7일
0

패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 프론트엔드 Back to the Basics : 지속 가능한 코드작성과 성능 향상법 by 김태곤"

Bundler

  • Webpack, Parcel, Rollup, Browserify 등
  • 자바스크립트 파일 뿐만 아니라, 애플리케이션에 필요한 모든 종류의 파일들을 모듈 단위로 나누어 최소한의 파일묶음(번들)으로 만들어주는 것
  • 자바스크립트 파일을 외부에서 알아 보기 힘들게 코드를 변환하는 작업(Uglyfy) 지원
  • 최신 문법의 자바스크립트를 모든 웹 브라우저에서 작동할 수 있도록 ES5 문법으로 변환(Transpile)하는 기능 지원

장점

  • 네트워크 병목 현상 해결
    → 여러 파일을 묶어 하나의 번들로 만들 때, 종속성을 스스로 확인하여 미사용 파일은 제외하기 때문에 파일의 크기가 줄고 로딩 속도가 향상되어 네트워크 병목 현상을 최소화 할 수 있음

  • 모듈 단위의 코딩 가능
    → 모듈 단위로 기능을 구분하여 코딩하는 경우, 코드의 가독성이나 유지보수 용이성을 향상시킬 수 있음
    *모듈: 프로그램 내부를 기능별 단위로 분할한 부분

  • 다양한 서드파티 기능 지원
    → Webpack의 경우 Babel-loader를 통해 ES6 이상의 자바스크립트 문법을 ES5 버전의 문법으로 변환시켜주는 트랜스파일러 기능 지원
    → Webpack의 경우 style-loader, css-loader, sass-loader를 통해 SASS를 CSS로 컴파일하는 기능 지원


Prettier, ESLint

Prettier

  • 정해진 규칙에 따라 자동으로 코드 스타일을 정리해 주는 Code Formatter
    *코드 포멧터(Code Formatter): 개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구

ESLint

  • ES + Lint의 합성어로 ES는 EcmaScript를 의미하고 Lint는 보푸라기라는 뜻
  • 코딩 컨벤션 및 안티 패턴을 자동 검출
    → JavaScript의 스타일 가이드를 따르지 않거나 문제가 있는 안티 패턴들을 찾아주고 일관된 코드 스타일로 작성하도록 도와줌

Prettier VS ESLint

ESLint는 문법 에러를 검출하여 코드 퀄리티가 보장 되도록 도와주고, Prettier는 한 줄에 작성한 코드의 최대 길이나 탭의 길이나 따옴표 사용 방식 등 코드 스타일을 정돈하여 통일해주는 도구


단위테스트

Mocha

  • Test runner로 작동을 위해 다른 라이브러리가 필요함
  • 기본 기능만 갖춘 대신 작고 빠름
  • 기본 기능만 갖추었으나 플러그인 통해서 기능 확장 가능

Jest

  • Test framework로 별도의 사전 구성이 필요 없음
  • 필요한 기능은 거의 모두 갖춘 올인원 패키지
  • 사용자가 많아 자료 찾기가 수월함

필요한 데이터 정하기

서버와 통신하는 부분이 있다면, 어떤 API를 통해서 어떤 형식으로 데이터를 주고 받을 것인지 백엔드 개발자와 논의 필요

백엔드 개발자와 동시에 작업 진행 시 어느쪽 에러인지 판별하기 어려우므로 분리 작업하는 것이 좋음


컴포넌트화

*HTML 또한 이미 컴포넌트의 집합. select box, input 등등..

받은 화면 설계를 여러 컴포넌트로 나누기 → 화면을 컴포넌트로 나누고 보면 공통된 요소가 보임 → 공통된 코드는 별도의 함수나 클래스로 분리하여 라이브러리화 → 공통된 화면은 단위 컴포넌트화 → 단위 컴포넌트를 먼저 코딩하고 이것들을 조합해가며 프로젝트 완성


사용자 시나리오 테스트

프론트엔드 개발은 개발자가 직접 사용자 시나리오를 재현해가며 개발

해피패스 = 해피플로우 = 최소저항경로
→ 가장 많은 사용자가 사용할 법한 기본 시나리오만 재현하는 것에 그치는 것을 말함

실제로는 다양한 사용자가 있으며 특정 사용자는 예측하기 어려운 방법으로 애플리케이션을 사용하기도 함
따라서, 테스트를 작성할 때는 자신이 작성한 테스트와 코드를 일부러 망가뜨려보고 예외적인 상황을 찾아 대응해야 함

결과물에 있어서 가장 중요한 것은 '사용자'이며,
프론트엔드 개발자로서 우리의 목표는 항상 '사용자의 편리함'이라는 것을 기억할 것

profile
Frontend Developer

0개의 댓글