입문

구조 분해 할당 (Destructuring Assignment) 자바스크립트에서 배열이나 객체와 같은 복합 자료형에 저장된 데이터를 다룰 때는 개별 값에 접근하여 별도의 변수에 저장하는 작업이 빈번하게 발생한다. 구조 분해 할당(디스트럭처링 할당)은 배열의 요소나 객체의 속성을 분해하여 개별 변수에 직접 할당할 수 있도록 지원하는 자바스크립트 표현식이다. 이 문법을 활용하면 여러 줄에 걸쳐 작성하던 기존의 값 추출 과정을 간결한 한 … 더 읽기

자바스크립트에서 전개 연산자(스프레드 오퍼레이터: Spread Operator)는 데이터 구조를 효과적으로 복사하고 병합할 때 사용하는 핵심 문법이다. 마침표 세 개(…)로 표기하며, 배열이나 객체처럼 여러 값이 묶여 있는 대상을 개별 요소로 분리하여 다룰 수 있게 돕는다. 기존 데이터를 직접 변경하지 않고 새로운 불변 상태를 생성할 수 있어 데이터 관리의 안정성을 높인다. 전개 연산자의 개념 전개 연산자는 반복 가능한(이터러블: … 더 읽기

자바스크립트의 reduce() 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환하는 강력한 배열 메서드입니다. 기본 구문 arr.reduce((accumulator, currentValue, currentIndex, array) => { // 리듀서 함수 로직 }, initialValue) 기본적인 숫자 합계 계산: const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((acc, current) => acc + current, 0); console.log(sum); // … 더 읽기

완성화면 1. 달력만들기 당해 년도 달력을 만들어보자. 날짜 정보는 자바스크립트의 Date 객체를 활용하여 계산하고 표시한다. 1.1. 구조작성 1.1.1. html fontawasome cdn <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css'> <div class="container"> <div class="calendar"> <div class="month"> <i class="fas fa-angle-left prev"></i> <div class="date"> <h1></h1> <p></p> </div> <i class="fas fa-angle-right next"></i> </div> <div class="weekdays"> <div>일</div> <div>월</div> <div>화</div> <div>수</div> <div>목</div> <div>금</div> <div>토</div> </div> <div … 더 읽기

1-프로그래밍이란 1-1-정의 인간이 컴퓨터에게 일을 시키기 위해 요청하는 소통방법. 1-2-요건 내가 하고싶은 일을 명확히 정리하고 해결방안을 정의하는 능력필요 (문제해결능력 ≠ 알고리즘) 1-3-수행절차 문제(요구사항)의 명확한 이해 단순화 작업단위 분해(decomposition) 자료정리 구분(modeling) 절차에 맞게 행위배열 컴퓨팅적 사고란?(computational thinking) ”조금 더 크게하라” 는 지시는 인간적 사고로 컴퓨터는 알아듣지 못한다. 조금 더 크게 라는 것은 관념적인 개념으로 컴퓨터에게는 부적절한 … 더 읽기

콜백지옥 1초후에 일을 하는 timer 함수가 있다 timer(1000, function () { console.log("작업"); }); timer 함수에 1초후 콜백함수를 실행시키고 또 콜백을 실행시키게 될경우… 콜백지옥에 빠지게된다 timer(1000, function () { console.log("작업"); timer(1000, function () { console.log("작업"); timer(1000, function () { console.log("작업"); }); }); }); 콜백지옥에서 탈출 → promise 콜백지옥에서 탈출하기 위해서는 promise 객체의 then 을 사용한다. .then … 더 읽기

XMLHttpRequesthttps://www.mockaroo.com/ 1. XMLHttpRequest let request = new XMLHttpRequest(); //통신객체생성 const url = "./MOCK_DATA.json"; //서버주소설정 //응답상태별 처리 request.onreadystatechange = function () { if (request.readyState == 4 && request.status == 200) { jsonfunc(this.responseText); } }; //통신 방식과 주소 .open("GET", url) , 회선연결 request.open("GET", url); //통신실행 request.send(); //네트워크 통신으로 db 받기 //받은 db를 가공해서 화면에 바인딩 function jsonfunc(responseText) … 더 읽기

자바스크립트 데이터 타입 JavaScript에는 원시형(primitive type)과 참조형(reference type) 두 가지 유형의 데이터 타입이 있습니다. 원시형 데이터 타입은 변수에 직접 값을 할당하며, 참조형 데이터 타입은 변수가 객체를 참조합니다. 특징: 참조형 데이터는 가변(Mutable)합니다. 객체나 배열은 변경 가능하므로 동일한 참조를 공유하는 다른 변수들도 해당 변경 사항을 반영합니다.변수에 참조값(reference value)이 저장되며, 실제 데이터는 힙(Heap) 메모리에 저장됩니다.참조값은 객체나 배열의 위치 … 더 읽기

자바스크립트로 웹페이지에 AI기반 이미지 생성 서비스를 구현해 봅시다. Chat-GPT 의 DALL-E 모델을 활용할 것입니다. DALL-E는 텍스트 설명을 기반으로 이미지를 생성하는 AI 모델로, 자연어를 기반으로 그림을 생성합니다. 현재 버전은 DALL-E-3 이며 DALL-E-2 와 DALL-E-3 모델 중 선택하여 사용할수 있습니다. 오픈ai api 문서 https://platform.openai.com/docs/overview 이미지생성기 가이드 링크 https://platform.openai.com/docs/api-reference/images 🔗완성화면 1. html 구조작성 💡 html,css, 아이콘 모두 부트스트랩 … 더 읽기

자바스크립트 클래스(JavaScript Class) 📁 완성파일 https://jsfiddle.net/qwerew0/qfezhc0g/11/ 1. 개요 class ? 객체 팩토리(공장) Class는 객체의 모양과 동작에 대해 미리 정의해 놓은 틀 클래스는 객체의 기본값(속성)을 정해놓고 메소드를 여러번 정의하기 위해씀 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes 클래스 정의하기 클래스는 class 키워드를 사용하여 정의됩니다. class ClassName { // 클래스 내용 } 클래스 생성자 클래스는 생성자를 가질 수 있습니다. 생성자는 클래스의 객체를 만들 … 더 읽기