날아라쩡글이의 블로그입니다.

APP.vue template html컨텐츠에 해당한다. div로 감싸는 컨텐츠 하나만 인정한다. 두가지는 인정하지 않는다. view에 해당하는 html코드를 작성하는 영역이다. template의 태그 내부에는 모든 html코드를 감싸는 태그가 하나 존재해야한다. {{}} -->수염처럼 생겨서 불리는 mustache라이브러리를 사용할 수 있다. 표현식을 사용해서 modal혹은 data,props컴포넌트 객체의 데이터를 표현한다. script export default{} 다른곳에서 import를 사용해서 얻을 수 있다. name: '컴포넌트의 이름' components: { childcomponent1, childcomponent2 } 여러개를 작성할 수 있다. 이컴포넌트가 사용하는 다른 컴포넌트를 지정..

자바스크립트는 브라우져사의 엔진으로 ECMA스크립트의 언어를 수집하며 현재는 ECMA의 6버젼이 브라우져를 지원하던중 6버젼이 나오게 되었다. 5~6으로 변화를 도입하던중 리엑터 부터 사용하게 되었다. 2016년이 표준안으로 매년나오고 있다. let과 const(Constance의 약어)의 단어가 생성이 되었다. var를 사용하던 변수의 명을 let으로 변경하여 사용하였고, const라는 상수를 이용하게 되었다. var와 let의 차이점 let 변수란.. let은 변수 선언자로 선언된 변수는 변수 끌어올리기가 적용되지 않는다. let은 변수 선언자로 선언한 변수는 그 변수가 선언된 블록내에서만 사용할 수 있다. 그래서 요즘에는 let으로 선언한다고 이야기를 한다. 이제는 앞으로 변수는 let으로 사용할 ..

vue.js 현재 file들의 정보 이렇게 구성되어있다. 서로의 연관성 Root - App.vue 자식 - Header/content/footer content의 자식 router-view 경로설정 (view) home BookList 자식 searchform/list/pagnation ->3가지가 합쳐졌다. BookDetail router-view :동적으로 교체해라 import { createRouter, createWebHistory } from 'vue-router' //변수들은 vue-router에서 상속받는다. import Home from '../views/Home.vue'; import BookList from '../views/BookList.vue'; import BookDetail f..

Vue.js 개발환경 구축하기 node.js 설치 vue-cli설치 vue.js프로젝트 생성을 지원하는 프로그램 -npm install -g@vue/cli를 command창에 작성한다. view의 구조, 파일, 필요로하는 라이브러리의 셋팅을 완료하고 프로젝트를 생성한다. visul studio code설치 bootstrap 5 Quick anippets bracret pair colorizer2 EsLink vetur visul Studio Intellicode Dependency Analyics 확장프로그램을 6개를 깔아준다. Vue.js 프로젝트 생성하기 vue create 명령어로 프로젝트를 생성하기 vue create 프로젝트명 vue설정을 커맨드 창에서 고를 수 있다. vue GUI환경에서 프로..

사용자와 상호작용하는 웹페이지를 개발하기 위한 프로그레시브 프레임워크이다. 자바스크립트 프로그레시브 프레임 워크이다. 웹의 장점과 모바일의 장치를 모두 수용할 수 있는 개발장치이다. web의 장점 특별한 설치과정없이 webApplication개발을 하고 브라우져에서 이용가능하다. 접근성이 좋다. App의 장점 웹보다는 뛰어난 작용을 한다. 사진업로드, 촬영, 사용자의 경험을 제공한다. 향상된 사용자의 경험을 제공한다. 모두 가지고 있는 web App.Application을 개발할 수 있는 프레임워크이다. 사용자와 상호작용을 하는 프론트앤드 애플리케이션 개발을 위한 progressive Framwork이다. progressiveFramwork는 웹의 장점과 네이티브 앱의 장점을 모두 수용하는 애플리케이션을..

