[크롬 앱 만들기] 사용자의 이름을 입력받아 인사하기

바닐라 JS로 크롬 앱 만들기 강의를 통해 다음과 같은 기능을 구현하는 방법을 배우고 있다.

https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca?hl=en 

Momentum

 

JS로 구현할 주요 기능은 아래와 같다.

1. 사용자에게 인사

2. 시간 표시

3. 랜덤 명언 표시

4. 랜덤 배경 사진 게시

5. todo 입력 및 체크

6. 사용자 위치의 날씨와 지역 표시

 

앞으로 기능 별로 완성할 때마다 간략하게 기록할 예정이다.

 

그리고 참고로 기능 구현이 목표이기 때문에, 구현 화면의 디자인은 매우 기본적일 거다. 공부할 때 함께 레이아웃도 계획해서 나중에 꾸밀 예정이다.

---

기능

- 사용자가 본인의 이름을 입력하고 submit 할 수 있도록 만들었다.

- 사용자의 이름을 입력받으면 'Hello 사용자'라고 인사하도록 만들었다.

 

 

 

기술

- 사용자 이름을 입력할 때 길이를 제한하였다.

- submit할 때 사용자 이름을 반드시 입력하도록 설정했다.

- submit할 때 기본적으로 새로고침 되는 현상을 막기 위해 preventDefault()를 활용했다.

- 입력된 사용자 이름을 브라우저가 기억할 수 있도록 localStorage를 이용했다.

- localStorage에 사용자 이름이 저장되어 있지 않다면 입력칸을, 저장되어 있다면 인사를 보이도록 특정한 class를 만들고 활용했다.

 

 

 

디버깅 한 것

(아래 링크 속 변경된 소스 코드 참고) 조건문을 통해 localStorage에 저장된 사용자 이름이 없다면, 그때 상수 savedUsername에 입력칸에서 입력받은 사용자 이름을 저장하도록 했다. 수강할 때 굳이 코드를 중복으로 쓰지 않고도 할 수 있을 것 같아 보여서였다.

 

실행해본 결과 의도대로 요소들이 보이지 않았다. 조건문은 새로고침 할 때 한 번만 실행되고, 사용자의 이름을 localStorage에 저장했더라도 html은 변경하지 않았기 때문이다.

 

그래서 처음 실행될 때 사용자 이름이 저장되어 있을 때도, 저장되어 있지 않아 입력을 받았을 때도 사용자의 이름과 인사 문구를 출력하도록 코드를 수정했다.

---

https://github.com/soaringwave/html-JS-css/commit/a761031ca9167154091db17e8f31bb009f1a3837