개요

아이엠파인 SD팀에서 자바스크립트는 단순히 웹프론트를 초월 하여 하나의 온전한 소프트웨어 개발언어로 보고 있습니다. 또한 이에 발 맞추어 모바일 앱, 데스크탑 애플리케이션과 같은 다양한 플랫폼을 빌드 할 수 있는 기술에 관심이 많으며, 이와 같은 최적의 도구를 활용 하여 최고의 가치를 창출 하는것에 목적이 있습니다.

이러한 다양한 도구를 활용함에 있어 자바스크립트에 대한 기본기와 프로그래밍에 대한 감각 및 코딩으로 표현되는 개발자의 창의성이 중요하다고 판단 하고 있습니다.

따라서 본 과제는 리엑트 혹은 Vue와 같은 프론트엔드 프레임워크나 기성 라이브러리의 사용 없이 순수한 자바스크립트와 HTML 및 CSS만을 사용하여 기본적인 프로그래밍 능력과 코딩 감각을 평가 하는것에 취지가 있습니다.

과제 : 인터랙티브 막대 챠트 어플리케이션 제작

<aside> 💡 위의 이미지 예시는 이해를 돕기 위하여 그려진 이미지 일 뿐 입니다. 본 이미지를 참고 하시어 최소한의 코드로 사용성을 보장 할 수 있도록 HTML기본 Element만을 사용하여 GUI를 구성하여 주십시오

</aside>

• 원본 이미지 파일

  아이엠파인SD팀_자바스크립트개발자_면접과제.pdf

• 과제에 대한 최소 개발 요건

  • 우측최상단에 [홍길동] 대신 본인의 이름 기제 바랍니다.

  1. 그래프

     • 하단에 구현될 각종 컨트롤러의 값을 그래픽 차트로 표현

  2. 값 편집

     • 표 형식으로 기존 추가 되었던 값을 편집 하거나 삭제 할 수 있음
       • 아이디는 편집 할 수 없으며, 값만 바꿀 수 있다.
     • Apply 버튼 클릭시 연관된 모든 컴포넌트들이 동시에 업데이트 됨

  3. 값 추가

     • 새로운 값을 입력 하여 추가 할 수 있음
     • Add 버튼 클릭시 연관된 모든 컴포넌트들이 동시에 업데이트 됨

  4. 값 고급 편집

     • 2~3번 에서 수정한 내용이 그대로 텍스트박스에 갱신 됨
     • 사용자가 직접 JSON을 편집 할 수 있으며, Apply 버튼 클릭시 연관된 모든 컴포넌트들이 동시에 업데이트 됨

제출파일구조와 요령

• 파일 구조

  

  • 기본적으로 index.css , index.html , main.js 로 구분하여 작성하여야 함
  • 필요시 js 파일은 여러개 생성가능하나 각 파일에 대한 역할과 구분을 명시 할 것
  • 별도의 이미지 리소스 (jpg , png) 일체 사용하지 말것

• 파일 제출

  개인 GITHUB 계정내 별도 Repository 생성후 해당 URL을 지원서와 함께 제출 할 것

심사 방법 및 주요 평가 포인트

• 심사 방법

  • Chrome 브라우저를 실행 한 뒤 제출된 html 파일을 드래그드롭 하여 작성된 어플리케이션을 평가함
  • 코드 에디팅 툴(VS Code)를 이용하여 html 코드 일체에 대하여 평가함

• 주요 평가 포인트

  • 절대평가 본 과제의 요건을 모두 만족 하였는가?
  • 절대평가 에러 없이 원활히 작동 하는가?
  • 상대평가 휴먼에러를 방지 할 수 있는 사용성 요소(UX)를 얼마나 잘 구성 하였는가?
  • 상대평가 이해가 쉽고 간결하며 독창적인 코드를 작성 하였는가?
  • 상대평가 동료 개발자들을 위하여 유효한 코멘트를 작성 하였는가?
  • 상대평가 기획의도안에서 창의력을 발휘하여 사용자 편의성을위한 요소를 추가 하였는가?

  <aside> 💡 절대평가 : 결과에 대해 수행 여부가 명확히 판단이 가능한 항목 상대평가 : 타 지원자들에 비해 상대적인 우수성을 평가하는 항목

  </aside>