jQuery는 ajax을 처리하기 위한 다양한 메소드를 지원한다. jQuery의 ajax처리를 위한 주요 메소드는 3가지로 존재한다. $.get(url, data,function(responseData){...}, responseDataType); *url: 요청URL data: 서버로 보내는 데이터, 보낼게 없으면 생략가능 {page:1, no:14} ->요청URL?page=1&no=14 "page=1&no=14" ->요청URL?page=1&no=14 위아래 둘중에 하나로 보내도 상관없다. 위처럼 보내도 아래처럼 변환되어 전송된다. *function(responseData) {...} : 서버로부터 성공적인 응답이 왔을 때 jQuery가 실행하는 메소드다. responseDate에는 서버가 응답으로 보..

부모 /형제/조상 선택자 찾는 메소드 자식 선택자 찾는 메소드 사용자가 필요한 값을 쉽게 읽어오기 위하여 정의할 수 있다. data-xxx이다. 에서 값 읽어오기 var 값 = $(선택자).data('xxx'); .data() 메소드로 데이터 읽어오기 var 구매금액 = $("#order-price").data("order-price"); var 추가금액 = $("#add-price").data("add-price"); var 총결제금액 = $("#total-price").data("total-price"); data의 경우 앞의 data-는 제외하고 데이터를 읽어오면 된다. .attr()메소드로 데이터 읽어오기 var 구매금액 = $("#order-price").attr("data-order-price..

click이 발생하면 이벤트핸들러가 동작하면서 HTML을 조작한다. HTML DOM조작 엘리먼트, 엘리먼트의 속성, 엘리먼트의 컨텐츠를 조회/변경/추가/삭제 작업과 관련된 기능을 제공한다. 대칭성을 갖고 있다. 조회기능 $(selector).text() 엘리먼트의 텍스트 컨텐츠를 반환 태그가 제외된 상태로 반환된다. p태그의 중심의 text를 반환한다. $(selector).html() 엘리먼트의 html컨텐츠를 반환한다. 태그가 포함된 상태로 반환한다. $(selector).val() 폼요소의 값을 반환한다. $(selector).prop(name) 엘리먼트의 프로퍼티의 값을 반환한다. checked, disable, readOnly $(selector).attr(name) 엘리먼트의 속성값을 반환한다..

이벤트 처리 엘리먼트에서 특정 이벤트 발생시 실행될 콜백함수를 구현하고, 엘리먼트에 부착시키는 처리이다. 이벤트처리는 사용자와의 상호작용으로 이뤄지며, 엘리먼트안에 있는 이벤트 속성을 이용하는 방법이다. 이벤트를 발생시키는 방법들 function eventHandler(){ alert("버튼이 클릭되었습니다."); } 함수로 설정하고 해당 엘리먼트 객체에 onclick="eventHandler()"이벤트함수에 설정한 함수를 작성하는 방법 var btn2 = document.getElementById("btn-2"); btn2.onclick = eventHandler; btn-2엘리먼트를 찾아서 onclick프로퍼티에 eventHandler함수를 등록한다. var btn3 = document.getElem..

jQuery라이브러리에서 가장 중요한 부분이다. HTML문서에서 엘리먼트를 조작하기 위해서 반드시 선행되어야 하는 작업은 조작 대상이 되는 엘리먼트를 선택하는 작업이다. 모든 jQuery 작업의 시작은 $(select)함수로부터 시작한다. 기본선택자 *, #id, .class , tag 등이 있다. 아이디 선택자 $("#page-title").css("color", "red"); 클래스 선택자 $(".col").css("border","1px solid black"); 태그 선택자 $("h3").css("color",'green'); 기본 필터 선택자 :first, :last, :even, :odd 등이 있다. 선택자가 2개 있는 것이다. :first는 선택된 엘리먼트 중에서 첫번째 엘리먼트를 선택한다...

경량의 자바스크립트 라이브러리이다. 크로스 브라우징을 지원한다. 브라우져의 종류에 상관하지 않고, 똑같이 동작한다는 것을 의미한다. 내부적으로 어떤 브라우져인지를 판단하여, 결과값을 모든 브라우져에 동일하게 만들어준다. css3 선택자를 지원한다. 자바스크립트의 코드는 html자체를 조작하기 위해서 조작대상을 선택해야했다. id, name, tag name 은 제한적이다. jQuery는 선택자함수라는 기능이 존재한다. css선택자처럼 똑같이 적으면 해당아이디, class가 선택하는 것이다. ex) css h1{color:red;} #intro{border:1px solid black;} .from-control{margin-top:5px;} script var el = document.getElement..

