패스트캠퍼스 강의를 정리한 내용입니다.
"The RED : 프론트엔드 Back to the Basics : 지속 가능한 코드작성과 성능 향상법 by 김태곤"
네트워크 병목 현상 해결
→ 여러 파일을 묶어 하나의 번들로 만들 때, 종속성을 스스로 확인하여 미사용 파일은 제외하기 때문에 파일의 크기가 줄고 로딩 속도가 향상되어 네트워크 병목 현상을 최소화 할 수 있음
모듈 단위의 코딩 가능
→ 모듈 단위로 기능을 구분하여 코딩하는 경우, 코드의 가독성이나 유지보수 용이성을 향상시킬 수 있음
*모듈: 프로그램 내부를 기능별 단위로 분할한 부분
다양한 서드파티 기능 지원
→ Webpack의 경우 Babel-loader를 통해 ES6 이상의 자바스크립트 문법을 ES5 버전의 문법으로 변환시켜주는 트랜스파일러 기능 지원
→ Webpack의 경우 style-loader, css-loader, sass-loader를 통해 SASS를 CSS로 컴파일하는 기능 지원
ESLint는 문법 에러를 검출하여 코드 퀄리티가 보장 되도록 도와주고, Prettier는 한 줄에 작성한 코드의 최대 길이나 탭의 길이나 따옴표 사용 방식 등 코드 스타일을 정돈하여 통일해주는 도구
서버와 통신하는 부분이 있다면, 어떤 API를 통해서 어떤 형식으로 데이터를 주고 받을 것인지 백엔드 개발자와 논의 필요
백엔드 개발자와 동시에 작업 진행 시 어느쪽 에러인지 판별하기 어려우므로 분리 작업하는 것이 좋음
*HTML 또한 이미 컴포넌트의 집합. select box, input 등등..
받은 화면 설계를 여러 컴포넌트로 나누기 → 화면을 컴포넌트로 나누고 보면 공통된 요소가 보임 → 공통된 코드는 별도의 함수나 클래스로 분리하여 라이브러리화 → 공통된 화면은 단위 컴포넌트화 → 단위 컴포넌트를 먼저 코딩하고 이것들을 조합해가며 프로젝트 완성
프론트엔드 개발은 개발자가 직접 사용자 시나리오를 재현해가며 개발
해피패스 = 해피플로우 = 최소저항경로
→ 가장 많은 사용자가 사용할 법한 기본 시나리오만 재현하는 것에 그치는 것을 말함
실제로는 다양한 사용자가 있으며 특정 사용자는 예측하기 어려운 방법으로 애플리케이션을 사용하기도 함
따라서, 테스트를 작성할 때는 자신이 작성한 테스트와 코드를 일부러 망가뜨려보고 예외적인 상황을 찾아 대응해야 함
결과물에 있어서 가장 중요한 것은 '사용자'이며,
프론트엔드 개발자로서 우리의 목표는 항상 '사용자의 편리함'이라는 것을 기억할 것