[개발 공부 46일차] Vercel 배포 | async - await

 

< 목차 >
1. Vercel 배포 완료!  |  도메인에 URL 등록
2. 헷갈리는 개념 요약
   1) async - await
   2) fetch - then
   3) Optional Chaining (옵셔널 체이닝)
   4) Hook의 정의, 사용법
3. 금일 소감

 

 

1. Vercel 배포 완료!  |  도메인에 URL 등록

사이트 도메인에 Redirect URL을 등록

 

 

배포 절차에 따라 진행한 뒤, 최종적으로는 KAKAO Map API를 발급받은 계정 사이트 도메인에 Redirect URL을 등록해 주어야 정상적으로 배포 링크를 들어갔을 때, 카카오 맵이 UI에 나온다.

 

배포는 지금껏 다른 팀원이 했었어서 배포 방법을 자세히 알지 못했는데 이번 팀 프로젝트 때엔 팀원들과 화면 공유하며 내 손으로 직접 배포를 해서 뿌듯하기도 하고, 하나 더 배워서 너무 좋았다.

 

 

배포는 아래의 링크를 참고해서 했다.

https://velog.io/@elle2elle/Redux-%EB%B0%B0%ED%8F%AC

 

 

 

2. 헷갈리는 개념 요약

아래 네 가지 개념은 현대 웹 개발, 특히 JavaScript와 React에서 중요한 부분을 차지하며, 각각의 용도와 필요성에 따라 적절히 활용된다.

 

 

   1) async - await

 

: JavaScript에서 비동기 작업을 보다 쉽게 다루기 위한 문법

async로 함수를 선언하면 해당 함수는 Promise를 반환하며, 함수 내에서 await 키워드를 사용해 Promise가 resolve되기를 기다릴 수 있다. 이를 통해 비동기 코드를 동기 코드처럼 보이고 작성하기 쉬워진다.

 

 

* Promise

: 비동기 연산의 최종 완료(또는 실패) 및 그 결과값을 나타내는 객체

Promise 객체는 비동기 작업이 맨 처음 생성될 때는 보통 "pending(대기)" 상태이며, 작업이 성공적으로 완료되면 "fulfilled(이행됨)" 상태로, 실패하면 "rejected(거부됨)" 상태로 전환된다.

Promise는 콜백 함수의 복잡성(콜백 지옥)을 줄이는 방법으로 도입되었으며 .then(), .catch(), .finally() 등의 메소드를 사용하여 비동기 작업의 성공, 실패 결과를 처리할 수 있다. Promise를 사용하면 비동기 로직을 더욱 명확하고 관리하기 쉬운 방식으로 구성할 수 있다.

 

 

▼  예문

let promise = new Promise(function(resolve, reject) {
  // 비동기 작업을 수행
  setTimeout(() => resolve("작업 완료!"), 1000); // 1초 후에 작업이 완료됨
});

// 작업이 성공적으로 완료되면 .then을 통해 결과를 받음
promise.then(
  result => alert(result), // "작업 완료!"가 출력됨
  error => alert(error) // 실행되지 않음
);

 

 

 

[Reference]

https://www.programiz.com/javascript/async-await

 

 

 

   2) fetch - then

: 웹 API나 서버에 네트워크 요청을 보내고 응답을 받아오는 데 사용되는 JavaScript의 내장 메서드

fetch API는 자바스크립트에서 HTTP 요청을 보낼 수 있게 해주는 비동기 메소드로, Promise를 반환한다. .then()을 사용하여 이 Promise가 성공적으로 완료되었을 때 실행할 콜백 함수를 지정할 수 있다. .catch()를 통해 에러 핸들링도 할 수 있다.

 

 

▼  예문

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json()) // 첫 번째 then에서 응답을 JSON으로 파싱함
  .then(json => console.log(json)) // 두 번째 then에서 JSON 결과를 사용함
  .catch(error => console.error('Error:', error)); // 에러 처리

 

 

 

   3) Optional Chaining (옵셔널 체이닝)

: 객체의 속성에 접근할 때, 해당 속성이 없을 경우에도 에러 없이 안전하게 처리할 수 있도록 하는 문법

?. 연산자를 사용하여 객체의 속성을 읽을 때, 만약 객체가 null이나 undefined이면 에러를 발생시키지 않고 undefined를 반환한다.

 

 

▼  예문

const person = {
  name: 'John',
  address: {
    street: '123 Main St',
    city: 'Anywhere',
  }
};

// Optional Chaining 없이 city에 접근
console.log(person.address ? person.address.city : undefined);

// Optional Chaining을 사용하여 city에 접근
console.log(person.address?.city);

// Optional Chaining을 사용하여 없는 속성에 접근
console.log(person.profile?.email);

// Optional Chaining과 함께 함수 호출
const getUserEmail = (user) => user.getEmail?.();

// Optional Chaining과 배열 접근
const firstChildName = (user) => user.children?.[0].name;

 

 

 

   4) Hook의 정의, 사용법

: 함수 컴포넌트 내에서 상태 관리와 같은 React 기능을 "hook" 할 수 있게* 하는 함수

[가장 흔히 사용되는 Hook] useState, useEffect

 

useState는 컴포넌트 내에서 상태 관리를 할 수 있게 해주고, useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있게 해준다. Hook을 사용함으로써 클래스 컴포넌트 없이도 상태와 여러 React의 기능을 사용할 수 있게 된다.

 

* "hook" 한다

: 함수 컴포넌트 내에서 React의 상태 관리와 생명주기 기능을 "연결"하거나 "사용"할 수 있게 해주는 기능을 의미

 

기본적으로 React는 클래스 컴포넌트를 통해 상태 관리와 생명주기 기능을 제공했다. 하지만, 함수 컴포넌트는 더 간결하고, 재사용하기 쉽고, 코드 이해 및 관리가 더 용이하다는 장점이 있다. Hook의 도입으로 이러한 장점을 유지하면서도, 함수 컴포넌트 내에서 상태를 관리하고, 컴포넌트가 렌더링되는 동안 생명주기와 같은 Side Effect를 처리할 수 있게 됐다.

 

 

 

3. 금일 소감

어제까지 해서 아웃소싱 팀 프로젝트 코드가 마무리되었고, 배포까지 완료했다. 이번은 솔직히 페이지 구성도 최소한으로 하고 필수 기능만 넣어서 선택 기능은 거의 못했지만 그래도 지금까지 팀 프로젝트 적은 인원으로 해오며 지치기도 했고, 또 그래서 개인 공부를 별로 못 했기 때문에 이번은 조금 쉬어가며 개인 공부를 보충하는 시간을 갖는 전략을 선택했다.

 

이번 삼일절을 포함한 연휴 동안 부족한 공부를 메꾸는 시간을 가지려고 한다. 타입스크립트 들어가기 전, 주어진 개인 정비 시간이라 최대한으로 공부 효율을 뽑아낼 생각이다. 얼른 공부하러 다시 가야지. 암튼 오늘도 파이팅!!!