![](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('하요');
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/1ow7S/btrV0RsZvL0/kntM3qskvckK8LLmOzqc6k/img.png)
코드 수정할때마다 node server.js로 서버 재실행해서 페이지 확인해야하는 과정 귀찮음 node server.js nodemon nodemon으로 서버 재실행 자동화하기 (코드변경하는 순간 서버 재실행됨) npm install -g nodemon //노드몬 설치 nodemon server.js // 노드몬으로 서버 실행 * nodemon server.js 했는데 보안오류 뜨는 경우 powershell 관리자 권한으로 실행 후 1. executionpolicy 입력 2. set-executionpolicy unrestricted 3. y 입력 서버에서 HTML 파일 전송하기 ● 고객 - 주소창에 URL을 입력해서 서버에 GET요청 ● 서버 - 누가 /파일이름 경로로 들어오면 ??를 보내주세요~ re..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/sSJYG/btrVYj5uBd4/6wj9HmsdsCdH4pzuIVBPUk/img.png)
서버를 띄우기위한 기본 셋팅(express 라이브러리) //서버 오픈하는 기본 문법 const express = require('express'); const app = express(); //서버를 열겠다 app.listen(8080, function(){ }); .listen(파라미터1, 파라미터2) 파라미터1 : 써버띄울 포트 번호 파라미터2 : 띄운 후 실행할 코드 8080포트로 들어가기 - localhost:8080 GET 요청 app.get('경로', function(req, res){ res.send('띄울 메시지') }); ● req - 요청 ● res - 응답 → 누군가가 /pet 으로 접속하면 응답해주자 .get( ) 여러개 만들어서 경로를 많이 생성할 수 있음