자바스크립트는 싱글 스레드 기반! 싱글 스레드를 사용하는 자바스크립트는 주어진 시간에 한 줄의 코드만 실행할 수 있고 자바스크립트는 싱글스레드의 단점을 보완하기 위해 코드들이 비동기로 실행된다. 수행해야 할 작업들이 대기열에 추가되고 브라우저의 자바스크립트 엔진에 의해 한 번에 하나씩 실행이 된다. 또, API 비동기 실행이 너무 많이 쌓이게 되면 모든 작업의 실행 속도가 느려질 수 있다. 자바스크립트의 싱글 스레드 패턴은 블로킹이라는 성능 문제를 발생시킨다. 메인 스레드의 특정 작업이 완료되는데 매우 오랜 시간이 걸려서 다른 모든 작업들이 실행되지 않을 때 발생한다. 블로킹은 웹 프로그램의 속도를 느리게 하거나 때로는 정지된 상황을 만들고 사용자는 이런 상황들을 매우 불편하게 느낀다. 웹 워커란? 웹 ..

1. HTTP의 일종으로서 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹브라우저를 통해 사용자의 컴퓨터나 다른 기기에 작은 텍스트 파일로 저장되는 데이터를 cookie(쿠키)라고 한다. 2. 웹클라이언트(전용브라우저) -> 요청 -> 웹서버 -> 쿠키 발급 쿠키 사용 마지막 방문 정보 저장(최근 방문 정보) 로그인 인증, 권한을 받은 후 다른 페이지 요청, 응답을 해도 인증 정보 권한을 계속 저장, 유지할 수 있도록 5. 브라우저에서 쿠키 사용하지 않겠다고 설정하면 쿠키를 사용할 수 있다. 6. javascirpt 또는 JSP 쿠키를 다룰 수 있다. javascript는 document.cookie 속성을 사용해서 데이터 쓰기(저장), 데이터 읽기 작업을 할 수 있다. 7. 쿠키 형식 [쿠키 구성]..

[주소 입력하는 창] [우편번호 검색하는 창 - ex08_02.html] [결과] - 우편번호 검색 버튼을 누르면 우편번호를 검색할 수 있는 새로운 창이 뜸 - 당산 입력 후 검색 버튼을 누르면 당산에 해당하는 주소가 뜸(이 부분은 DB와 연동해야하는 부분으로 sample 형태로 만듬) - 당산 3동의 우편번호를 누르면 아래처럼 자동으로 우편번호와 주소가 입력이 되고 상세주소에 포커스가 맞춰진다.

1. DOM(Document Object Model) 1. DOM? - Document Object Model의 약자 - 웹 페이지를 요청 -> 응답 -> 브라우저에 응답된 웹페이지가 로딩할 때 [DOM 객체]를 생성 - 트리 구조로 된 객체 2. DOM 사용 - html 요소 추가, 수정, 삭제 - html 속성 추가, 수정, 삭제 - css 스타일 변경 - html 이벤트 추가, 수정, 삭제 등등 3. W3C DOM 종류 1) Core DOM - 모든 문서 유형에 대한 표준 DOM 2) html DOM - ex05.html 3) xml DOM - test.xml 4. DOM 메서드 ㄱ. html 요소를 찾는 메서드 document.getElementById() document.getElementsBy..

- forms 컬렉션으로 from 태그 중에 해당하는 form 태그만 가져오기 ex) document.forms["formname"] 코드 예시) [결과]

1. javascript의 hoisting(호이스팅)과 use strict(엄격 모드) 1) hoisting 이란? 브라우저가 자동으로 변수의 선언 또는 함수의 선언 부분을 변수의 초기화 또는 함수를 호출하기 전에 맨 위로 코딩을 이동시켜주는 것을 의미한다. 2) use strict(엄격 모드) - ECMAScript5 도입 - script 태그 안에서 맨 위에 "use strict" 코딩 - 엄격모드를 사용하겠다는 뜻으로 반드시 변수를 선언하고 사용하겠다 라는 의미이다. >use strict를 사용하지 않았다면 에러가 발생하지 않고 admin으로 결과가 잘 나오게 된다. 2. javascript의 자료형, 객체 종류, 값을 포함할 수 없는 자료형, 형변환 1) js 5개의 자료형 string numbe..

1. 이벤트(event)란? - 이벤트 == 어떤 사건 ex) 사용자가 버튼을 클릭했을 때 - 이벤트가 발생하면 그에 맞는 반응을 해주어야 한다. 이벤트는 일반적으로 함수에 연결되며, 그 함수는 이벤트가 발생하기 전에는 실행되지 않고 이벤트가 발생되면 실행된다. - 이벤트가 발생했을 때 실행되는 함수를 이벤트 핸들러라 하며, 이벤트에 대응하는 처리를 기술한다. 2. 이벤트의 종류 3. 이벤트 핸들러 등록 방법(이벤트 처리 방법) 1) inline 방식 - 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것 (onclick="" => on이벤트명 속성) 아래 예시는 input 태그에 onclick 속성으로 이벤트가 발생했을 때 경고창을 출력한다. 이벤트가 발생한 대상이 필요한 경우 this를 통해서 참조할 ..

1. 새로운 날짜 객체를 생성하는 4가지 방법 1) new Date() : 현재 날짜 + 시간 2) new Date(year, month, day, hour, minute, second, ms) - javascript에서 1월은 0, 2월은 1... 12월 11이다. - month 매개변수 자리에 12를 넣으면 년도는 1증가 되고, 월은 1월로 변경된다. - year, month, day만 넣으면 시간은 00:00:00으로 설정 - year, month만 넣으면 1일로 자동 설정, 시간은 00:00:00 - year만 넣으면 ms로 인식한다. * 2자리 년도를 주면 1900년대로 인식한다. 3) new Date(ms) - 1970.01.01 00:00:00 기준 - Number() 메서드를 사용하여 오늘..

1. forin() - 각 요소의 인덱스(key)를 반복하는 for 문 2. forof() - 각 요소(value)를 반복하는 for 문 3. entries() - ES6(2015년) 부터 새로 도입 - key와 value를 반환하는 메서드 - key = index - value = 요소 [ 코드 예시 ] [결과] 4. arguments - javascript 컬렉션 - arguments 객체는 모든 함수 내에서 이용 가능한 지역 변수이다. - arguments 객체를 사용하여 함수 내에서 모든 인수를 참조할 수 있다. - 함수를 호출할 때 제공한 인수 각각에 대한 항목을 갖고 있다. - 항목의 인덱스는 0부터 시작 여기서 잠깐.. 매개변수(parameter)와 인자(argument)의 차이를 확실히 알..