크롬 앱 만들기 4. 수업따라 JS 이용하기

이 프로젝트는 '바닐라 JS로 크롬 앱 만들기'입니다.

이 주제의 경우, NOMAD CODERS에서 누구든지 들을 수 있는 수업입니다.

노마드 코더 Nomad Coders – Clone Startups. Learn to Code.

노마드 코더 Nomad Coders

새 학기 시작과 함께 준비를 하느라 최근 글을 많이 쓰지 못했습니다...

하지만 수업의 경우 2주 챌린지에 맞춰 2.22일 내로 모두 수강하였습니다.

하지만 올리는 것에 대해 고민을 해 보았는데, 절차별로 하나하나 설명을 하는 것은 Nomad Coders의 수업을 컨닝했다는 생각이 들고 이 수업을 듣는 입장에서 과정 하나하나를 모두 서술하는 것 보다 결과를 보여주어 과정이 궁금한 사람들은 직접 수업을 들을 수 있도록 하는 것이 옳다고 생각하여 종합적으로 보여드리고자 합니다.

또한 이 내용을 그대로 사용할 수도 있기 때문에 몇몇 부분에 필요한 부분을 지웠습니다. 양해 부탁드리겠습니다.

 

먼저, 사용한 파일의 목록입니다.

이미지의 경우 원하는 만큼 넣을 수 있으나 배우고 실습하는 것이기 때문에 3개정도만 넣었고

나머지 css / html을 포함한 모든 파일은 수업을 들으면서 제작하게 됩니다.

또한 수업이 바닐라JS에 맞춰져있어 css와 html에 관한 내용은 적습니다. 이 부분은 스스로 채워보고자 합니다.

 

저 상태로 엔터를 누르게 되면

이런 식으로 기본적인 틀이 잡히게 됩니다. 그 외 필요한 부분은 js파일을 만들고 필요할 때 마다 추가하면 됩니다.

---

 

이번 프로젝트의 경우, 크롬을 처음 켰을 때, 웨일브라우저처럼 초기화면을 만드는 것을 배웁니다.

그렇기 때문에 사진을 넣고 할 일을 적는 리스트, 이름과 시간, 날짜 등을 넣게 됩니다.

웨일브라우저를 사용하지 않는 분을 위해 웨일브라우저 초기화면을 올리도록 하겠습니다.

위 사진이 웨일브라우저 시작화면입니다. 그리고 저것이 저희의 목표라고 할 수 있습니다.

 

수업을 듣고 만들기만하면 우리가 원하는 목표와 달리 초라한 결과가 나오게 됩니다.

그 이유는 디자인적 요소인 css파일로 추가적인 디테일을 넣지 않았기 때문입니다.

만약 수업을 들으셨다면 css파일의 내용은 아마 다음과 같을 겁니다.

.hidden {
    display: none;
  }

또한 몇가지 기능이 빠져있습니다.

로그인은 할 수 있지만 비밀번호를 입력하는 등의 행위는 없으며,

로그아웃을 하는 기능도 없습니다. 

디자인과 함께 이러한 부분을 채워서 다음 글로 찾아뵙겠습니다.