아키텍처: 네트워크 응용[프런트엔드] 처음부터 2021년 - 섹션 2

코딩 스타일 가이드

테마 맞춤형

Es 코튼과 더 예쁜

Git 프리커밋 훅

국제화

코드 스타일 가이드

은 모든 제품에SCSS,ReactJS/VueJS/EmberJS,Handlebar,HTML5,Typescript,Javascript 등 다양한 언어와 도구를 사용한다.기다리다하나하나 모두 약간의 코드 표준이 있다.

웹 응용 프로그램의 전단을 구축하기 시작하면 제품의 전단 개발자와 함께 일할 수 있습니다.하지만 이따가 더 많은 개발자가 이 팀에 합류할 예정이다.

은 그때 개발자가 그/그녀 스타일의 코드를 작성하고 비표준 코드를 작성했다.이런 상황에서 앞으로 우리는 코드의 유지보수성, 기존 기능의 개발 지연에 직면하고 오류를 복구하는 데 더 많은 시간을 들여야 한다.

실시간 질문:

파일에서 1000행 코드

포함

서로 다른 페이지에서 같은 스타일의 코드를 작성합니다(공통 구성 요소가 아님).

코드 일치(한 개발자는 유행이 지난 함수를 작성하고 다른 개발자는 고급 발표 함수/방법을 작성한다)

솔루션:

은 프레임에서 추천하는 스타일 안내서를 사용하고 그것을 실행합니다.

은 기타 기술 대가들의 코드 스타일 가이드를 참고한다.

git 미리 제출 갈고리에eslint를 사용합니다(아래 상세하게 설명하겠습니다)

예:

Google

Airbnb

Vue 3

테마 사용자 정의

은 지난 몇 년 동안 각 SASS 제품에 대해 주제별 맞춤형 옵션을 제공합니다.사용자는 어두운 테마, 밝은 테마, 녹색 등 그들이 좋아하는 테마를 변경할 수 있습니다...기다리다

궁금한 게 있을 수도 있어요. why I am talking about this in web app architecture. it looks like a small one. 네, 그런데 장기적으로 보면 더 중요해요.

실시간 질문:

주제별 맞춤 구성은 고려하지 않았습니다.다음 단계에서 우리는 그것을 추가하고 싶다.이것은 더욱 복잡해질 것이다.스타일/CSS 파일이 계속 증가하고 있기 때문입니다.모든 스타일 파일에 테마 맞춤형 변경 사항을 추가해야 합니다.

솔루션:

은 제품을 설치할 때 테마 맞춤형 라이브러리도 추가했습니다.

은 각 색상 코드에 변수를 사용하고 액세스 가능한 모든 파일을 제공합니다.

참조:

Styled component

CSS Custom properties

CSS-Modules

더욱 아름답다

웹 응용 프로그램을 설치할 때 반드시 추가해야 합니다.자바스크립트 코드의 표준 문제와 코드 형식을 유지하는 데 도움이 될 것입니다.

Eslint는 개발자의 구성에 따라 JS 코드 문제를 파악하는 데 도움이 됩니다.기본적으로, 이것은 eslint 기본 eslint 규칙 설정을 검사합니다.만약 필요하다면, 우리는 사용자 정의 규칙을 사용할 수 있다.eslintrc.{js,yml,json} 파일.

Prettier는 제품 코드의 정갈함과 형식을 유지하는 데 도움이 됩니다.그 주요 장점은 코드 라이브러리가 통일되어 읽기와 수정이 쉽다는 것이다.다음 예제를 참조하십시오.
예전에는 더 예쁜 게 없었어요.

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {

  if(!greeting){return null};

     // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")

  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>

    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: '\grey'}}>", "</span> }
    <em>
    { greeted }
    </em>
    { (silent)
      ? "."
      : "!"}

    </div>;
}

예전에는 더 예쁜 게 없었어요.

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver,
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/\.\d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        " "
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}

참고 문헌

에스린(https://eslint.org/docs/user-guide/getting-started)

VS 코드(https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code)

보너스:

우리가 VS 코드를 사용하여 작업을 할 때, 우리는eslint 문제를 검사할 수 있다.그래서 만약에 우리가 VScode를 추가했다면.우리는 명령을 사용하여 검사할 필요가 없다.

NOTE: Es-lint and prettier set up in VS code and the product is an added advantage. but, it must have in the product.

Git 프리커밋 훅

사전 제출 갈고리는 기본적으로 개발자가 변경 사항을 지점으로 전송할 때 사용자 정의 스크립트를 검사한다.만약 스크립트가 어떤 오류를 되돌려 주지 않았다면, 코드를 전송할 수 있습니다.만약 오류가 있다면, 그것은 그것을 단말기에 던질 것이다.

실시간 질문:

개발자는eslint 오류와 포맷되지 않은 코드로 코드 변경을 전송할 수 있습니다.명령행을 향한 것이기 때문이다.아마도 개발자는 이런 오류를 검사하는 것을 잊었을 것이다.

솔루션

은 프로젝트에 미리 제출된 연결 스크립트를 추가합니다.

참고 문헌

Huskey

Setup and pre-commit hook

국제화

Internalization은 영어, 독일어, 스페인어 등 다양한 언어를 지원하기 위한 것입니다.기다리다

실시간 질문:

은 내부화 지원을 고려하지 않은 상황에서 응용 프로그램을 구축하는 것은 제품 코드 템플릿을 재구성하는 것과 같다.우리가 내부화를 지원할 때복사된 텍스트는 이전 텍스트와 완전히 다르다.예:

번역 지원 없음:

<p>Hello world</p>

번역 지원 제공:

<p>{{t "Hello world"}</p>

솔루션:
기본적으로

은 핵심 언어 설정의 내부화 지원을 사용합니다.

참고 문헌
Base setup for all language
이 글을 읽어 주셔서 감사합니다.😊
세 번째 부분이 곧 옵니다...