promises training
v2.0.1
경고
이 패키지를 종속성으로 설치하지 마십시오! (참조 : 시작하기)
현재 약속은 JavaScript에서 비동기식 작업을 처리하는 방법이며, 그로 인해 JavaScript 개발자의 지식의 기본 부분입니다.
그러나 우리가 처음으로 약속을 배우면, 우리는 충분히 충분히 배우는 것만으로 , 즉, 약속을 사용하는 방법, (요즘, async/await 가능 가능성이 높음), Promise.all . 모든 방법 및 그게 그다지 배웁니다.
이 접근법은 일상 생활에서 대부분의 문제를 해결하기에 충분하기 때문에 초보자에게는 의미가 있지만, 반복되는 문제는 그들이 거기서 멈추는 것 , 즉이 초기 지식을 지나치지 않는다는 것입니다.
그리고 더 복잡한 문제를 해결하려면 더 깊은 이해가 필요하기 때문에 많은 개발자들을 현재 수준으로 유지하는 것은 "자세한 내용은"자세한 내용입니다.
따라서 개발자 기술을 다음 단계 로 끌어 올리려면 얕은 물에서 수영하는 것이 그것을 자르지 않으면 더 깊어지고 , 약속을 완전히 이해해야하며, 그들이 어떻게 작동하는지, 당신은 async/await then/catch 수 있어야합니다.
또한 약속이 궁극적으로 비동기 작업을 처리하는 추상화이므로 비동기 프로그래밍과 관련된 일반적인 문제를 해결할 수 있다는 것은 필수입니다.
이를 염두에 두고이 프로젝트를 정확하게 만들었습니다.
이 주제를 둘러싼 설명과 실습 연습을 모두 제공 함으로써이 프로젝트는이 주제를 마스터하기위한 여정에서 동반자가되는 것을 목표로합니다.
이미 노련한 개발자이더라도 concrete/parallelMaxConcurrency , concrete/concurrencyOverride , concrete/extractingResolvers 및 /foundation/promise 흥미로운 과제를 제시하는 것과 같이 한두 가지를 배울 수 있습니다.
중요한
이 프로젝트는 처음으로 약속을 배우는 사람들을위한 것이 아닙니다. 약속에 대한 기본 지식, 그들이 대표하는 것에 대한 기본 지식, async/await 및/ then/catch 로 사용하는 방법을 가지고 있다고 가정하기 때문입니다.
경고
주의 :이 레포는 최종 사용자 인 경우 기여하지 않는 한 복제되지 않습니다. 아래 지침을 따르십시오.
먼저 프로젝트를 설치하려면 실행하십시오.
npm create promises-training@latest메모
이 프로젝트는 운동 중심이므로 주요 목표는이를 해결하는 것입니다.
때때로,해야 할 일을 이해하는 데 도움이되는 연습과 함께 설명과 해결 된 문제에 대한 일부 맥락이있을 것입니다.
연습은 세 가지 범주로 나뉩니다.
중요한
카테고리에 대한 특정 순서는 없으며, 다른 하나에서 시작하여 다른 하나를 완전히 완료하기 전에 다른 하나로 전환 할 수 있습니다. 그러나 연습은 다음에 논의 될 수준이 다릅니다.
운동은 src/exercises/<category> 폴더 내에 있으며 <category> 는 위에서 언급 한 범주 중 하나입니다.
그래프 연습의 경우, 기본 설명은이 readme, 그래프 섹션에 있으며 각 연습의 경우 해당 특정 운동의 종속성 그래프를 나타내는 graph.png 가 있습니다.
콘크리트 및 기초 연습의 경우 설명은 연습 폴더 내부의 README.md 에 있습니다 (예 : src/exercises/concrete/parallelChunks/README.md ).
운동을 해결하려면 src/exercises/<category>/<exercise>/exercise.ts 파일을 편집해야합니다.
운동을 해결 한 후에는 다음을 수행하여 솔루션을 확인할 수 있습니다.
npm run check < category > / < exercise > 테스트는 src/tests 내에 있습니다.
일반적으로 테스트가 구현을 보지 않고 정확히 무엇이 잘못되었는지 알려주는 방식으로 테스트가 고안되므로 연습 폴더 내부에서만 작동하지만, 어떤 이유로 든 갇혀 있거나 호기심이 발생하면 엿볼 수 있습니다.
src/lib 폴더는 내부 사용을위한 것이므로 귀찮게하지 마십시오.
또한 설치를 향후 버전과 호환하기 위해 src/exercises 폴더 외부의 파일을 수정 하지 마십시오 .
카테고리 외에도 운동은 레벨로 나뉘어져 있으며, 수준을 통과함에 따라 운동이 어려움이 증가합니다.
세 가지 레벨이 있습니다.
이 분류는 다소 주관적이므로 YMMV와 다음 연습을 위해 모든 운동을 완료 할 필요는 없습니다.
메모
보시다시피, 현재는 고급 운동이 많지 않지만 시간이 지남에 따라 새로운 운동이 추가 될 것입니다.
각 운동에는 자동 테스트가 동반되어 솔루션을 확인할 수 있습니다.
단일 운동 테스트를 실행하려면 실행하십시오.
npm run check < category > / < exercise > 예를 들어, parallelChunks 운동에 대한 테스트를 실행하려면 실행하십시오.
npm run check concrete/parallelChunks또는 그래프 연습 번호 2를 실행하려면 실행하십시오.
npm run check graph/2/test.test.ts메모
이전 예에서는 /test.test.ts 연습 파일에 추가해야했습니다. 그렇지 않으면 2에서 29의 연습과 같은 2 로 시작하는 다른 그래프 연습에 대해서도 실행됩니다.
우리는 Vitest를 테스트 러너로 사용하므로 모든 CLI 옵션을 사용할 수 있습니다.
또한 그래프 연습에는 그래프 자체에서 자동으로 생성 된다는 점에서 그래프 연습이 몇 가지 특성을 가지고 있으며, 그로 인해 일부 연습에는 엄청난 수의 테스트가 있습니다 (일부 연습에는 100K 이상의 테스트가 있습니다).
물론, 우리는 엄청나게 느리게 진행되므로 모두 실행하지 않으므로 하위 집합 만 실행하고 실행중인 테스트 수 와 서브 세트 도 조정할 수 있습니다.
그래프 연습 섹션에서 더 많이 읽을 수 있습니다.
현재 세 가지 운동 범주가 있습니다.
비동기적인 작업을 다루는 데있어 큰 부분은 각 작업이 가능한 빨리 시작되도록 조정하고, 이러한 작업을 올바르게 조정하려면이 작업 간의 종속성 관계를 이해해야합니다.
이 카테고리에서는 각 연습에 종속성 그래프가 제공되며 가장 효율적인 방법으로 그래프의 작업을 조정합니다.
연습이 오케스트레이션 자체에 중점을 두므로, 작업은 createPromise(label) 호출하여 생성됩니다. 여기서 label 작업을 식별하는 문자열입니다.
예를 들어이 그래프를 선택하십시오.
이 그래프에는 A 와 B , B 는 A 에 따라 다르며 B는 B 에서 나오고 A 로 가리키는 화살표로 표시됩니다.
즉, B A 완료된 후에 만 시작할 수 있으며 A 다른 작업에 의존하지 않기 때문에 즉시 시작할 수 있습니다.
따라서이 그래프의 가장 효율적인 구현은 다음과 같습니다.
await createPromise ( "A" ) ;
await createPromise ( "B" ) ;작업은 또한 하나 이상의 작업에 의존 할 수 있습니다.
이 그래프에서 C A 와 B 모두에 따라 달라 지므로 A 와 B 모두 완료된 후에 만 시작할 수 있습니다.
그러나 A 와 B 는 다른 작업에 의존하지 않으므로 즉시 시작할 수 있습니다.
이 그래프의 가장 효율적인 구현은 다음과 같습니다.
await Promise . all ( [ createPromise ( "A" ) , createPromise ( "B" ) ] ) ;
await createPromise ( "C" ) ;작업에는 세트 중 하나가 충족되면 작업이 시작될 수있는 여러 가지 종속성 세트가있을 수 있습니다.
이 그래프에서 C A 또는 B 의 B에 의존하며, 각 종속성 세트에 대해 다른 색상을 사용하여 표시됩니다. 색상 자체는 특정한 의미가 없으며, 이와 같이 사용되므로 종속성이 서로 구별됩니다.
따라서 A 또는 B 끝나 자마자 C 시작될 수 있습니다.
await Promise . any ( [ createPromise ( "A" ) , createPromise ( "B" ) ] ) ;
await createPromise ( "C" ) ;마지막으로, 약속에는 두 가지 가능한 결과가 있습니다. 이는 성취되거나 거부 될 수 있습니다.
이 그래프에는 A A 이행 및 작업 C 에 의존하는 작업 B 가 있습니다.
중요한
점선 가장자리는 약속 거부를 나타내는 데 사용됩니다.
이것은 B A 이행 된 후에 만 시작할 수 있으며 C A 거부 된 후에 만 시작할 수 있음을 의미합니다.
이러한 결과 중 하나만 가능하므로 B 또는 C 수행됩니다.
해당 구현 :
try {
await createPromise ( "A" ) ;
try {
await createPromise ( "B" ) ;
} catch { }
} catch {
await createPromise ( "C" ) ;
} 그래프 연습을 할 때는 mixed , asyncAwait , thenCatch 세 가지 기능이 내보내는 것을 알 수 있습니다.
아이디어는 3 가지 구현을 제공하는 것입니다.
mixed : 이것은 완전히 무료이며, 비동기/기다렸다가/캐치를 모두 혼합 할 수 있습니다.asyncAwait :이 중에서만 Async/Sewait 만 사용해야합니다.thenCatch :이 중에서만 사용해야합니다.이렇게하면 두 가지 스타일의 약속 처리에 능숙 해집니다.
또한 파일의 끝에서, 내보내기가 건너 skipExercise 에 랩핑되어 해당 구현에 대한 테스트를 건너 뛰면서 출력을 흩 뜨리지 않도록합니다.
이 세 가지 각각에 대한 솔루션을 구현할 때 테스트를 실행하려는 구현을 위해 skipExercise Call을 제거하십시오. 예를 들어, mixed 솔루션을 이미 구현 한 경우 skipExercise 를 제거하지만 구현할 때까지 asyncAwait 및 thenCatch 의 용액을 보관하십시오.
그래프 연습에 대한 구현 디버깅을 돕기 위해 다른 실행 "경로"를 시뮬레이션 할 수있는 UI를 만들었습니다.
UI를 열려면 실행 :
npm run graph:uiUI는 웹 앱으로 사용되며 다음과 같습니다.
이제 각 섹션을 살펴 보겠습니다.
왼쪽의 사이드 바를 사용하면 디버그하려는 운동을 선택할 수 있습니다.
이 상단 섹션을 사용하면 디버그하려는 구현을 선택할 수 있습니다.
오른쪽 사이드 바를 사용하면 약속을 해결/거부하여 운동의 실행 흐름을 제어 할 수 있습니다.
약속이 만들어지면 새로운 항목이 사이드 바에 추가됩니다.
센터 의이 섹션은 각 단계에서 생성되고 해결/거부 된 약속의 기록을 보여줍니다.
하단 의이 섹션에서는 각 단계에서 해결/거부 된 약속의 요약을 순서대로 보여줍니다.
그래프 연습은 그래프 (DUH)를 기반으로하기 때문에 주어진 연습에 대해 가능한 모든 테스트를 자동으로 생성 할 수 있습니다.
상상할 수 있듯이 생성 된 테스트의 수는 때때로 거대하므로 실행되는 최대 테스트 수에 대한 상한이 있습니다.
또한 편견을 방지하기 위해 생성 된 순서 대신 테스트를 실행하지 않고 대신 셔플합니다 .
이 셔플 링은 테스트가 처음 생성 된 직후에 발생하므로 테스트가 결정적 이므로 그래프 연습 테스트를 실행할 때마다 동일한 하위 세트 의 테스트를 실행하게됩니다.
그러나 실행중인 테스트의 캡 과 하위 집합을 모두 조정할 수 있습니다.
캡을 조정하려면 npm run graph:setGraphTestsCap <number> 실행할 수 있습니다.
예를 들어, 캡을 10000으로 설정하려면 실행하십시오.
npm run graph:setGraphTestsCap 10000 실행중인 테스트의 하위 집합을 조정하려면 npm run graph:shuffleGraphTestData <graph-exercise-number> 는 지정된 그래프 연습에 대한 테스트를 개편하여 다른 하위 세트가 발생합니다.
예를 들어, 그래프 연습 번호 2에 대한 테스트를 개편하려면 실행하십시오.
npm run graph:shuffleGraphTestData 2그래프 연습은 작업 간의 종속성 관계를 이해하는 데 적합하지만, 가능한 시나리오의 전체 스펙트럼을 다루지 않으며, 컴파일 시간에 종속성이 알려진 작업 만 그래프로 표시 될 수 있으므로.
따라서 우리는이 범주의 콘크리트 운동을 가지고 있으며, 여기서 구현해야 할 구체적인 시나리오가 제공 될 것입니다.
이 카테고리의 각 운동은 독특하기 때문에 설명은 폴더와 함께 제공됩니다.
기초 연습은 약속 관련 기능을 되풀이함으로써 약속의 기초에 대한 이해를 강화하는 데 도움이되도록 설계되었습니다.
설명은 운동과 함께 통합됩니다.
연습에 대한 솔루션은이 저장소 (예 : https://github.com/henriqueinonhe/promises-training/blob/master/src/exercises/concrete/concurrencyabort/exercise.ts)에서 찾을 수 있습니다.
그러나 운동을 해결하는 것이 목표는 목표가 배우기위한 것이므로 운동을 직접 해결 한 후에 만 솔루션 만 확인하는 것이 좋습니다.
또한 현재 제시된 솔루션이 반드시 가장 좋은 솔루션은 아닙니다 . 즉, 솔루션이 여기에서 찾을 수있는 솔루션과 전혀 닮지 않더라도 나쁘다는 것을 의미하지는 않습니다.
최신 버전으로의 업그레이드를 쉽게하기 위해 솔루션을 보존하면서 설치를 최신 버전으로 자동 마이그레이션하는 마이그레이션 스크립트를 만들었습니다.
마이그레이션 스크립트를 실행하려면 실행하십시오.
npm create promises-training@latest -- --migrate이 프로젝트는 CC-By-NC-ND 4.0에 따라 라이센스가 부여됩니다.
이 프로젝트의 목표는 무료 학습 리소스가되어 영원히 자유롭고 접근 할 수있는 것입니다.
다음은 라이센스와 관련된 몇 가지 일반적인 질문에 대한 Q & A입니다.
이 프로젝트를 자기 또는 그룹 연구에 사용할 수 있습니까?
예, 제발하십시오.
내부 회사 교육 에서이 프로젝트를 사용할 수 있습니까?
예, 프로젝트를 인정하고 프로젝트가 교육과 독립적으로 자유롭게 액세스 할 수 있음 을 분명히합니다.
이 프로젝트를 유료 멘토링/워크샵 세션에 사용할 수 있습니까?
그렇습니다. 프로젝트에 신용하는 한 프로젝트가 멘토링/워크샵과 독립적으로 자유롭게 액세스 할 수 있음 을 분명히하고 프로젝트 자체를 위해 시간을 청구하고 있음을 분명히하십시오. 프로젝트가 자신의 자료의 일부가 아니라는 것을 분명히하십시오.
유료 온라인 코스 에이 프로젝트를 사용할 수 있습니까?
그렇습니다. 프로젝트를 인정하는 한, 프로젝트가 온라인 코스와 독립적으로 자유롭게 액세스 할 수 있음 을 분명히하고 프로젝트 자체를 위해 시간을 청구하고 있음을 분명히하십시오. 프로젝트가 자신의 자료의 일부가 아니며 귀하 또는 귀하의 서비스를지지하지 않는다는 것을 분명히하십시오.
이 프로젝트의 포크를 만들어 내 목적으로 사용할 수 있습니까?
아니, 당신은 할 수 없습니다. 이 프로젝트를 수정 없이만 사용할 수 있습니다. 이것은 사람들이 포크를 만들지 못하게 한 다음 충전하는 것을 막기 위해 필요합니다.
이 프로젝트를 기반으로 온라인 코스를 만들 수 있습니까?
아니요, 우리는이 프로젝트 주위에 "포장지"를 만들고 청구하는 사람들을 원하지 않기 때문에 할 수 없습니다.
라이센스와 관련하여 궁금한 점이 있거나 특정 사용 사례에 대해 이야기하고 싶다면 [email protected]으로 저에게 연락하십시오.
