JavaScript(62)
-
웹개발 종합반 5주차
스파르타 코딩클럽 웹개발 종합반 수업내용을 정리한 것입니다. 이전 수업들의 복습이 메인인 수업들이었습니다. 버킷리스트 - 가상 환경 및 패키지 설치 python3 -m venv venv pip install flask pymongo dnspython 코드 나의 버킷리스트 기록하기 ✅ 호주에서 스카이다이빙 하기 from flask import Flask, render_template, request, jsonify app = Flask(__name__) from pymongo import MongoClient import certifi ca = certifi.where() client = MongoClient('mongodb+srv://이름:비밀번호@cluster0.2xxwxhc.mongodb.net/?r..
2023.04.09 -
AJAX [ node.js 교과서]
본 게시글은 node.js 교과서 강의를 듣고 정리한 글입니다. AJAX doc : https://developer.mozilla.org/ko/docs/Web/Guide/AJAX AJAX - 웹 개발자 안내서 | MDN 시작하기 AJAX를 소개합니다. developer.mozilla.org - 서버로 요청을 보내는 코드 - 라이브러리 없이는 브라우저가 지원하는 XMLHttpRequest 객체를 이용해야 한다. - AJAX 요청시 Axios 라이브러리를 사용하는게 편하다. - HTML에 스크립트를 추가하면 사용할 수 있다. GET 요청 보내기 - axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 된다. - 프로미스 기반 코드라 async / await 를 사용 가능하다. axios.get(’htt..
2023.04.09 -
Map/Set [node.js 교과서]
본 게시글은 node.js 교과서 강의를 듣고 정리한 글입니다. Map - map 은 일반 객체 리터럴과 비슷하다. - map 은 생성자이다. - 키랑 값을 객체로도 줄 수 있다. m.set({a : 'b'},{c : 'd'}); 이는 일반 객체와 다른점이다. const m = new Map(); m.set(’a’, ‘b’); // set(키, 값) 으로 Map 에 속성 추가 m.set(’c’, ‘d’); m.get(’a); // get(키) 로 속성값 조회 m.size; // size로 속생 개수 조회 for(const [k, v] of m) { console.log(k, v); } // 속성간의 순서도 보장된다. m.forEach((v, k) ⇒ { console.log(k, v); }); m.has..
2023.04.09 -
Promise, async / await [node.js 교과서]
본 게시글은 node.js 교과서 강의를 듣고 정리한 글입니다. - 콜백 헬이라고 불리는 지저분한 자바스크립트 코드의 해결책이다. - Promise : 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체 - then 을 붙이면 결과를 반환한다. - 실행이 완료되지 않았으면 완료된 후에 then 의 내부함수가 실행된다. const condition = true; const promise = new Promise((resulve, reject) ⇒ { if(condition) { resolve(’성공’); } else { reject(’실패’); } }); promise.then((message) ⇒ { console.log(message); }) .catch((err) ⇒ { console.log(er..
2023.04.08 -
클래스
- 클래스는 프로토타입이다. - Constructor, extends 등을 깔끔하게 처리할 수 있다. - 코드가 그룹화 되어 가독성이 향상된다. - super 로 부모의 함수를 부를 수 있다. mdn class 링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes Classes - JavaScript | MDN Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의 developer.mozilla.org
2023.04.08 -
구조분해할당
const ex = {a : 123, b: {c:456, d: 789}}; const a = ex.a; const d = ex.b.d; const {a, b:{d}} = ex; // 객체는 키가 일치해야한다. const arr = [1, 2, 3, 4, 5]; const x = arr[0]; const y = arr[1]; const z = arr[4]; const [x,y, , ,z] = arr; // 배열은 자릿수를 맞춰주면 된다. 주의점 - this 를 사용하고 있는 경우에 구조분해할당을 사용하면 문제가 생긴다. - this 는 함수를 호출할 때 어떻게 호출 되었냐에 따라 결정되기 떄문 - this 가 있는 경우는 구조분해할당을 안하는게 좋다.
2023.04.08