[본 캠프 15일차] 5회차 걷기반 강의 + 팀 프로젝트 3일차

배열 API = 배열이 가지고 있는 메서드

 

함수 : 호출의 주체가 없는 것( )

메서드 : 호출의 주체가 있는 것(obj.method1() )

forEach, map, filter

 

slice()

: 시작과 끝을 위치를 잘라서 가져온다.

const numbers = [1, 2, 3, 4, 5];

const newNumbers = numbers.slice(1, 3); // [2, 3]

 

some()

: 조건에 만족하는게 하나라도 있으면 true,false 값 출력 (논리합연산자)
const numbers = [1, 2, 3, 4, 5];

const result = number.some(function (n) {

    return n === 2; // true
    return n > 5; // false
});
console.log(result);

 

const people = [
  {
    name: "홍길동",
    age: 21,
  },
  {
    name: "홍길순",
    age: 30,
  },
];

// 30살 이상인 사람이 한명이라도 존재하니???
const result = people.some();

const result = people.some(function (person) {
  if (person.age >= 30) {
       return true;
  } else {
       return false;
  }
}
return person.age >= 30;

 

 

every()

: 조건이 모두 만족하면 (논리곱연산자)

---

동기적 처리

const a = 1;

const b = 2;

console.log(a);
console.log(b);

 

비동기

: 외부 데이터를 가지고 오거나 외부 데이터를 입력해야 하는 경우

 

promise

: '비동기 (promise)' 객체 3가지를 이용하여 코딩을 한다.

1. 요청중 pending

2. 성공 fulfil ed 이행됐다

3. 실패 reject ed 

 

promise 를 핸들링 할 수 있는 방법 2가지

1. then, catch 시간 상 안함

2. async, await 

 

fetch 와 json 은 외부에서 가져온 것들이기 때문에 비동기여서 async와 await 를 사용해서 핸들링이 필요하다

// fetch 라는 함수가 promise 를 반환하는 함수이기 때문에 비동기함수

// await 기다려라 fetch(url) 의 pending(요청중)이 끝날때까지

// 3번줄에서 못내려간다 4번줄 console.log

// pending 요청중 (비동기이기 떄문에)

//await 의 역할은 fetch 의 역할을 다 수행하기 전까지 잡아두는 역할이다

//다 수행하기 전까지 console.log 를 실행하지 않는다.

// await 를 사용하기 위해선 async 함수여야 한다

// 함수 앞에 async 키워드를 넣어줘야 한다

const result = printTest(2, 10);

// await를 사용하기 위해 async 를 함수 앞에 써준다.

async function printTest() {

  //try ~ catch 블럭

  try {

    // fetch는 비동기함수이기 때문에 await

    const result = await fetch("https://jsonplaceholder.typicode.com/users");

    // json도 비동기함수이기 때문에 await

    const users = await result.json();

    // console.log는 동기 함수이기 때문에 먼저 실행된다.

    console.log(users);

  } catch (error) {

    console.log(error);

  }

}

// fetch 로 받아온 결과값을 자바스크립트의 객체형태로 변환시켜주는게 .json

// .json 도 promise (비동기)라서 await 를 써줘야한다(기다려야한다).

비동기 함수를 동기적으로 표현해준 코드 (비동기 함수를 동기적으로 처리하기 위해 await 를 쓴다)

 

 

fetch 를 요청해야 json 을 보내줄탠데 fetch 요청이 다 되기전에 json 을 줄 수 없으니까 await 로 fetch 가 다 요청될때가지 기다린다. 

 

await 를 써서 동기적으로 처리할 순 있으나 시간이 좀 걸릴 수 있다 가지수에 따라 완료될 때까지 기다려야 하니 끝나고 시작하고 끝나고 시작하고 해야하지만 비동기적으로 한번에 처리하면 시간이 더 빨리 진행될 수도 있다.

---

팀 프로젝트 3일차 firebase auth 를 이용하여 회원가입과 로그인 기능 구현 완료했고, 우측 헤더부분에 로그인과 회원가입 버튼을 만들어 양쪽으로 이동가능하게 만들었고, 오늘 자기전까지 로그인 인증 부분이 계속 유지되게 구현하고 회원가입 완료되면 로그인 페이지로 이동, 로그인 완료되면 메인 페이지로 이동 가능하게 구현할 것이다.