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

7225 단어 webdevbeginnersarchitecture
  • 코딩 스타일 가이드
  • 테마 맞춤형
  • 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
    이 글을 읽어 주셔서 감사합니다.😊
    세 번째 부분이 곧 옵니다...
    Path Parameter_React
    [JS30] -1) Drum Kit

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage