2022.06.16 - (6/17완성) 노마드코더 크롬 앱 만들기 정리

1. localstorage

user의 이름을 기억하고 싶을때 브라우저에 공짜로 기억하게 해주는 기능이다. 나중에 가져다 쓸 수 있음 

 

- method

setitem : 정보를 저장할 수 있음

 1) localStorage.setItem("username", "hyo")

 2) localStorage.getItem("username")

 3) localStorage.removeItem("username") / 지우기

 

 - 웹 스토리지란? (web storage)

 : 클라이언트 단, 브라우저 상에 데이터를 저장할 수 있는 기술이다. 오직 문자형(String)만 지원한다. 

 1) 로컬 스토리지(localStorage)

  웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.

 2) 세션 스토리지(sessionStrorage)

  웹페이지의 세션이 끝날 때 저장된 데이터가 지워짐

 

* 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며,

각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸한다.

반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있음.

 

 

2. input hidden 속성

<input type=“hidden”>은 사용자에게는 보이지 않는 숨겨진 입력 필드를 정의한다.
숨겨진 입력 필드는 렌더링이 끝난 웹 페이지에서는 전혀 보이지 않으며, 페이지 콘텐츠 내에서 그것을 볼 수 있게 만드는 방법도 없다.
따라서 숨겨진 입력 필드는 폼 제출 시, 사용자가 변경해서는 안 되는 데이터를 함께 보낼 때 유용하게 사용된다.

3. interval()

'매번' 일어나야하는 동작 (2초, 3초 ...)

setInterval(sayHello, 3000);

=> 3초 마다 함수 실행 

 

4. timeout()

" 몇 초 후 " 일어나야하는 동작 (2초, 3초 ...)

setTimeout(sayHello, 3000);

=> 3초 후 함수 실행

5. padStart()

pad는 좌우에 특정한 문자열로 채우는 기능이다.

첫번째 파라미터인 maxLength를 받아 문자열의 길이가 maxLength보다 작을 경우 나머지를 특정한 문자열로 채워주는 기능이다.

"1".padStart(2,"0")

=> "1" string의 길이를 2로 만드는데 그 길이가 2가 아니라면, 앞쪽에 "0"을 추가한다.

 

* padStart()는 문자열에만 적용되는 속성이므로, "0"이라는 문자열을 넣어주기 위해서는 숫자를 문자열로 변환해야한다.

  const hours = String(date.getHours()).padStart(2, "0");

6. JSON.stringify , JSON.parse

JSON.stringify() : json 객체를 String객체로 변환

JSON.parse() : String 객체를 json 객체로 변환

 

JSON.stringify([1,2,3,4])

=> "[1,2,3,4]"

JSON.number([1,2,3,4])

=> [1,2,3,4]

 

7. filter()

filter는 명칭과 같이 callbackFunction의 조건에 해당하는 모든 요소가 있는 배열을 새로 생성하는 기능을 한다.

어떤 데이터 집합에서 특정 조건을 만족하는 값만 반환받기를 원할 때 filter 를 사용하면 된다. 

let animals = [
  { species: 'mammalia', name: "cat" },
  { species: 'reptiles', name: "lizard" },
  { species: 'amphibia', name: "flog" },
  { species: 'mammalia', name: "dog" },
  { species: 'amphibia', name: "salamander" }
];
const result = animals.filter((value)=> value.species == "mammalia");
console.log(result);

=>

[{ species: "mammalia", name: "cat" }, 
{ species: "mammalia", name: "dog" }]

 

 

 

 

[ 결과물 ] 

로그인 전~~

 

로그인 후 할일 추가 

 

<노마드코더 최종 정리>

1. 랜덤 배경을 지정할 수 있다. 

2. 현재 시각을 표시할 수 있다. 

3. 사용자의 이름을 입력값을 받아 로그인할 수 있다.

4. 해당 이름을 저장할 수 있다. 

5. todo리스트를 입력 및 삭제할 수 있다. 

6. 랜덤 명언을 표시할 수 있다. 

7. 나의 위치와 날씨를 표시할 수 있다. 

 

 

 

 

 

[ 참고 강의 ]

https://nomadcoders.co/javascript-for-beginners/lobby

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders