158_AJAX와 PHP 연동 [요약] AJAX와 PHP 그리고 데이터베이스를 연동하는 기능에 대해 알아보자. AJAX를 활용하여 서버에 데이터를 전달하고 서버에서는 전달받은 값을 활용하여 각각 다른 데이터를 반환하여 사용자에게 알리는 기능을 구현해보자. 만들 프로그램은 이메일 주소가 이미 데이터베이스 내에 존재하는지 알려주는 프로그램이다. 다음은 이메일 주소를 입력하는 폼과 중복 확인 버튼이 있는 페이지이다. 페이지를 변환하지 않고 이메일 주소의 중복 유무를 확인하므로 form 태그를 사용하지 않는다. [예제: 161-1_client.php ] 위 코드에서 사용된 코드중 document.getElementById('status')는 id 속성의 값이 status인 태그를 선택하는 것을 의미한다. id ..

153_PHP 자바스크립트로 JSON 데이터 다루기 [요약] 자바스크립트는 서버 환경을 구축하지 않고도 사용할 수 있는 웹브라우저에서 작동하는 프로그래밍 언어이다. 자바스크립트에서 JSON 언어를 다루는 방법에 대해 알아보자. JSON은 서로 다른 프로그래밍 언어 간에 데이터를 전달하기 위한 언어이다. 여기서 JSON을 다루는 이유는 PHP 언어와 JavaScript라는 언어 간에 데이터를 전달하기 위함이다.결론적으로 어떠한 버튼을 눌렀을 때 페이지의 변환 없이 서버단(PHP)에서 처리한 결과를 받아서 어떠한 행동을 하는 것을 구현하기 위함이다.클라이언트 사이드에서 JSON 데이터를 학습 후 서버사이드에서 JSON 데이터를 다르는 방법을 알아보자. 클라이언트 사이트에서는 자바스크립트라는 언어를 사용한다...

