[JS/JSON] ShoppingList
·
Stack/JavaScript
index.html blue yellow pink 남성 라지 main.js function loadItems() { // fetch api // fetch('url') -> 네트워크 주소를 적으면 받아옴 return fetch('data/data.json') // 성공하면 받아온 데이터를 제이슨 변환 .then(response => response.json()) .then(data => data.items); } function displayItems(items){ // html 문서의 ul을 선택 const container = document.querySelector('.items'); container.innerHTML = items.map(item => createHTMLString(item))...
[JS] 동기 / 비동기 / 프로미스
·
Stack/JavaScript
자바스크립트 비동기 처리 동기적처리(Synchronous) 비동기적처리(Asynchronous) 1. 콜백함수 2. Promise 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트입니다. 기능을 수행하고 나서 정상적으로 기능이 수행되면 성공의 메세지와 처리된 결과값을 전달 수행하다가 예상치 못한 결과가 생기면 에러를 전달해줍니다. 프로미스 상태 state: Promise가 수행중이면 pending 수행이 종료되면 fullfilled 수행중 오류가 발생 rejected 프로듀서와 컨슈머 프로듀서: Promise 제공 컨슈머: Promise 사용 synchronous.html callback.html myScript.js function printHi() { console.log..
Git / GitHub 사용방법
·
ETC
원격저장소1. github 회원가입2. repository 생성 로컬저장소1. git 설치하기 2. git bash 열기 3. git bash에서 환경설정하기1) 유저이름 설정git config --global user.name "your_name" (따옴표 안에 써주기!)2) 유저이메일 설정git config --global user.email "your_email" (따옴표 안에 써주기!)* github 가입시 사용한 이메일 써주세요 !3) 정보 확인하기git config --list 4. github에 처음 코드 업로드하기 (친절하게 알려주는 소스코드들 복붙하면 됨)1) 초기화git init -> 이 폴더를 이제 git으로 관리하겠다. 1번만 하면됨 (초기화 작업이라 한번하면 끝) -> .git 폴..
[JS/JSON] JSON(; JavaScript Object Notaion)
·
Stack/JavaScript
JSON(JavaScript Object Notaion) 서버와 데이터를 전송할 때 사용되는 데이터포맷 자바스크립트의 객체를 보고 만든 데이터 포맷 텍스트를 기반으로 하여 가벼움 데이터를 직렬화하여 전송할 때 쓰임 프로그램 언어나 플랫폼에 상관없이 쓸 수 있음 XML -> JSON 자바스크립트 객체 -> 직렬화-> JSON JSON -> 자바스크립트 객체 1. object to JSON JSON.stringify(obj) 2. JSON to object JSON.parse(json)
웹 개발자를 위한 추천 사이트 22개
·
ETC
* 마크업 검사 / CSS 검사 사이트 2022.05.31 - ["Hello, world!"/기타 정보] - 마크업 검사 / CSS 검사 사이트 (+ 확장 프로그램 추천) 마크업 검사 / CSS 검사 사이트 (+ 확장 프로그램 추천) 1. W3C Markup 검증 서비스 http://validator.kldp.org/ The W3C Markup Validation Service 파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는,.. 7ingout.tistory.com 1) DBcut - 웹디자인 평가 및 우수 웹사이트 모음 https://www.dbcut.com 디비컷 - 웹디자인 벤치마킹 및 우수 웹사이트 모음 디비컷은 신규..
[JS] 클래스 복습
·
Stack/JavaScript
클래스 - 객체를 생성하는 템플릿 class Person { name; age; speak(); } class Person { constructor(name, age) { this.name = name; this.age = age; } speak() { console.log(`${this.name}: 안녕`); } } class.html
[JS] 배열 / 객체 / set 복습
·
Stack/JavaScript
let const 기본타입 number, string, boolean, null, undefined Symbol 참조형타입 object 배열 - 순서가 있는 컬랙션 let arr = []; let arr = new Araay(); let arr = [1, 2, 3, 4, 5, 6, 7]; arr[0] arr[1] 객체 - key와 value가 있는 컬랙션 let obj = { key: value, key2: value2, key3: value3, } let obj2 = { name: "bella"; age: 22, } obj['name'] obj.name obj['isjob'] = true; 객체 생성자방식 let user = new Object(); 객체 리터럴방식 let user = {}; array..
[JS] 로딩 (로드시 이벤트 설정하기)
·
Stack/JavaScript
방법 3가지 ! 1. window.onload = function() { 실행문 } 2. 3.window.addEventListener("load", function() { 실행문 }) * 인터넷 속도 넘 빨라서 window.onload = hideLoading; 대신 이렇게도 씀 function hideLoading() { let spinner = document.querySelector('#spinnerwrap'); spinner.style.display = "none"; } setTimeout(() => { // alert("로딩끝"); hideLoading(); }, 2000); html 블럭 script 블럭 css 블럭 #spinnerwrap { position: absolute; top: 0..
[SQL] MySQL 데이터 백업 / 복구
·
Stack/SQL
~ 백업 ~ 1. cmd 창을 관리자 권한으로 실행한다. 2. cmd 내에서 C:\Program Files\MySQL\MySQL Server 8.0\bin 로 들어간다. 3. mysqldump -u(db아이디) -p(db비밀번호) (백업할db이름) > (백업파일이름).sql 입력 ! ex) mysqldump -uroot -p0000 test > test.sql ~ 복구 ~ 1. 백업할 새 db를 만든다. 2. cmd 창을 관리자 권한으로 실행한다. 3. cmd 내에서 C:\Program Files\MySQL\MySQL Server 8.0\bin 로 들어간다. 4. mysql -u(db아이디) -p(db비밀번호) (새 db이름) < (파일이름).sql 입력 ! ex) mysql -uroot -p0000 t..
[JS] sarar
·
Stack/JavaScript
http://hyodev.dothome.co.kr/sarar/ Document hyodev.dothome.co.kr sarar / index.html COLLECTION COLLECTION menu item menu item menu item menu item STORE LOCATION STORE LOCATION menu item menu item menu item menu item ADVERTISEMENT ADVERTISEMENT menu item menu item menu item menu item ONLINE STORE ONLINE STORE menu item menu item menu item menu item CONTACT CONTACT menu item menu item menu item me..