회사에 오신걸 환영 합니다.

일을 할 준비를 해봅시다. 두 가지를 진행해주시면 됩니다.

1.회사 업무를 진행할 수 있게, 개발 환경 구축을 진행해주세요.

프로젝트를 진행하려면, 버전 관리 툴이 있어야겠죠. 저희 회사는 github를 사용합니다.

본인만의 Repository를 만들어 보시고, 간단한 자기소개 페이지를 만들어서 공유해주세요.

2.프로젝트를 할 때 사용하실 IDE(통합 개발 환경) 툴을 설치해주세요, 기본적으로는 InteliJ를 사용할 것이지만, 본인에게 맞는 것으로 하시면 됩니다.

*참고자료 : https://youtu.be/lelVripbt2M

[과제 결과물]

본인이 생성한 Repository 주소 (구현한 자기소개서가 업로드 되어있어야 합니다.)

개발 환경 구축은 완료가 되신 것 같네요.

일을 하나씩 배워볼까요? 페이지에서 가장 중요한 것은 레이아웃 입니다.

레이아웃을 어떻게 구성하느냐에 따라서, 개발 흐름이 결정되고, 코드의 품질에도 영향을 미칩니다.

이번에는 선택과제를 드릴게요, 아래에서 맘에 드는 것을 골라서 웹 화면을 구성해주세요.

1.지뢰찾기 게임 시작 화면

2.자판기

3.계산기

현업에서는 요구사항을 명확히 아시는 게 중요해요, 기능을 구현하는 게 아니라 화면만 구성하면 된다는 걸 명심해 주세요.

예를 들어 지뢰찾기 같은 경우에 버튼을 클릭했을 때 이벤트는 없어도 됩니다.

결과물은 항상 git에 올리시는 거 잊지 마시고요. 처음 맡기는 정식 과제이니 기대하겠습니다.

아래 과제는 필수가 아닙니다. 개념을 명확히 공부하고 싶으신 분은 추가로 해주시면 됩니다.

1. display 속성에 대해서 조사해주세요. 조사할 때 block과 inline의 차이점에 대해서도 조사하고, 코드로 그 예를 확인해주세요.

2. HTML의 Layout의 종류를 설명하고, 각각에 대해 코드로 예시를 들어주세요.

   * 참고 링크 제공 예정

3. html의 박스 모델이라는 개념을 조사해주세요. 조사할 때 아래의 내용이 포함되어야 합니다.

    3-1) 박스의 개요

       * Contents

       * Padding

       * Border

       * Margin

    3-2) border

    3-3) margin

   위의 개념을 설명할 수 있는 예제 코드를 html 파일로 작성해주세요.

   * 참고 링크 제공 예정

4. HTML에서 사용하는 class와 id의 차이점에 대해 조사해주세요

   * class의 개념을 설명할 때는 최소한 CSS의 selector 5개를 설명하고, 그에 대한 예시도 들어주세요.

   * 참고 링크 제공 예정

5. 자기소개하는 간단한 HTML 파일을 만들어주세요. 만들 때 CSS는 따로 파일을 만들어서 작성해주세요.

   * table은 반드시 하나 이상 포함해주세요.

   * div는 3개 이상 포함해주세요, 그리고 이들을 제어하는 selector도 포함돼 있어야 합니다.

   * 레이아웃 중 하나를 명시적으로 사용해주세요.

[과제 결과물]

1. 개념 조사는 msoffice 형식을 활용해주시면 됩니다.

2. 코드는 github에 올리고 링크를 주시면 됩니다. github가 어려운 분은 구현한 프로젝트를 그대로 압축해서 업로드하면 됩니다.

어느정도 업무에 익숙해지신것 같으니 실제 이벤트가 있는 웹페이지를 만들어봅시다.

시계를 만들어봅시다.

FR1) 화면에 배터리가 표시되며, 처음에 동작시키면 100%이고, 1초에 1%씩 감소합니다. 

FR2) 배터리가 0%가 되면, 시계화면에서 시간이 표시되지 않고 검은색으로 변합니다.

FR3) 시/분/초를 설정하고 추가를 누르면 알람이 추가됩니다. 알람 현황에도 업데이트 됩니다. 최대 3개 알람까지 가능합니다.  

FR4) 본인만의 추가기능을 1개 추가합니다. 깃허브에 코드를 올리시고 공유해주시면 됩니다.

