[2주차] 바닐라 JS로 크롬 앱 만들기

Nomad Coders "바닐라 JS로 크롬 앱 만들기" 
- JavaScript for Beginners

---

Nomad Coders

 

GDSC FE-Toy Project Study Plan

• 다음 시간까지 1차 프로젝트 완성 및 발표

• React 공부 계획 논의하기

 

Week 2) ~10/14

• 자유롭게 강의 진도 나가기
  11/4(목)까지 프로젝트 완성

• 발표자: 하수민, 장효신
→ 공부한 내용, 개념 설명 등

• 크롬웹/투두리스트 진행 상황 발표

 

---

JavaScript

• Map, filter, reduce 사용법

• 브라우저에 값을 저장하는 방법 - 웹 스토리지

 

• Map, filter, reduce 사용법

    📍 Map, filter, reduce 공통점

       - ES6에서 추가된 메서드

       - 배열 타입에 사용

       - 각 요소들을 파라미터로 받아 작동

 

     1) Map

       - 배열의 각 원소를 2배

const numbers = [1, 2, 3, 4, 5];
const numbersMap = numbers.map(val => val * 2);

console.log(numbersMap);

//실행결과 : [2, 4, 6, 8, 10]

   

       - 세 개의 매개 변수를 가지고 있음

            º value : 현재 요소

            º index : 요소 인덱스

            º array : map()을 호출한 원본배열

const numbers = [1, 2, 3];
const numbersMap = numbers.map((value, index, array)=> {
	console.log(value, index, array);
    return value * 2;
});

console.log(numbersMap);

/**실행결과
* 1 0 [1, 2, 3]
* 2 1 [1, 2, 3]
* 3 2 [1, 2, 3]
* [2, 4, 6]
*/​

    

 

     2) filter

arr.filter(callback(element[, index[, array]])[, thisArg])

 

       - filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

       - 오직 Boolean 타입만 반환하고, 리턴 값이 true인 경우만 배열에 추가

       - 중복제거처럼 조건에 맞는 특정 요소만 배열에 넣고 싶은 경우에 사용

       - Map과 마찬가지로 세 개의 매개 변수를 가지고 있음

            º value : 처리할 현재 요소

            º index : 처리할 현재 요소의 인덱스

            º array : filter를 호출한 배열

 

       Ex1) 요소의 삭제 버튼을 클릭하면 toDos 배열에서 요소를 삭제하는 예제

function deleteTodo(event) {
	const li = event.target.parentElement;
    
    if (li.classList.contains("click")) {
    	clickLength--;
    }
    
    li.remove();
    
    toDos = toDos.filter(item => item.id !== parseInt(li.id));
    saveToDos();
    
    allLength--;
    paintPercent();
}

 

       Ex2) 문자의 길이가 5보다 큰 과일만 배열에 담는 예제

const fruits = ["Apple", "Banana", "Lemon", "Watermelon"];
const fruitsFilter = fruits.filter(word => word.length > 5);

console.log(fruitsFilter);

//실행결과: ['Banana', 'Watermelon']

 

 

     3) reduce

      - 배열 각 요소에 대해 reducer 함수 실행

      - Map과 filter와 달리 배열이 아닌 하나의 결과값을 반환

      - 누산기(acc) : reduce 함수를 수행하면서 생기는 값을 임시적으로 보관

const numbers = [1, 2, 3, 4];
const numbersSum = numbers.reduce((acc, cur) => {
	console.log(acc, cur);
    return acc + cur;
});

console.log(numbersSum);

/*실행결과
* 1 2
* 3 3
* 6 4
* 10
*/

 

      - 누산기(acc) : reduce 함수를 수행하면서 생기는 값을 임시적으로 보관

       Ex) 초기값 10부터 계산하는 예시

const numbers = [1, 2, 3, 4];
const numbersSum = numbers.reduce((acc, cur) => {
	console.log(acc, cur);
    return acc+cur;
}, 10);

console.log(numbersSum);

/*실행결과
* 10 1
* 11 2
* 13 3
* 16 4
* 20
*/

 

       - 네 개의 매개변수를 가지고 있음

            º accumulator: 리턴한 값을 저장하는 변수. 초기값을 지정한 경우 초기값부터 시작

            º currentValue: 현재 요소

            º currentIndex: 요소의 인덱스

            º array: reduce()을 호출한 원본 배열

 

const numbers = [1, 2, 3, 4];
const numbersSum = numbers.reduce(
	(accumulator, currentValue, currentIndex, array) => {
    	console.log(accumulator, currentValue, currentIndex, array);
        return accumulator + currentValue;
	},
    10
);

console.log(numbersSum);

/*실행결과
* 10 1 0 [1, 2, 3, 4]
* 12 2 1 [1, 2, 3, 4]
* 13 3 2 [1, 2, 3, 4]
* 16 4 3 [1, 2, 3, 4]
* 20
*/

 

 

 

• Web Storage - 브라우저에 값을 저장하는 방법

    - 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소

    - 키/값 쌍으로 데이터 저장

    - 키 기반으로 데이터 조회

 

    ※ 2종류 : 로컬 스토리지 vs 세션 스토리지

    - 같은 storage 객체를 상속하기 때문에 동일한 메서드들을 가짐

    - 가장 큰 차이점은 "데이터의 영구성"

 

      1) 로컬 스토리지

    - 세션이 끝나더라도 데이터가 지워지지 않음

    - 여러 탭이나 창 간에 데이터가 공유됨

    - 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있음

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

 

    - 오직 문자형 데이터 타입만 지원

    - JSON 형태로 데이터를 읽고 씀

    - 해결방법: JSON.stringify

localStorage.setItem("json", JSON.stringify({ a: 1, b: 2}));
// undefined

JSON.parse(localStorage.getItem("json"));
// {a: 1, b: 2}

 

 

      2) 세션 스토리지

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

    - 여러 탭이나 창이 띄워져있으면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장됨

    - 창이 닫힐 때 저장해 둔 데이터도 함께 소멸됨

 

 

 

 

 

출처

 

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

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

 

출처: https://gdscewha.tistory.com/entry/1주차-바닐라-JS로-크롬-앱-만들기?category=969301 [GDSC Ewha Tech Team Blog]