Beginner 4회차 1 (7/26) | 즉시실행함수(IIFE), 비동기 처리 용어(pending, fulfilled, rejected), try...catch 구문 + finally, 추상화, 논리연산자(&&, ||), 데이터 통신, 메소드 체이닝

 

즉시실행함수(IIFE)

익명함수를 ( )로 감싸고 그 전체를 바로 (호출)하는 방식

--> 원래 익명함수는 호출할 수 없음 (이름이 없으니까). 이를 가능하게 해주는 방식 !

 

세미콜론을 명령 뒤에 안 붙이는 경우에는 위쪽의 명령과 섞이지 말라는 의미로

즉시실행함수 앞에 ';'을 붙여줌. 이렇게 하면 오류가 나지 않음

 

 

비동기 처리 용어 쉽게 이해하기

상황: 빵을 사러 서울에서 1시에 출발 ! 사고 다시 서울로 돌아온 시간 9시 !

1. 대기(pending)

- 1시부터 9시까지, 출발해서 다시 돌아올 때 까지, 8시간동안의 시간이 대기상태 (기다리고 있는 것)

- 가져오고 있는 중 (ing)

- 도착했으면 대기 끝

 

2-1. 이행(fulfilled)

- 빵을 잘 사왔으면 '빵을 사러 다녀오다' 미션이 제대로 이행됨 --> 성공

- 갔다왔을 때

 

2-2. 거부(rejected)

- 빵 사오라고 했는데 안 사오고 바다만 구경. '까먹었어' --> 실패

- 갔다오긴 했는데 미션이 제대로 이행되지 않음

==> 거부가 되었다고 하면 에러 메세지를 띄워줘야 함. (거부된 상태에 대한 예외처리가 필요함)

거부된 상황은 의도되지 않은 '예외 상황' (의도한 것은 빵을 잘 사오는 것이었는데 안 사왔으므로 예외상황)

--> 예외 상황을 처리하는 코드가 필요함 --> 예외 처리

 

예외 처리

Try - Catch 구문

 

- try와 catch는 항상 같이 사용

 

