코스 : 우아한테크코스는 프론트엔드 코스와 백엔드 코스로 구성되어있다.
크루 : 학생들은 크루라고 호칭한다.
미션 : 각 코스 별로 크루들이 진행할 미션이 있다.
팀 : 미션마다 각 코스별 크루들로만 구성된 팀을 매칭할 수 있다.
이 앱은 코스별로 크루들을 관리하고, 코스별 미션마다 팀을 매칭한다.
상단에 탭 메뉴가 존재하며 각 탭에 따라 적절한 기능을 수행한다.
크루 관리탭은 크루를 추가하거나 삭제하기 위한 기능을 수행한다.팀 매칭 관리탭은 팀 매칭을 하기 위한 기능을 수행한다.- 다른 탭으로 이동했다 돌아와도 기존 탭의 상태가 유지되어야 한다.
- localStorage를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.
크루 관리 탭에서, 다음과 같은 규칙으로 크루를 추가하거나 삭제할 수 있다.
- 코스별로 크루를 추가할 수 있다.
- 동일한 이름의 크루는 추가할 수 없다.
- 크루 이름은 최대 5글자까지 가능하다.
- 코스별로 크루를 삭제할 수 있다.
- 삭제할 때는 confirm을 사용하여, 사용자가 한번 더 확인할 수 있게 한다.
- 크루 table의 첫번째 열에는 index를 넣어 순서를 표시한다. index는 '1'부터 시작한다.
팀 매칭 관리 탭에서, 다음과 같은 규칙으로 팀을 매칭할 수 있다.
- '코스별' '미션'마다 '무작위로' 팀을 매칭할 수 있다.
- 예를 들어 프론트엔드의 숫자 야구 게임 미션은 프론트엔드 크루들로만 무작위로 팀이 매칭되고, 백엔드의 숫자 야구 게임 미션은 백엔드 크루들로만 무작위로 팀이 매칭된다.
- 팀 매칭 시
1팀당 인원 수에 입력한 값 보다 더 적은 수의 크루들로 구성된 팀이 없어야 한다. 남은 인원은 앞 팀부터 순서대로 배정한다.- 예를 들어, 크루가 11명일 때
1팀당 인원 수로 3명을 입력 하면, 4 4 3으로 팀이 구성되어야 한다. - 팀은 재매칭할 수 있다.
- 예를 들어, 크루가 11명일 때
- 팀 매칭 결과는 프로그램 실행 결과 예시와 같이 쉼표로 구분한다.
- 제공하는 아래의 마크업을 활용하여 프로그램을 구현한다.
<div id="app">
<header>
<h1>우테코 크루와 팀 매칭 관리 보드</h1>
<nav>
<ul>
<li>
<button id="crew-tab">크루 관리</button>
</li>
<li>
<button id="team-tab">팀 매칭 관리</button>
</li>
</ul>
</nav>
</header>
<main>
<section>
<h3>크루를 관리할 코스를 선택해주세요</h3>
<div>
<input id="frontend-course" type="radio" name="course" value="frontend" />
<label for="frontend">프론트엔드</label>
<input id="backend-course" type="radio" name="course" value="backend" />
<label for="backend">백엔드</label>
</div>
</section>
<section>
<h3>프론트엔드 크루 관리</h3>
<form>
<label>크루 이름</label>
<input id="crew-name-input" type="text" />
<button id="add-crew-button">확인</button>
</form>
</section>
<section>
<h3>프론트엔드 크루 목록</h3>
<table id="crew-table" border="1">
<thead>
<tr>
<th></th>
<th>크루</th>
<th>관리</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>준</td>
<td>
<button class="delete-crew-button">삭제</button>
</td>
</tr>
</tbody>
</table>
</section>
</main>
</div><div id="app">
<header>
<h1>우테코 크루와 팀 매칭 관리 보드</h1>
<nav>
<ul>
<li>
<button id="crew-tab">크루 관리</button>
</li>
<li>
<button id="team-tab">팀 매칭 관리</button>
</li>
</ul>
</nav>
</header>
<main>
<section>
<h3>팀 매칭을 관리할 코스, 미션을 선택하세요.</h3>
<form>
<select id="course-select">
<option value="frontend">프론트엔드</option>
<option value="backend">백엔드</option>
</select>
<select id="mission-select">
<option value="baseball">숫자야구게임</option>
<option value="racingcar">자동차경주</option>
<option value="lotto">로또</option>
<option value="shopping-cart">장바구니</option>
<option value="payments">결제</option>
<option value="subway">지하철노선도</option>
<option value="performance">성능개선</option>
<option value="deploy">배포</option>
</select>
<button id="show-team-matcher-button">확인</button>
</form>
</section>
<section>
<h3>프론트엔드 숫자야구게임 미션의 팀 매칭</h3>
<div>
<div>
<p>아직 매칭된 팀이 없습니다. 팀을 매칭하겠습니까?</p>
<form>
<label>1팀당 인원 수</label>
<input id="team-member-count-input" type="number" />
<button id="match-team-button">팀 매칭</button>
</form>
</div>
<h4>크루 목록</h4>
<ul>
<li>준</li>
<li>포코</li>
</ul>
</div>
</section>
<!-- 팀 매칭이 된 경우 -->
<section>
<h3>프론트엔드 숫자야구게임 조회</h3>
<p>팀이 매칭되었습니다.</p>
<ul id="team-match-result">
<li>준,포코</li>
</ul>
<p>
팀을 재매칭 하시겠습니까?
<button id="rematch-team-button">재매칭</button>
</p>
</section>
</main>
</div>- 팀을 랜덤하게 매칭하는 기능은
MissionUtils라이브러리의Random.shuffle을 사용해 구현한다.MissionUtils라이브러리 스크립트는index.html에 이미 포함되어 전역 객체에 추가되어 있으므로, 따로import하지 않아도 구현 코드 어디에서든 사용할 수 있다.
- 스크립트 추가 외에 주어진
index.html파일은 수정할 수 없다.- 스타일(css)은 채점 요소가 아니다.
- 모든 예외 발생 상황은
alert메서드를 이용하여 처리한다. - 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
- 자바스크립트 코드 컨벤션을 지키면서 프로그래밍 한다.
- indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용한다.
- 예를 들어 while문 안에 if문이 있으면 들여쓰기는 2이다.
- 힌트: indent(인덴트, 들여쓰기) depth를 줄이는 좋은 방법은 함수(또는 메소드)를 분리하면 된다.
- 함수(또는 메소드)가 한 가지 일만 하도록 최대한 작게 만들어라.
- 변수 선언시
var를 사용하지 않는다.const와let을 사용한다. import문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.- 함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.
- 함수(또는 메소드)가 한 가지 일만 잘 하도록 구현한다.
- 미션은 javascript-teammatching-precourse 저장소를 Fork/Clone해 시작한다.
- 기능을 구현하기 전에 javascript-teammatching-precourse/docs/README.md 파일에 구현할 기능 목록을 정리해 추가한다.
- Git의 커밋 단위는 앞 단계에서 README.md 파일에 정리한 기능 목록 단위로 추가한다.
- AngularJS Commit Message Conventions 참고해 commit log를 남긴다.
- 과제 진행 및 제출 방법은 프리코스 과제 제출 문서 를 참고한다.
- 미션 구현을 완료한 후 GitHub을 통해 제출해야 한다.
- GitHub을 활용한 제출 방법은 프리코스 과제 제출 문서 를 참고해 제출한다.
- GitHub에 미션을 제출한 후 우아한테크코스 지원 플랫폼 에 접속하여 프리코스 과제를 제출한다.
- 자세한 방법은 링크 를 참고한다.
- Pull Request만 보내고, 지원 플랫폼에서 과제를 제출하지 않으면 최종 제출하지 않은 것으로 처리되니 주의한다.
- 요구사항에 명시된 출력값 형식을 지키지 않을 경우 기능 구현을 모두 정상적으로 했더라도 0점으로 처리된다.
- 기능 구현을 완료한 뒤 아래 가이드에 따라 테스트를 실행했을 때 모든 테스트가 성공하는 지 확인한다. 테스트가 실패할 경우 0점으로 처리되므로, 반드시 확인 후 제출한다.
- 테스트 실행에 필요한 패키지 설치를 위해
Node.js버전14이상이 필요하다. - 다음 명령어를 입력해 패키지를 설치한다.
// {폴더 경로}/javascript-teammatching-precourse/ 에서
npm install- 설치가 완료되었다면, 다음 명령어를 입력해 테스트를 실행한다.
// {폴더 경로}/javascript-teammatching-precourse/ 에서
npm run test- 아래와 같은 화면이 나오며 모든 테스트가 pass한다면 성공!
