HancomAI_academy

[스나이퍼팩토리] 한컴AI아카데미 3주차 - JavaScript 강의 후기 & 학습일지

k1212gh 2025. 2. 15. 12:48

[스나이퍼팩토리] 한컴AI아카데미 - JavaScript 강의 후기 & 학습일지

🚀 서론 🚀

프로그래밍을 배우는 것은 마치 새로운 언어를 배우는 것과 같습니다. 특히, 기존에 익숙한 언어가 아닌 새로운 언어를 접할 때는 더욱 흥미롭고 도전적인 경험이 됩니다. 저는 임베디드 시스템을 전공하면서 C, C++, Java, Python,xml, Android 어플 프로그래밍 등을 다뤄왔지만, JavaScript는 이번 강의를 통해 처음 접했습니다. 그동안은 주로 하드웨어 제어와 시스템 프로그래밍에 집중했지만, 웹 개발이라는 새로운 분야에서 JavaScript가 어떻게 활용되는지를 배우며 또 다른 세계를 경험할 수 있었습니다. 이 강의는 저에게 단순한 문법 학습을 넘어, 실제 프로젝트에서 JavaScript를 어떻게 적용할 수 있는지를 배우는 소중한 기회였습니다.

✨ 1. 강의 개요 ✨

🎯 강의 목표 🎯

이번 JavaScript 강의에서는 웹 개발의 기본이 되는 JavaScript의 핵심 개념과 활용법을 학습했습니다. 기본적인 문법부터 DOM 조작, 비동기 프로그래밍까지 다양한 내용을 다루었으며, 실습을 통해 개념을 직접 구현해 보았습니다.

📚 학습 내용 개요 📚

JavaScript 개요 및 필요성
개발 환경 설정
변수와 데이터 타입
제어문 및 함수
배열과 객체
비동기 프로그래밍 및 DOM 조작
구조 분해 할당 및 스프레드/레스트 연산자
템플릿 리터럴
예외 처리 (try-catch)
고급 배열 메서드
함수 프로토타입과 상속

🔍 2. 강의 내용 정리 🔍

🖥 1. JavaScript 개요 🖥

JavaScript란? JavaScript는 웹 페이지를 동적으로 조작하는 프로그래밍 언어로, 버튼 클릭, 데이터 검증, 애니메이션 효과 등 다양한 기능을 제공합니다. 또한 Node.js를 활용하면 서버 개발에도 사용할 수 있습니다.

JavaScript의 필요성 웹 개발에서는 HTML(구조), CSS(디자인)과 함께 JavaScript(동작)가 필수적입니다. 특히, React, Vue.js 같은 프레임워크와 결합하여 강력한 웹 애플리케이션을 개발할 수 있습니다.

⚙ 2. 개발 환경 설정 ⚙

VS Code 설치 및 확장 프로그램 개발 도구로 VS Code를 설치하고, Live Server, Prettier 등의 확장 프로그램을 추가하여 코딩 환경을 최적화했습니다.

JavaScript 파일 연결 방법

HTML 내부에서 <script> 태그로 직접 코드 작성
별도의 .js 파일을 만들어 HTML에서 <script src="파일명.js">로 연결
async와 defer 속성을 활용한 비동기 로딩 최적화

📌 3. 변수와 데이터 타입 📌

변수 선언 방법

let : 변경 가능한 변수
const : 변경 불가능한 상수
var : 과거 방식 (사용 지양)

자바스크립트 데이터 타입

원시 타입: 숫자, 문자열, 불리언, null, undefined, Symbol
객체 타입: 객체(Object), 배열(Array), 함수(Function)

NaN과 Infinity 숫자가 아닌 값을 숫자로 변환하려 하면 NaN이 발생하며, 0으로 나누면 Infinity 값이 반환됩니다.

🔄 4. 제어문 🔄

조건문

if / if-else / switch
삼항 연산자 (condition ? true : false)

반복문

for, while, do-while
for-of (배열 순회), for-in (객체 속성 순회)

제어문 보조 키워드

break: 루프 종료
continue: 현재 반복을 건너뛰고 다음 반복 실행

🛠 5. 함수 🛠

함수 선언 방법

선언식 function funcName() {}
표현식 const func = function() {}
화살표 함수 const func = () => {}

스코프 & 클로저

