기억저장소

0. 먼저 vue.js cdn을 header에 등록한다. 이해하기 쉽게 몇개로만 나누어 보자. 1. 컴포넌트 등록 1-1. 전역 컴포넌트 이렇게 Vue.component로 등록한 전역변수는 app 인스턴스에서 component를 등록하지 않아도, 바로 #app에서 사용이 가능하다. 1-2. 지역 컴포넌트 이렇게 적으면 지역 컴포넌트. 직접 인스턴스 옵션으로 등록을 해줘야 사용할 수 있다. 주의!! 컴포넌트 이름의 규칙이 있다. 자기들 말로는 적용하지 않는다는데, 어기면 실행이 안된다. 반드시 컴포넌트 이름은 소문자여야 하고, 하이픈으로 구분해야 한다. 2. 데이터 data는 반드시 함수여야 한다. 3. 데이터 전달하기. Props 부모가 가진 데이터를 자식 컴포넌트로 전달 할 수 있다. * v-model..

firebase 웹 서버를 이용하여 채팅 어플리케이션을 만들어 볼 것이다. 먼저 웹 서버를 준비하는 과정이다. firebase Firebase (google.com) Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 1. 프로젝트 로컬 폴더 생성 후 code로 열기 2. firebase 프로젝트 만들기 2-1. 프로젝트 이름 입력 후 계속 2-2. 이번 프로젝트에는 구글 애널리틱스가 필요없다. 사용안함 후 프로젝트 만들기 실행 3. VS CODE - firebase CLI 설치 npm install -g firebase-tools 4. filebase로그인 firebase login ..

JavaScript : Asynchronous 비동기 JavaScript 엔진은 Single Thread -> 두 가지 작업을 동시에 하지 못함 - 동기 vs 비동기 - 동기적 처리(Synchronous) : 작업을 요청함과 동시에 작업의 결과를 그 자리에서 받음 - 비동기적 처리(Asynchronous) : 작업을 요청하지만 결과는 그 자리에서 꼭 받지 않아도 되는 처리 방식 - "비동기 처리" - 비동기로 일어나는 일을 동기적으로 처리하는 방법 function logicA() { console.log("begin LogicA"); setTimeout(() => { console.log("callbackA called"); console.log("bagin LogicB"); setTimeout(() =..

Mongo DB를 이용하여 CRUD를 해보자 1. 클라이언트 생성 및 접속 테스트 const MongoClient = require("mongodb").MongoClient; //로드 const url = "mongodb://127.0.0.1:27017"; //접속 url const dbname = "mydb"; // 클라이언트 생성 const client = new MongoClient(url, { useNewUrlParser: true }); // 접속 테스트 function testConnect() { client.connect((err, client) => { client .connect() .then((client) => { console.log(client); client.close(); })..

JavaScript DB로 사용되는 MongoDB를 설치해보자. https://mongodb.com/ ROBO 3T 설치 Robomongo Robo 3T: the hobbyist GUI Robo 3T 1.4 brings support for MongoDB 4.2, and a mongo shell upgrade from 4.0 to 4.2, with the ability to manually specify visible databases. Download Robo 3T Only robomongo.org MongoDB Shell Download | MongoDB MongoDB Shell Download The MongoDB Shell is a modern command-line experience, full..

Working with DOM : Web Browser를 위한 JavaScript 웹 브라우저 대화상자 alert vs prompt vs confirm alert : 가장 기본적인 웹 브라우저 대화상자 alert("Welcome!"); confirm : 사용자의 선택을 요청 - 반환값은 Boolean var choice = confirm("Ready to go?"); console.log(choice); prompt : 사용자 입력 값을 받음 - 취소시 null var name = prompt("What is you name?"); HTML에 JavaScript 삽입하기 내부 JavaScript script 태그 : HTML 문서 안에 JavaScript를 삽입 - script 태그는 HTML 문서 어디..

배열은 JavaScript에서 가장 활용도가 높은 범용 객체 - ES6 이전부터 많은 메서드들이 추가되고 확장됨 - forEach : 배열의 개별 요소들을 추출하여 콜백 함수로 넘겨준다 function testForEach() { // forEach 메서드 : 배열의 요소를 하나씩 콜백에 전달 let source = ['banana', 'orange', 'apple', 'mango']; console.log("----- for each") source.forEach(item => { // 콜백함수의 인자가 1개 : 개별요소 console.log(item); }) source.forEach((item, index) => { // 콜백함수의 인자가 2개 : 개별 요소, 배열 내의 인덱스 console.log..

JavaScript : ES6 Class 기존 자바스크립트는 클래스 표현 식 없이 prototype으로 클래스를 다룸 - ES6에서는 클래스 정의 문법으로 클래스를 정의, 사용 가능 - constructor: 생성자 - static : 정적 멤버 - this : 객체 자신을 가리킴 - super : 부모객체를 가리킴 // 원래 Javascript는 object-based laguage // 공유 영역인 Prototype 기반 상속 // es6에서는 class 문법이 추가 -> OOP 방식을 구현할 수 있다. class shape { // 정적 메서드 : static으로 처리 // new하지 않고도 클래스명.메서드 명으로 접근 가능. static create(x, y) { return new shape(x..

JavaScript : ES6 전개 연산자 나열형 자료를 추출하거나 연결할 때 사용 - 사용법: 배열이나 객체, 변수명 앞에 ...를 입력 - 제약: 배열, 객체, 함수 인자 표현식([], {}, ()) 안에서만 활용 가능 console.log("===== 배열 전개 연산") var arr1 = ['홍길동', '장길산']; var arr2 = ['임꺽정', '전우치']; console.log(arr1, arr2); // 기존 방식 합치기 var combined = []; //빈배열 combined = [arr1[0], arr1[1], arr2[0], arr2[1]]; console.log('combined :', combined); // 두 번째 방법 : concat combined = arr1.conc..

JavaScript의 객체 - 내장 객체 Date -Date 객체는 날짜와 시간을 다루는 객체 // date : 날짜와 시간 let now = new Date(); // 현재시간 console.log('now:',now); Date 객체를 생성하는 다양한 생성자 - Date(year, month, day) month는 0부터 시작하니 주의하자 - Date(yyyy, mm, dd, hh, mi, ss) - Date(milliseconds) - 각 생성자로 Date 객체를 생성하고 console.log 메서드로 결과를 확인해 봅시다 let time = new Date(2021, 7, 30);// 월정보는 0부터 // 2021년 8월 30일 console.log('time:',time); let time1 =..