Front-end guide (NHN Toast)

NHN Toast에서 공개한 문서입니다.

• HTML/CSS/Sass
• HTML은 페이지의 기본 골격을 구성하며 CSS는 마크업 언어가 어떻게 보일지를 정의한다.이 둘은 서비스 성능 및 접근성과 밀접하게 연관되어 있다. 즉, HTML와 CSS를 잘 작성해야 모든 브라우저가 콘텐츠를 손실 없이 동일하게 표현할 수 있다. 이 가이드는 일관성 있는 코드를 작성하여 작업자 간 공유를 쉽게 하고, 유지보수 및 확장 비용 최소화를 목표로 한다.
• 코딩컨벤션
• 코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 특히 자바스크립트는 다른 언어에 비해 유연한 문법구조(동적 타입, this 바인딩, 네이티브 객체 조작 가능)를 가지기 때문에 개발자 간 통일된 규약이 없다면 코드의 의도를 파악하거나 오류를 찾기 어렵다. 코딩 컨벤션을 준수하면 가독성이 좋아지고, 성능에 영향을 주거나 오류를 발생시키는 잠재적 위험 요소를 줄여준다. 특히 규모가 큰 프로젝트일수록 유지보수 비용을 줄이는 데 도움이 된다.
• 안티 패턴
• 안티 패턴이란 습관적으로 많이 사용하는 패턴이지만 성능, 디버깅, 유지보수, 가독성 측면에서 부정적인 영향을 줄 수 있어 지양하는 패턴이다. 이 문서는 실수하기 쉬운 안티 패턴을 사례별로 설명하고 개선 방법을 가이드한다.
• 정적 분석
• 자바스크립트는 다른 언어에 비해 유연한 문법구조를 갖는다. 이런 특징이 가끔 뜻하지 않은 문제를 일으킨다. 가령, 문법적 오류가 아니라서 찾기 어려운 버그를 만들거나, 개발자의 의도를 파악하기 어려운 코드를 만들거나, 컴파일 단계가 없어서 코드를 실행하기 전까지는 알 수 없는 오류를 만든다. 코딩 컨벤션을 준수하면 가독성이 좋아지고 안티 패턴의 코드를 예방할 수 있으므로 어느 정도 해결 방법이 될 수 있다. 하지만 개발자가 코딩 컨벤션을 잘 따르고 있는지는 여전히 확인하기 힘들다. 하지만 정적 분석을 이용하면 코딩컨벤션을 자동으로 검증하고 잠재에러를 찾아내 자바스크립트의 단점을 보완한다.
• 성능 최적화
• 애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 사용자 경험에 안 좋은 영향을 끼친다. Pinterest는 긴 로딩 시간으로 인해 사용자가 페이지를 나가는 비율이 높았는데, 최적화를 통해 사용자 이탈률을 줄이고 매출은 40%로 증가시켰다. 이처럼 매출 실적과 연결될 정도로 웹 애플리케이션의 성능 최적화는 매우 중요하다. 이 가이드는 성능 최적화에 필요한 사전 지식을 설명하고, 웹페이지의 로딩과 렌더링 과정으로 나누어 각 과정에서 진행할 수 있는 다양한 최적화 방법을 소개한다.
• 디버깅
• 디버깅은 오류의 원인을 찾고 수정하는 과정이다. 다양한 플랫폼에서 구동되는 자바스크립트 특성상 플랫폼 별로 디버깅 도구가 다양하고, 사용법도 각기 다르기 때문에 보통 "자바스크립트 디버깅은 어렵다"고 말한다. 하지만 자바스크립트 디버깅 도구가 많이 발전했고, 특히 모던 브라우저의 개발자 도구는 대부분 유사한 기능과 UI를 제공하므로 어렵지 않게 디버깅 할 수 있다. 이 가이드는 디버깅 도구 중 가장 많이 사용하는 크롬 개발자 도구 중심으로 설명한다. 그리고 디버깅 환경이 조금 다른 인터넷 익스플로러(이하 IE) 개발자 도구도 설명한다.
• 의존성 관리
• 자바스크립트는 서버 통신 없이 사용자 입력값의 유효성을 빠르게 확인하기 위해 만들어졌다. 초기의 자바스크립트는 간단한 작업을 위해 만들어졌지만, 현재 자바스크립트는 중요한 웹 기술 중 하나로 빠르게 발전하고 있다. 자바스크립트로 구현할 수 있는 기능이 많아질수록 코드는 더 늘어났고, 더 복잡해졌다. 점점 불어나는 코드를 기능이나 페이지 단위로 분리하는 것은 자연스러운 변화였지만, 아래 그림과 같이 복잡한 의존 관계를 피할수 없게 되었다.
• 번들러
• 최신 자바스크립트 개발에서 모듈은 절대 빠져서는 안 될 용어 중 하나이다. 자바스크립트 파일을 기능 단위로 모듈화하고 이것을 하나로 묶어 관리할 방법이 필요하게 되면서 번들러의 역할도 중요해졌다. 번들러를 사용하면 소스 코드를 모듈별로 작성할 수 있고 모듈간 또는 외부 라이브러리의 의존성도 쉽게 관리할 수 있다. 이 가이드는 webpack 기반의 자바스크립트 개발 방식을 설명한다.
• 테스트
• 자바스크립트는 최근 몇 년간 비약적인 발전을 통해 사용 범위를 넓혀오고 있으며, 프론트엔드 환경에서 요구하는 애플리케이션의 수준도 나날이 복잡해지고 있다. 이와 더불어 자바스크립트의 테스트 환경도 짧은 기간 동안 많은 변화를 겪었는데, 특히 Node.js의 등장 이후 무수히 많은 도구가 쏟아져 나오며 빠른 속도로 발전해오고 있다.
• TOAST UI CodeSnippet
• CodeSnippet은 타입 체크나 배열 처리와 같이 자주 사용되는 코드의 모음으로, 외부 라이브러리와의 의존성을 줄이기 위해 만들었다. TOAST UI도 이런 이유로 CodeSnippet을 사용한다. CodeSnippet은 기능에 따라 여러개의 모듈로 분리되어 있어서, CodeSnippet 전체를 사용할 수도 있고, 필요한 모듈만 선택하여 사용할 수 있다. 하지만 TOAST UI 컴포넌트를 사용하고 있다면 반드시 CodeSnippet 전체를 사용하도록 한다.
• ES5 to ES6+
• ECMAScript(ES5나 ES2015의 ES는 ECMAScript의 줄임말이다.)는 Ecma 인터내셔널에서 정의한 ECMA-262 기술 규격에 정의된 표준 스크립트 프로그래밍 언어이다. ECMAScript는 1997년에 1판이 배포되고 그 뒤로 매년 2판, 3판이 배포되었다. 그 뒤 10년 뒤에 5판(ECMAScript 5 이하 ES5), 다시 6년 뒤인 2015년에 6판(ECMAScript 2015)이 배포되었다. 6판의 정식 명칭은 ECMAScript 6가 아닌 ECMAScript 2015(이하 ES6)이다. 이전엔 배포 주기가 길었지만, 빠르게 변화하는 개발 환경을 반영하여 숫자 대신 연도를 붙여 배포된다.
• jQuery
• jQuery는 파편화된 브라우저 환경에서 크로스 브라우징 이슈를 쉽게 처리할 수 있도록 관련 API를 제공하는 자바스크립트 라이브러리이다. 2006년 존 레식에 의해 처음 공개된 이후 10년이 넘도록 자바스크립트에서 가장 인기있는 라이브러리로써 널리 사용되었다. 최근에는 표준 API만으로도 DOM이나 Ajax 요청 등을 편리하게 다룰 수 있게 되었고 브라우저 간의 차이가 크게 줄어들면서 사용이 감소하는 추세이다. 또한 SPA(Single-page Application)가 대중화되면서 리액트, 뷰 등의 프레임워크가 jQuery의 역할을 상당 부분 대신하고 있다. 하지만 SPA로 작성할 필요가 없거나 구형 브라우저를 지원해야 하는 경우 jQuery는 여전히 유용하며, 크로스 브라우징 문제를 고민하지 않고 간결한 코드를 작성할 수 있도록 해 준다.

 

HTML/CSS/Sass