전역 스코프 vs 지역 스코프
클로저(Closure)를 활용한 데이터 은닉

📦 6. 배열과 객체 📦

배열(Array)

push(), pop(), shift(), unshift() 등의 메서드 활용
map(), filter(), reduce() 등 고차 함수 학습

객체(Object)

Object.assign(), Object.create() 활용
깊은 복사 vs 얕은 복사 개념 정리

⚡ 7. 비동기 프로그래밍 ⚡

콜백 함수 & 콜백 지옥 비동기 코드 실행 시 콜백 함수 사용, 하지만 콜백 지옥 문제 발생

Promise & async/await

Promise.then().catch() 체이닝 사용
async function() { await someAsyncTask(); } 문법 학습
비동기 에러 처리를 위한 try-catch-finally 활용

🌐 8. DOM 조작 🌐

DOM의 기본 개념

HTML을 JavaScript에서 객체로 다루는 방식
document.querySelector(), document.getElementById() 활용

이벤트 리스너

addEventListener()를 사용하여 사용자 입력 감지
event.preventDefault(), event.stopPropagation()을 활용한 이벤트 제어

🚀 9. ES6+ 개념 학습 🚀

구조 분해 할당 (Destructuring)

객체 및 배열의 요소를 개별 변수에 쉽게 할당
기본값 설정 및 변수명 변경 가능

스프레드 연산자 & 레스트 연산자

배열 및 객체 복사, 병합에 활용
함수의 가변 인자 처리에 유용

템플릿 리터럴

