난이도: 입문
콜백지옥 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 { // 클래스 내용 } 클래스 생성자 클래스는 생성자를 가질 수 있습니다. 생성자는 클래스의 객체를 만들 … 더 읽기
1. 기초영상 2. 심화영상 3. Composition? (컴포지션?) Nested Component 컴포넌트 라고도 하고 중첩 컴포넌트라고도 합니다. 컴포넌트를 중첩하는 것을 말합니다. 리액트 앱은 수많은 컴포넌트를 가지게 됩니다. 컴포넌트간의 주고받는 데이터 뿐만 아니라 박스나 컨테이너에서 사용하는 스타일코드의 중복까지도 최소화 하려면 props 만으로는 한계가 있는데요. 이때 사용할수 있는것이 composition(합성) 입니다. 앱에서 반복 사용되는 UI 디자인 코드를 별도의 컴포넌트로 생성하여 … 더 읽기
1.리액트소개 1.1.리액트란? JavaScript 라이브러리 UI(사용자 인터페이스)를 만들기 위해 Facebook에서 개발. 페이스북과 개발자,기업,단체에 의해 유지보수됨. 리액트는 싱글 페이지 애플리케이션 이나 모바일 애플리케이션 개발에 사용되기도 함. 1.2.리액트의 특징 JSX (javascript extension)라는 자바스크립트 확장문법을 사용한다. 웹브라우저에서는 바로 JSX를 해석할수 없으며 바벨이라는 트랜스컴파일러를 이용해서 자바스크립트로 변환후 웹 브라우저에 적용한다.• https://babeljs.io/repl 에서 변환되는 과정을 볼수있다 SPA (Single Page Application) 이다. 모바일애플리케이션을 개발할 … 더 읽기
1. 리액트 props 1.1. 데이터의 동적출력 리액트에서 컴포넌트를 생성하는 문법을 JSX(JavaScript XML: Javascript에 XML을 추가한 확장한 문법) 라고 합니다. jsx 에는 {} 기호 안에 자바스크립트 를 작성하면 자바스크립트 코드를 실행할수 있습니다. MemberItem 컴포넌트에서 사용하고 있는 데이터를 자바스크립트의 표현식으로 변경하여 작성해보겠습니다 1.1.1. 작성 components/MemberItem.js 를 수정합니다. //MemberItem.js import "./MemberItem.css"; const MemberItem = () => { const member = … 더 읽기
1. 리액트컴포넌트 1.1. 리액트 앱 구조 1.1.1. 이미지 리소스 주소 수업에 사용할 이미지 파일의 주소 입니다. http://qwerew.cafe24.com/images/pet-1.jpg http://qwerew.cafe24.com/images/pet-2.jpg http://qwerew.cafe24.com/images/pet-3.jpg http://qwerew.cafe24.com/images/pet-4.jpg http://qwerew.cafe24.com/images/pet-5.jpg http://qwerew.cafe24.com/images/pet-6.jpg http://qwerew.cafe24.com/images/pet-7.jpg http://qwerew.cafe24.com/images/pet-8.jpg 1.1.2. 리액트 앱의 폴더 구성 리액트 앱의 폴더와 파일의 구성과 역할을 알아봅시다. react-test/ |-**node_modules**/ # 의존성 파일을 담은 폴더 |- **src**/ |- **App.js** # 최상위 컴포넌트 |- **index.js** # 앱 진입점 … 더 읽기
1. React를 라이브러리로 설치 1.1.Vite 아래의 링크에서부터 시작한다. npm install npm run dev 2. React를 프레임워크로 설치 Next.jsRemixGatsbyExpo (for native apps)Bleeding-edge React frameworksNext.js (App Router) 리액트 프로젝트 생성 시 앱 네이밍 규칙은 다음과 같다. 3. 프로젝트명 규칙 4. 코칭프롬프 vite로 현재 폴더에 React 프로젝트를 생성해줘. 상태관리 라이브러리 없이, 타입스크립트도 사용하지 않고, 자바스크립트 기반의 최소 설정으로 … 더 읽기