일반 Http통신(동기식 통신) 요청시에는 컨텐츠가 표시되지 않음 새 요청을 보낼 수 없음 서버와 클라이언트가 동기식 통신을 하기 때문에 화면 전체가 리로딩 된다. 컨텐츠가 표시되지 않은다. 따로 누를 수 있는게 없다. 응답이 올 때까지 대기상태이다. 요청->응답->요청->응답의 순서로만 동작한다. 무조건 응답이 와야한다. 서버도 요청이 오지 않으면 응답을 보낼 수 없다. 웹브라우저가 요청보내기와 응답받기를 담당한다. 전체에서 이 방식을 사용한다. 컨텐츠가 표시되지 않는 시간이 존재하지 않는다. 화면표시가 되어 있기 때문에 언제든지 새로운 요청을 할 수 있다. 화면전체가 리로딩 되지 않는다. 요청에 대한 응답을 기다리지 않고, 새요청을 웹서버로 보낼 수 있다. 요청->응답->요청->응답 순서를 지켜서 서..

javascript object Notition 의 줄임말이다. 데이터 표기 법( 표기 형식 ) 동종 혹은 이종 시스템간의 데이터 교환을 위해 경량의 데이터 교환용 표기법이다. 경량은 가볍다는 의미로 주고받는 데이터의 크기가 작고, 사용시 시스템 부하가 작은걸 의미한다. 데이터의 양이 작고, 쉽게 만들고, 쉽게 해석하는 게 필요하다. 이것이 JSON의 탄생이다. 사람이 읽고 쓰기 쉽다. 기계 혹은 소프트웨어가 분석하거나 생성하기 쉽다. 다양한 프로그램언어들이 JSON 표기법을 지원한다. 자바의 객체 -> JSON형식의 텍스트 JSON형식의 텍스트를 자바의 객체로 아주 쉽게 바꿀 수 있다. 기계 혹은 소프트웨어가 분석하거나 (text -> 객체) 생성(객체 -> text)하기 쉽다. 분석 JSON 형식의 ..

Date 시스템의 현재 날짜와 시간 정보가 포함된 정보 획득하기 var now = new Date(); console.log(now); //Fri Dec 17 2021 10:48:25 GMT+0900 (한국 표준시) Date의 주요 메소드 console.log("년", now.getFullYear()); console.log("월", now.getMonth() + 1); //월은 0 ~ 11 console.log("일", now.getDate()); console.log("시", now.getHours()); console.log("분", now.getMinutes()); console.log("초", now.getSeconds()); console.log("유닉스타입", now.getTime()); c..

