자바스크립트(javascript)

자바스크립트(javascript)

자바스크립트를 처음부터 차근차근 배워보고 싶어 노마드 코더의 기초 강의를 수강하게 되었다.

현재 수강 중인 강의!

이 강의의 최종 목표는 투두 리스트(to do list) 홈페이지를 만드는 것인데 로그인, 날씨 등등 몇 가지 기능을 더 추가한다.

어제까지 로그인 파트까지 수강했고 오늘 메인시계와 배경화면? 부분을 들을 예정이다.

username 입력폼 username 입력 중 submit(제출) 후 화면

딱 여기까지,,,ㅎ 구현했다. 추가적으로 브라우저를 새로고침 하고도 입력한 username을 유지하기 위해 브라우저에 내장된 데이터베이스와 같은 API를 이용했다.

local storage에 username이 저장된 화면

local storage라는 건데 브라우저에서(나는 크롬을 사용했다!) 검사 - application에서 확인할 수 있다.

index.html

html 파일은 크게 form과 h1으로 구성되어있고 둘 다 hidden이라는 class name으로 인해 숨겨져 있다.

style.css

hidden 클래스는 css 파일을 통해 제공된다.

가장 메인인 js 파일!

app.js - 1

우선 가장 처음에 const로 변수들을 선언해 준다.

app.js - 2

js의 두 가지 함수로 onLoginSubmit()은 제출 버튼을 눌렀을 때 브라우저에서 실행하는 함수이고, paintGreetinf()은 username이 있을 때 "hello username"을 보여주는 함수다.

app.js - 3

브라우저를 새로고침 할 때 계속해서 username을 입력하는 것은 번거롭기 때문에 if-else문과 local storage를 이용했다. 이를 통해 새로고침 후에도 계속 username이 남아있게 된다.

강의 하나하나가 설명이 쉽고 간단해 누구나 따라 할 수 있을 것 같다. 선생님이 영어로 하시지만 자막도 다 있고 크게 어려운 단어도 없어 걱정 없이 들을 수 있다. 무엇보다 코딩을 알려준다는 것에서 멈추지 않고 한 줄의 소스도 왜 이렇게 되는지에 대한 흐름까지 알려주어서 이해가 더 잘되는 것 같다. 빨리 다음 부분도 들어서 완성해보고 싶다!

공유하기 글 요소 저작자표시

from http://goguma-guma.tistory.com/37 by ccl(A) rewrite - 2021-12-02 15:01:26