아래 과제는 필수가 아닙니다. 개념을 명확히 공부하고 싶으신 분은 추가로 해주시면 됩니다.

1. HTML의 form과 action에 대해 조사해 주세요. 조사할 때 아래 개념을 포함해주세요.

   * method

   * GET / POST

   * parameter (name, value)

*참고 링크 제공 예정

2. 자바스크립트에 대해 조사해주세요. 아래에 대한 내용이 반드시 포함돼야 합니다.

   * DOM Manipulation

   * EventListener (이 부분은 onClick이랑 비교해주세요)

   * Event loop

   * getelementByID 

   * getElementsByClassName

   * queryselector vs queryselectorall

   * Node의 속성

  *참고 링크 제공 예정

3. JavaScript의 문법을 충분히 익혀주세요.

    3-1) 예제 코드가 있으니 한 번씩 수행해주세요. 변수 같은 걸 조금씩 바꿔보셔도 좋습니다.

      *참고 링크 제공 예정

    3-2) 아래 키워드는 중요한 개념입니다. 따로 조사해주세요. 예시 코드도 포함해주세요

      * var와 let의 차이

      * const  

      * ES5의 Array 관련 메소드 (최소 4개 이상)

      * rest parameter

      * Arrow function

      * 1급 객체

      * Object의 개념

4. 간단한 산술연산을 할 수 있는 계산기를 만들어주세요. 여러 번의 연산이 될 필요 없이 숫자 2개와 연산자를 한 번만 받아 계산되면 충분합니다.

      * 만약 페이지에 이벤트가 있다면 가능한 이벤트들에 대해 화면과 같이 설명되어야 합니다. 

      * 프로그램을 만들 때는 코드 이외에도 구현한 함수를 각각 설명하고, 프로그램 자체의 동작에 대해 포괄적으로 설명하는 문서를 작성해주세요.

        만약 구현하지 못한 부분이 있으면 해당 부분도 내용에 포함해주세요.

[과제 결과물]

1. 개념조사는 msoffice 형식을 활용해주시면 됩니다.

2. 코드는 github에 올리고 링크를 주시면 됩니다. github가 어려운 분은 구현한 프로젝트를 그대로 압축해서 업로드하면 됩니다.

최종 프로젝트를 진행해봅시다. 마지막 OJT과제인 만큼 힘내서 끝까지 완수합시다. 이번 프로젝트는 최종프로젝트 이므로 팀장님께 보고를 할 예정입니다. 본인의 프로젝트를 충분히 설명할 수 있는 문서까지 같이 만들어주세요.

1. 아래 기능이 들어간 to do list를 만들어주세요.

    FR1) 일정을 추가 할 수 있어야 합니다.

    FR2) 일정을 삭제 할 수 있어야 합니다.  

   * 만약 페이지에 이벤트가 있다면 가능한 이벤트들에 대해 화면과 같이 설명되어야 합니다. 

   * 프로그램을 만들 때는 코드 이외에도 구현한 함수를 각각 설명하고, 프로그램 자체의 동작에 대해 포괄적으로 설명하는 문서를 작성해주세요. 만약 구현하지 못한 부분이 있다면 해당 부분도 내용에 포함해주세요.

2. 회원가입 기능을 간단히 구현해주세요.

    FR1) DB를 구현할 필요는 없고, 회원가입 후 배열에 정보를 저장하면 됩니다.

    FR2) 아이디 중복 체크가 되어야 합니다.

    FR3) 비밀번호에 본인만의 규칙을 만들어주세요. 비밀번호 입력 시, 조건에 맞는지 체크하는 기능이 있어야 합니다.

   * 만약 페이지에 이벤트가 있다면 가능한 이벤트에 대해 화면과 같이 설명돼야 합니다.

   * 프로그램을 만들 때는 코드 이외에도 구현한 함수를 각각 설명하고, 프로그램 자체의 동작에 대해 포괄적으로 설명하는 문서를 작성해주세요. 만약 구현하지 못한 부분이 있다면 해당 부분도 내용에 포함해주세요.

[과제 결과물]

1. 개념조사는 msoffice 형식을 활용해주시면 됩니다.

2. 코드는 github에 올리고 링크를 주시면 됩니다. github가 어려운 분은 구현한 프로젝트를 그대로 압축해서 업로드하면 됩니다.