datacamp light
v2.5.0
로드맵 | 문서
HTML 페이지에 스크립트를 추가합니다( examples/standalone-example.html 에 예제가 있음).
< script type =" text/javascript " src =" //cdn.datacamp.com/dcl-react.js.gz " > </ script >그게 다야! 앱이 초기 페이지 로드 후 DataCamp Light 연습을 추가하는 경우(예: React 앱에서) 다음 함수를 호출하여 해당 새 연습을 초기화합니다.
initAddedDCLightExercises ( ) ;또한 연습 및 스크립트 태그를 스니펫으로 포함하여 stackoverflow.com 답변에서 JavaScript 라이브러리를 사용할 수도 있습니다.
JavaScript 라이브러리를 포함시킨 후 아래 형식으로 HTML 블록 작성을 시작할 수 있습니다. 이는 동적으로 연습으로 변환됩니다.
< div data-datacamp-exercise data-lang =" r " >
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code >
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code >
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code >
< div data-type =" hint " > Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > . </ div >
</ div > 예제에서 볼 수 있듯이 전체 운동은 data-datacamp-exercise 및 data-lang 두 개의 데이터 속성을 가진 단일 <div> 요소에 포함되어 있습니다. 첫 번째 속성 data-datacamp-exercise <div> 가 DataCamp Light 연습으로 처리되어야 함을 나타내고, 다른 속성 data-lang 어떤 프로그래밍 언어를 사용해야 하는지 지정합니다. data-lang 에 허용되는 값은 r 및 python 입니다. div의 높이를 px 로 설정하거나(최소 높이는 300px ) 샘플 코드 줄의 양에 따라 크기를 설정할 수 있는 선택적 속성 data-height 도 있습니다: data-height="auto" .
사전 연습 코드는 R/Python 세션이 초기화될 때 실행됩니다. 이를 사용하여 학생을 위한 데이터세트, 패키지 등을 미리 로드할 수 있습니다. 이를 지정하는 방법은 초기화 코드가 포함된 <code> 태그를 정의하고 다음과 같이 data-type 속성을 pre-exercise-code 로 설정하는 것입니다.
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code > 이 예에서는 (다소 쓸모없는) 변수 b 값 6 으로 초기화합니다.
처음에 코드 편집기에 표시될 샘플 코드를 설정하려면 샘플 코드를 포함하는 <code> 태그를 정의해야 하며 data-type 속성을 다음과 같이 sample-code 로 설정해야 합니다.
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >우리의 예는 단순히 몇 가지 줄바꿈과 함께 몇 가지 주석을 보여줍니다. JavaScript 라이브러리는 선행 들여쓰기 제거도 처리하므로 걱정할 필요가 없습니다.
솔루션 코드를 설정하려면 솔루션 코드를 포함하는 <code> 태그를 정의해야 하며 다음과 같이 data-type 속성을 solution 으로 설정해야 합니다.
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code > 제출 정확성 테스트는 사용자가 제출한 코드가 문제를 올바르게 해결하는지 확인하는 데 사용됩니다. 이에 대한 자세한 내용은 R 설명서와 Python 설명서를 참조하세요. SCT를 지정하는 방법은 SCT 코드가 포함된 <code> 태그를 정의하고 다음과 같이 data-type 속성을 sct 로 설정하는 것입니다.
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code > 이 예에서 첫 번째 줄은 사용자가 변수 a 선언했는지 여부와 해당 값이 솔루션 코드의 값과 일치하는지 확인합니다. 두 번째 줄은 print 기능이 호출되었는지 확인하고 마지막으로 연습이 성공적으로 완료되면 사용자에게 표시될 성공 메시지를 지정합니다.
힌트를 지정하려면 힌트를 포함하는 태그를 정의해야 하며 data-type 속성은 다음과 같이 hint 로 설정되어야 합니다.
< div data-type =" hint " >
Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > .
</ div > 예제의 경우처럼 힌트에 <code> 태그가 포함될 수 있습니다.
data-show-run-button 속성을 추가하세요.data-no-lazy-loading 속성을 추가하세요. 이로 인해 성능 문제가 발생할 수 있지만 iFrame 기반 페이지의 호환성 문제를 해결할 수 있습니다.[ data-datacamp-exercise ] {
visibility : hidden;
} data-datacamp-exercise 속성이 있는 div 는 DataCamp 학습 인터페이스의 최소 버전으로 변환됩니다(실제 내용은 www.datacamp.com을 방문하세요). 여기에는 DataCamp 서버에 연결하여 로컬 시스템에서 작업하는 것처럼 R 또는 Python 세션을 제공하는 세션 관리자가 포함되어 있습니다. R 및 Python 컴퓨팅 환경에는 가장 널리 사용되는 패키지가 포함되어 있습니다.
사용할 수 없는 패키지를 사용하려는 경우 이슈를 생성하면 설치할 수 있습니다(런타임에 패키지를 설치할 수 없음).
기여하고 싶다면 정말 좋습니다! Readme의 이 섹션을 읽고 이 프로젝트의 기술적 세부 사항에 대한 아이디어를 얻을 수 있습니다. 대부분 표준 React/Redux 프로젝트(TypeScript로 작성됨)로 구성되어 있으므로 이들 중 하나에 익숙하지 않은 경우 조금 읽어 보는 것이 좋습니다.
DataCamp Light를 개발하려면 앱을 로컬에서 실행해야 합니다. 이 저장소에는 테스트할 수 있는 몇 가지 예제 연습이 포함되어 있습니다.
이 저장소를 복제하고, 종속성을 설치하고, 개발 서버를 시작하여 시작하세요. 변경하면 페이지가 새 코드로 다시 로드됩니다.
git clone https://github.com/datacamp/datacamp-light.git
cd datacamp-light
git checkout beta
npm i
npm start
vendor/ 폴더에는 현재 공개적으로 호스팅되지 않는 일부 내부 DataCamp 패키지의 축소된 코드가 포함되어 있습니다.
테스트 구현을 시작하기 전에 다음 두 문서를 읽어보십시오.
테스트 파일 이름은 {moduleName}.spec.js 입니다.
npm test 리듀서는 순수 함수이기 때문에 테스트하는 것이 그리 복잡하지 않습니다. 모의 상태를 생성하려면 시드를 사용해야 합니다. 그런 다음 테스트하려는 작업과 함께 인수로 감속기에 전달할 수 있습니다.
스냅샷 테스트를 사용하여 구성요소가 실수로 변경되지 않는지 확인하세요(예제는 src/components/Footer.spec.ts 참조). 내부에 로직이 있는 구성 요소에 대해 다른 테스트를 수행할 수 있습니다.
미들웨어 테스트는 부작용이 있기 때문에 좀 더 복잡합니다. Observable 스트림을 변환하므로 rxjs-marbles 프레임워크로 Epics를 테스트할 수 있습니다. 예제는 src/autocomplete.spec.ts 참조하세요.
우리는 형식의 일관성을 유지하기 위해 Prettier를 사용합니다. 이렇게 하면 사전 커밋 후크에서 파일(JS, TS, CSS, JSON)의 형식이 지정됩니다. 원하는 경우 prettier --write filename 호출하여 파일을 수동으로 업데이트할 수도 있습니다.
저장 시 자동 형식을 지정할 수 있는 prettier-vscode 와 같은 편집기용 플러그인도 있습니다.
편집기에 이러한 체커용 플러그인을 설치하는 것이 좋습니다. TSLint 및 Stylelint도 개발 명령에서 실행되므로 경고 팝업도 표시됩니다.
우리는 이모티콘이 있고 이모티콘이 ?이기 때문에 이 커밋 메시지 규칙을 사용해 왔습니다.
개발은 주로 development 브랜치에서 수행됩니다.
development 분기에 대한 커밋은 DataCamp 개발 환경에서 빌드를 트리거하고 여기에서 빌드를 생성합니다.
https://cdn.datacamp.com/dcl-react-dev.js.gz
다음으로, beta 브랜치에 커밋하여 릴리스를 스테이징 환경으로 푸시합니다.
https://cdn.datacamp.com/dcl-react-staging.js.gz
마지막으로 릴리스를 생성하면 업데이트가 프로덕션 환경으로 푸시됩니다. 이는 DataCamp Light의 안정적인 버전이어야 합니다.
https://cdn.datacamp.com/dcl-react.js.gz
이 분기에 커밋하면 DataCamp Dev 환경에 배포되는 빌드가 트리거됩니다. 메인 브랜치인 beta 에 대한 커밋이 빌드되어 스테이징에 배포됩니다. 릴리스가 생성되면 해당 빌드가 프로덕션에 배포됩니다.
물론 TypeScript입니다. 편집기와 함께 제공되지 않는 경우 편집기에 적합한 플러그인을 설치했는지 확인하세요.
관찰 가능한 미들웨어를 위한 redux-observable
쉽고 유형이 안전한 액션 생성자를 위한 typescript-fsa
매우 깨끗한 감속기를 위한 typescript-fsa-reducers
