[노마드코더] 바닐라JS로 크롬 앱 만들기 - #2. Login

2. LOGIN

2.1 회고

- 노마드코더 강의에서 로그인 기능은 백앤드 서버를 구축하지 않고 진행한다. 대신 localStorage(web api)의 도움을 받아 서버에 따로 저장하지 않고 웹 브라우저에 저장된 데이터를 활용한다. 개인적으로 백앤드 서버를 간단하게라도 구축해서 구현하는 방법을 알고 싶었지만 그럴 수 없어서 아쉬웠따!

 

- 강의에서 한것 외로 log-out 기능을 구현했는데 todolist가 있는채로 로그아웃하면 html에 목록이 그대로 남아있는다 ㅠ 로컬스토리지랑 메모리가 비워지는데 html이 왜남는건지... 이걸 해결하는 것이 추후 과제다! 이것만 끝내면 css작업하려고한다.

 

- 로그아웃 버튼을 누르면 todolist로 추가된 html 있는 요소를 없애기 위해서 오만가지 뻘짓을 했는데 결국 못했다.

근데 다른 분의 코드를 보니까 정말 쉽더라!.... 그냥 window 객채를 리로드 하면된다. 앞에 기능 구현하면서 새로고침하는 것을 막으려했던 이유가 메모리와 로컬스토리지 값이 초기화되서 그런건데, 반대로 로그아웃은 초기화가 되어야하는 거잖아? 왜 이렇게 생각을 못했나 싶다.

window.location.reload();

 

 

2.2 알게된 지식과 TIP

2.2.1 대문자 변수명

단순히 여러번 반복되는 값이지만 그 값을 수정해야하는 경우가 있다. 이번에는 '식별자'가 그랬다. 또한 그 값이 절대 변하면 안되는 것도 있었다. API key였다. 이러한 값들은 일반적인 변수 선언과 구분하기 위해 대문자 변수명을 사용한다.

// 예시
const HIDDEN_KEY = "hidden";
const ID_KEY = "id";

const API_KEY = 'sdf123klfdiod1235dfssdf'

 

2.2.2 localStorage

- 정의 : localstorage는 웹 API를 사용하기 위해 존재하는 브라우저에 있는 데이터 저장공간이다. 여기에 저장된 데이터는 탭이나 창을 닫아도 브라우저에 그대로 남아있게 된다. 클라이언트에서 넘어오는 데이터는 서버에 저장되어 해당 정보가 필요할 때 get 하는 방식이지만, 서버측의 도움 없이도 데이터를 저장할 수 있도록 하기 위한 저장공간이라고 생각하면 된다.

 

- 저장 방식 : 데이터를 로컬스토리지에 저장하려면 아래와 같은 별도의 작업이 필요하다.

localStorage.setItem("key","value"); // post
localStorage.getItem("key"); // get
localStorage.removeItem("key"); // delete
localStorage.clear(); // delete all
//put은 별도 구문이 없고 메모리에 저장한 정보를 수정하여 post하는 방법이 있다.

 

2.2.3 Event.preventDefault()

- 정의 : 이벤트 요소가 가지고 있는 기본 동작을 중단시키는 메소드이다. addEventListener같은 이벤트 핸들러의 콜백함수의 내부에서 선언한 구문이다. form을 submit(이벤트)하면 페이지가 새로고침되고 링크를 클릭(이벤트)하면 다른 페이지로 이동하게 되는데 이러한 기본 동작들이 작동하지 않도록 중단시키는 구문인 것이다.

 

그래서 로그인 기능 구현 시 사용자가 id를 submit할 때, localStorage로 데이터를 보내는데, 그때 화면을 새로고침하면 데이터가 사라지기 때문에 새로고침되지 않도록 기본동작(Default)을 막았다(prevent).

 

2.2.4 Element.classList

- 정의 : html요소에 있는 class를 변경하는 메소드다. element.className과 다른 점은, 읽기 전용 프로퍼티라는 점이다.

element.className은 반대로 이미 html요소에 있는 클래스 속성 값을 가져오거나, 설정할 수 있다.

클래스는 공백으로 구분하여 하나의 요소에 여러가지 클래스를 지정할 수 있다.

그런데 className을 사용하여 새로운 속성을 설정하면 여러가지 요소가 적힌 기존의 클래스 속성이 사라지고 새로운 속성으로 대체된다.

반대로 classList를 사용하면 기존의 리스트를 유지한 채, 새로운 속성을 추가(add), 삭제(remove), 교체(replace)할 수 있다.

// className
const cName = element.className; // 클래스 속성 값 가져오기
element.className = hidden; // 클래스 속성 값 바꾸기

// classList
element.classlist.add( string ); // 클래스 속성 추가하기
element.classlist.remove( string ); // 클래스 속성 제거하기
element.classlist.replace( oldClass, newClass ); // 클래스 속성 대체하기