백틱(`)을 사용하여 문자열 삽입 및 여러 줄 문자열 생성
표현식을 ${}로 쉽게 포함 가능

예외 처리 (try-catch)

try-catch를 활용한 에러 핸들링
throw를 사용한 사용자 정의 예외 생성

고급 배열 메서드

find(), some(), every() 등 추가적인 메서드 학습
메서드 체이닝을 통한 복잡한 데이터 처리

함수 프로토타입과 상속

프로토타입을 활용한 메서드 공유
Object.create(), __proto__, constructor 이해

🔍 2. 실습 코드 내용 정리 🔍

🚀 9. ES6+ 개념 학습 🚀

🎯 구조 분해 할당 (Destructuring) - 실습 코드 및 설명

const complexObject = {
  user: {
    name: "Alice",
    age: 25,
    address: {
      city: "Seoul",
      zip: "12345"
    }
  },
  hobbies: ["reading", "coding", "hiking"]
};

const {
  user: { name, age, address: { city } },
  hobbies: [firstHobby, ...restHobbies]
} = complexObject;

console.log(name, age, city); // Alice 25 Seoul
console.log(firstHobby, restHobbies); // reading [ 'coding', 'hiking' ]

📌 알아두면 좋은 내용: 구조 분해 할당을 사용하면 중첩된 객체나 배열에서 필요한 값만 쉽게 추출할 수 있습니다. 이를 활용하면 코드의 가독성을 높이고, 중복되는 객체 접근을 줄일 수 있습니다. 또한 기본값을 설정하여 데이터가 없는 경우에도 안정적으로 동작하게 만들 수 있습니다.

🎯 스프레드 연산자 & 레스트 연산자 - 실습 코드 및 설명

function mergeAndFilterArrays(arr1, arr2) {
  return [...arr1, ...arr2].filter(num => num > 10);
}

const numbers1 = [5, 10, 15];
const numbers2 = [12, 8, 20];

console.log(mergeAndFilterArrays(numbers1, numbers2)); // [15, 12, 20]

📌 알아두면 좋은 내용: 스프레드 연산자는 배열이나 객체를 복사하거나 병합할 때 매우 유용합니다. 특히 기존 배열을 변경하지 않고 새로운 배열을 생성할 때 유용하며, 객체의 불변성을 유지하는 데 도움을 줍니다. 레스트 연산자는 함수에서 가변 인자를 처리하는 데 필수적이며, 재사용성과 유지보수성을 높일 수 있습니다.

🎯 템플릿 리터럴 - 실습 코드 및 설명

const user = {
  name: "Alice",
  age: 25,
  occupation: "Software Engineer"
};

const introduction = `
  Name: ${user.name}
  Age: ${user.age}
  Occupation: ${user.occupation}
  Status: ${user.age > 24 ? "Adult" : "Young"}
`;

console.log(introduction);

📌 알아두면 좋은 내용: 템플릿 리터럴을 사용하면 문자열을 더 간결하게 다룰 수 있습니다. 특히 여러 줄 문자열을 쉽게 작성할 수 있으며, 문자열 안에서 표현식을 사용할 수 있어 가독성이 뛰어납니다. 이를 통해 코드의 유지보수성과 생산성을 높일 수 있습니다.

🎯 예외 처리 (try-catch) - 실습 코드 및 설명

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    if (!response.ok) {
      throw new Error("Failed to fetch user data");
    }
    const user = await response.json();
    return user;
  } catch (error) {
    console.error("Error fetching user data:", error);
  } finally {
    console.log("Request completed.");
  }
}

📌 알아두면 좋은 내용: try-catch 문을 활용하면 코드 실행 중 발생할 수 있는 예외를 적절히 처리할 수 있습니다. 특히 네트워크 요청과 같은 비동기 작업에서는 try-catch와 함께 finally 블록을 사용하여 정리 작업을 수행할 수 있습니다. 이를 통해 오류 발생 시에도 코드의 안정성을 유지할 수 있습니다.

🎯 함수 프로토타입과 상속 - 실습 코드 및 설명

function Vehicle(type, speed) {
  this.type = type;
  this.speed = speed;
}

Vehicle.prototype.move = function() {
  console.log(`${this.type} is moving at ${this.speed} km/h`);
};

function Car(brand, speed) {
  Vehicle.call(this, "Car", speed);
  this.brand = brand;
}

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

Car.prototype.honk = function() {
  console.log(`${this.brand} is honking!`);
};

📌 알아두면 좋은 내용: JavaScript에서는 프로토타입 기반 상속을 활용하여 객체 지향 프로그래밍을 구현할 수 있습니다. Object.create()를 사용하여 프로토타입 체인을 설정하면 부모 객체의 메서드를 자식 객체가 상속받을 수 있습니다. call()을 활용하면 부모 생성자의 속성을 자식 생성자에서 재사용할 수 있습니다. 이러한 개념은 ES6 이후의 class 문법과도 연결되므로 이해하면 더욱 효과적으로 JavaScript를 사용할 수 있습니다.

추가 개인진행 실습 코드 🎯

🔄 실습 1: 비동기 API 요청 (Fetch + async/await)

기능: JSONPlaceholder API를 사용하여 사용자 목록을 불러오고, 특정 사용자를 클릭하면 상세 정보를 출력

📌 설명: 이 실습에서는 fetch API와 async/await을 활용하여 비동기 데이터 요청을 수행하는 방법을 배웁니다. 웹에서 서버와 통신하여 데이터를 불러올 때, 동기 방식으로 요청을 보낼 경우 페이지가 멈추는 문제가 발생할 수 있습니다. 이를 방지하기 위해 fetch() 메서드를 사용하여 API 요청을 비동기적으로 실행합니다. 또한, await 키워드를 사용하여 코드의 가독성을 높이고, try...catch 문을 활용하여 네트워크 오류 처리 방법을 익힙니다. 클릭한 사용자의 ID를 기반으로 추가적인 API 요청을 보내어 상세 정보를 가져오는 과정도 포함됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>사용자 목록</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .user { cursor: pointer; color: blue; }
        .user:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <h2>👤 사용자 목록</h2>
    <ul id="userList"></ul>
    <div id="userDetail"></div>

    <script>
        document.addEventListener("DOMContentLoaded", async () => {
            const userList = document.getElementById("userList");
            const userDetail = document.getElementById("userDetail");

            try {
                const response = await fetch("https://jsonplaceholder.typicode.com/users");
                if (!response.ok) throw new Error("데이터를 불러오는 데 실패했습니다.");

                const users = await response.json();
                users.forEach(user => {
                    const li = document.createElement("li");
                    li.textContent = user.name;
                    li.classList.add("user");
                    li.dataset.id = user.id;
                    userList.appendChild(li);
                });
            } catch (error) {
                console.error("API 요청 실패:", error);
            }

            userList.addEventListener("click", async (event) => {
                if (event.target.classList.contains("user")) {
                    const userId = event.target.dataset.id;
                    try {
                        const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
                        if (!response.ok) throw new Error("사용자 정보를 가져오는 데 실패했습니다.");

                        const user = await response.json();
                        userDetail.innerHTML = `<h3>📌 ${user.name}</h3>
                                                <p>Email: ${user.email}</p>
                                                <p>Phone: ${user.phone}</p>
                                                <p>Website: <a href="https://${user.website}" target="_blank">${user.website}</a></p>`;
                    } catch (error) {
                        console.error("사용자 상세 정보 오류:", error);
                    }
                }
            });
        });
    </script>
</body>
</html>

⏳ 실습 2: 예외 처리와 비동기 에러 핸들링

기능: 사용자가 숫자를 입력하면 서버에 요청을 보내고, 잘못된 요청에 대해 예외 처리를 수행

📌 설명: 이 실습에서는 try...catch를 이용한 예외 처리 기법을 배웁니다. JavaScript에서 비동기 요청이 실패할 경우 프로그램이 중단되지 않도록 적절한 예외 처리가 필요합니다. 사용자가 입력한 숫자를 기반으로 API 요청을 보내며, 잘못된 입력값을 사전에 검증하고, API 응답이 올바르지 않은 경우 throw new Error()를 활용하여 적절한 오류 메시지를 제공하는 방법을 학습합니다. 이를 통해 사용자 경험을 개선하고, 보다 안정적인 프로그램을 만들 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>비동기 예외 처리</title>
</head>
<body>
    <h2>🔢 숫자를 입력하세요:</h2>
    <input type="number" id="numInput">
    <button id="fetchData">데이터 요청</button>
    <p id="result"></p>

    <script>
        document.getElementById("fetchData").addEventListener("click", async () => {
            const numInput = document.getElementById("numInput").value;
            const result = document.getElementById("result");

            try {
                if (!numInput) throw new Error("숫자를 입력해야 합니다.");
                const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${numInput}`);
                if (!response.ok) throw new Error("해당 데이터가 존재하지 않습니다.");

                const data = await response.json();
                result.textContent = `📌 제목: ${data.title}`;
            } catch (error) {
                result.textContent = `❌ 오류: ${error.message}`;
            }
        });
    </script>
