2024.01.13 TIL - 웹팩, dotenv, gitignore, 동기/비동기(promise, async, await)

📘 오늘의 공부

• 웹팩 개념 이해, 설치 및 사용
• env파일이란? (dotenv)
• gitignore
• 1/12 js 특강 정리(동기/비동기 - promise, async, await)

웹팩, dotenv, gitignore

1. 웹팩이란?

• 팀원들끼리 이것저것 깔아놓은 외부 패키지를 하나의 파일로 합쳐주는(번들링) 착한 친구 -> 모듈 번들러라고 부름
  ex) js 외부 패키지들 + 팀에서 작성한 js 파일 -> 하나로 합쳐서 웹페이지에서 제대로 보일 수 있게 만들어줌

• 팀원들 모두가 외부패키지를 동일한 환경으로 맞출 수 있게 해줌
  ex) npm에게 '외부 패키지 버전 맞춰줘' 명령하는 역할

• 이용 방법

  • npm i -> node modules 생김
  • npm start -> 웹팩에 서비스 실행시키는 명령어
  • local host 9000 컨트롤 + 좌클릭 으로 웹페이지 잘열리나 확인
    (웹팩에서 제공하는 라이버서버를 사용하는것)

2. npm이란?

• node pakage manager
• node 설치할 때 자동으로 설치됨

3. env파일이란?

• TOKEN을 숨기기 위해, 보안을 위해 사용하는 파일
  • dotenv 라이브러리를 사용하는 것
  • Open API 불러올 때 TOKEN도 같이 불러오게 되는데, 이를 git에 함께 올려버리면 누군가 이를 가져가서 쓸 수도 있고, 지금은 괜찮을지라도 나중엔 api를 결제해서 사용할 수도 있는데 이럴때 token값 숨겨놓지 않으면 악용될 확률이 높아짐
• 이용 방법
  • npm 통해 dotenv 패키지 설치
    • $ npm i dotenv
  • 작업중인 폴더 최상위 영역에 .env, .env.default파일 생성
  • 파일 안에 'TOKEN = api토큰값' 작성
  • token 들어있던 파일 최상단에 dotenv import하고 config() 함수호출

    • import dotenv from 'dotenv';
       dotenv.config();

  • npm start로

4. git ignore란?

• git에 올릴때 얘네는 빼고 올려줘
• 이용 방법
  • 작업폴더 최상위 영역에 .gitignore 파일 생성
  • 숨기고 싶은 파일, 폴더 이름 넣어주면 끝
    
    

---

동기/비동기 - promise, async, await

• 동기
  순차적으로 실행
  1->2->3

• 비동기
  요청을 동시다발적으로 할수있음
  123 -> 먼저끝나는애 먼저 끝남(끝나야 다음걸로 넘어감)
  123으로 한번에 하는거 -> promise.all
  1,2,3은 각각 promise

• then, catch

fetch는 promise객체를 반환함
비동기를 동기로 만들어주는거 : then(그러고 나면~)

• 순서가 있으면, 기다려야되면 await -> 가장 가까운 함수에 async!
• 날씨데이터 : 예외처리도 작성해줘야함(전쟁나서 데이터관리 못하고있으면 어떡해)
  try catch finally
  try catch 블럭으로 어떤 내용 수행할수있게됨
  -> try catch와 비동기는 함께가는 친구!
  (예외 처리를 많이 해주자!)

try { 시도할 내용 };
catch ( error) {alert(“alert(‘일시 오류 발생”)
내부서버.insert() };

• promise : 약속!(프론트/백엔드 사이의 약속) - 3가지
  이렇게 요청하면 이렇게 주겠지~
  -> 약속이 틀어지거나 깨질수있음 (서버잘못 or 잘못된 요청)
  3가지 상태 있음
  1 대기 : pending(대기중) - 성공, 실패 응답 올때까지(fullfilled, rejected)

병렬처리 -> promise.all(), promise.allSettled
동시에 실행하게 만들어줌

promise.all([
fetch()
fetch()
fetch()
]).then(posts =>{
}).catch(error => {
});

-> 하나라도 오류있으면 오류 리턴
(살사람은 살아야지ㅜ -> promis.allSettled)

프로미스 생성 : new Promise
프로미스 소비 : async/await (우린 소비자! 생성할일 없다 생각하자!)

• this
  run타임 환경에 따라 다르게 나옴
  브라우저 : window객체 / node환경 : global

(참고)

• react 주특기 시작하기 전 꼭 알아야할 중요 js 개념
  : 비동기 통신, 함수, 메서드, 배열의 활용, …