기억저장소

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의 객체 - 내장 객체 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 =..

JavaScript의 객체 내장 객체 Array Array : 하나의 변수에 여러 개의 값을 저장하기 위한 JavaScript의 내장 객체 - JavaScript의 Array는 인덱스의 범위를 엄격하게 체크하지 않으며 C 계열의 배열에 비해 다양한 방식으로 작동 - 배열의 생성 : 배열 객체를 이용한 생성 // 배열 생성 ; array 객체로 생성 const v1 = new Array(10); // 10개짜리 빈 배열 생성 const v2 = new Array(); // 빈배열 const v3 = new Array(2021, "String", true); // 어떤 객체든 집어넣을 수 있다. // .length 속성 : 요소의 갯수 console.log('v1 :', v1, v1.length); cons..

조건문 if ~ else if ~ else 타 언어와 마찬가지로 조건 분기를 위한 if ~ else if ~ else 블록을 사용할 수 있다 - 문법 구조는 C 계열의 언어 조건문과 유사 let num = 3; if (num > 0) { console.log("양수입니다."); } else if (num < 0) { console.log("음수입니다."); } else { console.log("0입다."); } switch - 타 언어와 마찬가지로 조건 분기를 위한 switch 문을 사용할 수 있다 let grade = "C"; switch (grade) { case "A": case "B": case "C": case "D": console.log("Pass"); break; case "F": con..