diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/learn/tools_and_testing | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/ko/learn/tools_and_testing')
5 files changed, 955 insertions, 0 deletions
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.html new file mode 100644 index 0000000000..34a443990a --- /dev/null +++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -0,0 +1,165 @@ +--- +title: Understanding client-side JavaScript frameworks +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">자바스크립트 프레임워크는 최신 프론트엔드 웹 개발의 필수 부분으로, 개발자에게 확장 가능한 대화형 웹 응용 프로그램을 구축하기 위한 검증된 도구를 제공합니다. 많은 현대 기업들은 프레임워크를 도구화(tooling)의 표준 부분으로 사용하기때문에, 프론트엔드 개발에는 이제 프레임워크 경험이 필요합니다.</p> + +<p class="summary">프론트엔드 개발자 지망생으로서 프레임워크를 배울 때 시작해야 할 부분을 알기가 어려울 수 있습니다. 선택할 수 있는 프레임워크가 너무 많고, 새로운 프레임워크는 항상 나타나고,대부분 유사한 방식으로 작동하지만 다른 일을 합니다. 때문에 프레임워크를 사용할 때 주의해야 할 몇 가지 사항이 있습니다.</p> + +<p class="summary">이 글에서는 프레임워크를 배우는데 도움이되는 편안한 출발점을 제공하고자 합니다. 우리는 React/ReactDOM, Vue, 또는 그외 특정 프레임워크에 대해 알아야 할 모든 것을 철저하게 가르치려는것이 아닙니다. 프레임워크 자체 문서들 및 다른 리소스들이 이미 철저하게 가르쳐주고 있습니다. 대신 우리는 다음과 같은, 보다 근본적인 질문에 답하고 지원하려고 합니다.</p> + +<ul> + <li class="summary">왜 프레임워크를 사용해야 하나요? 그들이 어떤 문제를 해결하나요?</li> + <li class="summary">프레임워크를 선택할 때 어떤 질문을 해야 하나요? 프레임워크를 사용해야 하나요?</li> + <li class="summary">프레임워크에는 어떤 기능이 있나요? 그것들은 일반적으로 어떻게 작동하고, 이러한 기능에 대한 프레임워크에 구현은 어떻게 다른가요?</li> + <li class="summary">"vanilla" 자바스크립트 또는 HTML과 어떤 관련이 있나요?</li> +</ul> + +<p class="summary">그 후에, 우리는 몇 가지 다른 프레임워크 선택의 핵심을 다루는 튜토리얼을 제공할 것입니다. 이는 더 심도있게 학습하기에 충분한 맥락과 친숙함을 제공해줄겁니다. 우리는 여러분이 앞으로 나아가 접근성과 같은 웹 플랫폼의 근본적인 모범 사례를 잊지 않는 실용적인 방법으로 프레임워크에 대해 배우고 발전시키기를 바랍니다.</p> + +<p class="summary"><strong><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">"클라이언트 사이드 프레임워크 소개"문서로 지금 시작하세요!</a></strong></p> + +<h2 id="전제조건">전제조건</h2> + +<p>클라이언트 사이드 프레임워크를 배우기 전에 <a href="/ko/docs/Learn/HTML">HTML</a>, <a href="/ko/docs/Learn/CSS">CSS</a>, <a href="/ko/docs/Learn/JavaScript">JavaScript</a> 와 같은 핵심 웹 언어의 기초를 익혀야 합니다.</p> + +<p>결과적으로 코드는 더욱 풍부해지고 전문적이게 될 것이며, 프레임워크가 구축하고 있는 근본적인 웹 플랫폼 기능을 이해한다면 보다 확실하게 문제를 해결할 수 있을 겁니다.</p> + +<div class="in-page-callout webdev"> +<h3 id="프론트_개발자가_되고_싶으신가요">프론트 개발자가 되고 싶으신가요?</h3> + +<p>목표를 달성하는데 필요한 모든 필수 정보가 포함 된 과정을 구성했습니다.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">시작하기</a></p> +</div> + +<h2 id="입문_가이드">입문 가이드</h2> + +<dl> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. 클라이언트 사이드 프레임워크 소개</a></dt> + <dd>우리는 이 영역에 대한 일반적인 개요로 프레임워크를 살펴 볼겁니다. 자바스크립트와 프레임워크의 간략한 역사, 프레임워크가 왜 존재하는지와 그들이 우리에게 무엇을 제공하는지, 학습을 프레임워크를 어떻게 선택할지 생각하는 방법, 클라이언트 사이드 프레임워크에 대한 어떤 대안이 있는지 등이 해당합니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. 프레임워크 주요 기능</a></dt> + <dd>각 주요 자바스크립트 프레임워크는 DOM 업데이트, 브라우저 이벤트 처리, 즐거운 개발 경험에 대해 다양한 접근 방식을 갖고 있습니다. 이 글에서는 "4대" 프레임워크의 주요 기능을 살펴보고 프레임워크가 높은 수준에서 작동하는 방식과 프레임워크의 차이점을 살펴봅니다.</dd> +</dl> + +<h2 id="리액트_튜토리얼">리액트 튜토리얼</h2> + +<div class="blockIndicator note"> +<p><strong>참조</strong>: React/ReactDOM 16.13.1과 create-react-app 3.4.1. 을 사용하여 2020년 5월에 마지막으로 테스트된 튜토리얼입니다.</p> + +<p>우리의 버전에 대해 여러분의 코드를 확인해야 하는 경우, 우리의 <a href="https://github.com/mdn/todo-react">todo-react repository</a>에서 샘플 React app 코드의 완성된 버전을 볼 수 있습니다. 라이브 버전을 실행하려면<a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>을 참조하세요.</p> +</div> + +<dl> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. React 시작하기</a></dt> + <dd>이 글은 리액트에 대한 첫걸음입니다. 우리는 리액트의 배경과 사용 사례에 대한 약간의 세부 사항을 학습합니다. 우리 컴퓨터 로컬에서 기본적인 리액트 툴체인을 설정하고, 간단한 스타터 앱을 만들어 리액트가 어떻게 작동하는지 배웁니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. React todo list 시작하기</a></dt> + <dd>우리가 React에서 개념 증명(proof-of-concept)을 작성하는 임무를 맡았다고 가정 해 봅시다. 사용자가 작업하려는 과제(task)를 추가, 수정, 삭제 혹은 그것들을 삭제하는 대신 완료된 것으로 표시할 수 있는 앱입니다. 이 글에서는 기본 앱 컴포넌트 구조와 스타일을 배치하는 과정, 각각의 컴포넌트를 정의하고 상호작용하는 방법을 설명합니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. React app 컴포넌트 세분화</a></dt> + <dd>이 시점에서 우리의 앱은 단일체(monolith)입니다. 우리는 이것을 관리 가능하고 설명적인 컴포넌트들로 분리해야 합니다. React에는 컴포넌트와 컴포넌트가 아닌것에 대한 엄격한 규칙이 없습니다. 그것은 사용자에게 달려있습니다. 이 글에서는 앱을 컴포넌트로 분해하는 합리적인 방법을 보여줍니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React 상호작용(interactivity): Events 와 state</a></dt> + <dd>컴포넌트 구성이 완성되면 완전한 정적 UI 에서 실제로 상호작용하고 변화시킬 수 있는 UI로 앱을 업데이트할 차례입니다. 이 글에서는 이벤트와 state에 대해 자세히 알아봅니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React 상호작용(interactivity): 수정, 필터링, 조건부 렌더링</a></dt> + <dd>리액트 여정이 끝날 무렵(적어도 현재로서는) Todo list 앱의 주요 기능 영역에 마무리 작업을 추가합니다. 여기서는 기존 과제(task)를 편집할 수 있도록 하고, 완료된 과제와 완료되지 않은 과제 모두 필터링 하는 작업이 포함됩니다. 또한 도중에 조건부 UI 렌더링도 살펴보겠습니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. React 접근성(Accessibility)</a></dt> + <dd>이 글에서는 React의 포커스 관리를 포함하여 접근성에 관점을 맞출것입니다. 키보드 전용 및 스크린 리더기 사용자 모두에게 유용성을 개선하고 혼동을 줄일 수 있습니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React 리소스(resources)</a></dt> + <dd>우리의 마지막 글은 학습을 계속하기 위해 사용할 수 있는 React 리소스 목록을 제공합니다.</dd> +</dl> + +<h2 id="Ember_tutorials">Ember tutorials</h2> + +<div class="blockIndicator note"> +<p><strong>참조</strong>: Ember/Ember CLI 3.18.0을 사용하여 2020년 5월에 마지막으로 테스트된 튜토리얼입니다.</p> + +<p>우리의 버전에 대해 여러분의 코드를 확인해야 하는 경우, 우리의 <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>에서 샘플 Ember app 코드의 완성된 버전을 볼 수 있습니다. 라이브 버전을 실행하려면 <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> 을 참조하세요. (여기에는 튜토리얼에서 다루지 않은 몇 가지 기능도 포함됩니다.)</p> +</div> + +<dl> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Ember 시작하기</a></dt> + <dd>첫 번째 Ember 글에서는 Ember 의 작동방식과 유용한 기능에 대해 살펴봅니다. 로컬에 Ember 툴체인을 설치하고, 샘플 앱을 만들어 개발 준비를 위한 초기 설정을 수행합니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app 구조와 컴포넌트화</a></dt> + <dd>이 글에서는 TodoMVC Ember app의 구조를 설계하는 방법에 대해 알아봅니다. HTML을 추가하고, HTML 구조를 컴포넌트로 나눕니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember 상호작용(interactivity): Events, classes, state</a></dt> + <dd>이제 앱에 상호작용하는 기능을 추가하여 새로운 할일(todo) 항목을 추가하고 표시할 수 있습니다. 그 과정에서 Ember 이벤트를 사용하는 방법을 살펴보겠습니다. 상호작용하는 기능을 제어하기 위해 자바스크립트 코드를 포함하는 컴포넌트 클래스를 만들고, 앱의 데이터 상태(state)를 추적하는 서비스를 설정합니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember 상호작용: 푸터 기능, 조건부 렌더링</a></dt> + <dd>이제 앱에서 푸터 기능을 시작할 차례입니다. 아직 완료하지 않은 할일(todo) 항목의 수를 카운트하고, 완료된 할일(체크표시한 체크박스)에 스타일을 올바르게 적용합니다. 또한 "Clear completed" 버튼을 연결합니다. 이 과정에서 템플릿에서 조건부 렌더링을 사용하는 방법을 배웁니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Ember 라우팅</a></dt> + <dd>이 글에서는 라우팅 또는 URL기반 필터링에 대해 설명합니다. 이를 사용하여 todo의 세 가지 뷰("All", "Active", "Completed")를 고유한 URL로 제공합니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember 리소스와 문제해결</a></dt> + <dd>마지막 Ember 글은 학습을 진행하는데 사용할 수 있는 리소스 목록, 유용한 문제 해결(troubleshooting)에 관한 내용, 그외 정보를 제공합니다.</dd> +</dl> + +<h2 id="Vue_tutorials">Vue tutorials</h2> + +<div class="blockIndicator note"> +<p><strong>참조</strong>: Vue 2.6.11을 사용하여 2020년 5월에 마지막으로 테스트한 튜토리얼입니다.</p> + +<p>우리의 버전에 대해 여러분의 코드를 확인해야 하는 경우, 우리의 <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>에서 샘플 Vue app 코드의 완성된 버전을 볼 수 있습니다. 라이브 버전을 실행하려면 <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a> 를 참조하세요.</p> +</div> + +<dl> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Vue 시작하기</a></dt> + <dd>이제 세 번째 프레임워크 뷰를 소개합니다. 이 글에서는 Vue의 배경을 약간 살펴보고, 설치 방법과 새 프로젝트를 만드는 방법에 대해 알아봅니다. 전체 프로젝트의 HLS(high-level structure) 와 각각의 컴포넌트를 공부합니다. 또한, 프로젝트를 로컬에서 실행하는 방법과 예제 작성을 시작할 준비를 합니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. 첫 번째 Vue 컴포넌트 만들기</a></dt> + <dd>이제 Vue에 대해 자세히 살펴보고 우리만의 커스텀 컴포넌트를 만들겠습니다. Todo list의 각 항목을 나타내는 컴포넌트를 만드는 것으로 시작합니다. 그 과정에서, 다른 컴포넌트 내에서 컴포넌트를 호출하고, props(properties)를 통해 데이터를 전달하고 데이터 상태를 저장하는 등 중요한 개념을 학습합니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Vue 컴포넌트 리스트 렌더링</a></dt> + <dd><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">이 시점에서 우리는 충분히 잘 작동하는 컴포넌트를 얻었습니다. 이제 앱에 여러 <code>ToDoItem</code> 컴포넌트를 추가할 준비가 되었습니다. 이 글에서는 <code>App.vue</code> 컴포넌트에 todo 항목 데이터 셋을 추가하는 방법을 살펴보고, <code>v-for</code> 지시문(directive)을 사용하여 <code>ToDoItem</code> 컴포넌트를 반복하여 출력합니다. </span></dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. 새로운 todo form추가: Vue events, methods, models</a></dt> + <dd>이제 샘플 데이터와 각 비트의 데이터를 가져와서 앱의 <code>ToDoItem</code> 내에 렌더링하는 루프가 준비되었습니다. 다음으로 필요한 것은 사용자가 todo 항목을 앱에 입력할 수 있게 하는 기능입니다. 이를 위해 text <code><input></code>, 데이터가 제출될 때 발생하는 이벤트, 데이터 제출 시 데이터를 추가하고 목록을 다시 렌더링하기 위한 방법, 데이터를 제어하는 모델이 필요합니다. 이것이 이 글에서 다룰 내용입니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt> + <dd>마침내 우리 앱이 좀 더 멋지게 보입니다. 이 글에서는 CSS를 사용하여 Vue 컴포넌트를 스타일링하는 다양한 방법을 살펴봅니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Vue computed properties 사용하기</a></dt> + <dd>이 글에서는 computed properties 라고 불리는 Vue 기능을 사용하여 완료된 todo 항목 수를 표시하는 카운터를 추가합니다. 이들은 메서드와 유사하게 작동하지만 종속성 중 하나가 변경될 때만 다시 실행됩니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue 조건부 렌더링: 이미 존재하는 todo 항목 편집</a></dt> + <dd>이제 우리가 아직 놓치고 있는 주요 기능 중 한 기능의 주요한 부분 중 하나를 추가 할 차례입니다. 이를 위해 Vue의 조건부 렌더링 기능 <code>v-if</code> 와 <code>v-else</code> 를 활용하여, 이미 존재하는 todo 항목 view 와 todo 항목 레이블을 업데이트 할 수 있는 편집 view 간에 전환할 수 있습니다. 또한 todo 항목들을 삭제하는 기능을 추가하는 방법도 살펴봅니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Vue refs를 통한 포커스 관리</a></dt> + <dd>이제 거의 다 만들었습니다. 마지막으로 살펴볼 기능은 포커스 관리와 앱의 키보드 접근성을 향상시키는 방법입니다. Vue refs를 사용하여 이를 처리하는 방법을 살펴보겠습니다. ref는 가상 DOM 아래의 기본 DOM 노드에 직접 접근하거나 한 컴포넌트에서 하위 컴포넌트의 내부 DOM 구조로 직접 접근할 수 있는 고급 기능입니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt> + <dd>이제 Vue에 대한 학습을 마무리 할 것입니다. 학습을 진행하는데 사용할 수 있는 리소스 목록과 유용한 팁이 있습니다.</dd> +</dl> + +<h2 id="Svelte_tutorials">Svelte tutorials</h2> + +<div class="blockIndicator note"> +<p><strong>참조</strong>: Svelte 3.24.1 을 사용하여 2020년 8월에 마지막으로 테스트된 튜토리얼입니다.</p> + +<p>코드를 우리 버전과 비교하여 확인해야 하는 경우, <a href="https://github.com/opensas/mdn-svelte-tutorial">mdn-svelte-tutorial</a> repo에서 각각의 문서 뒤에 있어야 하는 샘플 Svelte 앱 코드의 완성된 버전을 볼 수 있습니다. 라이브 버전을 실행하려면 Svelte REPL 을 참조하세요 <a class="external external-icon" href="https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2" rel="noopener">https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2</a>.</p> +</div> + +<dl> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">1. Svelte 시작하기</a></dt> + <dd>이 문서에서는 <a class="external external-icon" href="https://svelte.dev/" rel="noopener">Svelte framework</a>에 대한 간략한 소개를 제공합니다. Svelte의 작동 방식과 지금까지 살펴본 나머지 프레임워크 및 도구와 차별화되는 점을 살펴보겠습니다. 그 다음 개발 환경 구성하기, 샘플 앱 만들기, 프로젝트 구조 이해하기, 로컬에서 실행하기와 프로덕션 용으로 빌드하는 방법을 알아보겠습니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">2. Svelte Todo list app 시작하기</a> </dt> + <dd>이제 Svelte가 작동하는 방식에 대한 기본적인 이해를 마쳤으므로, 예제 앱(todo list) 빌드를 시작하겠습니다. 이 문서에서는 먼저 앱에서 구현해야할 기능을 살펴보고, 그 다음 <code>Todos.svelte</code> 컴포넌트를 만들어 정적 마크업과 스타일을 배치합니다. 그리고 To-Do list 앱 기능 개발을 시작할 준비를 합니다. 이 내용은 다음 문서에서 계속 설명하겠습니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">3. Svelte의 동적 동작: 변수와 props 작업</a></dt> + <dd>이제 마크업과 스타일이 준비되었으므로 Svelte To-Do list 앱에 필요한 기능 개발을 시작할 수 있습니다. 이 문서에서는 변수와 props를 사용하여 앱을 동적으로 만듭니다. 할일(todo)을 추가하거나 삭제하고, 완료로 표시하고, 상태별로 필터링 할 수 있습니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">4. Svelte app 컴포넌트화</a></dt> + <dd>이 문서의 핵심 목표는 앱을 관리 가능한 컴포넌트로 나누고, 이들간에 정보를 공유하는 방법을 살펴 보는 것입니다. 앱을 컴포넌트화 하고 기능을 추가하여 기존 컴포넌트를 업데이트 할 수 있도록 합니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">5. 향상된 Svelte: 반응성, 생명주기, 접근성</a></dt> + <dd>이 문서에서는 앱의 최종 기능을 추가하고 앱을 더욱 컴포넌트화 합니다. 객체와 배열의 업데이트와 관련된 반응성(reactivity) 이슈를 처리하는 방법을 배웁니다. 일반적인 함정을 피하기 위해 우리는 Svelte의 반응성 시스템을 좀 더 깊이 공부해야 합니다. 또한 접근성(accessibility ) 관련 이슈를 비롯해 좀 더 많은 내용을 해결하는 방법도 살펴보겠습니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">6. Svelte stores 사용하기</a></dt> + <dd>이 문서에서는 Svelte에서 상태 관리를 처리하는 또 다른 방법을 보여줍니다. <a class="external external-icon" href="https://svelte.dev/tutorial/writable-stores" rel="noopener">스토어(Stores</a>). 스토어는 값을 갖고있는 글로벌 데이터 저장소입니다. 컴포넌트는 스토어를 구독하고 값이 변경되면 알림을 받을 수 있습니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">7. Svelte의 타입스크립트 지원</a></dt> + <dd>이제 Svelte 애플리케이션에서 타입스크립트를 사용하는 방법을 배웁니다. 먼저 타입스크립트가 무엇이며 어떤 이점이 있는지 알아봅니다. 그 다음 타입스크립트 파일과 함께 작동하도록 프로젝트를 구성하는 방법을 살펴봅니다. 마지막으로 앱을 검토하여 타입스크립트 기능을 최대한 활용하기 위해 어떤 수정을 해야 하는지 살펴보겠습니다.</dd> + <dt><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">8. 배포(Deployment)와 다음단계</a></dt> + <dd>이 마지막 문서에서는 애플리케이션을 배포하고 온라인으로 가져오는 방법을 살펴봅니다. 또한 Svelte 학습 여정을 계속하기 위해 알아야 할 몇 가지 리소스를 공유합니다. </dd> +</dl> + +<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2> + +<p>우리는 React/ReactDOM, Ember, Vue의 세 가지 주요 프레임워크에 초점을 맞춘 가이드와 시작하는 글 모음을 함께 게시하고 있습니다. 여기에는 여러가지 이유가 있습니다.</p> + +<ul> + <li>이것들은 잠시동안 인기가 있습니다. 다른 소프트웨어 툴과 마찬가지로 다음주에도 중단되지 않고 적극적으로 개발 되는 도구를 선택하고 유지하는것이 좋습니다. 또한 이것은 구인할 때에도 바람직하게 작용할 겁니다.</li> + <li>이들은 강력한 커뮤니티와 좋은 문서를 갖고 있습니다. 복잡한 주제를 배우는 데 도움을 얻을 수 있다는 것이 특히 중요하고, 처음시작하는 경우라면 더욱 그렇습니다.</li> + <li>우리는 모든 최신 프레임 워크를 다룰 수 있는 리소스가 없습니다. 새로운 목록이 항상 표시되므로 이 목록을 최신 상태로 유지하기가 매우 어려울 수 있습니다.</li> + <li>초심자로서 매우 많은 선택지 중 집중할 것을 선택하는 것은 매우 현실적인 문제입니다. 따라서 목록을 짧게 유지하는것이 좋습니다.</li> +</ul> + +<p>우리는 이것을 미리 말하고 싶습니다. 위 프레임워크들이 최고라고 생각하거나 어떤 식으로든 보증되기 때문에 선택하지 않았습니다. 우리는 단지 이 프레임워크들이 위의 기준에서 높은 점수를 얻었다고 생각합니다.</p> + +<p>이 글을 처음 게시할 때 더 많은 프레임워크가 포함되기를 원했지만, 더 오래 지연시키지 않고 내용을 릴리즈 한 다음에 나중에 프레임워크 가이드를 더 추가하기로 결정했습니다. 이 컨텐츠에 좋아하는 프레임워크가 표시되지 않았고, 이를 변경하고 싶다면 언제든지 저희와 논의하시기 바랍니다. <a href="https://wiki.mozilla.org/Matrix">Matrix</a>나 <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>를 통해 연락하거나 <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>로 메일을 보내셔도 됩니다.</p> diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html new file mode 100644 index 0000000000..2b2e70e8f6 --- /dev/null +++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component/index.html @@ -0,0 +1,384 @@ +--- +title: 첫 번째 Vue 컴포넌트 만들기 +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> + +<p class="summary">이제 Vue에 대해 더 자세히 알아보고 직접 커스텀 컴포넌트를 만들어 볼 시간입니다. 먼저, Todo 리스트의 각 항목을 표현하는 컴포넌트를 만들어 보면서 몇 가지 중요한 개념을 배우겠습니다. 컴포넌트 내부에서 다른 컴포넌트 호출하기, props를 통해 데이터 넘겨주기, 데이터 상태 저장하기 등을 배울 것입니다. </p> + +<div class="blockIndicator note"> +<p class="summary"><strong>Note</strong>: 필요하다면 <a href="https://github.com/mdn/todo-vue">todo-vue repository</a> 에서 최종 샘플 앱 코드를 확인할 수 있습니다. 완성된 앱의 모습은 <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>을 참고하세요.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">사전 요구 사항:</th> + <td> + <p>코어 <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>과 <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>에 익숙함, <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">terminal/command line</a>에 대한 지식</p> + + <p>Vue 컴포넌트는 앱의 데이터를 관리하는 JavaScript 객체와 기본 DOM 구조에 매핑되는 HTML 기반 템플릿 구문을 조합해 작성된다. Vue를 설치하고 고급 기능(예: 단일 파일 컴포넌트, render 함수 등)을 사용하려면 node + npm이 설치된 터미널이 필요하다.</p> + </td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>Vue 컴포넌트를 생성하는 법을 배운다. 컴포넌트를 다른 컴포넌트 내부에 render하는 방법, props를 이용해 데이터를 전달하는 방법과 상태를 저장하는 방법을 배운다.</td> + </tr> + </tbody> +</table> + +<h2 id="ToDoItem_컴포넌트_만들기">ToDoItem 컴포넌트 만들기</h2> + +<p>각각의 할 일 항목 (To-Do Item)을 표시해줄 첫 번째 컴포넌트를 작성해봅시다. 이 항목이 모여서 Todo List가 될 것입니다.</p> + +<ol> + <li><code>moz-todo-vue/src/components</code> 디렉토리 안에 <code>ToDoItem.vue</code>라는 이름으로 파일을 생성하고, 에디터에서 파일을 열어주세요.</li> + <li>파일 상단에 <code><template> </template></code> 태그를 추가해 컴포넌트의 템플릿 섹션을 만들어주세요.</li> + <li>템플릿 섹션 밑에 <code><script></script></code> 섹션을 생성하세요. <code><script></code> 태그 안에 default export 오브젝트 <code>export default {}</code>를 추가하세요. 이것이 바로 우리가 만들고 있는 컴포넌트 오브젝트입니다.</li> +</ol> + +<p>여기까지 잘 따라하셨다면 <code>ToDoItem.vue</code> 파일이 아래와 같은 형태가 됩니다.</p> + +<pre class="brush: html notranslate"><template> </template> +<script> + export default {}; +</script></pre> + +<p>이제 <code>ToDoItem</code>에 내용을 추가해보겠습니다. Vue 2의 템플릿은 단일 루트 엘리멘트만을 허용합니다. 즉, 템플릿 섹션 안의 모든 것을 포함하는 하나의 엘리멘트가 존재해야 합니다. (Vue 3에서는 다중 루트 엘리멘트를 지원합니다!) 여기서는 <code><a href="/en-US/docs/Web/HTML/Element/div"><div></a></code> 를 루트 엘리멘트로 지정하겠습니다.</p> + +<ol> + <li> + <p>우선 템플릿 섹션에 빈 <code><div></code> 를 추가하세요.</p> + </li> + <li> + <p><code><div></code> 안에 체크박스와 레이블을 추가해보겠습니다. 아래와 같이 체크박스에 <code>id</code> 를 추가하고, 체크박스 id를 레이블에 매핑하는 <code>for</code> 속성을 추가합니다.</p> + + <pre class="brush: html notranslate"><template> + <div> + <input type="checkbox" id="todo-item" checked="false" /> + <label for="todo-item">My Todo Item</label> + </div> +</template></pre> + </li> +</ol> + +<h3 id="앱_안에서_TodoItem_컴포넌트_사용하기">앱 안에서 TodoItem 컴포넌트 사용하기</h3> + +<p>아주 잘 하고 있어요. 그런데 아직 우리 앱에 컴포넌트를 추가하지 않았기 때문에 잘 작동하는지 테스트할 방법이 없네요. 이제 앱에 컴포넌트를 등록해봅시다. </p> + +<ol> + <li> + <p><code>App.vue</code> 파일을 다시 열어주세요.</p> + </li> + <li> + <p><code><script></code> 태그 상단에 다음을 추가해 <code>ToDoItem</code> 컴포넌트를 임포트하세요:</p> + + <pre class="brush: js notranslate">import ToDoItem from './components/ToDoItem.vue';</pre> + </li> + <li> + <p>컴포넌트 오브젝트 내부에 <code>components</code> 속성을 추가하고, 여기에 <code>ToDoItem</code> 컴포넌트를 등록하세요.</p> + </li> +</ol> + +<p>이제 <code><script></code> 내부가 이런 모양이 되었을 것입니다.</p> + +<pre class="brush: js notranslate">import ToDoItem from './components/ToDoItem.vue'; + +export default { + name: 'app', + components: { + ToDoItem + } +};</pre> + +<p>이전글에서 Vue CLI가 <code>HelloWorld</code> 컴포넌트를 등록했던 것과 같은 방식입니다. </p> + +<p><code>ToDoItem</code> 컴포넌트를 앱에 실제로 렌더링하려면 <code><template></code> 태그 안에서 <code><to-do-item></to-do-item></code> 요소를 사용해야 합니다. JavaScript에서 컴포넌트 파일의 이름과 그 표현은 항상 어퍼카멜케이스(e.g. <code>ToDoList</code>)를 사용하며, 해당 커스텀 엘리멘트는 하이픈으로 연결된 소문자(e.g. <code><to-do-list></code>)로 표현합니다.</p> + +<ol> + <li><code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements"><h1></a></code> 아래에 리스트 아이템(<code><a href="/en-US/docs/Web/HTML/Element/li"><li></a></code>)을 포함하는 비정렬 리스트(<code><a href="/en-US/docs/Web/HTML/Element/ul"><ul></a></code>)를 생성합니다.</li> + <li>리스트 아이템 안에 <code><to-do-item></to-do-item></code>을 추가합니다.</li> +</ol> + +<p><code>App.vue</code> <code><template></code> 은 아래와 같은 모양이 될 것입니다. </p> + +<pre class="brush: html notranslate"><div id="app"> + <h1>To-Do List</h1> + <ul> + <li> + <to-do-item></to-do-item> + </li> + </ul> +</div></pre> + +<p>렌더링된 앱을 다시 확인해보면 체크박스와 레이블로 구성된 <code>ToDoItem</code> 이 보일 것입니다.</p> + +<p><img alt="The current rendering state of the app, which includes a title of To-Do List, and a single checkbox and label" src="https://mdn.mozillademos.org/files/17243/rendered-todoitem.png" style="border-style: solid; border-width: 1px; display: block; height: 142px; margin: 0 auto; width: 385px;"></p> + +<h2 id="props를_사용해_컴포넌트를_동적으로_만들기">props를 사용해 컴포넌트를 동적으로 만들기</h2> + +<p>현재 상태로는 <code>ToDoItem</code> 컴포넌트를 한 페이지에 한 번만 표시할 수 있고(고유 ID가 있어야 함) 레이블 텍스트를 설정할 방법도 없습니다. 동적인 요소가 전혀 없는 상태입니다. </p> + +<p>컴포넌트를 동적으로 만들기 위해서는 컴포넌트의 state(상태)가 필요합니다. 컴포넌트에 props를 추가해 컴포넌트에 상태를 부여할 수 있습니다. props를 함수의 입력이라고 생각하면 이해가 쉬울 것입니다. props 값은 컴포넌트에 초기 상태(initial state)를 부여합니다.</p> + +<h3 id="props_등록하기">props 등록하기</h3> + +<p>Vue에서는 props를 등록하는 방법이 두 가지 있습니다.</p> + +<ul> + <li>첫 번째 방법은 단순히 문자열 어레이로 props를 나열하는 것입니다. 어레이의 각 항목은 각 prop의 이름이 됩니다. </li> + <li>두 번째 방법은 props를 오브젝트로 정의하는 것입니다. 각각의 키가 prop의 이름이 됩니다. 이렇게 props를 오브젝트로 나열하면 기본값을 지정할 수 있고, 해당 prop이 필수값인지 표시할 수 있고, 기본적인 오브젝트 타이핑(특히 JavaScript 원시 타입에 대해)과 간단한 prop 유효성 검증을 할 수 있습니다.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: prop의 유효성 검증은 개발 모드에서만 이루어지기 때문에, 상용에서는 이것에 의존해서는 안됩니다. 그리고 이 prop 검증 기능은 컴포넌트 인스턴스가 생성되기 전에 호출되기 때문에 컴포넌트의 상태나 다른 prop에는 접근할 수 없습니다. </p> +</div> + +<p>여기서는 오브젝트 등록 방식을 사용해 props를 등록해보겠습니다.</p> + +<ol> + <li><code>ToDoItem.vue</code> 파일을 열어주세요.</li> + <li>export <code>default {}</code> 오브젝트 안에 <code>props</code> 속성을 추가하고 빈 오브젝트를 만들어주세요.</li> + <li>이 오브젝트 안에 <code>label</code> 과 <code>done</code> 을 키로 사용하는 속성을 추가하세요.</li> + <li><code>label</code> 키의 값은 두 개의 속성을 갖는 오브젝트입니다. + <ol> + <li>첫 번째는 <code>required</code> 속성입니다. 이 속성의 값을 <code>true</code>로 지정하겠습니다. 이 컴포넌트의 모든 인스턴스가 레이블 필드를 반드시 가져야 한다는 의미입니다. 만약 <code>ToDoItem</code> 컴포넌트가 레이블 필드를 갖지 않으면 Vue가 경고해줄 것입니다.</li> + <li>두 번째는 <code>type</code> 속성입니다. 이 속성의 값을 JavaScript <code>String</code>(대문자 S)타입으로 설정합니다. 이렇게 하면 label prop이 스트링 값을 가질 것임을 Vue에게 알려줄 수 있습니다. </li> + </ol> + </li> + <li>이제 <code>done</code> prop으로 넘어가겠습니다. + <ol> + <li>먼저 <code>default</code> 필드를 추가하고, <code>false</code> 값을 지정합니다. 이것은 <code>ToDoItem</code> 컴포넌트가 <code>done</code> prop을 받지 못했을 때, 기본값으로 false를 갖는다는 의미입니다. his means that when no <code>done</code> prop is passed to a <code>ToDoItem</code> component, the <code>done</code> prop will will have a value of false(기본값을 항상 설정할 필요는 없습니다. 필수가 아닌 props에 대해서만 <code>default</code>를 지정하면 됩니다).</li> + <li>다음으로 <code>type</code> 필드를 추가합니다. 값은 <code>Boolean</code>으로 지정합니다. 이 prop이 JavaScript 불리언 타입을 가질 것임을 Vue에게 알려주는 것입니다.</li> + </ol> + </li> +</ol> + +<p>이제 컴포넌트 오브젝트는 아래와 같은 모양이 될 것입니다.</p> + +<pre class="brush: js notranslate"><script> + export default { + props: { + label: { required: true, type: String }, + done: { default: false, type: Boolean } + } + }; +</script></pre> + +<h3 id="등록한_props_사용하기">등록한 props 사용하기</h3> + +<p>With these props defined inside the component object, we can now use these variable values inside our template. Let's start by adding the <code>label</code> prop to the component template.</p> + +<p>In your <code><template></code>, replace the contents of the <code><label></code> element with <code>\{{label}}</code>.</p> + +<p><code>\{{}}</code> is a special template syntax in Vue, which lets us print the result of JavaScript expressions defined in our class, inside our template, including values and methods. It’s important to know that content inside <code>\{{}}</code> is displayed as text and not HTML. In this case, we’re printing the value of the <code>label</code> prop.</p> + +<p>Your component’s template section should now look like this:</p> + +<pre class="brush: html notranslate"><template> + <div> + <input type="checkbox" id="todo-item" checked="false" /> + <label for="todo-item">\{{label}}</label> + </div> +</template></pre> + +<p>Go back to your browser and you'll see the todo item rendered as before, but without a label (oh no!). Go to your browser's DevTools and you’ll see a warning along these lines in the console:</p> + +<pre class="notranslate">[Vue warn]: Missing required prop: "label" + +found in + +---> <ToDoItem> at src/components/ToDoItem.vue + <App> at src/App.vue + <Root> +</pre> + +<p>This is because we marked the <code>label</code> as a required prop, but we never gave the component that prop — we've defined where inside the template we want it used, but we haven't passed it into the component when calling it. Let’s fix that.</p> + +<p>Inside your <code>App.vue </code>file, add a <code>label</code> prop to the <code><to-do-item></to-do-item></code> component, just like a regular HTML attribute:</p> + +<pre class="brush: html notranslate"><to-do-item label="My ToDo Item"></to-do-item></pre> + +<p>Now you'll see the label in your app, and the warning won't be spat out in the console again.</p> + +<p>So that's props in a nutshell. Next we'll move on to how Vue persists data state.</p> + +<h2 id="Vue의_data_object">Vue의 data object</h2> + +<p>If you change the value of the <code>label</code> prop passed into the <code><to-do-item></to-do-item></code> call in your App component, you should see it update. This is great. We have a checkbox, with an updatable label. However, we're currently not doing anything with the "done" prop — we can check the checkboxes in the UI, but nowhere in the app are we recording whether a todo item is actually done.</p> + +<p>To achieve this, we want to bind the component's <code>done</code> prop to the <code>checked</code> attribute on the <code><a href="/en-US/docs/Web/HTML/Element/input"><input></a></code> element, so that it can serve as a record of whether the checkbox is checked or not. However, it's important that props serve as one-way data binding — a component should never alter the value of its own props. There are a lot of reasons for this. In part, components editing props can make debugging a challenge. If a value is passed to multiple children, it could be hard to track where the changes to that value were coming from. In addition, changing props can cause components to re-render. So mutating props in a component would trigger the component to rerender, which may in-turn trigger the mutation again.</p> + +<p>To work around this, we can manage the <code>done</code> state using Vue’s <code>data</code> property. The <code>data</code> property is where you can manage local state in a component, it lives inside the component object alongside the <code>props</code> property and has the following structure:</p> + +<pre class="brush: js notranslate">data() { + return { + key: value + } +}</pre> + +<p>You'll note that the <code>data</code> property is a function. This is to keep the data values unique for each instance of a component at runtime — the function is invoked separately for each component instance. If you declared data as just an object, all instances of that component would share the same values. This is a side-effect of the way Vue registers components and something you do not want.</p> + +<p>You use <code>this</code> to access a component's props and other properties from inside data, as you may expect. We'll see an example of this shortly.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Because of the way that <code>this</code> works in arrow functions (binding to the parent’s context), you wouldn’t be able to access any of the necessary attributes from inside <code>data</code> if you used an arrow function. So don’t use an arrow function for the <code>data</code> property.</p> +</div> + +<p>So let's add a <code>data</code> property to our <code>ToDoItem</code> component. This will return an object containing a single property that we'll call <code>isDone</code>, whose value is <code>this.done</code>.</p> + +<p>Update the component object like so:</p> + +<pre class="brush: js notranslate">export default { + props: { + label: { required: true, type: String }, + done: { default: false, type: Boolean } + }, + data() { + return { + isDone: this.done + }; + } +};</pre> + +<p>Vue does a little magic here — it binds all of your props directly to the component instance, so we don’t have to call <code>this.props.done</code>. It also binds other attributes (<code>data</code>, which you’ve already seen, and others like <code>methods</code>, <code>computed</code>, etc.) directly to the instance. This is, in part, to make them available to your template. The down-side to this is that you need to keep the keys unique across these attributes. This is why we called our <code>data</code> attribute <code>isDone</code> instead of <code>done</code>.</p> + +<p>So now we need to attach the <code>isDone</code> property to our component. In a similar fashion to how Vue uses <code>\{{}}</code> expressions to display JavaScript expressions inside templates, Vue has a special syntax to bind JavaScript expressions to HTML elements and components: <code><strong>v-bind</strong></code>. The <code>v-bind</code> expression looks like this:</p> + +<pre class="notranslate">v-bind:attribute="expression"</pre> + +<p>In other words, you prefix whatever attribute/prop you want to bind to with <code>v-bind:</code>. In most cases, you can use a shorthand for the <code>v-bind</code> property, which is to just prefix the attribute/prop with a colon. So <code>:attribute="expression"</code> works the same as <code>v-bind:attribute="expression"</code>.</p> + +<p>So in the case of the checkbox in our <code>ToDoItem</code> component, we can use <code>v-bind</code> to map the <code>isDone</code> property to the <code>checked</code> attribute on the <code><input></code> element. Both of the following are equivalent:</p> + +<pre class="brush: html notranslate"><input type="checkbox" id="todo-item" v-bind:checked="isDone" /> + +<input type="checkbox" id="todo-item" :checked="isDone" /></pre> + +<p>You're free to use whichever pattern you would like. It's best to keep it consistent though. Because the shorthand syntax is more commonly used, this tutorial will stick to that pattern.</p> + +<p>So let's do this. Update your <code><input></code> element now to replace <code>checked="false"</code> with <code>:checked="isDone"</code>.</p> + +<p>Test out your component by passing <code>:done="true"</code> to the <code>ToDoItem</code> call in <code>App.vue</code>. Note that you need to use the <code>v-bind</code> syntax, because otherwise <code>true</code> is passed as a string. The displayed checkbox should be checked.</p> + +<pre class="brush: js notranslate"><template> + <div id="app"> + <h1>My To-Do List</h1> + <ul> + <li> + <to-do-item label="My ToDo Item" :done="true"></to-do-item> + </li> + </ul> + </div> +</template> +</pre> + +<p>Try changing <code>true</code> to <code>false</code> and back again, reloading your app in between to see how the state changes.</p> + +<h2 id="Todos에_고유_id_부여하기">Todos에 고유 id 부여하기</h2> + +<p>Great! We now have a working checkbox where we can set the state programmatically. However, we can currently only add one <code>ToDoList</code> component to the page because the <code>id</code> is hardcoded. This would result in errors with assistive technology since the <code>id</code> is needed to correctly map labels to their checkboxes. To fix this, we can programmatically set the <code>id</code> in the component data.</p> + +<p>We can use the <a href="https://www.npmjs.com/package/lodash">lodash</a> package's <code>uniqueid()</code> method to help keep the index unique. This package exports a function that takes in a string and appends a unique integer to the end of the prefix. This will be sufficient for keeping component <code>id</code>s unique.</p> + +<p>Let’s add the package to our project with npm; stop your server and enter the following command into your terminal:</p> + +<pre class="brush: bash notranslate">npm install --save lodash.uniqueid</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: If you prefer yarn, you could instead use <code>yarn add lodash.uniqueid</code>.</p> +</div> + +<p>We can now import this package into our <code>ToDoItem</code> component. Add the following line at the top of <code>ToDoItem.vue</code>’s <code><script></code> element:</p> + +<pre class="brush: js notranslate">import uniqueId from 'lodash.uniqueid';</pre> + +<p>Next, add add an <code>id</code> field to our data property, so the component object ends up looking like so (<code>uniqueId()</code> returns the specified prefix — <code>todo-</code> — with a unique string appended to it):</p> + +<pre class="brush: js notranslate">import uniqueId from 'lodash.uniqueid'; + +export default { + props: { + label: { required: true, type: String }, + done: { default: false, type: Boolean } + }, + data() { + return { + isDone: this.done, + id: uniqueId('todo-') + }; + } +};</pre> + +<p>Next, bind the <code>id</code> to both our checkbox’s <code>id</code> attribute and the label’s <code>for</code> attribute, updating the existing <code>id</code> and <code>for</code> attributes as shown:</p> + +<pre class="brush: js notranslate"><template> + <div> + <input type="checkbox" :id="id" :checked="isDone" /> + <label :for="id">\{{label}}</label> + </div> +</template></pre> + +<h2 id="정리">정리</h2> + +<p>And that will do for this article. At this point we have a nicely-working <code>ToDoItem</code> component that can be passed a label to display, will store its checked state, and will be rendered with a unique <code>id</code> each time it is called. You can check if the unique <code>id</code>s are working by temporarily adding more <code><to-do-item></to-do-item></code> calls into <code>App.vue</code>, and then checking their rendered output with your browser's DevTools.</p> + +<p><span class="author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxwoxz78zz83zz84zz69z2z80zgwxsgnz83zfkt5e5tz70zz68zmsnjz122zz71z">Now we're ready to add multiple <code>ToDoItem</code> components to our App. In our next article we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive. </span></p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li>React + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + </ul> + </li> + <li>Ember + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + </ul> + </li> + <li>Vue + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + </ul> + </li> + <li>Svelte + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> + </ul> + </li> +</ul> diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html new file mode 100644 index 0000000000..0ea628b883 --- /dev/null +++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -0,0 +1,293 @@ +--- +title: Vue 시작하기 +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div> + +<p class="summary">이제 우리가 배울 세 번째 프레임워크인 Vue를 소개하겠습니다. 이 글에서 우리는 Vue에 대한 간단한 배경지식을 얻고, Vue를 설치하고 새로운 프로젝트를 만드는 방법을 배웁니다. 또한 전체 프로젝트와 컴포넌트의 주요 구조를 공부하고, 로컬에서 프로젝트를 실행하는 방법을 살펴본 후 예제 프로젝트를 구성해봅니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">사전 요구 사항:</th> + <td> + <p>코어 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> 및 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> 언어에 익숙함. 터미널/커맨드라인에 대한 지식.<br> + <br> + Vue 컴포넌트는 앱의 데이터를 관리하는 JavaScript 객체와 기본 DOM 구조에 매핑되는 HTML 기반 템플릿 구문을 조합해 작성된다. Vue를 설치하고 고급 기능(예: 단일 파일 컴포넌트, render 함수 등)을 사용하려면 node + npm이 설치된 터미널이 필요하다.</p> + </td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>Vue 로컬 개발 환경을 구성한다. 스타터 앱을 만들고 기본적인 동작 원리를 이해한다.</td> + </tr> + </tbody> +</table> + +<h2 id="더_선명한_Vue">더 선명한 Vue</h2> + +<p>Vue는 최신의 JavaScript 프레임워크로 <a href="/ko/docs/Glossary/Progressive_Enhancement">점진적 향상</a>을 위한 유용한 기능을 제공합니다. 다른 많은 프레임워크와는 달리, Vue를 사용하면 기존의 HTML 코드를 향상시킬 수 있습니다. 이를 통해 아주 쉽게 <a href="/en-US/docs/Glossary/jQuery">JQuery</a> 등의 라이브러리를 Vue로 대체할 수 있습니다. </p> + +<p>물론 Vue를 이용해 완전한 단일 페이지 애플리케이션(SPA)을 작성할 수도 있습니다. 이렇게 하면 전체적으로 Vue가 관리하는 마크업을 만들 수 있고, 복잡한 애플리케이션에 대한 개발자 경험과 성능을 향상시킬 수 있습니다. 필요하다면 클라이언트 사이드 라우팅 및 상태 관리 라이브러리를 활용할 수 있다는 장점도 있습니다. Vue는 이와 같은 클라이언트 사이드 라우팅이나 상태 관리에 대해 "미들 그라운드" 접근 방식을 취합니다. Vue 코어 팀은 이런 기능을 위한 (vue-router, vuex 등의) 라이브러리를 유지보수하고 있지만, Vue에 직접 번들로 제공하지는 않습니다. 그러므로 우리가 만들 애플리케이션에 더 적합한 라우팅/상태 관리 라이브러리가 있다면 그것을 선택할 수 있습니다. </p> + +<p>Vue는 애플리케이션에 Vue를 점진적으로 통합시킬 수 있도록 하며, 마크업 작성에 대해서도 점진적 접근법을 제공합니다. 다른 많은 프레임워크처럼, Vue에서도 컴포넌트를 통해 재사용 가능한 마크업 블록을 생성할 수 있습니다. 대부분의 경우 Vue 컴포넌트는 특별한 HTML 템플릿 구문으로 작성됩니다. HTML에서 가능한 것 이상의 제어가 필요하다면, JSX나 일반 JavaScript 함수를 이용해 컴포넌트를 정의할 수 있습니다. </p> + +<p>이 튜토리얼을 진행하는 동안, 다른 탭에 <a href="https://vuejs.org/v2/guide/">Vue 가이드 </a>와 <a href="https://vuejs.org/v2/api/">API 문서</a>를 열어 두고 각 항목에 대해 더 자세한 정보가 필요할 때 참조하세요. Vue와 다른 프레임워크 간의 비교(편향될 가능성 있음)는 <a href="https://vuejs.org/v2/guide/comparison.html">Vue 문서: 다른 프레임워크와의 비교</a>를 참조하세요.</p> + +<h2 id="설치하기">설치하기</h2> + +<p>기존 사이트에서 Vue를 사용하려면 아래 <code><a href="/en-US/docs/Web/HTML/Element/script"><script></a></code> 요소 중 하나를 페이지에 추가하면 됩니다. 이 한 줄을 추가하는 것만으로 기존의 사이트에서 Vue를 사용할 수 있습니다. Vue가 자칭 '프로그레시브 프레임워크'임을 강조하는 이유가 바로 이것입니다. JQuery 등의 라이브러리를 사용하는 기존 프로젝트를 Vue로 마이그레이션하려고 할 때 아주 좋은 옵션입니다. 이 방식으로 속성, 커스텀 컴포넌트, 데이터 관리 등 수많은 Vue의 핵심 기능을 사용할 수 있게 됩니다. </p> + +<ul> + <li> + <p>개발 스크립트 (최적화되지 않음. 콘솔 경고 포함. 개발용으로 좋음.)</p> + + <pre class="brush: html notranslate"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></pre> + </li> + <li> + <p>상용 스크립트 (최적화 버전. 콘솔 경고 최소화. 업데이트로 인해 사이트가 영향을 받지 않도록 버전 번호를 명시하는 것이 좋다.)</p> + + <pre class="brush: html notranslate"><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></pre> + </li> +</ul> + +<p>하지만 이 방식은 한계가 있습니다. 좀 더 복잡한 앱을 구성하려면 <a href="https://www.npmjs.com/package/vue">Vue NPM package</a>를 사용하는 것이 좋습니다. Vue NPM 패키지를 사용하면 Vue의 고급 기능을 이용할 수 있고, WebPack 같은 번들 도구를 활용할 수 있습니다. 그리고 Vue CLI를 사용하면 개발 과정을 간소화해 Vue 앱을 더욱 쉽게 구성할 수 있습니다. npm 패키지와 CLI를 사용하기 위해 필요한 사항은 다음과 같습니다.</p> + +<ol> + <li>Node.js 8.11 이상 설치</li> + <li>npm 또는 yarn</li> +</ol> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 아직 위 항목을 설치하지 않았다면, <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups">more about installing npm and Node.js</a> 를 참고하세요.</p> +</div> + +<p>CLI를 설치하기 위해 아래 커맨드를 터미널에서 실행하세요.<br> + npm을 사용하는 경우:</p> + +<pre class="brush: bash notranslate">npm install --global @vue/cli</pre> + +<p>yarn을 사용하는 경우:</p> + +<pre class="brush: bash notranslate">yarn global add @vue/cli</pre> + +<p>설치가 모두 완료되면, 프로젝트를 생성할 디렉토리에서 터미널을 열고 <code>vue create <프로젝트 이름></code> 를 실행해봅시다. 그러면 Vue CLI는 우리가 사용할 수 있는 프로젝트 구성 목록을 보여줄 것입니다. 미리 설정되어 있는 몇 가지 구성 중 골라서 사용해도 되고, 모든 것을 직접 구성할 수도 있습니다. 이 옵션을 통해 우리는 TypeScript, linting, vue-router, 테스트 등의 항목을 구성할 수 있습니다.</p> + +<p>더 자세한 내용은 아래에서 살펴보겠습니다.</p> + +<h2 id="새로운_프로젝트_시작하기">새로운 프로젝트 시작하기</h2> + +<p>Vue의 다양한 기능을 알아보기 위해, 예제로 할 일 목록(todo list) 앱을 만들어보려고 합니다. Vue CLI를 사용해서 새로운 앱을 구성해봅시다. 아래 내용을 순서대로 따라해보세요:</p> + +<ol> + <li>터미널에서 <code>cd <디렉토리></code>를 입력해 샘플 앱을 만들 위치로 이동하고, <code>vue create moz-todo-vue</code>를 실행하세요.</li> + <li>방향키와 <kbd>Enter</kbd>를 사용해 "Manually select features" 옵션을 선택하세요.</li> + <li>첫 번째 메뉴에서 프로젝트에 포함하고 싶은 기능들을 선택할 수 있습니다. "Babel"과 "Linter / Formatter"가 선택되어 있나요? 선택되어 있지 않다면 방향키와 스페이스바를 사용해 선택해주세요. 그리고 <kbd>Enter</kbd>를 누릅니다.</li> + <li>다음으로 linter / formatter 구성을 선택하겠습니다. "Eslint with error prevention only"로 이동하고 다시 <kbd>Enter</kbd>를 눌러주세요. 흔히 생기는 에러를 잡는데 도움을 주면서도 너무 엄격하지는 않은 옵션을 선택했습니다.</li> + <li>다음은 자동 lint를 어떤 방식으로 하고 싶은지 묻는 메세지가 표시될 것입니다. "Lint on save"를 선택하세요. 우리가 프로젝트 내부의 파일을 저장할 때 에러를 체크하라는 의미입니다. 이제 <kbd>Enter</kbd> 를 누르세요.</li> + <li>이제 구성 파일을 어떻게 관리할지 선택해야 합니다. "In dedicated config files" 옵션을 선택하면 ESLint와 같은 것들의 구성 설정을 그들의 전용 파일에 넣게 됩니다. "In package.json" 옵션의 경우, 모든 구성 설정을 앱의 <code>package.json</code> 파일에 넣습니다. 우선 지금은 "In dedicated config files" 옵션을 선택하고 <kbd>Enter</kbd>를 누릅시다.</li> + <li>마지막으로, 지금까지 설정한 내용을 다음에 다시 사용하고 싶은지(현재 설정을 사전 설정 목록에 추가하고 싶은지) 묻는 메세지가 표시됩니다. 이 부분은 여러분이 하고 싶은대로 하시면 돼요. 만약 이 설정을 다음에도 다시 사용하고 싶다면 <kbd>y</kbd>를, 아니라면 <kbd>n</kbd>을 누르세요.</li> +</ol> + +<p>이제 CLI가 우리의 프로젝트를 위한 발판을 만들기 시작하고 우리의 앱을 위한 모든 디펜던시를 설치할 것입니다. </p> + +<p>만약 이전에 한 번도 Vue CLI를 사용해본 적 없다면, 위에서 설명하지 않은 질문이 한 가지 더 표시될 것입니다. 패키지 매니저를 고르라는 메세지가 나타나면, 여러분이 선호하는 것을 고르면 됩니다. 지금부터는 여러분이 선택한 패키지 매니저(npm / yarn)가 기본값으로 설정됩니다. 만약 이 기본값을 변경하고 싶다면 <code>vue create</code> 커맨드를 실행할 때 <code>--packageManager=<package-manager></code> 플래그를 추가하면 됩니다. 다시 말해, 만약 여러분이 이전에 yarn을 사용했지만 다음에는 npm을 사용하도록 프로젝트를 생성하고 싶다면 <code>vue create moz-todo-vue --packageManager=npm</code>을 실행하면 됩니다.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 모든 옵션을 여기서 설명하지는 않았습니다. 자세한 내용은 <a href="https://cli.vuejs.org">find more information on the CLI</a> 를 참고하세요.</p> +</div> + +<h2 id="프로젝트_구조">프로젝트 구조</h2> + +<p>위의 모든 내용이 성공적으로 진행됐다면, Vue CLI가 우리의 프로젝트에 사용할 디렉토리와 파일을 생성했을 것입니다. 다음은 그 중 가장 중요한 파일과 디렉토리에 대한 설명입니다.</p> + +<ul> + <li><code>.eslintrc.js</code>: <a href="https://eslint.org/">eslint</a>의 config 파일입니다. linting 규칙을 이 파일에서 관리할 수 있습니다.</li> + <li><code>babel.config.js</code>: <a href="https://babeljs.io/">Babel</a>의 config 파일입니다. Babel은 개발용으로 사용하는 최신 JavaScript 기능을 상용 브라우저 호환이 가능하도록 구버전으로 번역하는 역할을 합니다. 대표적으로, ECMA Script 2015(비공식적으로 ES6라고도 불림)로 작성된 코드를 ES5로 변환해 IE 등의 브라우저에서 동작할 수 있도록 해주는 것이 Babel이 하는 일입니다. 이 파일에 부가적인 babel 플러그인을 등록할 수 있습니다.</li> + <li><code>.browserslistrc</code>: <a href="https://github.com/browserslist/browserslist">Browserslist</a>의 config 파일입니다. 우리가 사용하는 도구를 어떤 브라우저에 최적화할지 이 파일에 정의할 수 있습니다.</li> + <li><code>public</code>: public 디렉토리는 <a href="https://webpack.js.org/">Webpack</a>의 처리를 받지 않고 퍼블리싱되는 정적 자산(static assets)을 포함합니다. (단, <code>index.html</code>의 경우 일부 Webpack의 처리를 받습니다) + <ul> + <li><code>favicon.ico</code>: 앱의 대표 favicon 파일입니다. 기본값으로 Vue 로고가 들어가 있습니다.</li> + <li><code>index.html</code>: 앱의 템플릿 파일입니다. 우리의 Vue 앱은 이 HTML 페이지로부터 실행됩니다. lodash 템플릿 구문을 사용해 보간법으로 값을 지정할 수 있습니다. + <div class="note"><strong>Note</strong>: index.html 파일은 애플리케이션 레이아웃을 관리하는 템플릿이 아닙니다. 이 파일은 Vue 앱 외부의 정적 HTML을 제어하는 템플릿입니다. 고급 사용 사례를 제외하면 이 파일을 직접 편집할 일은 거의 없습니다.</div> + </li> + </ul> + </li> + <li><code>src</code>: 우리의 Vue 애플리케이션의 핵심 내용을 포함하게 될 디렉토리입니다. + <ul> + <li><code>main.js</code>: 이 파일은 애플리케이션의 진입점입니다. 현재 이 파일은 Vue 앱을 초기화하고 <code>index.html</code> 파일에서 어떤 HTML 엘리멘트를 앱에 붙여야 하는지 (예제 프로젝트에서는 #app 엘리멘트) 나타냅니다. 이 파일에 전역 컴포넌트나 부가적인 Vue 라이브러리를 등록하는 경우가 많습니다. </li> + <li><code>App.vue</code>: Vue 애플리케이션의 최상위 컴포넌트입니다. Vue 컴포넌트에 대한 자세한 내용은 아래를 참조하세요.</li> + <li><code>components</code>: 우리가 앞으로 만들 Vue 컴포넌트를 저장할 디렉토리입니다. 지금은 한 개의 예시 컴포넌트만을 포함하고 있습니다.</li> + <li><code>assets</code>: CSS나 이미지 등의 정적 자산(static assets)을 저장하는 디렉토리입니다. 이 파일들은 src 디렉토리에 포함되어 있기 때문에 Webpack의 처리를 받습니다. 즉, <a href="https://sass-lang.com/">Sass/SCSS</a>나 <a href="https://stylus-lang.com/">Stylus</a>와 같은 전처리 도구를 사용할 수 있다는 의미입니다.</li> + </ul> + </li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 새로운 프로젝트를 생성할 때 어떤 옵션을 선택했는지에 따라, 위에 소개되지 않은 디렉토리가 생길 수도 있습니다. 예를 들어 router 옵션을 선택했다면 <code>views</code>가 생성됩니다.</p> +</div> + +<h2 id=".vue_파일_단일_파일_컴포넌트">.vue 파일 (단일 파일 컴포넌트)</h2> + +<p>다른 많은 프론트엔드 프레임워크와 마찬가지로, Vue 앱을 구축할 때도 컴포넌트가 중심적인 역할을 합니다. 대규모 애플리케이션을 여러 개의 개별 컴포넌트로 분리해 별도로 생성/구축하고, 필요한 경우 각 컴포넌트간에 데이터를 주고 받을 수 있습니다. 이 작은 블록들은 우리가 코드에 대해 추론하고 테스트하기 쉽도록 도와줍니다.</p> + +<p>일부 프레임워크에서는 템플릿과 로직, 스타일링 코드를 각각 분리된 파일에 작성하기를 권장하지만, Vue는 이와 정반대의 방식을 채택합니다. 단일 파일 컴포넌트(<a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a>)를 사용하면, Vue는 템플릿과 이에 대응하는 스크립트, CSS를 모두 하나의 <code>.vue</code> 파일에 묶어서 작성하도록 합니다. 이 파일들은 Webpack과 같은 JS 빌드 도구를 통해 처리됩니다. 그러므로 프로젝트에서 빌드 타임 도구들을 사용할 수 있다는 장점이 있습니다. 즉 우리는 Bable, TypeScript, SCSS 같은 도구를 사용해 더욱 정교한 컴포넌트를 생성할 수 있습니다.</p> + +<p>게다가 Vue CLI로 생성한 프로젝트는 즉시 Webpack과 함께 <code>.vue</code> 파일을 사용할 수 있도록 구성됩니다. 우리가 Vue CLI로 생성한 예제 프로젝트의 src 폴더를 열어 보면 <code>App.vue</code>가 생성된 것을 확인할 수 있습니다.</p> + +<p>이제 App.vue를 좀 더 알아봅시다.</p> + +<h3 id="App.vue">App.vue</h3> + +<p><code>App.vue</code> 파일을 열어보세요. 이 파일이 세 부분으로 이루어져 있다는 것을 바로 확인할 수 있습니다. 바로 컴포넌트 템플릿을 정의하는 <code><template></code> 파트, 스크립트를 작성하는 <code><script></code> 파트, 그리고 스타일링 정보를 작성하는 <code><style></code> 파트입니다. 모든 단일 파일 컴포넌트는 이러한 기본 구조로 이루어져 있습니다.</p> + +<p><code><template></code> 은 컴포넌트의 모든 마크업 구조와 디스플레이 로직을 포함합니다. 이 템플릿은 HTML 구문은 물론이고, 일부 Vue에 특화된 구문도 포함할 수 있습니다. Vue 관련 구문은 나중에 더 자세히 알아보겠습니다.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: <code><template></code> 태그에 <code>lang</code> 속성을 지정해 표준 HTML 대신 Pug 템플릿을 사용할 수 있습니다: <code><template lang="pug"></code>. 이 튜토리얼에서는 표준 HTML을 계속 사용할 예정이지만, 이렇게 Pug 등의 다른 템플릿을 사용할 수도 있다는 걸 소개해보았습니다.</p> +</div> + +<p><code><script></code>는 컴포넌트 화면에 표시되지 않는 모든 로직을 포함하고 있습니다. 가장 중요한 것은 <code><script></code> 태그 안에 반드시 기본으로 export되는 (하단 코드의 export default 구문 참고) JS 오브젝트가 있어야 한다는 것입니다. 이 오브젝트에서 로컬 컴포넌트 등록, 컴포넌트 인풋(props) 정의, 로컬 상태 관리, 메서드 정의 등 작업이 이루어집니다. 빌드 단계에서 이 오브젝트가 처리되고, 템플릿과 함께 <code>render()</code> 함수를 통해 Vue 컴포넌트로 변환됩니다. </p> + +<p><code>App.vue</code>를 살펴보면, 현재 default export 오브젝트는 컴포넌트 이름을 <code>app</code>으로 설정하고 <code>components</code> 속성에 <code>HelloWorld</code> 컴포넌트를 등록합니다. 이런 식으로 컴포넌트를 등록하면 로컬 컴포넌트가 됩니다. 이렇게 로컬로 등록된 컴포넌트는 이 컴포넌트를 등록한 상위 컴포넌트 내부에서만 사용할 수 있으므로, 각각의 컴포넌트 파일에서 필요한 컴포넌트를 임포트하고 등록해야 합니다. 앱의 모든 페이지가 모든 컴포넌트를 사용하는 것은 아니기 때문에, 번들 분할/트리 쉐이킹에 유용한 기능입니다. </p> + +<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue'; + +export default { + name: 'app', + components: { + //You can register components locally here. + HelloWorld + } +};</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: <a href="https://www.typescriptlang.org/">TypeScript</a> 문법을 사용하고 싶다면, <code><script></code> 태그 안에 <code>lang</code> 속성을 설정해 컴파일러에게 TypeScript를 사용하고 있다고 알려주세요: <code><script lang="ts"></code></p> +</div> + +<p><code><style></code> 에는 컴포넌트에서 사용할 CSS를 포함합니다. <code><style scoped></code>와 같이 <code>scoped</code> 속성을 추가하면 Vue는 그 안의 내용을 SFC(단일 파일 컴포넌트) 내부 범위에서만 적용합니다. CSS-in-JS 방식과 비슷하게 동작하지만, 여기서는 일반 CSS 구문을 작성할 수 있다는 차이점이 있습니다. </p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: CLI로 프로젝트를 생성할 때 CSS 전처리기를 선택했다면, 빌드타임에 Webpack에서 내용을 처리할 수 있도록 <code><style></code> 태그에 <code>lang</code> 속성을 추가할 수 있습니다. 예를 들어 <code><style lang="scss"></code> 라고 작성하면 스타일링 정보에 SCSS 문법을 사용할 수 있습니다. </p> +</div> + +<h2 id="로컬에서_앱_실행하기">로컬에서 앱 실행하기</h2> + +<p>Vue CLI는 개발 서버를 내장하고 있습니다. 앱을 로컬로 실행할 수 있기 때문에, 직접 서버를 구성할 필요 없이 쉽게 테스트해볼 수 있습니다. 프로젝트의 <code>package.json</code> 파일을 열어보면, CLI가 npm 스크립트로 <code>serve</code> 명령어를 추가해놓은 것을 확인할 수 있습니다. </p> + +<p>터미널을 열고, <code>npm run serve</code> (yarn을 사용한다면 <code>yarn serve</code>)를 실행해보세요. 아래 내용이 나타날 것입니다.</p> + +<pre class="notranslate">INFO Starting development server... +98% after emitting CopyPlugin + + DONE Compiled successfully in 18121ms + + App running at: + - Local: <http://localhost:8080/> + - Network: <http://192.168.1.9:8080/> + + Note that the development build is not optimized. + To create a production build, run npm run build.</pre> + +<p>브라우저 탭을 열고 위의 “local” 주소로 (위 내용처럼 <code>http://localhost:8080</code>이거나 설정에 따라 다를 수 있음) 이동해보면, 아래 사진과 같은 앱이 나타날 것입니다. 환영 메시지, Vue 문서 링크, 우리가 선택한 CLI 플러그인 링크, 기타 유용한 Vue 커뮤니티와 생태계 링크 등이 표시되고 있습니다.</p> + +<p><img alt="default vue app render, with vue logo, welcome message, and some documentation links" src="https://mdn.mozillademos.org/files/17240/vue-default-app.png" style="border-style: solid; border-width: 1px; height: 779px; width: 1600px;"></p> + +<h2 id="약간의_변경_사항_적용하기">약간의 변경 사항 적용하기</h2> + +<p>일단 Vue 로고를 제거합시다. <code>App.vue</code> 파일을 열고, 템플릿 섹션에서 <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code> 요소를 지워보세요.</p> + +<pre class="brush: html notranslate"><span class="author-d-iz88z86z86za0dz67zz78zz78zz74zz68zjz80zz71z9iz90z8h7gz67ziz76zcz77zz80zz71zncfz69zz69ziaz82zz71zz72zhz77zz122zz90z14mcyd"><img alt="Vue logo" src="./assets/logo.png"></span></pre> + +<p>서버가 아직 실행중이라면, 거의 즉시 로고가 제거되는 것을 확인할 수 있을 것입니다. 템플릿 섹션에서 <code>HelloWorld</code> 컴포넌트도 삭제해봅시다.</p> + +<p>가장 먼저 아래 라인을 지워주세요.</p> + +<pre class="brush: html notranslate"><HelloWorld msg="Welcome to Your Vue.js App"/></pre> + +<p>이제 <code>App.vue</code> 파일을 저장해보면 <code>HelloWorld</code> 컴포넌트를 등록했으나 사용하지 않았다는 에러가 발생할 것입니다. 해당 컴포넌트를 임포트하고 등록하는 코드 역시 지워야 합니다.</p> + +<p>이제 아래 라인도 삭제해보세요.</p> + +<pre class="brush: js notranslate">import HelloWorld from './components/HelloWorld.vue'</pre> + +<pre class="brush: js notranslate">components: { + HelloWorld +}</pre> + +<p>이제 더는 에러가 발생하지 않는 것을 확인할 수 있습니다. 다만 <code><template></code> 파트에 표시할 내용이 없기 때문에 빈 페이지만 보일 것입니다. </p> + +<p>그럼 이제 <code><div id="app"></code> 안에 <code><h1></code> 요소를 추가해보세요. 우리는 todo list 앱을 만들 거니까, 헤더 텍스트를 "To-Do List"라고 작성해봅시다.</p> + +<pre class="brush: html notranslate"><template> + <div id="app"> + <h1>To-Do List</h1> + </div> +</template></pre> + +<p><code>App.vue</code> 는 우리가 원했던 대로 'To-Do List'라는 내용의 헤더를 표시할 것입니다!</p> + +<h2 id="정리">정리</h2> + +<p>우리는 이 장에서 Vue에 숨겨진 몇 가지 아이디어를 배우고, 우리의 예제 애플리케이션의 기초 구조를 만들고, 이를 살펴보고, 몇 가지 변경 사항을 적용해보았습니다. </p> + +<p>이제 기본적인 소개는 끝났으니, 좀 더 나아가서 우리의 샘플 애플리케이션인 To-Do List 앱을 구현해봐야겠죠? 할 일 목록을 저장하고 일을 완료하면 체크하는 기능, 모든 아이템/완료된 아이템/아직 완료되지 않은 아이템을 필터링할 수 있는 기능을 구현해야 합니다.</p> + +<p>다음 글에서는 우리의 첫 커스텀 컴포넌트를 작성하고, props 전달 및 데이터 상태 저장과 같은 몇 가지 중요한 개념을 살펴보겠습니다.</p> + +<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li> + <li>React + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li> + </ul> + </li> + <li>Ember + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li> + </ul> + </li> + <li>Vue + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li> + </ul> + </li> + <li>Svelte + <ul> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Getting started with Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Starting our Svelte Todo list app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Dynamic behavior in Svelte: working with variables and props</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Componentizing our Svelte app</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Working with Svelte stores</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">TypeScript support in Svelte</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Deployment and next steps</a></li> + </ul> + </li> +</ul> diff --git a/files/ko/learn/tools_and_testing/github/index.html b/files/ko/learn/tools_and_testing/github/index.html new file mode 100644 index 0000000000..cbae0f0cc3 --- /dev/null +++ b/files/ko/learn/tools_and_testing/github/index.html @@ -0,0 +1,82 @@ +--- +title: Git and GitHub +slug: Learn/Tools_and_testing/GitHub +tags: + - GitHub + - git + - 깃허브 +translation_of: Learn/Tools_and_testing/GitHub +--- +<div>{{LearnSidebar}}{{draft}}</div> + +<p class="summary">모든 개발자는 <strong>버전 관리 시스템 </strong>(<strong>VCS</strong>)을 사용하거나 앞으로 그럴 것이다. VCS는 다른 개발자와의 협업 시 코드 중복작성으로 인한 손실을 방지해 주고, 문재가 생겼을 시 이전 버전으로의 롤백을 쉽게 해준다. 가장 유명한 VCS는 Git와 그와 관련된 소셜 코딩 사이트, GitHub이다. 이 글은 이 두가지에 대해 설명할 것이다.</p> + +<h2 id="개요">개요</h2> + +<p>VCS는 소프트웨어 개발을 할 때 필수적이다.</p> + +<ul> + <li>프로젝트를 완전히 직접 수행하는 일은 드물며 다른 사람들과 작업을 시작하자마자 서로의 작업과 충돌할 위험이 있다. 대표적인 예시가 두 사람이 같은 부분을 업데이트하려고 할 때이다. 동시에 코드의. 발생을 관리하고 결과적으로 작업 손실을 피할 수있는 메커니즘이 필요하다.</li> + <li>혼자 또는 다른 사람들과 함께 프로젝트를 수행 할 때 중앙 위치에 코드를 백업 할 수 있기 때문에 컴퓨터가 고장 나더라도 코드가 손실되지 않는다.</li> + <li>추후에 문제가 발견될 경우, 이전 버전을 찾게 될 수 있다. 우리는 이미 같은 파일의 다른 버전들을 생성함으로써 우리는 버전 컨트롤을 하고 있었을지도 모른다. 예를 들어, <code>myCode.js</code>, <code>myCode_v2.js</code>, <code>myCode_v3.js</code>, <code>myCode_final.js</code>, <code>myCode_really_really_final.js</code>, 등 이런식으로 말이다. 그러나 이런 방식은 에러에 취약하며 신뢰성이 떨어진다.</li> + <li>Different team members will commonly want to create their own separate versions of the code (called <strong>branches</strong> in Git), work on a new feature in that version, and then get it merged in a controlled manner (in GitHub we use <strong>pull requests</strong>) with the master version when they are done with it.</li> +</ul> + +<p>VCSes provide tools to meet the above needs. <a href="https://git-scm.com/">Git</a> is an example of a VCS, and <a href="https://github.com/">GitHub</a> is a web site + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Git is actually a <em>distributed</em> version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.</p> +</div> + +<h2 id="전제_조건">전제 조건</h2> + +<p>Git와 GitHub를 사용하려면, 다음과 같은 사양이 요구된다:</p> + +<ul> + <li>Git가 설치된 데스크탑 컴퓨터(<a href="https://git-scm.com/downloads">Git 설치 페이지</a>를 참고하라).</li> + <li>Git을 사용할 도구. 당신이 어떻게 일하고 싶은지에 따라 취향에 맞게 <a href="https://git-scm.com/downloads/guis/">Git GUI client</a> (GitHub Desktop, SourceTree, Git Kraken을 추천합니다) 와 터미널 중에 고르실 수 있습니다. GUI를 사용하더라도 기본적인 git 터미널 명령어들을 숙지하고 있다면 더 큰 도움이 될 것입니다.</li> + <li><a href="https://github.com/join">GitHub 계정</a>. 만일 계정이 없다면, 이 링크에서 계정을 만들 수 있다.</li> +</ul> + +<p>이 모듈에 필요한 전제 지식과 관련해서 웹개발, Git/Github, VCS에 관한 지식은 없어도 시작할 수 있다. 그러나 어느정도의 컴퓨터 소양과 코딩 능력이 뒷바침되면 repository에 코드를 저장해 놓을 수 있으므로 코딩 지식이 있으면 좋다.</p> + +<p>코딩 지식과 더불어 기초적인 용어에 대한 지식이 있으면 좋다. 예를 들어, 디렉토리를 이동하거나 파일생성, 그리고 시스템 <code>PATH</code>를 변경시키는것과 같은 기본적인 용어에 대한 지식이 있는 것이 추천된다.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Github is not the only site/toolset you can use with Git. There are other alternatives such as <a href="https://about.gitlab.com/">GitLab</a> that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.</p> +</div> + +<h2 id="가이드">가이드</h2> + +<p>아래 링크들은 모두 외부 사이트로 연결된다. Mozilla는 Mozilla만의 독자적인 Git/Github 과정을 만드는 것을 목표로 하고 있으나 당장은 아래에 있는 항목들이 Github을 직접 해볼 수 있도록 도와줄 것이다.</p> + +<dl> + <dt><a href="https://guides.github.com/activities/hello-world/">Hello World (from GitHub)</a></dt> + <dd>This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.</dd> + <dt><a href="https://guides.github.com/introduction/git-handbook/">Git Handbook (from GitHub)</a></dt> + <dd>This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.</dd> + <dt><a href="https://guides.github.com/activities/forking/">Forking Projects (from GitHub)</a></dt> + <dd>Forking projects is essential when you want to contribute to someone else's code. This guide explains how.</dd> + <dt><a href="https://help.github.com/en/articles/about-pull-requests">About Pull Requests (from GitHub)</a></dt> + <dd>A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.</dd> + <dt><a href="https://guides.github.com/features/issues/">Mastering issues (from GitHub)</a></dt> + <dd>Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: There is <strong>a lot more</strong> that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like <a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> and<a href="https://dangitgit.com/"> Dangit, git!</a></p> +</div> + +<h2 id="바깥_고리">바깥 고리</h2> + +<ul> + <li><a href="https://guides.github.com/introduction/flow/">Understanding the GitHub flow</a></li> + <li><a href="https://git-scm.com/docs">Git command list</a></li> + <li><a href="https://guides.github.com/features/mastering-markdown/">Mastering markdown</a> (the text format you write in on PR, issue comments, and <code>.md</code> files).</li> + <li><a href="https://guides.github.com/features/pages/">Getting Started with GitHub Pages</a> (how to publish demos and websites on GitHub).</li> + <li><a href="https://learngitbranching.js.org/">Learn Git branching</a></li> + <li><a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> (a very useful compendium of ways to achieve specific things in Git, including how to correct things when you went wrong).</li> + <li> + <p><a href="https://dangitgit.com/">Dangit, git!</a> (another useful compendium, specifically of ways to correct things when you went wrong).</p> + </li> +</ul> diff --git a/files/ko/learn/tools_and_testing/index.html b/files/ko/learn/tools_and_testing/index.html new file mode 100644 index 0000000000..bbb3cb90ef --- /dev/null +++ b/files/ko/learn/tools_and_testing/index.html @@ -0,0 +1,31 @@ +--- +title: Tools and testing +slug: Learn/Tools_and_testing +translation_of: Learn/Tools_and_testing +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">HTML, CSS, 자바스크립트와 같은 핵심 웹 기술들에 익숙해지고, 다양한 경험을 쌓고, 다양한 자원을 활용하고, 새로운 팁과 방법들을 배우면서, 여러분은 여러 종류의 도구들을 활용할 수 있게 될 겁니다. 미리 작성된 CSS 또는 자바스크립트 코드부터, 앱 테스트와 자동화 등. 여러분의 웹 프로젝트가 점점 커지고 복잡해지면 여러분은 이런 도구들과 신뢰성 있는 테스트를 필요로 할 것입니다. 이 파트에서는 이러한 도구들을 쓰거나 선택하기 위해 무엇을 알아야 하는지 알려줍니다.</p> + +<p>웹 산업은 복잡하기에 아름답습니다. 우리가 웹 사이트를 만드는데 쓰는 핵심 기술들은 상당히 안정적이지만, 이런 기술들에 기반하여 더욱 개발을 편리하게 해 주는 새로운 기능과 도구들이 계속해서 생겨나고 있습니다. 거기다 웹 표준, 크로스 브라우저 지원, 모바일 호환 및 장애인들을 위한 접근성까지도 신경써야 합니다.</p> + +<p>Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.</p> + +<div class="note"> +<p><strong>Note</strong>: Because new tools appear and old ones go out of fashion all the time, we have deliberately written this material to be as neutral as possible — we want to focus first and foremost on the general types of tasks these tools will help you accomplish, and keep prescribing specific tools to a minimum. We obviously need to show tool usage to demonstrate specific techniques, but be clear that we do not necessarily recommend these tools as the best or only way to do things — in most cases there are other ways, but we want to provide you with a clear methodology that works.</p> +</div> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, or making effective use of JavaScript libraries, or writing tests and running them against your code using test runners, etc.</p> + +<p>You need a solid foundation first.</p> + +<h2 id="Modules">Modules</h2> + +<dl> + <dt>Real world web development tools (TBD)</dt> + <dd>In this module, we explore the different kinds of web development tools available. This includes reviewing the most common kinds of tasks you may be called on to solve, how they can fit together in a workflow, and the best tools currently avaiable for carrying out those tasks.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a></dt> + <dd>This module looks specifically at the area of testing web projects across different browsers. Here we look identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</dd> +</dl> |