</body>
</html>

🎯 회고 🎯

이번 강의는 저에게 새로운 시각을 열어주었습니다. 저는 기존에 임베디드 시스템을 전공하면서 C, C++, Java, Python과 같은 언어들을 주로 다뤄왔습니다. 이러한 언어들은 시스템 프로그래밍이나 알고리즘 구현에 적합한 언어들이었기 때문에, JavaScript와 같은 웹 개발 중심의 언어는 다소 생소했습니다. 하지만 이번 강의를 통해 JavaScript의 동적 타입 시스템, 비동기 프로그래밍, DOM 조작 등의 개념을 배우면서 웹 개발이 얼마나 유연하고 강력한지 깨닫게 되었습니다.

특히, 비동기 프로그래밍과 관련된 async/await 개념을 학습하면서 기존의 동기식 프로그래밍과는 다른 방식으로 사고해야 한다는 점이 인상적이었습니다. 또한, JavaScript의 이벤트 기반 모델이 실제 웹 애플리케이션에서 어떻게 동작하는지를 실습을 통해 직접 확인할 수 있어 매우 유익한 시간이었습니다.

물론, 기존에 다뤄왔던 언어들과의 차이로 인해 어려움도 있었습니다. 예를 들어, JavaScript의 동적 타입 시스템은 C++이나 Java의 정적 타입 시스템에 익숙한 저에게는 다소 혼란스러웠습니다. 하지만 이런 차이를 이해하고 적응하면서 프로그래밍 언어의 다양한 패러다임을 경험할 수 있었고, 이는 앞으로의 개발자로서의 역량을 더욱 넓히는 데 큰 도움이 될 것이라 생각합니다.

이제 JavaScript를 단순한 프론트엔드 개발 언어로만 보지 않고, 백엔드(Node.js)와의 연계까지 고려하며 전체적인 웹 애플리케이션 아키텍처를 이해하고자 합니다. 앞으로도 JavaScript를 더욱 깊이 있게 학습하고, 이를 실무에 어떻게 적용할 수 있을지를 고민해 나갈 계획입니다.

이번 강의는 저에게 새로운 분야에 대한 도전이었으며, 앞으로의 학습 방향을 결정하는 데 큰 영향을 주었습니다. 기존의 시스템 프로그래밍과 웹 개발을 조화롭게 활용할 수 있도록 더 많은 프로젝트를 진행해볼 계획입니다. 🚀

