recoding;

1. Class 선언* ES5에서는 함수로 클래스 정의함 -> 한눈에 class인지 알아볼 수 없는 애매한 방법으로 정의함var User = (function() { function User(name){ this.name = name } User.prototype.sayHello = function(){ console.log(`sayHello...&{this.name}`) } return User})() 이전과 달리 웹 애플리케이션으로 진화하면서 대부분 클래스로 개발하게 됨 *ES5에서는 함수로 클래스 정의함var obj1 = new User('kkang')var obj2 = new User('kim')obj1.sayHello() //sayHello...kkangobj..

1. Constants1. 상수변수const PI = 3.141593 (이후에 수정 불가) 2. 초기값 변경 불가const a1 = "hello";a1 = 'world'; // -> 에러 (Uncaught TypeError: Assignment to constant variable.)a1이 상수변수가 아니었으면 문제가 없는데 상수변수는 초기값을 변경할 수 없기 때문에 에러가 생김. 3.ES5 스타일 코드(function() { var name = "hello"; console.log(name); //hello name = "world"; console.log(name); //world function someFun() { console.log("someFun 1......

실습 1. main.js, index.html 코드 작성 2. live server 설치  3. HTML 페이지에서 하단 Go Live 버튼 선택하거나 / HTML 페이지에서 오른쪽 마우스 버튼 눌러서 Open With Live Server 메뉴 이용 4. Live Server에서 HTML을 실행시키면 브라우저가 자동으로 뜸. 컴퓨터에 디폴트로 설정되어 있는 브라우저가 뜨게 됨.-> body부분 코드를 작성한게 아니기 때문에 백색화면이 나오고 우리는 콘솔 출력 값을 확인해야 함.=> 콘솔 출력값이 이상하게 나옴 이유는 main.js 코드에서 백틱으로 감싸야 하는 부분을 작은 따옴표로 감싸서 그런거였음.  이렇게 수정하고 다시 돌려보면정상적으로 결과값이 나온다 ->작성한 자바스크립트 코드가 브라우저에서 정..

Node.js-자바스크립트 런타임이며 다양한 모듈을 설치해 개발함백엔드 외에서도 node.js 명령어의 도움을 받으며 개발할 수 있음. Vue 프로젝트1. Vue 프로젝트 생성 -> Vue CLI명령어로 프로젝트 생성> vue create vue-test 2. 프로젝트 실행-> 프로젝트 폴더에서 npm 명령으로 실행-> 프로젝트 자체에서 개발용 경량 서버 제공(Vue 프로젝트 내에서 자체 경량 서버를 제공함)-> Hot Deploy 제공 *Hot Deploy : 한번 실행시킨 이후에는 개발 코드를 수정하고 저장하면 바로 반영되는 것 >cd vue-test>npm run serve 3. 프로젝트 빌드(build)-> 개발 완료 후 배포 파일로 빌드-> dist 폴더에 배포 파일 생성> npm run bui..

Vue.js 프레임워크-Component-Directive-Router-Vuex 1. 프론트엔드 웹 애플리케이션-서버 사이드의 도움을 받지 않고도 스스로 무언가를 해결하고 제공할 수 있는 서비스를 가진 웹-서버 사이드와 적절하게 연동하면서 기존에 서버 사이드에서 결정했던 많은 기능적인 측면이 클라이언트 사이드에서 구현되는 웹-CS프로그램 환경처럼 독립적인 클라이언트 사이드앱인데 단지 실행환경이 웹으로 개발 클라이언트 사이드 = 브라우저예전에는 클라이언트 사이드에서 서버에 요청한 다음에 클라이언트가 요청한 업무가 진행되어야 하는데 그 비즈니스 업무 로직이 대부분 서버사이드에서 수행되고, 그 업무 로직에 의해 발생한 데이터를 어느 화면에 준비해서 어디에 찍을건지도 모두 서버사이드에서 결정해서 클라이언트에게 ..

회원가입 계정 정보 아이디 패스워드 패스워드 확인 프로필 이름 생년월일 월 1월 2월 3월 4월 5월 6월 7월 8월 9월 10월 11월 12월 성별 남 여 사이트 이용약관과 개인정보 수집 방침에 동의합니다.  =>GET 방식을 사용해서아이디, 패스워드를 입력하면 URL에 정보가 뜬다sign..

주요 APIAPI설명Drag and DropHTML 요소 혹은 파일을 끌어서(드래그) 다른 HTML 요소에 놓을 때(드롭할 때) 데이터를 전달하는 기능을 제공Blob이진 데이터를 다루는 기능을 제공File프로그램 여러 개를 멀티스레드로 병렬 처리하는 기능을 제공Web Workers대용량이며 저장 기간에 제한이 없는 데이터를 로컬에 저장하는 기능을 제공Indexed Database로컬에 키값 타입의 관계형 데이터 베이스 기능을 제공WebSockets서버와의 양방향 통신 기능을 제공GeolocationGPS 등의 위치 정보를 다루는 기능을 제공Canvas2차원 3차원 그래픽스 기능을 제공 드래그 앤 드롭 API*HTML 요소나 로컬 파일을 마우스로 끌어서 옮길 수 있으며 다른 요소에 드롭할 수 있음*이때 드..

예외 -> 실행에 문제가 발생하면 자동 중단됨예외 처리 -> 오류에 대처할 수 있게 하는 것 TypeError 기본 예외 처리예외 상황 확인-> undefined 자료형을 일반적으로 객체 또는 함수처럼 다루면 TypeError 예외가 발생//함수 선언function callThreeTimes(callback){ for(let i = 0; i 기본 예외 처리-> 사전에 해당 데이터가 undefined 인지 조건문으로 확인//함수 선언function callThreeTimes(callback){ if (callback){ for (let i = 0; i 고급 예외 처리try catch finally구문try{ //예외가 발생하면} catch (exception){ //여기서 처리합니다.}..

window 객체의 기본 메소드* 상대 이동과 절대 이동 *OOBy() 형태의 메소드 -> 현재 윈도우를 기준으로 상대적으로 속성을 변화*OOTo() 형태의 메소드-> 절대적인 기준으로 속성을 변화 문서 객체 모델넓은 의미 -> 웹 브라우저가 HTML 페이지를 인식하는 방식좁은 의미 -> document 객체와 관련된 객체의 집합- 문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있음- 태그 => HTML 페이지에 존재하는 html이나 body 태그를 '태그'라고 부름- 문서 객체 => html이나 body 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 문서 객체임  노드요소노드 -> HTML태그를 의미텍스트노드 -> 요소 노드 안에 들어 있는 글자를 의미 2024.1..

객체 접근Product['제품명'] -> '7D 건조 망고'Product['유형'] -> '당절임'Product['성분'] -> '망고, 설탕, 메타중아황산나트륨, 치자황색소'Product['원산지'] -> '필리핀' Product.제품명 -> '7D 건조 망고'Product.유형 -> '당절임'Product.성분 -> '망고, 설탕, 메타중아황산나트륨, 치자황색소'Product.원산지 -> '필리핀' 객체 생성 객체와 반복문for in 반복문을 사용해 객체에 반복문을 적용name: 바나나price: 1200 속성과 메소드요소 -> 배열 내부에 있는 값 하나하나속성 -> 객체 내부에 있는 값 하나하나메소드 -> 객체의 속성 중 자료형이 함수인 속성*객체라는 것을 사용할 때는 this를 사용  생성자 함수..