fetch('https://api.heropy.dev/v0/users' 에서 에러가 발생하면

--> 정상 처리 되었을 때 실행되어야 할 try 구문은 실행되지 않고 무시되며 바로 catch로 넘어감

(거부된 코드 다음 코드들은 실행되지 않고 catch 구문으로 넘어감)

에러가 발생하지 않으면 ? --> try 구문만 실행되고 catch 구문은 실행되지 않음

 

인디케이터(로딩 애니메이션): 데이터를 화면에 채워야 하는데 서버가서 가지고 오는데 시간이 걸림. 가져오면 없어짐

가져왔는데 에러 났으면 에러 메시지를 보여주는데 로딩 애니메이션은 안 보일 것임

--> 잘 가져왔든 아니든 없어지는 것

로딩 애니매이션은 이행되나 거부되나 상관없이 동작해야 함.

 

Finally 구문

필수 부분은 아님. 필요 시에 사용

이행, 거부 상태에 상관없이 pending이 끝나면 무조건 실행되는 코드

 

catch 블록에서 에러가 발생하면, error.message를 콘솔에 출력하고 errorEl.textContent에 에러 메시지를 설정하여 화면에 표시

 

이행 -(출력)-> 이행, 무조건 

거부 -(거부)-> 거부, 무조건

 

console.error(error.message)

 

console 객체:

• console은 자바스크립트에서 제공하는 내장 객체로, 다양한 디버깅 메서드를 포함하고 있습니다. 그 중 하나가 error 메서드입니다.

error 메서드
• console.error()는 에러 메시지를 콘솔에 출력하는 메서드입니다. 이 메서드는 주로 에러 상황에서 사용자에게 에러 정보를 제공하거나 디버깅 목적으로 사용됩니다.
• 출력되는 메시지는 보통 빨간색으로 표시되어 눈에 띕니다.

error.message:
• error.message는 Error 객체의 속성입니다. 이 속성에는 에러에 대한 설명이 담겨 있습니다.
• 예를 들어, new Error("Something went wrong")로 생성된 에러 객체는 message 속성에 "Something went wrong"를 가집니다.

에러 객체 생성 및 출력

try {
  // 에러를 의도적으로 발생시킴
  throw new Error("Something went wrong");
} catch (error) {
  // 에러 메시지를 콘솔에 출력
  console.error(error.message);
}​

• 설명:
• throw new Error("Something went wrong"): 에러 객체를 생성하고 이를 던집니다.
• catch (error): 던져진 에러를 잡아 error 변수에 저장합니다.
• console.error(error.message): 에러 객체의 message 속성을 콘솔에 출력합니다.

 

errorEl.textContent = error.message

 

1. errorEl
• 설명: errorEl은 HTML 요소를 참조하는 변수입니다. 예를 들어, HTML 문서에서 특정 요소를 가리킬 때 사용됩니다.

// 예제
const errorEl = document.getElementById('error');​

2. textContent
• 설명: textContent는 DOM 요소의 속성으로, 요소 내의 텍스트 콘텐츠를 설정하거나 가져올 때 사용됩니다. 이 속성은 HTML 태그를 포함하지 않고 순수한 텍스트만 포함합니다.

// 예제
// errorEl 요소의 텍스트 콘텐츠를 “An error occurred”로 설정
errorEl.textContent = "An error occurred";​

 

추상화

복잡한 시스템의 세부 사항을 숨기고, 간단하고 이해하기 쉬운 인터페이스를 제공하는 것

추상화의 장점: 가독성 향상, 재사용성 증가, 유지 보수 용이

 

 

논리연산자(&& , | |)

1. 그리고 연산자 (&&)

왼쪽에서부터 해석함

가장 먼저 만나는 거짓(falsy)를 반환함

거짓이 없으면 가장 마지막에 있는 것을 반환함

console.log(true && false) // false
console.log(123 && 456) // 456

console.log(1 && 2 && 3 && 4) // 4
console.log(1 && 2 && 0&& 3 && 4) // 0

 

예제

if (true && false) {
  console.log('안녕')
} // 출력 안됨

if (123 && 456) { // if (456)
  console.log('안녕')
} // 안녕

if (1 && 0 && 2 && 3) {
  console.log('안녕')
} // 출력 안됨

<div>{loading && '로딩 중...'}</div>
// '로딩 중...'

 

2. 또는 연산자 ( | | )

왼쪽에서부터 해석함

가장 먼저 만나는 참(true)를 반환함

참이 없으면 가장 마지막에 있는 것을 반환함

console.log(0 || false || null || undefined) // undefined
console.log(0 || false || null || 123 || undefined) // 123

 

 

데이터 통신 (블로그 읽어보기)

자바스크립트는 웹 브라우저와 컴퓨팅환경에서 작동할 수 있음

 (컴퓨팅 환경에서 작동) node.js + npm

fetch함수는 Web API(명령) --> 웹에서만 쓸 수 있는 명령(웹에서의 기본 명령). 따라서 node에는 fetch 함수 기능이 없음 (사용할 수 있는 라이브러리가 있긴 함)

 

실무에서는 Axios 라는 라이브러리를 사용하는 것을 추천하기도 함 (설치 필요)

 

https://www.heropy.dev/p/QOWqjV

데이터 통신을 위한, Fetch 함수와 Axios 라이브러리

 

메소드 체이닝

객체 지향 프로그래밍에서 여러 메소드를 하나의 문장으로 연속적으로 호출할 수 있게 하는 기법

이는 각 메소드가 객체 자신을 반환함으로써 가능해지며, 이를 통해 코드를 더 간결하고 읽기 쉽게 만듦

 

const number = [1, 2, 3]
number.forEach()
// number는 변수가 참조하는 이름일 뿐 
// [1, 2, 3].forEach()와 같음

 

- 함수 + 함수도 가능

function number() {
  return [1, 2, 3]
}
number().forEach()
// number 함수가 호출되면 그 자리에 [1, 2, 3]이 남음
// 항상 함수 호출되는 자리에는 어떠한 데이터가 남아있을까를 생각해야 함

 

const number = [1, 2, 3]
number().map(n => n).forEach()

// 1. number().map(n => n).forEach()
// 2. [1, 2, 3].map(n=>n).forEach()
// 3. [1, 2, 3].forEach()

 

- 불가능한 경우

[1, 2, 3].forEach().map(n=>n)

// undefined.map(n => n)
// forEach()는 undefined를 반환하므로 undefined에 대해 map 메소드를 호출하려고 하면 오류 발생
// undefined는 map 메소드를 가지지 않기 때문에 뒤에 map 체이닝될 수 없음

 

forEach와 map의 차이점

forEach
• 역할: 배열의 각 요소에 대해 주어진 함수를 실행합니다.
• 반환값: undefined
• 사용 예: 주로 배열의 각 요소에 대해 부수 효과(side effect)를 발생시키기 위해 사용됩니다. 예를 들어, 각 요소를 콘솔에 출력하거나, 배열의 각 요소를 이용해 어떤 작업을 수행할 때 사용됩니다.

let arr = [1, 2, 3];
arr.forEach(n => console.log(n)); // 1, 2, 3 출력​

map
• 역할: 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.
• 반환값: 변형된 새로운 배열
• 사용 예: 배열의 각 요소를 변형하고 그 결과를 새로운 배열로 얻고자 할 때 사용됩니다. 예를 들어, 배열의 각 숫자에 2를 곱한 새로운 배열을 얻을 때 사용됩니다.

let arr = [1, 2, 3];
let newArr = arr.map(n => n * 2);
console.log(newArr); // [2, 4, 6]​

 

* 공부할 때 어떤 것을 호출하면 무엇을 반환하는지까지 같이 외워둬야 함 !

 

함수 호출과 결과물

function abc() {
  return 123
}
const a = abc()

console.log(typeof abc) // 'function'
console.log(typeof abc()) // 'number'

 

함수를 호출하면 항상 어떠한 결과물(return으로 반환하는 값)을 두고 가기 때문에 이 부분을 항상 유념할 것

 

---

* 자바스크립트에서 오류가 발생한다면 ?
자바스트립트는 싱글 엔진 --> 멈춰버림
엔진이 죽지 않고 정상처리 가능함

* 에러발생하면 쫄지말고 잘 읽어보기. 오히려 어디가 문제인지 알려주는 친절한 존재

* 용어가 거창하다고 해서 쫄지 말자. 용어가 기술로 연결될 때는 중요하게 봐야 함(ex. 클로저(closer))

* 컴포넌트 이름은 파스칼케이스로, 두개 단어 이상으로 만드는 것을 추천(html의 태그와 섞여버릴 가능성을 최대한 줄이기 위해)
ex. TheLoader.tsx, TheHeader.tsx

* 인터넷으로 공부할 때, 최신 포스팅 위주로 보는 것 추천

* tsx는 import할 때 확장자를 적지 않음

 

 

https://developer.mozilla.org/en-US/docs/Web/API/console

console - Web APIs | MDN