과제 진행 사항 및 개선점

이번 프로젝트를 진행하면서 기본적인 기능 구현은 완료했지만, 몇 가지 보완할 점이 발견되었습니다.

✅ 진행된 기능

할 일 추가 기능 구현: 사용자가 입력한 데이터를 객체로 변환하여 배열(tasks)에 저장.
D-Day 계산 기능 추가: 일정이 오늘 기준으로 얼마나 남았는지 표시.
우선순위에 따른 정렬 기능 구현: D-Day 또는 우선순위별로 할 일을 정렬 가능.
할 일 완료 처리: 체크박스를 클릭하면 완료된 작업으로 이동.
사이드바 UI 및 반응형 스타일링 적용.

❌ 부족한 점 및 개선해야 할 사항

1️⃣ 로컬 데이터 저장 미흡

현재 구현에서는 할 일(tasks)이 배열로만 관리되고 있으며, 페이지를 새로고침하면 모든 데이터가 초기화됩니다. localStorage 또는 IndexedDB를 활용하여 데이터를 지속적으로 유지하는 기능이 필요합니다.

개선 방법:

localStorage.setItem("tasks", JSON.stringify(tasks))를 활용하여 데이터를 브라우저에 저장.
페이지 로드 시 localStorage.getItem("tasks")를 이용해 데이터를 복구.
데이터 변경 시 localStorage에 즉시 반영하는 방식 적용.

2️⃣ 할 일 삭제 기능 보완 필요

현재 체크된 할 일을 삭제하는 기능이 비활성화되어 있으며, 삭제 후 배열에서 제거되는 로직이 포함되지 않았습니다.

개선 방법:

deleteTaskButton을 클릭하면 선택된 체크박스(.taskCheckbox:checked)를 감지하여 해당 task.id를 tasks 배열에서 제거.
삭제 후 renderTasks() 호출하여 UI 업데이트.
삭제 시 사용자에게 확인(confirm())을 요청하여 실수 방지.

3️⃣ 완료된 작업 데이터 처리 미흡

완료된 작업은 completedTasks 배열에 추가되지만, 이후 관리 기능이 미흡합니다.

개선 방법:

완료된 작업을 localStorage에 저장하여 새로고침 후에도 유지되도록 처리.
완료된 작업을 다시 tasks로 복원하는 기능 추가 (예: '되돌리기' 버튼 구현).
완료된 작업을 삭제할 수 있는 기능 개선.

4️⃣ 할 일 목록이 올바르게 정렬되지 않음

현재 구현에서는 D-Day 정렬 시 D-Day 문자열을 숫자로 변환하지 않고 정렬을 시도하여, 올바르게 정렬되지 않는 경우가 있음.

개선 방법:

D-Day 문자열을 숫자로 변환하여 비교.
정렬 로직을 개선하여 D-Day가 D-3, D-2, D-1, D-Day, D+1 순으로 정확히 정렬되도록 수정.
우선순위가 같은 경우, D-Day 기준으로 다시 정렬.

5️⃣ UI 및 UX 개선 필요

현재 UI는 기본적인 기능만 제공하지만, 몇 가지 개선할 부분이 존재합니다.

개선 방법:

할 일 목록에 색상을 추가하여 우선순위별 구분이 명확하도록 스타일링 개선.
완료된 작업에 아이콘을 추가하여 상태를 직관적으로 표시.
모바일 환경에서 버튼 크기, 간격, 레이아웃 조정 등 반응형 디자인 추가.

📌 본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성되었습니다.

'HancomAI_academy' 카테고리의 다른 글

🛠️ 팀 일정 관리 웹앱 제작기: AWS EC2 + Express.js + React 실습 적용기 (0)	2025.03.24
[스나이퍼팩토리] 한컴AI아카데미 4주차 후기 (1)	2025.02.23
6. 컴포넌트 기초 (1)	2025.02.23
HancomAI_Academy 2주차 (0)	2025.02.09
Hancom AI Academy 1일차 (0)	2025.01.31

현재글[스나이퍼팩토리] 한컴AI아카데미 3주차 - JavaScript 강의 후기 & 학습일지

k1212gh 님의 블로그

