<LG CNS 5기> 5일차 TIL : 자바스크립트 제어문 및 비동기 통신(Promise / Async-Await)

728x90

SMALL

작성일: 2026.5.22

📌 오늘 학습한 주제

자바스크립트 제어문 및 비동기 통신(Promise / Async-Await)

📑 1. 자바스크립트 조건문 (Control Flow)

특정한 조건이 주어졌을 때, 그 조건의 만족 여부에 따라 코드의 실행 흐름을 제어하는 문법

1) if ~ else 문 (비교/논리 판단)

비교 조건을 바탕으로 논리값(true / false)을 판단하여 실행 구역을 나눔
논리합(||, OR): 조건 중 하나라도 true이면 전체가 true로 판정
논리곱(&&, AND): 조건이 모두 true여야 전체가 true로 판정

2) switch ~ case 문 (값 매칭 판단)

제한된 특정한 값과 일치하는 case를 찾아 해당 구역을 실행
주의점: 자바스크립트의 switch문은 break;를 생략하면 매칭된 case 밑의 다른 case들까지 연속으로 실행되는 Fall-through 현상이 발생하므로, 각 case 끝에 반드시 break;를 명시하여 흐름을 끊어주어야 함

3) 명시적 형변환 (Casting)

window.prompt()로 입력받은 데이터는 숫자를 타이핑하더라도 무조건 문자열(string) 타입으로 반환됨
올바른 숫자 비교 연산을 수행하려면 window.parseInt() 같은 형변환 함수를 사용해 데이터 타입을 숫자(number)로 강제 변환해야 함

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 prompt 입력 실습</title>
</head>
<body>

    <script>
        /*
        - 제어구문(if, Switch ~ case)
        - 특정한 조건이 주어졌을 때 조건에 만족할 때만 코드를 실행하게 하는 문법
        - if 비교조건을 가지고 논리값(true I false)을 판단하는 구문
        - switch ~ case : 특정한 값과 매치되는 경우를 판단하는 구문
        - 데이터의 타입을 판단하다보면 타입변환해야하는 경우도 발생(casting)|
        */
     
        let price = 10000;
        let age   = 10 ;

        // 사용자로부터 값을 입력받는 창을 띄우고 입력값을 inputData 변수에 저장
        let inputData = window.parseInt( window.prompt("나이를 입력하세요: ") );

        //  조건문(if-else)을 활용한 로직 처리
        if (inputData >= age) {
            // 입력한 나이가 기준 나이(10) 이상일 때 실행 (성인 기준)
            console.log(`성인이며 결재금액은 ${price}`);
        } else {
            // 입력한 나이가 기준 나이(10) 미만일 때 실행 (미성년자 기준, 50% 할인)
            console.log(`미성년자이며 결재금액은 ${price / 2}`);
        }
        ㅇ
        // 2. 데이터 타입 디버깅 출력 ('number'로 출력됨)
        console.log(`debug type`, typeof inputData);

        // 3. switch-case 구문을 활용한 메뉴 선택 제어문
        switch(inputData) {
            case 1 :
                console.log(`토레타`);
                break; // 다음 case로 넘어가지 않도록 끊어줌
            case 2 :
                console.log(`게토레이`);
                break;
            case 3 :
                console.log(`생수`);
                break;
            default :
                // 매칭되는 case가 없을 때 실행되는 예외 처리 구역
                console.log(`선택하신 번호는 없는 메뉴입니다`);
        }
    </script>
</body>
</html>

⚡ 2. 비동기 통신 및 네트워크 API 제어

1) 비동기 통신과 Promise 객체

비동기의 문제점: 인터넷을 통해 서버에서 데이터를 가져오는 작업은 시간이 걸리는 작업. 자바스크립트는 이 작업이 끝나기도 전에 다음 코드를 먼저 실행해 버려 화면에 빈 데이터가 찍히는 버그가 발생할 수 있음
Promise: 비동기 작업의 최종 완료(resolve) 또는 실패(reject) 상태와 그 결과값을 나타내는 객체
성공 시 .then()으로 결과 데이터를 이어받고, 실패 시 .catch()를 통해 에러를 처리(예외 처리) 함

2) async와 await (현대적 비동기 제어)