272_자바스크립트에서 데이터 중복 없는 Set 사용하기 [적용] 중복 없는 유저 ID 배열을 사용하고 싶을 때 여러 데이터에서 중복되는 값을 제외하고 싶을 때 [문법 1] 메소드 의미 반환 new Set(반복가능한객체*) Set 객체 초기화 객체(Set) 세트.add(값) 값 등록 객체(Set) 세트.has(값) 값 존재 여부 확인 진리값 세트.delete(값) 값 삭제 진리값(삭제 여부) 세트.clear() 값 전체 삭제 없음 세트.values() 각 값을 반환 객체(Iterator) 세트.forEach(콜백) 각 값에 대한 처리 실행 없음 * 생략 가능 [문법 2] 속성 의미 타입 세트.size 요소의 수 숫자 [내용] Set 객체는 여러 값을 다룬다. 하지만 배열이나 Objext와는 달리 인덱스(..

271_자바스크립트에서 맵(Map)과 키(Key) 사용하기 [적용] 키와 값을 세트로 사용하고 싶을 때 연관 배열을 사용하고 싶을 때 [문법 1] 메소드 의미 반환 new.Map(반복가능한객체*) 맵 객체 초기화 객체(Map) 맵.set(키, 값) 맵에 키와 값의 세트를 등록 객체(Map) 맵.get(키) 키를 지정해 값을 가져오기 값 맵.has(키) 키의 값 존재 여부 확인 진리값 맵.delete(키) 키의 값 삭제 진리값(삭제 여부) 맵.clear() 키와 값 모두 삭제 없음 맵.keys() 키의 반복자 객체 객체(Iterator) 맵.values() 값의 반복자 객체 객체(Iterator) 맵.entries() 키와 값 배열의 반복자 객체 반환 객체(Iterator) 맵.forEach(콜백)_ 각 ..

270_자바스크립트에서 배열과 객체에 독자적인 메소드 추가하기 [적용] 배열에 셔플 함수를 추가하고 싶을 때 객체에 JSON 변환 메소드를 추가하고 싶을 때 [문법] 구문 의미 객체.prototype[심볼] = function() {} 객체에 독자적인 메소드 추가 객체[심볼]() 독자적인 메소드 실행 [내용] Array, Date, Object 등 기존의 객체(빌트인 객체)에 독자적인 메소드를 추가하고 싶을 떄는 다음과 같이 프로토타입(Prototype)과 심볼(Symbol)을 사용한다. JavaScript // 'myMethod' 이름의 심볼 생성 const myMethod = Symbol(); // 독자적인 메소드 추가 Array.prototype[myMethod] = function() { cons..

269_자바스크립트에서 유일한 데이터 사용하기(심볼) [적용] 중복되지 않는 데이터를 사용하고 싶을 때 빌트인 객체(Built-in Object)에 독자적인 이름을 사용한 메소드를 생성하고 싶을 때 [문법] 메소드 의미 반환 Symbol(문자열or숫자*) 심볼 생성 심볼 * 생략 가능 [내용] 심볼(Symbol)은 다른 데이터와 중복되지 않는 유일한 값을 사용한다. 이 특성을 이용해 ID를 관리하거나 빌트인 객체에 추가하는 독자적인 메소드 생성이 가능하다. 심볼의 생성은 new가 아닌 Symbol()을 사용한다. JavaScript const symbol1 = Symbol(); const symbol2 = Symbol(); console.log(symbol1 == symbol2); // 결과: false..

268_자바스크립트에서 iterator 정의하여 사용하기 [적용] 반복자를 정의하고 싶을 때 [문법] 구문 의미 function* 함수명() {} 제너레이터 정의 yield 값 값을 반환 [내용] 제너레이터를 사용해 반복자를 간단히 사용하는 방법이 있으며, 반복자를 정의할 수도 있다. 정의는 다음과 같이 function 선언에 *(에스터리스크,asterisk)를 추가한다. JavaScript // 제너레이터 정의 function* myGenerator() {} 반복자는 '반복자.next()'를 사용해 값에 차례대로 접근할 수 있다. 제너레이터는 yield를 사용해 다음 가져올 값을 지정한다. JavaScript // 제너레이터 정의 function* myGenerator() { yield '사자'; yi..

267_자바스크립트에서 반복 처리를 위한 반복자 사용하기 [적용] 반복 작업이 가능한 객체를 사용하고 싶을 떄 [문법 1] 메소드 의미 반환 객체[Synbol.iterator]() 반복자 가져오기 반복자 반복자.next() 다음 반복자 가져오기 반복자 [문법 2] 속성 의미 타입 반복자.value 현재값 임의 반복자.done 종료 여부 확인 진리값 [내용] 반복자(Iterator)는 여러 값에 순서대로 접근이 가능한 구조를 가진 객체로, 단어의 원형인 iterate는 반복한다는 의미를 가졌다. 반복자를 가지는 객체를 반복 가능한 객체(Iterable Object)라고 하며, 대표적으로 배열이 있다. 배열은 for...of를 사용해 순서대로 처리할 수 있으며, 반복 가능한 객체라면 같은 방식으로 for....

266_모듈형 자바스크립트 HTML에서 읽어오기 [적용] 모듈형 자바스크립트를 사용하고 싶을 때 [문법] 구문(HTML) 의미 ES 모듈을 사용하는 자바스크립트 불러오기 [내용] 모듈형 자바스크립트는 script 태그 type 속성에 module을 지정하여 불러올 수 있다. 지정하지 않으면 import와 export 등의 자바스크립트 코드 내부에 에러가 발생한다. HTML 인라인 코드에서도 모듈을 사용할 수 있다. HTML 구글 크롬 개발자 도구를 사용하면 MyClass.js 모듈을 확인할 수 있다. 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김

265_자바스크립트에서 모듈 가져오기 [적용] 모듈을 가져오고 싶을 때 서버의 모듈을 URL 지정하여 가져오고 싶을 때 [문법] 구문 의미 import { 모듈명 } from './파일명.js' 모듈 가져오기 [내용] import 는 모듈을 가져오는 선언으로 다음과 같은 형식을 사용한다. JavaScript import { 모듈명 } from '자바스크립트파일명.js'; import문의 from 내부에는 '.js' 확장자가 필수다. 위의 예시는 '자바스크립트파일명.js'로 표시하고 있지만, 실제 코드는 ./,/, ../ 등 주소 경로를 함께 표시해야 한다. JavaScript // 자바스크립트 파일에서 모듈 불러오기 import { 모듈명 } from '자바스크립트파일.js'; // 자바스크립트 파일에서..