자바의 경우 public class Date{ public Date(){}//생성자 메소드 ->객체의 초기화를 담당 //기타메소드 //기타메소드 } 클래스파일( Date.class설계도 )로 객체를 생성하고, 생성자 메소드를 실행한다. 자바는 객체를 생성하기 위해서 클래스 파일이 필요하다. 그리고 this는 나자신을 가르킨다. 자바스크립트 name : "홍길동" 리터럴이다. : 을사용한다. key : value로 표현한다. this.name="홍길동" 함수이다. 수행문 작성을 한다. 배열 리터럴 [10, 20, 30] 배열 수행문 var x = []; x[0] = 100; 기능도 값이 된다. 자바스크립트에서 객체 생성하기 객체 리터럴을 사용하기 배열, 숫자, 상수를 표현하는 것이다. var obj = {..

배열 Map(함수) 지정된 함수가 반환하는 값이 포함된 배열을 생성한다. 원본배열을 이용해서 새로운 배열을 만들 때 사용되는 메소드이다. Map은 가공을 한다라는 의미로 생각하면 된다. 학생들의 성적정보가 저장된 배열, 데이터가 존재한다. var data = [ {name:"홍길동", kor:100, eng:70, math:70}, {name:"김유신", kor:90, eng:90, math:60}, {name:"강감찬", kor:70, eng:50, math:40}, {name:"이순신", kor:80, eng:70, math:70}, {name:"류관순", kor:100, eng:80, math:80} ]; 학생의 성적정보 배열 var names = data.map(function(student, i..

배열에서는 반복문을 사용하는 방법은 3가지가 존재한다. 1번 for(var a = 0; a totalScore += parseInt(el.value)); console.log("합계", totalScore); elements.forEach(el => totalScore += parseInt(el.value)); 화살표함수를써서 간단하게 forEach메소드를 사용한다. 배열.filter(함수) 지정된 함수를 배열의 갯수만큼 실행한다. 함수가 true를 반환하는 값만 포함된 배열을 반환한다. var names = ['김수영', '한올', '민수', '옥상달빛', '서자영', ' 김사월']; var shortNames = names.filter(function(name){ return name.length =..

자바의 배열은 length()메소드만 존재한다. 자바스크립트의 배열은 ArrayList와 비슷하다. 가변길이의 형태를 가지고 있다. 다양한 메소드를 제공한다. 프로퍼티 length 배열의 길이를 반환한다. 메소드 push(값) 배열의 끝에 새로운 값을 추가한다. items.push("토마토"); //['사과', '바나나', '감자', '토마토'] items.push("메론"); //['사과', '바나나', '감자', '토마토',"메론"] items.push("오렌지"); //['사과', '바나나', '감자', '토마토',"메론","오렌지"] console.log(items); pop() 배열의 맨 마지막값을 삭제하고, 그 값을 반환한다. console.log(items.pop()); //['당근', '호..

자바스크립트의 기본자료형 종류 문자(문자열), 숫자, 불린, null, undefined 이것의 반대는 객체이다. 자바스크립의 객체는 설계도가 없는, class가 존재하지 않는 객체를 만든다. 특징 기본자료형이지만 객체처럼 다룰 수 있다. 기본자료형이지만, 멤버변수(프로퍼티)도 존재하고, 메소드도 존재한다. var a = "홍길동"; //"홍길동"은 기본자료형값이다. var b = 3.141592; //3.141592는 기본자료형값이다. a.toUpperCase(); .toUpperCase()메소드를 실행하려고 하면 "홍길동"은 객체로 변한다. b.toFixed(2); .toFixed()메소드를 실행하려고하면 3.14159는 객체로 변한다. 기본자료형이지만 객체처럼 담을 수 있다. 자바의 경우 숫자에 필..

함수 선언 function fn1(){ console.log("fn1함수 입니다."); } 함수 선언식은 실행위치에 상관없다. 함수 선언을 위에 작성해도 함수는 실행된다. 글로벌 객체로 등록이 되어서 함수를 분석하고, window라는 글로벌 객체에 등록되고 실행된다. 함수 표현식 : 이름 없는 익명함수를 함수표현식으로 정의하고 변수에 대입한 것 var fn2 = function(){ console.log("fn2함수 입니다."); } 함수표현식은 함수표현식 아래에 작성을 해야 실행이 가능하다. 위치에 따라서 실행이 될 수도 있고, 안될 수도 있기 때문이다. 으로 진행을 할 경우 변수 호이스팅, 변수 끌어올리기가 실행된다. 그렇기 때문에 에러가 나는 부분을 확인하면 fn2 is not a function ..