JavaScript 무료 실습

안녕하세요, LabEx 에 오신 것을 환영합니다! 이 첫 번째 랩에서는 JavaScript 로 고전적인 'Hello, World!' 프로그램을 배우게 됩니다.

http 모듈은 웹 서버를 생성하기 위한 Node.js 의 공식 모듈로, 프론트엔드 개발자가 서버 측 개발을 빠르게 시작할 수 있도록 합니다. 이 모듈을 사용하여 애플리케이션을 만들어 봅시다.

이번 실습에서는 Jane 이 대학의 학생증 발급 인터페이스를 만들 수 있도록 돕겠습니다. 목표는 이름과 학번 필드에 대한 폼 유효성 검사를 구현하고, 제출된 폼 내용을 카드에 올바르게 표시하는 것입니다. 이 작업을 완료함으로써 폼 입력이 검증되고 카드가 정확한 정보를 표시하도록 보장할 것입니다.

이 랩에서는, 기술 스타트업에서 웹 개발자로 일하는 Alex 의 여정을 따라갑니다. 장면은 개발팀의 작업 공간에서 펼쳐지며, Alex 는 여러 재무 기록을 처리할 수 있는 기능을 통합하여 개인 재무 추적기를 개선하는 임무를 맡습니다. 이 중요한 기능은 Alex 가 JavaScript 의 배열과 객체를 탐구하여 각 재무 기록을 배열 내의 객체로 저장해야 합니다. 목표는 사용자의 재무 데이터를 효율적으로 추적하고 정리하는 동적이고 상호 작용적인 애플리케이션을 만드는 것입니다. 이 노력을 통해 Alex 는 사용자에게 재무 활동에 대한 명확한 개요를 제공하여 앱을 더욱 유용하고 매력적으로 만들고자 합니다.

이 랩에서는 신진 웹 개발자 Alex 의 시각을 통해 웹 개발 세계에 발을 들여 동적 개인 재정 추적기를 만드는 작업을 수행합니다. 사용자가 일일 지출 및 수입을 입력하고 추적할 수 있는 사용자 친화적인 애플리케이션을 구축합니다. 목표는 명확합니다. 직관적이고 매력적인 인터페이스를 개발하여 사용자가 번거로움 없이 재정을 쉽게 관리할 수 있도록 하는 것입니다. 이 프로젝트는 개인 재정 관리를 단순화할 뿐만 아니라 JavaScript 및 DOM 조작의 기본 개념을 소개하는 것을 목표로 합니다.

이 랩에서는 활기찬 기술 스타트업의 의욕 넘치는 웹 개발자 Alex 와 함께 데이터 지속성의 세계로 모험을 떠납니다. 개인 재정 추적기에서 재무 기록을 추적하고 표시하는 메커니즘을 성공적으로 만든 후, 다음 과제는 이러한 기록이 브라우저 세션 간에 유지되도록 하는 것입니다. 목표는 사용자가 앱으로 돌아와 이전에 입력한 모든 데이터를 그대로 찾을 수 있도록 하여 앱의 사용성과 사용자 만족도를 향상시키는 것입니다. 이 작업은 Alex 에게 웹 저장소 개념을 소개하며, 특히 localStorage API 를 활용하여 애플리케이션의 상태를 저장하고 검색합니다.

이 Lab 에서 Alex 의 개인 재정 추적기 개발 여정은 고급 단계로 접어들어, 정교한 이벤트 처리 기술을 통해 애플리케이션의 상호 작용성을 향상시키는 데 중점을 둡니다. 장면은 기술 스타트업의 브레인스토밍 세션에서 시작되며, Alex 는 재정 기록을 재정렬하기 위해 드래그 앤 드롭 기능을 추가할 것을 제안합니다. 이 야심찬 목표는 사용자에게 개인 재정 관리의 유동적인 특성을 반영하여 기록을 직관적으로 정리할 수 있는 방법을 제공하는 것을 목표로 합니다. 이를 달성하려면 Alex 는 고급 DOM 이벤트를 탐색하고 시각적으로 매력적이고 사용자 친화적인 방식으로 요소를 조작해야 합니다.

이 랩에서는 'FinTech Valley'의 활기찬 스타트업 현장을 배경으로, 급성장하는 기술 회사의 재무 추적 시스템을 개선하는 임무를 맡은 신진 소프트웨어 엔지니어 Alex 의 역할을 맡게 됩니다. 회사의 재무팀은 조직의 전반적인 재무 건전성을 동적으로 볼 수 있는 방법이 필요합니다. 목표는 기존 웹 기반 회계 애플리케이션에서 총 수입, 총 지출 및 순 잔액을 계산하고 표시하여 실시간 재무 통찰력을 제공하는 기능을 구현하는 것입니다.

이 실습에서는 최신 JavaScript 를 사용하여 웹 API 와 상호 작용하는 방법을 배웁니다. `fetch` API 를 사용하여 GET 및 POST 요청을 만들고, 응답을 처리하고, JSON 데이터를 파싱하고, HTML 에 표시하고, 오류 처리를 구현하고, 동적 웹 애플리케이션을 위해 API 키로 요청을 인증합니다.

이 랩에서는 코드의 흐름을 제어하기 위해 if, else, else if 를 포함한 JavaScript 조건문의 기초를 배우게 됩니다.

이 실습에서는 JavaScript 의 기본 사항을 배우고, HTML 파일에 직접 포함하는 방법과 외부 JavaScript 파일을 연결하는 방법을 알아봅니다.

이 실습에서는 for, while, do-while 루프를 포함한 JavaScript 루프의 기본 사항을 배우고 코드 흐름을 제어하며 작업을 반복하는 방법을 익힙니다.

이 랩에서는 산술 연산, 문자열 연결 및 증감 연산자를 포함하여 JavaScript 연산자 및 표현식의 기본 사항을 배우게 됩니다.

이 랩에서는 `let` 을 사용하여 변수를 선언하고 문자열, 숫자, 불리언과 같은 기본 데이터 타입을 탐색하며 JavaScript 의 기초를 배우게 됩니다.

이 실습에서는 Python 을 사용해 JSON 구성 파일을 파싱하고 수정한 후 저장하는 방법을 배웁니다. 이 기술은 최신 애플리케이션에서 구조화된 데이터를 관리하는 데 필수적입니다.