유데미 취업부트캠프 - 프론트엔드&백엔드 : 31일차 TIL

✨현장수업 1일차

🙌🏻 Javascript

 

 

SEO

SEO는 "Search Engine Optimization"의 약자로, 검색 엔진 최적화를 의미하며, 이는 웹사이트가 검색 엔진에서 높은 순위를 얻을 수 있도록 최적화하는 프로세스를 말합니다. 검색 엔진은 사용자가 특정 키워드로 검색할 때 가장 관련성 높은 웹페이지를 보여주기 위해 다양한 기준을 활용합니다.

 

👉🏻 h1 태그는 한 페이지당 1개씩 사용한다.

👉🏻 img태그의 alt는 next.js에서 에러의 원인이 될수 있고, 접근성 SEO점수에서 높일수 있다고 한다.

👉🏻 시맨틱 태그 또한 SEO 최적화 방법 중 하나이다.

 

 

 

 

첫 현장강의 실습이였다! 

짧은 시간내에 동일한 페이지를 구현하느라 좀 힘들었지만

다행히 제시간 내에 완성할 수 있었다.

첫 타임어택이라 두근두근했다고 한다..

 

.main-reply button {
  width: 80px;
  margin-top: 16px;
  align-self: flex-end;
  /* margin-left: auto; */
}

댓글 남기기 버튼을 오른쪽배치 해야하지만, 당연히 align-item을 사용하면 되겠지? 하고있었는데 아무런 변화가 없어 굉장히 당황했다.

그러다가 align-self를 해볼까..? 했더니 이제서야 오른쪽 배치로 적용되었다..

 

align-item VS align-self

 

align-items:

• 적용 대상: 부모 요소에 사용됩니다.
• 목적: 부모 요소 내의 모든 자식 요소에 대해 수직(세로) 정렬을 지정합니다.

align-self:

• 적용 대상: 자식 요소에 개별적으로 사용됩니다.
• 목적: 특정 자식 요소에 대해 부모의 align-items 속성과는 다른 수직 정렬을 지정합니다.

 

 

.main-reply button {
  width: 80px;
  margin-top: 16px;
  margin-left: auto;
}

💡 margin-left: auto;를 사용하는법이 있다고 강사님께서 말씀해주셨다.

 

이런 방법은 생각해본적이 없었는데 left를 auto로 지정하면, 버튼의 크기를 제외한 여백이 자동으로 수평너비를 가득채우면서, 쭉 늘어져서 맨오른쪽으로 배치가 된다고 한다!

 

 

 

 

this -> 호출하는 시점으로 결정

콘솔로그에서 thiS는 전역windpw, global

 

✨ 화살표함수는 this가 객체로 고정이된다????

 

JSON

JSON의 자료형은 무엇일까요? 라고 강사님이 질문을 하셨을때

object라는 다수의 답변이 나왔지만 json은 object형태를 가진 text이다.

 

text는 대부분의 프로그래밍언어에서 가능하지만, JS의 특수한 object의 경우라면, 전달에 어려움이 있을 수 있기 때문이라고 하셨다.

 

 

 

Promise

요청한 작업이 성공적으로 받으면 콜백함수 이렇게 해줄게, 실패하면 이렇게 해줄게 말그대로 프로미스는 약속이다

const a = (callback) => {
  setTimeout(() => {
    console.log(1);
    callback();
  }, 1000);
};

const b = () => console.log(2);

a(() => {
  b();
});

 

이 코드를 Promise객체를 활용해보자.

const a = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(1);
      resolve();
    }, 1000);
  });
};

const b = () => console.log(2);

a().then(() => b());


// a(() => {
//   b();
// });

a의 함수는 promise의 객체를 return하는 함수로 변경되었고,

then의 메소드로 전달되는 함수(b)는 resolve의 매개변수에 들어가 사용되며, then을 사용하면 프로미스 객체를 꺼낼 수 있다

 

✨resolve는 기존의 callback 코드 대신 다음 실행할 콜백콜백함수의 위치를 명시해준다.

순서 실행보장 역할!

 

resove와 reject

 

then에는 resolve함수를 넣어주고,

catch에 error callback(reject)함수를 넣어준다.

resolve와 reject는 상충되는 개념으로 둘중에 하나만 실행될것이다.

 

peding 👉🏻 resolve/reject 👉🏻 await

 

 