k1212gh 님의 블로그 입니다.

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

k1212gh 님의 블로그

[스나이퍼팩토리] 한컴AI아카데미 3주차 - JavaScript 강의 후기 & 학습일지

[스나이퍼팩토리] 한컴AI아카데미 - JavaScript 강의 후기 & 학습일지

🚀 서론 🚀

✨ 1. 강의 개요 ✨

🎯 강의 목표 🎯

📚 학습 내용 개요 📚

🔍 2. 강의 내용 정리 🔍

🖥 1. JavaScript 개요 🖥

⚙ 2. 개발 환경 설정 ⚙

📌 3. 변수와 데이터 타입 📌

🔄 4. 제어문 🔄

🛠 5. 함수 🛠

📦 6. 배열과 객체 📦

⚡ 7. 비동기 프로그래밍 ⚡

🌐 8. DOM 조작 🌐

🚀 9. ES6+ 개념 학습 🚀

🔍 2. 실습 코드 내용 정리 🔍

🚀 9. ES6+ 개념 학습 🚀

🎯 구조 분해 할당 (Destructuring) - 실습 코드 및 설명

🎯 스프레드 연산자 & 레스트 연산자 - 실습 코드 및 설명

🎯 템플릿 리터럴 - 실습 코드 및 설명

🎯 예외 처리 (try-catch) - 실습 코드 및 설명

🎯 함수 프로토타입과 상속 - 실습 코드 및 설명

추가 개인진행 실습 코드 🎯

🔄 실습 1: 비동기 API 요청 (Fetch + async/await)

⏳ 실습 2: 예외 처리와 비동기 에러 핸들링

🎯 회고 🎯

과제 진행 사항 및 개선점

✅ 진행된 기능

❌ 부족한 점 및 개선해야 할 사항

1️⃣ 로컬 데이터 저장 미흡

2️⃣ 할 일 삭제 기능 보완 필요

3️⃣ 완료된 작업 데이터 처리 미흡

4️⃣ 할 일 목록이 올바르게 정렬되지 않음

5️⃣ UI 및 UX 개선 필요

'HancomAI_academy' 카테고리의 다른 글

'HancomAI_academy'의 다른글

티스토리툴바

[스나이퍼팩토리] 한컴AI아카데미 3주차 - JavaScript 강의 후기 & 학습일지

[스나이퍼팩토리] 한컴AI아카데미 - JavaScript 강의 후기 & 학습일지

🚀 서론 🚀

✨ 1. 강의 개요 ✨

🎯 강의 목표 🎯

📚 학습 내용 개요 📚

🔍 2. 강의 내용 정리 🔍

🖥 1. JavaScript 개요 🖥

⚙ 2. 개발 환경 설정 ⚙

📌 3. 변수와 데이터 타입 📌

🔄 4. 제어문 🔄

🛠 5. 함수 🛠

📦 6. 배열과 객체 📦

⚡ 7. 비동기 프로그래밍 ⚡

🌐 8. DOM 조작 🌐

🚀 9. ES6+ 개념 학습 🚀

🔍 2. 실습 코드 내용 정리 🔍

🚀 9. ES6+ 개념 학습 🚀

🎯 구조 분해 할당 (Destructuring) - 실습 코드 및 설명

🎯 스프레드 연산자 & 레스트 연산자 - 실습 코드 및 설명

🎯 템플릿 리터럴 - 실습 코드 및 설명

🎯 예외 처리 (try-catch) - 실습 코드 및 설명

🎯 함수 프로토타입과 상속 - 실습 코드 및 설명

추가 개인진행 실습 코드 🎯

🔄 실습 1: 비동기 API 요청 (Fetch + async/await)

⏳ 실습 2: 예외 처리와 비동기 에러 핸들링

🎯 회고 🎯

과제 진행 사항 및 개선점

✅ 진행된 기능

❌ 부족한 점 및 개선해야 할 사항

1️⃣ 로컬 데이터 저장 미흡

2️⃣ 할 일 삭제 기능 보완 필요

3️⃣ 완료된 작업 데이터 처리 미흡

4️⃣ 할 일 목록이 올바르게 정렬되지 않음

5️⃣ UI 및 UX 개선 필요

'HancomAI_academy' 카테고리의 다른 글

'HancomAI_academy'의 다른글

관련글

티스토리툴바