세연의 콩딩

리액트(react.js)란 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다. React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있습니다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다. 즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리라고 볼 수 있습니다. 😯3세대를 거친 기술 변화 시간에 따라 자연스럽게 기술이 발전하는 것이 아니라 해결..

처음에 리액트 설치한후 해야될것 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 PS D:\GDJ69\webstudy> cd 05_react PS D:\GDJ69\webstudy\05_react> node --version v20.9.0 PS D:\GDJ69\webstudy\05_react> npm --version 10.1.0 PS D:\GDJ69\webstudy\05_react> npx create-react-app react-basic npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\GD\AppData\Roaming\npm np..

Promise가 뭔가요? “A promise is an object that may produce a single value some time in the future” 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. Promise가 왜 필요한가요? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다. $.get('url 주소/products/1', function(response) { // ... }); JsCopy..

AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. ex1) xml 파일 세탁기 삼성 100 냉장고 LG 200 TV 삼성 300 html XML요청1 script $('#btn1').click(function(){ jQuery === $() $.ajax({ /* 요청 */ typ..

jQuery를 사용하여 객체의 속성(프로퍼티)을 순회하고 그 내용을 HTML로 만들어서 웹 페이지에 표시하는 예제입니다. ▶ 객체 생성 var obj = { 'name': '홍길동', 'age' : 30 }; ▶ 속성(프로퍼티) 추가 extend()메서드 $.extend( obj, // 객체 obj에 속성을 추가하겠다. { 'mobile': '010-1111-1111', 'address': 'seoul' } ) 1. 속성(프로퍼티) 순회 each() 메소드 $.each(obj, function(p){ console.log(p, obj.p, obj[p]); // p는 string타입이므로 obj.p는 지원하지 않고, obj[p]만 가능하다. }) 2. 속성과 값 모두 순회하기 $.each(obj, func..

jQuery를 사용하여 DOM 요소의 텍스트 내용을 가져오고 설정하며, 새로운 요소를 추가하거나 부모-자식 관계를 설정하는 예제입니다. 1. 부모.prepend(자식) : 첫번째 자식으로 추가하기 2. 부모.append(자식) : 마지막 자식으로 추가하기 3. 자식.prependTo(부모) : 첫번째 자식으로 추가하기 4. 자식.appendTo(부모) : 마지막 자식으로 추가하기 ▶ 태그 추가 (부모-자식 관계) // 부모 요소 jQuery 객체 생성 var menu = $('#menu'); // 부모 요소에 자식추가하기 menu.prepend('김치'); menu.prepend($('').attr('id', 'pizza').text('피자')); menu.append('도넛'); menu.append(..

▶ HTML 코드는 jQuery를 사용하여 DOM 요소의 클래스(class) 속성을 조작하는 예제입니다. ① $('#box1') 및 $('#box2')는 jQuery의 선택자를 사용하여 id가 "box1" 및 "box2"인 요소를 선택합니다. ② .addClass(): 선택한 요소에 클래스를 추가합니다. 예를 들어, $('#box1').addClass('big').addClass('visible');는 "box1" 요소에 "big" 클래스와 "visible" 클래스를 추가합니다. ③ .removeClass(): 선택한 요소에서 클래스를 제거합니다. 예를 들어, $('#box1').removeClass('visible');는 "box1" 요소에서 "visible" 클래스를 제거합니다. ④ .hasClass..

▶ jQuery 1. JavaScript를 쉽고 편리하게 사용할 수 있도록 하는 라이브러리이다. 2. 다운로드 : https://jquery.com/ 1) compressed production : 압축된 완성품 (실제 프로젝트에 포함할 라이브러리) 2) uncompressed development : 압축 안 된 개발용 3. jQuery 사용 방법 (택일 하나만 선택) 1) jQuery 라이브러리를 파일로 받아서 태그로 포함하기 2) CDN을 이용해서 jQuery 라이브러리를 포함하기 4. jQuery 라이브러리는 jQuery를 사용하는 각종 기능(예: jQuery UI 등) 보다 먼저 포함해야 한다. ① 다운로드 받은 jQuery 라이브러리 포함하기 ② CDN을 이용해서 jQuery 라이브러리 포함하..

▶ 팝업창 window 객체 html 전송 메시지 받은 메시지는 여기에 표시됩니다. script // 전역 객체(모든 함수에서 사용이 가능함) var popup = null; function openWindow(){ // 브라우저 화면의 정중앙에 창 열기, 창 크기는 640px * 480px var width = 640; var height = 480; var left = (screen.width - width) / 2; var top = (screen.height - height) / 2; var feature = 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top; // popup이 열려 있지 않으면 popup을 연다. i..

1. Browser Object Model(브라우저 객체 모델) 2. 브라우저의 구성요소를 객체로 처리할 수 있다. (브루아주 구성 요소는 이미 객체로 만들어져 있다.) 3. 주요 브라우저 객체 1) history : 방문했던 경로를 저장하고 있는 객체 2) location : 주소(URL)를 처리하는 객체 3) screen : 브라우저 화면 정보를 가지고 있는 객체 4) window : 브라우저 창 자체를 의미하는 객체 (모든 JavaScript 객체의 최상위 객체, 생략 가능하다) ▶ screen 객체 document.write('화면 너비 : ' + screen.width + ''); document.write('화면 높이 : ' + screen.height + ''); document.write(..