const a = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(1);
      resolve();
    }, 1000);
  });
};
const b = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(2);
      resolve();
    }, 1000);
  });
};
const c = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(3);
      resolve();
    }, 1000);
  });
};
const d = () => {
  console.log(4);
};

1,2,3,4가 순서대로 실행이 보장되고 싶다고 한다.

 

a().then(() => {
  b().then(() => {
    c().then(() => {
      d();
    });
  });
});

이렇게 작성할 수 있지만, 이렇다면 콜백지옥과 다를게 없다..

 

❗️then안에 제공되는 콜백부분에서 promise 인스턴스를 반환하게되면, then메소드 체이닝으로 이어서 then 메소드를 한번 더 쓸수있다.

 

a()
  .then(() => {
    return b();
  })
  .then(() => {
    return c();
  })
  .then(() => {
    d();
  });

promise 인스턴스가 반환되는 then뒤에 메소드 체이닝 형태로 붙여서 쓸 수있다.

 

//then안에 넣는 콜백함수가 b()같이 프로미스를 return한다면, then 메소드 체이닝을 사용할 수 있다. 프로미스를 리턴하는 함수만 return b() 이런식으로 표기한다.

 

a()
  .then(b)
  .then(c)
  .then(() => {
    console.log('done')
  });

중괄호안에 바로 return나오면 생략할 수 있기 때문에 이와 같이 변경할 수 있다.

d는 프로미스 객체를 반환하지 않는 일반 함수이기때문에 return이 아니므로, 중괄호를 생략하지 않는다.

 

 

before

const getMovies = (movieName, callback) => {
  fetch(`url/${movieName}`)
    .then((res) => res.json())
    .then((res) => {
      console.log(res);
      callback();
    });
};

getMovies("frozen", () => {
  console.log("겨울왕국");
  getMovies("avengers", () => {
    console.log("어벤져스");
    getMovies('avatar',()=>{
      console.log("아바타");
    })
  });
});

 

after

const getMovies = (movieName) => {
  return new Promise((resolve) => {
    fetch(`url/${movieName}`)
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        resolve();
      });
  });
};

getMovies("frozen")
  .then(() => {
    console.log("겨울왕국");
    return getMovies("avengers");
  })
  .then(() => {
    console.log("어벤져스");
    return getMovies("avatar");
  }).then(()=>{
    console.log("아바타");
  })

 

 

 

await- async

 

async 함수

:async 키워드는 함수를 비동기 함수로 만듭니다. 즉, 함수 안에서 await를 사용할 수 있게 합니다.

❗️async 키워드를 붙여주면, 내부에 존재하는 패턴을 사용해 비동기 코드를 제어할 수 있다. → then을 사용하는 패턴보다 효율적이다.

 

await 표현식:

• await는 async 함수 내에서만 사용 가능합니다.
• await는 비동기 작업이 완료될 때까지 함수의 실행을 일시 중지하며, Promise가 fulfilled 상태가 되면 결과를 반환합니다.
• await는 주로 Promise를 반환하는 함수나 비동기 작업이 포함된 함수에서 사용됩니다.

❗️await키워드의 비동기 함수 실행을 기다린다는 의미

 

 

a함수가 호출되는것을 기다렸다가, 다음으로 넘어가 b함수를 호출한다.

await을 감싸기 위해 async wrap함수를 사용한다.

 

 

훨씬 더 직관적으로 변경할 수 있다!

 

❗️console.log같은 promise 인스턴스를 반환하지 않는 메소드 앞에 await를 붙이면 안된다.

 

 

fetch

 

fetch 함수는 Promis객체를 반환하는데,  Prototype을 확인해보면, 

 

 

then, catch, finally 메소드를 사용할 수 있다는것을 볼 수 있다.

 

 

 

🧐 then메소드로 promise객체를 꺼내고, 매개변수인 res는 무엇이 담겨있을까?

 

response의 응답객체가 담겨있다!

하지만, 응답처리상태등

여전히 우리가 요청한 데이터는 보이지 않는다

 

응답객체에 json의 메서드가 담겨있다.

👉🏻 json을 호출해야지만 fetch로 가져온 응답의 결과에서 데이터를 꺼낼수있다!

 

json메서드로 호출하면, Promise의 인스턴스가 반환되고, promis이므로 then을 사용해 프로미스를 최종적으로 꺼내 드디어 data를 얻는다!

 

 

async-await패턴을 사용한다.

 

 

두번째 실습 : 계산기 구현하기