모모의 IT성장수첩

API란? Application Programming Interface라는 어려운 용어인데 실은 별거 아닙니다. 서로 다른 프로그램간에 소통할 수 있게 도와주는 통신 규약을 뜻합니다. 근데 이걸 웹에서 사용하면 '서버와 고객간의 통신 규약'을 뜻합니다. 조금 더 쉽게 풀어말하면 '서버에게 요청해서 데이터 가져오는 방법' 이 바로 API입니다. 여러분 지금까지 짠 코드가 "누군가 /write로 접속하면 write.html을 보내주세요" 같은 거였는데 바로 이게 서버의 API입니다. 여러분 서버랑 통신할 수 있는 방법이니까요. write.html을 보고싶으면 /write로 접속하라는 API를 정의하고 계셨던 것입니다. REST API는 무엇인가 Representational State Transfer 라는 ..

Javascript 2021. 10. 4. 20:17

server.js const express = require('express'); const app = express(); const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); app.listen(8080, function () { console.log('listening on 8080') }); app.get('/', function (요청, 응답) { 응답.sendFile(__dirname + '/index.html') }) app.get('/write', function (요청, 응답) { 응답.sendFile(__dirname + '/write.html') }) app.post('/..

Javascript 2021. 10. 4. 19:43

추가작업 Q. 점프 하강시 점점 속도가 빨라지게? Q. 공룡이 달리는 것처럼 보이게? Q. 배경 다가오는건? Q. 장애물이 나타나는 간격을 랜덤하게? Q. 점수표기는? #참고게임 https://www.trex-game.skipser.com/

Javascript 2021. 9. 24. 16:43

Ajax 요청 성공시 또 다른곳으로 Ajax 요청 var 프로미스 = new Promise((성공, 실패) => { $.get('https://codingapple1.github.io/hello.txt') .done(function (결과) { 성공(결과) }) }) 프로미스.then(function (결과) { console.log(결과) return new Promise((성공, 실패) => { $.get('https://codingapple1.github.io/hello2.txt').done(function (결과) { 성공(결과) }); }); }).then(function (결과) { console.log(결과) }) 축약해서 다시 정의 var 프로미스 = ajax해주는함수('https://co..

Javascript 2021. 9. 24. 15:29

var 이미지로딩 = new Promise(function (성공, 실패) { var img = document.querySelector('test'); img.addEventListener('load', function () { 성공(); }); img.addEventListener('error', function () { 실패(); }); }); 이미지로딩.then(function () { console.log('로딩성공했어요') }).catch(function () { console.log('로딩실패했어요') })

Javascript 2021. 9. 24. 15:01

//promise 형식 var 프로미스 = new Promise(function(성공, 실패){ 성공(); }); 프로미스.then(function(){ }).catch(function(){ new Promise() 문법으로 프로미스라는 변수 오브젝트를 하나 생성하시면 Promise 제작 끝입니다. 그럼 이제 프로미스라는 변수에다가 then()을 붙여서 실행가능합니다. 프로미스 안의 코드가 실행이 완료가 되었을 때 then() 함수 내의 코드를 실행시켜줍니다. 코드가 실행이 실패했을 경우엔 catch() 함수 내의 코드를 실행시켜줍니다. (지금은 프로미스 안에 코드가 암것도 없지만요) 이런 식으로 코드를 차례로 실행할 수 있게 도와주는 디자인 패턴이 바로 Promise입니다. Promise가 콜백함수보다..

Javascript 2021. 9. 24. 14:45

자바스크립트는 항상 동기식 처리 (synchronous) 동기식 처리가 뭐냐면 한번에 코드 한줄씩 차례차례 실행된다는 소리입니다. 자바스크립트를 실행하는 웹브라우저는 stack이라는 코드 실행 공간이 있는데 거기서 코드를 한줄한줄 차례로 실행합니다. 콜백함수를 이용한 순차적 실행 그럼 아까 예시로 돌아와서, 자바스크립트에서 1초 후에 코드를 실행하고 싶으면 어떻게 하죠? console.log(1); setTimeout(function(){ console.log(2); }, 1000); console.log(3); 저렇게 setTimeout 안에 콜백함수안에 코드를 짜면 된다고 배우지 않았습니까. 맞습니다. 그러면 콘솔창에 1과 3이 먼저 빠르게 출현하고 그 다음 1초 후에 2라는 숫자가 출현합니다. 자바..

Javascript 2021. 9. 24. 14:16

웹 브라우저란 서버에서 받아온 HTML CSS JS를 실행시켜주는 프로그램입니다. 근데 브라우저가 자바스크립트를 실행하는데 일련의 과정이 있습니다. 이걸 알고계시면 앞으로 코드잘짤 수 있습니다. 브라우저는 C++ 이라는 언어로 코드가 짜여져있습니다. 브라우저는 실행해야할 자바스크립트 코드를 발견하면 C++ 언어로 만들어둔 stack에 넣어 돌립니다. stack이 뭐냐고요? 그냥 다 집어넣고 맨 윗줄부터 하나하나 실행시키는 공간입니다. 처리가 오래걸리는 코드를 만나면 하지만 가끔가다가 특별한 코드를 실행해야할 경우가 있습니다. 서버로의 ajax 요청, 이벤트리스너, setTimeout 이런 코드들입니다. 이런 코드는 처리하기까지 시간이 오래걸립니다. ajax 요청은 서버에서 응답을 받기까지 시간이 오래걸리..

Javascript 2021. 9. 24. 12:41

var person = new Map(); person.set([1, 2, 3], 'Kim'); person.set('age', 20); console.log(person.get('age')); console.log(person.size); //2 person.delete('age') //자료가 사라짐 console.log(person.get('age')); //undefinded for (var key of person.keys()) { console.log(key) } //map 자료형에 직접 자료를 집어넣을 땐 var person = new Map([ ['name', 'Kim'], ['age', 20] ]) for (var key of person.keys()) { console.log(key) }..

Javascript 2021. 9. 24. 12:30

var 심볼 = Symbol('설명'); var weight = Symbol('내 시크릿 몸무게임'); var height = Symbol('내 시크릿 키'); var age = Symbol('내 시크릿 나이'); var person = { name: 'kim', [age]: 40 }; //시크릿 나이 person.weight = 54; person[weight] = 60; //symbol 저장법 (밖에 공개가 안됨) person.height = 164; person[height] = 163; //symbol 저장법 (밖에 공개가 안됨) for (var key in person) { console.log(person[key]); } var 어레이 = [2,3,4]; 어레이[Symbol.iterator];..

Javascript 2021. 9. 24. 11:33

for (var i = 0; i < 3; i++) { } [1, 2, 3].forEach(); //array 전용 for (var key in 오브젝트) { } //object 전용 for (var key of iterable) { }//iterable 전용 for(var key in 오브젝트) class 부모 { } 부모.prototype.name = "park"; var 오브젝트 = new 부모(); var 오브젝트 = { name: 'kim', age: 30 }; //Object.getOwnPropertyDescriptor(오브젝트, 'name'); for (var key in 오브젝트) { if (오브젝트.hasOwnProperty(key)) { console.log(오브젝트[key]) } } /..

Javascript 2021. 9. 24. 11:24

Promise가 어렵다면 그보다 훨씬 쉽게 쓸 수 있는 ES8 문법이 있습니다. async, await이라는 키워드인데 각각 Promise와 then을 매우 쉽게 만들어주는 문법입니다. async 키워드를 쓰면 Promise 오브젝트가 절로 생성됩니다. 말그대로입니다. new Promise() 어쩌구 하실 필요가 없습니다. 근데 이 키워드는 function 선언 앞에만 붙일 수 있습니다. * async/await 기본활용 async function 더하기(콜백){ 1+1; // return Promise.reject(’실패임’) } 더하기().then(function(결과){ console.log(’성공이에요.’) } async function 더하기(){ var 프로미스 = new Promise(fun..

Javascript 2021. 9. 24. 10:14