async (동기화 준비): 내부에서 await 대기 명령어를 사용할 수 있도록 함수 선언부 바로 앞에 붙여주는 세트 메뉴 키워드
await : 비동기 명령어 앞에 붙이면 작업이 완료되전까지 기다리라고 엔진에 지시.
try ~ catch 예외 처리: async/await 구조에서는 .catch() 대신 일반 동기 코드처럼 try { ... } catch (err) { ... } 블록으로 묶어 네트워크 에러나 주소 오타 등의 예외 상황을 안전하게 잡아내기 가능

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>비동기 통신 및 예외 처리 비교 실습</title>
</head>
<body>

    <button type="button" id="btn">click</button>
    <div>
        <ul id="list"></ul>
    </div>

    <script>
        document.querySelector('#btn').onclick = async (e) => {
            
            // [방식 1] 전통적인 Promise 체이닝 방식 (.then / .catch)
            fetch('https://fakestoreapi.com/products')
                .then(response => response.json())
                .then(data => console.log(data))
                .catch(err => {
                    console.log(`debug >>> error ${err}`);
                });

            // [방식 2] 현대적인 async/await + 동기식 스타일 예외 처리 (try-catch)
            try {
                // 외부 서버로 HTTP 요청을 보내고 응답이 완료될 때까지 대기
                const response = await fetch('https://fakestoreapi.com/products') ;
                console.log('debug >>>> fetch response : ', response) ;

                // 받은 응답을 실제 자바스크립트 객체(배열) 구조로 파싱할 때까지 대기
                const data = await response.json();
                console.log('debug >>>> fetch data : ', data) ;

                let result = '';
                // 받아온 상품 배열(data)을 순회하며 화면 렌더링용 HTML 조립
                data.forEach((object, index) => {
                    result += `<li>${object.title} - ${object.price}</li>`;
                });

                // 조립이 끝난 HTML 문자열을 <ul> 태그에 주입하여 화면에 출력
                document.querySelector('#list').innerHTML = result ;

            } catch( err ) {
                // 네트워크 다운, 주소 오타 등 try 블록 내부에서 에러가 터지면 이곳으로 즉시 순간이동합니다.
                console.log(err);
            }
        }
    </script>
</body>
</html>

🔍 3. 데이터 통신 라이브러리: Fetch vs Axios 차이점

비교 항목 fetch (브라우저 내장 API) Axios (외부 라이브러리)

설치 여부	브라우저 내장 기능이므로 설치 없이 즉시 사용 가능	별도의 npm 설치나 CDN 링크 연동 필요
JSON 파싱	데이터를 가져온 후 반드시 response.json()을 거쳐야 객체로 변환됨	라이브러리가 응답 데이터를 자동으로 JSON 변환하여 response.data에 즉시 담아줌
에러 핸들링	네트워크 에러 외에 HTTP 에러(404, 500 등)는 .catch()나 try-catch에서 자동으로 걸러내지 못함 (response.ok 분기 필요)	HTTP 상태 코드가 2xx 범위를 벗어나면 자동으로 에러를 발생시켜 catch 구역에서 한 번에 예외 처리 가능
기타 기능	기본 기능만 제공하여 가볍고 심플함	요청 취소(Timeout), 인터셉터(요청 전 가로채기), 구형 브라우저 호환성 등 강력한 부가 기능 제공

fetch는 가볍고 심플하지만 실무용 대형 프로젝트를 하기엔 사소하게 개발자가 손수 구현해야 할 예외·공통 처리(if(!ok), .json(), timeout 등)가 너무 많디. 반면 Axios는 대규모 서비스 운영에 필요한 에러 제어, 공통 보안 처리, 편의 기능을 지원하기 때문에 실무에서 더 이용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // http:// get , post , put , delete
const init = async (e) => {
    await axios.get('https://jsonplaceholder.typicode.com/users')
        .then( response => {
            console.log("debug >>>> response : " , response);
            let ary = response.data ;
            console.log("debug >>>> response ary : " , ary );
        })
        .catch( err => {
            console.log(`debug >>>> err : ${err}`);
        })
}
init() ;
    </script>
</body>
</html>

□ 오늘의 회고

오늘 하루 동안 자바스크립트의 조건문과 고차 함수, 표준 DOM 생성(createElement) 문법을 거쳐 Promise와 async/await 기반의 비동기 네트워크 통신까지 프론트엔드의 전체적인 데이터 제어 흐름을 확실하게 마스터 한 것같다. 특히 외부 API 연동 실습을 통해 내장 fetch와 라이브러리 Axios의 명확한 기능적 차이를 비교해 보며, 실무에서 예외 처리의 안정성과 개발 생산성을 위해 왜 Axios를 정석 표준으로 채택하는지 그 기술적 배경을 깊이 체감할 수 있었다. 앞으로 화면과 기능을 철저히 격리하는 관심사 분리 원칙을 항상 유념하면서, 오늘 정리한 비동기 데이터 파싱 아키텍처와 try-catch 예외 처리 구조를 풀스택 웹 프로젝트에 완성도 있게 적용해야겠다.

728x90

LIST

'LG CNS AM INSPIRE CAMP' 카테고리의 다른 글

<LG CNS 5기> 7일차 TIL : React 핵심 상태 관리와 가상 DOM 및 Hooks 매커니즘 (0)	2026.05.27
<LG CNS 5기> 6일차 TIL :React 컴포넌트 설계와 현대 자바스크립트(ES6+) 핵심 문법 (0)	2026.05.26
<LG CNS 5기> 4일차 TIL : 동적 DOM 렌더링 및 이벤트 처리 (0)	2026.05.21
<LG CNS 5기> 3일차 TIL HTML5 Core 레이아웃 제어: Form, Box Model, Table, Media Query (0)	2026.05.20
[LG CNS AM 5기] 2일차 TIL : HTML5 핵심 구조 (0)	2026.05.19

codiary

<LG CNS 5기> 5일차 TIL : 자바스크립트 제어문 및 비동기 통신(Promise / Async-Await)

'LG CNS AM INSPIRE CAMP' 카테고리의 다른 글

티스토리툴바

<LG CNS 5기> 5일차 TIL : 자바스크립트 제어문 및 비동기 통신(Promise / Async-Await)

'LG CNS AM INSPIRE CAMP' 카테고리의 다른 글

관련글

티스토리툴바