![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/vFoju/btrWfRNI6Hu/E0VvQmspI0x5KTRt76g7jK/img.png)
※ 구매버튼 누르면 장바구니에 상품명 추가되는 기능 버튼눌렀을때 내정보, 내가 선택한 상품이 서버에 보내진 후 저장 되어야함 but 우리는 서버 안만들음 반영구적으로 데이터 저장할 수 있는곳 만들어야함 브라우저 안에 몰래 데이터 저장 가능 브라우저 -> 개발자도구 -> Application 탭 -> Storage 쭈루룩 우리가 쓸 storage 는 - Local Storage - Session Storage 둘다 키값:밸류값 형태로 저장 가능 둘다 5MB의 문자/숫자만 저장 가능 LocalStrorage는 사이트 재접속해도 유지됨 *반영구적 SessionStorage는 사이트 나가면 자동삭제 ● LocalStorage에 데이터 저장 localStroage.setItem('키값','밸류값'); localS..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/OrSq3/btsezLu4lS1/sikeeqoXpcnZAVOxazlqqK/img.png)
웹사이트 기능 만들기 기본 1. 서버로 데이터 전송할 수 있는 UI 만들고 2. 서버에 원하는대로 정보를 처리해주면 됨 form에 입력한 정보 어딘가에 저장해야됨(엑셀은 많은 데이터 저장 불가) Database에 저장해야됨 자료 저장하려면 일단 MongoDB 가입해서 폴더, 파일 만들고 server.js에서 MongoDB 에 접속할 수 있게 해야함 server.js 에서 DB에 접속하려면 1. 라이브러리 설치 npm install mongodb 2. 상단 코드 추가 const MongoClient = require('mongodb').MongoClient; 3. 하단에 코드 입력 var db; MongoClient.connect('mongodb+srv://kdb:6743@cluster0.bawt6ey.m..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/b0jNZq/btrV1Ibr9kE/4GSxsOw5pRmddLTIc6Lqh0/img.png)
서버를 만들때 REST API에 의거해서 만들면 예쁜 서버가 된다고 함 API 내서버랑 통신할 수 있는 방법, 프로그램끼리 서로 데이터를 주고 받기 위한 규칙 ex) ' /beauty ' 이런 api들은 어떤식으로 만들어야 좋은 api일까? restful 하게! REST API REST 원칙 1. 간결하고 일관적이여야하며 url만 보고 예측이 가능해야 함 **가장중요 2. 브라우저(클라이언트), 서버 역할을 구분해야 한다 (브라우저는 요청만, 서버는 응답만) 3. 요청은 서로 의존성이 없어야 함 좋은 api 예시 instagram.com/explore/tags/kpop instagram.com/explore/tags/food facebook.com/natgeo/photos facebook.com/bbc/..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bwpfqz/btrVZtfKXSd/BpbjrN2hSq20DPCVVHwybk/img.png)
Error: listen EADDRINUSE: address already in use :::8080 8080포트가 현재 다른 프로세스에서 사용 중이기 때문에 해당포트를 사용할 수 없다는 에러 1. 윈도우에서 포트를 사용하는 프로세스 찾기 cmd 열어 netstat -ano 명령어 입력해 사용중인 포트(8080) 찾기 8080의 PID는 912 2. 작업관리자 열어서 세부정보 탭 클릭 한 뒤 PID 912 찾아서 작업끝내기
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/KiGg2/btrV1IovEhi/hWAir5VGIunBJNh6C2HNY1/img.png)
콜백함수 : 함수안에 함수 들어가는것 (function(){}) 1. 순차적으로 실행하고싶을때 많이 씀 ex) 어디로 1.접속을 하면 무엇을 2.실행해주세요 .get('경로작명',function(요청, 응답){}) * 화살표 함수도 가능 .get('경로작명',(요청, 응답) => {}) app.get('/pet',function(req,res){ res.send('펫용품 쇼핑할 수 있는 페이지입니다.'); }); app.get('/',function(req,res){ // res.sendFile(__dirname + '/index.html'); }); .send() 문구 보내주세요 .sendFile() 파일 보내주세요 Submit 버튼 누르면 폼에 입력한 데이터를 POST 요청하여 서버로 전달 태그 기능..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/djD2vr/btrV1icsfet/3JKF1xLE8YIUPQKMW41gLk/img.png)
반복문의 용도 1. 코드반복 2.array, object 데이터 전부 꺼낼 때 function -> arrow function 사용 가능 *주의 arrow function 쓰면 함수의 this 뜻이 달라질수있음 ex) 쇼핑몰에서 바지를 선택하면 거기에 맞는 바지 사이즈 옵션 열어줌 만약 바지사이즈가 매일 달라지면? 계속 바꾸기 너무 불편 서버에서 데이터 가져와서 그 데이터 갯수만큼 태그 만들면 됨 데이터가 array라면 array 함수 forEach 반복문 forEach : array 안에있는 데이터 갯수 만큼 반복 forEach(function(a){ 실행할 코드 }) *a는 array에서 가져온 데이터들 var shirts = [95, 100, 105, 110]; var pants = [28, 30,..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/VdKqm/btrVZ3NFPsQ/JYej1sJI1wLVFtDQM0A371/img.png)
insertAdjacentHTML : 앞에 요소에 문자형 HTML 추가해주는 함수, insertAdjacentHTML(추가할 위치, 추가할 문자) var 테스트 = '안녕'; document.querySelector('#test').insertAdjacentHTML('beforeend',테스트); //jQuery $('#test').append(테스트); Q. 추가말고 아예 바꾸고 싶으면? innerHTML document.querySelector('#test').innerHTML="하요"; //jQuery $('#test').html('하요');