preactCalculator
1.0.0
나는 오스틴 시내에서 스타트 업과 함께 프론트 엔드 개발자 위치를위한 코딩 도전의 일환 으로이 앱을 구축했습니다. 이 앱은 preact, css-grid 및 flexbox를 사용하는 간단한 계산기입니다.
빠른 시작
디자인 개념
사용 된 기술
테스트 및 빌드 프로세스
로컬 컴퓨터 에서이 앱을 테스트하거나 보려면이 저장소를 복제하십시오. 새로 복제 된 저장소로 이동하여 다음 명령을 실행하십시오.
yarn또는 NPM 사용자의 경우 :
npm install그런 다음 실행 :
yarn start또는 NPM 사용자의 경우 :
npm starthttp : // localhost : 8080/로 이동하고 재미있게 보내십시오!
이 도전에 대한 설계 사양이 제공되지 않았습니다. 나는 기뻐하면서 디자인에 대한 자유 통치권을 받았다. 내가 신청했던 직업을 염두에두고, 나는 내 제품을 고객에게 수용하기로 결정했다. 따라서 색 구성표, 팔레트 및 Favicon조차도 의도적으로 홈페이지와 유사합니다. (아이디어는 클라이언트가 프로덕션 웹 사이트에서 정확히 동일한 디자인을 선택했을 때이 설계 체계에 선호도를 이미 표시했다는 것입니다. 또한 세부 사항에 대한 관심도 표시됩니다.)
다음은 비교를위한 사진입니다.
원본 웹 사이트 
계산기 앱 
나는이 코딩 챌린지를 새로운 원시 CSS 그리드 (한동안 의미했던 것)와 함께 플레이 할 수있는 기회로 사용했습니다. CSS 그리드는 놀랍지 만 그리드 영역 속성을 소품으로 전달하는 것은 거의 불가능합니다.
또한 Flexbox를 사용하여 내용과 요소를 중앙에 사용했습니다. 나는 Flexbox의 열렬한 팬이며 다른 타사 그리드 솔루션보다 선호하거나 요소 포지셔닝에 플로트를 사용합니다.
이 앱은 아마도 Calc () 기능에 대한 정당한 사용 사례를 처음으로 사용했을 것입니다! Calc ()를 사용하여 메인 페이지 높이를 100VH로 설정하여 헤더 바의 높이와 하단 오프셋을 설정하여 요소가 겹치지 않도록합니다.
디자인 프로세스 전체에서 나는 여기에 설명 된 몇 가지 기본 UI 디자인 원칙을 준수하려고 시도했다.
이 앱은 다음을 사용합니다.
CSS 네이티브 그리드
플렉스 박스
preact
preact-router
preact cli
모카
차이
eslint
CSS 네이티브 그리드는 매우 인상적이지만 구형 브라우저에서는 브라우저 지원이 부족할 수 있습니다. CSS 스타일을 다른 중첩 구성 요소에게 소품으로 전달하는 것은 매우 어렵습니다. 특히 각 어린이 구성 요소가 CSS 기본 그리드와 함께 일하기 위해 고유 한 위치 속성이 필요한 경우. 문자열 유형 소품을 CSS 클래스 스타일링에 대한 참조로 평가하면 실패합니다. Prect 문서에서 바로 예제를 사용하더라도. CSS-Grid는 문자열을 그리드 지역 주장으로 받아들이지 않습니다. 내 프로그램은 CSS var 참조와 JS 참조를 식별 할 수 없습니다.
Flexbox는 놀랍고 CSS 네이티브 그리드보다 더 나은 브라우저 지원을 제공합니다. 더 이상 그것에 대해 말할 필요가 없습니다.
Preact는 흥미로운 기술입니다. 나는 그것이 가볍고, 또한 빠른 기능을 좋아하고 REACT와 거의 일치하지만 MIT 라이센스와 거의 일치합니다. React 생태계와 비교할 때 빌드 도구 중 일부가 부족한 것 같습니다.
이 앱의 preact-router는 최소한의 설정 일뿐입니다. 나는 그것에 대해 깊이 이야기 할만 큼 충분히 다루지 않았습니다.
PreAct CLI의 설정은 테스트 명령 부족과 잘못 구성된 ESLINT 설정 (또는 자체 유효성 검사 규칙을 위반하는 코드) 모두에서 상자에서 실패합니다. 테스트 설정이 부족하고 내 자신의 구성을 구성해야했습니다 (나중에 자세히 설명). 모든 빌드 시스템 구성의 경우 카르마 사용은 내가 수집 한 것과 약해야합니다. 그들의 빌드 명령도 실패합니다.
테스트 스위트 설정에 Mocha와 Chai를 사용합니다. 시간 테스트 된 클래식입니다.
Eslint는 상자 밖으로 포함되었습니다 (실패, 나중에 더 자세히 덮을 것입니다).
계산기 구성 요소에 포함 된 모든 응용 프로그램 로직. 다른 모든 것은 순수한/기능적 구성 요소입니다. 더 복잡한 앱을 구축해야한다면 Mobx 또는 Redux가 순서대로했을 것입니다.
Mobx 또는 Redux는 또한 기능 테스트에 도움이되었을 것입니다. 처음에는 구성 요소에서 논리를 분리하려고 시도했지만 상태를 수정하는 논리와 관련하여 'this'의 맥락을 보존하기는 어렵습니다. 따라서 나는 구성 요소에 직접 논리를 작성하기로 결정했습니다. 상태의 컨텍스트없이 별도의 파일에서 상태 인식이 필요한 방법을 가져 오면 불필요하게 사물을 복잡하게 만듭니다 (어쨌든 우리는이 응용 프로그램에 몇 가지 방법 만 가지고 있기 때문에 과도합니다).
상태의 주제에서 JavaScript Eval ()은 비 스트링 피연산자를 허용하지 않습니다. 정수를 잘 처리 할 수 있지만 피연산자를 고려하지 않으므로 응용 프로그램이 파멸됩니다! 나는이 일이 발생하지 않도록 상태의 모든 계산 크리티컬 데이터를 문자열로 처리하고 있습니다.
무작위로,이 앱은 LocalHost에서 실행되는이 앱은 고객 현재 프로덕션 웹 사이트와 비교할 때 4 가지 범주의 PWA, 성능, 접근성 및 모범 사례에서 Lightbox 평가에서 더 높은 점수를받습니다.
응용 프로그램 개발 중에 추가 종속성을 최소한으로 유지하려고 시도했습니다.
테스트 스위트는 yarn test 또는 npm test 로 실행할 수 있습니다. 테스트 스위트는 컴퓨터에 글로벌 모카 설치를 가정합니다.
PREACT 라이브러리 자체에는 테스트 = PREACTJS/PREACT#658과 관련된 공개 문제가 있습니다. 그들의 해결 방법은 https://github.com/developit/preact-jsx-chai/라는 작은 알려진 라이브러리를 사용하는 것이 불행히도 라이브러리가 저에게 효과가없는 것 같습니다.
테스트 구성은 고통입니다. 바벨 구성은 preact cil에 의해 숨겨져 있습니다. 구성에 액세스 할 수 없습니다. "테스트 파일을 구성 요소 자체와 동일한 딥에 배치 할 때에도"예상치 못한 토큰 '가져 오기'를 얻습니다. 테스트는 기다려야합니다. 다시 한 번, 분리 된 기능 테스트를 허용하기 위해 다른 대안을 구현해야합니다.
테스트 주제에 대해 다음과 관련된 많은 문제가 있습니다.
preactjs/preact-compat#233
preactjs/preact#146
https://gist.github.com/robertknight/88e9d10cff9269c55d453e5fb8364f47 (슬프게도 직관적 인 웹 팩 구성 및 설정 부족은 여전히이 방법으로 실패하게됩니다).
preactjs/preact#658 (공개 문제, 어려운 preact 테스트 설정은 현재 솔루션이없는 것으로 알려진 문제입니다.)
preactjs/preact#560 (preact가 어떻게 의견을 제시하는지에 대한 접촉을하고 다른 의존성으로서 업장이 필요합니다.)
https://gist.github.com/developit/9b0bb57b3e001de67814c7f4de9cbfbf (이것은 내가 먼저 시도한 것이 었습니다. 운이 좋지 않습니다.)
https://preactjs.com/guide/unit-testing-with-enzyme (그들의 문서는 문자 그대로 하나의 섹션이며 정확한 업장 설정에 대한 대안을 제공하지 않습니다.)
그리고 엘리닝에서 eslint는 상자 밖으로 실패합니다. 나는 4 개의 공간을 사용하여 들여 쓰고 있습니다. eslint preact 기본 플러그인이 탭으로 설정되어 오류가 발생합니다. 그럼에도 불구하고 테스트 설정은 실행되며 Eslint 구성 설정을 플러그 앤 플레이 할 수 있습니다. 클라이언트 특정 요구 사항에 맞게이 설정을 즉시 다시 구성 할 수 있습니다.
