구조 분해 할당 (Destructuring Assignment) 구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식입니다. 배열 해체 (Array Destructuring) 배열 해체는 배열의 각 요소를 변수에 할당하는 것입니다. 배열 해체는 기본값과 같은 다양한 변수 할당 방식을 사용하여 변수를 초기화 할 수 있습니다. /** * array destructuring */ const arr … 더 읽기
자바스크립트의 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. 달력만들기 당해 년도 달력을 만들어보자. 날짜 정보는 네트워크 서버의 데이터를 전달받아 표시한다. 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 class="days"></div> … 더 읽기
1-프로그래밍이란 1-1-정의 인간이 컴퓨터에게 일을 시키기 위해 요청하는 소통방법. 1-2-요건 내가 하고싶은 일을 명확히 정리하고 해결방안을 정의하는 능력필요 (문제해결능력 ≠ 알고리즘) 1-3-수행절차 문제(요구사항)의 명확한 이해 단순화 작업단위 분해(decomposition) 자료정리 구분(modeling) 절차에 맞게 행위배열 Info: 컴퓨팅적 사고란?(computational thinking) ”조금 더 크게하라” 는 지시는 인간적 사고로 컴퓨터는 알아듣지 못한다. 조금 더 크게 라는 것은 관념적인 개념으로 컴퓨터에게는 … 더 읽기
콜백지옥 Info: 비동기적 처리를 할땐 콜백을 활용하게 되는데 하다보면 콜백 함수가 중첩되면서 콜백 지옥에 빠지게 된다. 1초후에 일을 하는 timer 함수가 있다 timer(1000, function () { console.log("작업"); }); timer 함수에 1초후 콜백함수를 실행시키고 또 콜백을 실행시키게 될경우… 콜백지옥에 빠지게된다 timer(1000, function () { console.log("작업"); timer(1000, function () { console.log("작업"); timer(1000, function () { console.log("작업"); }); … 더 읽기
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 구조작성 Info: 💡 html,css, 아이콘 모두 … 더 읽기
자바스크립트 클래스(JavaScript Class) Info: 📁 완성파일 https://jsfiddle.net/qwerew0/qfezhc0g/11/ 1. 개요 class ? 객체 팩토리(공장) Class는 객체의 모양과 동작에 대해 미리 정의해 놓은 틀 클래스는 객체의 기본값(속성)을 정해놓고 메소드를 여러번 정의하기 위해씀 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes 클래스 정의하기 클래스는 class 키워드를 사용하여 정의됩니다. class ClassName { // 클래스 내용 } 클래스 생성자 클래스는 생성자를 가질 수 있습니다. 생성자는 클래스의 객체를 … 더 읽기