1)node.js npm express 다운받기
- node.js
- node.js 홈페이지
- LTS버전 다운
- 파일열고, 계속눌러라
- 터미널에서
node -v다운되었는지 알 수 있다.
- 새 폴더을 만들고, 터미널로 그 폴더에 들어가라
cd 파일명 - npm
- 터미널에서 명령어 입력
npm init
- 터미널에서 명령어 입력
- vsc에서 그 폴더 열어라
- express
- vsc의 터미널에서
npm install express --save
- vsc의 터미널에서
- index.js 파일 만들기
- express Hello world의 코드를 index.js에 복붙하기
- package.json파일의 "scripts"안에
"start": "node index.js",코드 복붙하기- node를 index.js에서 시작한다.
- vsc의 터미널에서
npm run start입력 localhost:port값localhost:4000인터넷 주소창에 입력하면, 간단한 웹사이트가 열린다.
^C 입력하면, 서버 열고 닫을 수 있다고 하는데 모르겠다.
2)js문자열안에 변수넣기
- 문자열을 백틱(`)안에 넣을 때,
- 변수를 ${}안에 넣는다.
`Example app listening at http://localhost:${port}, ${port}`- 문자열을 따옴표(' ")안에 넣을 때,
- '+ +' 또는 "+ +"안에 넣는다
- 중요한 점 모든 따옴표를 통일해야한다
console.log("a * b 결과는 ,"+a * b+","+a * b+"입니다.")console.log('a * b 결과는 '+a * b+'입니다.')- 위의 방식이 안될 때
- 문자열과 변수사이에 ,입력
console.log("a * b 결과는 , 변수)3)mongo DB 연결하기, mongoose
- 몽고디비 웹사이트 들어가기
- 회원가입
- 무료버전 클러스터 만들기
- 1개만 되는 것 같다.
- 왼쪽 탭 database클릭
- 만든 클러스터의 connect클릭
- username, password만들기
- 연결 방법 고르기
- connect your application 클릭
- 코드를 vsc에 복붙(나중에 쓸 때 있음)
- mongoose 다운
- vsc의 터미널에
npm install mongoose --save입력
- vsc의 터미널에
- 아래코드 복붙
- mongoose.connect()안에 있는 문자열은 아까 vsc에 복붙했던 코드이다.
const mongoose = require("mongoose");
mongoose.connect(
"mongodb+srv://dongyoon:<password>@cluster0.chko0.mongodb.net/myFirstDatabase?retryWrites=true&w=majority",
{
useNewUrlParser: true,
useUnifiedToPology: true,
useCreateIndex: true,
useFindAndModufy: false,
}
).then(() => {
console.log("mongo DB connected...");
})
.catch((err) => {
console.log(err);
});
//형태 mongoose.connect(문자열,{}).then().catch()- 코드
<password>에다가 아까 username의 password를 입력하기
4)postman
- postman이란?
- 서버통신 테스트
- 간단한 데이터를 저장할 수 있는 서버를 만드는 프로그램
- 사용방법
- postman 프로그램 더블 클릭
- 로그인
- 상단 탭애서 workspace -> my workspace
- 상단 탭 밑의 new 클릭
- mock server(유사 가짜 서버)
- request URL 입력
- 예시 : products
- create mock server name
- click create btn
- click copy url btn
- 만든 mock server 클릭
- default 클릭
- 데이터를 JSON code로 입력
- Body부분의 text를 JSON으로 변경
- 아래의 json코드를 복붙
- 규칙 : 6)JSON참고
- 주의사항 : 코드를 객체로 입력시 key값은 "" 큰따옴표로 감싸야한다.
- {"key": "value",}
- 우측 상단의 No environment -> 내가 만들었던 서버로 변경
- default가 아닌 get을 클릭한다.
- send를 눌러서, 요청하면, 내가 입력했던 JSON code가 응답된다.
- 주소는 GET 옆에있는 것이다. 이때 {{url}}에 들어가는 값은 우측 상단의 눈 아이콘 클릭, 이니셜 벨류이다.
- 해당 주소롤 들어가면, JSON code가 화면에 나타난다.
//JSON code
{
"products": [{
"name": "농구공",
"price": 100000,
"seller": "조던",
"imageUrl": "images/products/basketball1.jpeg"
},
{
"name": "축구공",
"price": 50000,
"seller": "메시",
"imageUrl": "images/products/soccerball1.jpg"
},
{
"name": "키보드",
"price": 10000,
"seller": "그랩",
"imageUrl": "images/products/keyboard1.jpg"
}]
}5)마크다운 형광펜 작성법 & 글자 색 바꾸기
초록형광펜
<span style="background-color:#dcffe4">초록형광펜</span>노랑형광펜
<span style="background-color:#fff5b1">노랑형광펜</span>파랑형광펜
<span style="background-color:#f1f8ff">파랑형광펜</span>빨강형광펜
<span style="background-color:#ffdce0">빨강형광펜</span>보라형광펜
<span style="background-color:#f5f0ff">보라형광펜</span>주황형광펜
<span style="background-color:#f7ddbe">주황형광펜</span>
빨간색
<span style="color:red">빨간색</span>초록색
6)JSON
- JSON이란?
- 데이터를 저장하거나 전송할 때, 사용하는 데이터 형식
- 간단한 데이터를 저장할 때에도 쓰인다.
- 형식은 자바스크립트 객체표현식을 사용하기 때문에, 자바스크립트 개발을 할 때, 많이 쓰인다.
- 규칙
- key값은 반드시 ""큰따옴표로 감싸야한다.
- 마지막 key의 value값에는 ,를 쓰면 안된다
{
"name" : "축구공",
"price" : 50000,
"likes" : ["그랩", "실키", "민수"],
"seller" : {
"name" : "그랩",
"email" : "grab@helloworld.com"
}//여기에는 ,쓰면 안된다.
}7)url로 요청하여, 데이터를 받아와서, 홈페이지 만들기
//axios 외부 라이브러리 다운로드
<head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>axios
.get("https://75cf7c45-ec1c-4ed7-842f-6dbc10752ed1.mock.pstmn.io/products")
//get("postman 프로그램으로 만든 url")
//위 주소에서 데이터를 받아온다.
.then(function (result) {
//then()에 익명함수 넣음
//익명함수에 인수를 넣음 -> 받아온 데이터 값을 사용하려고
console.log("통신 결과 :", result);
//함수 인수 출력
const products = result.data.products;
//데이터값을 변수에 넣음(배열안에 객체가 들어있음)
let productsHtml = "";
//#product-list tag안에 넣을 html이 담긴 변수
for (let i = 0; i < products.length; i++) {
//배열안의 데이터를 모두 활용하기 위해서, 반복문 활용
let product = products[i];
//객체 한 개를 변수에 넣음
productsHtml +=
//productsHtml 변수에 html 넣음
'<div class="product-card">' +
"<div>" +
'<img class="product-img" src="' +
product.imageUrl +
//객체에 담긴 데이터를 js의 객체를 이용하여 html에 넣음
//이미지의 src="" 안에 넣음
'" alt="농구공"/>' +
"</div>" +
'<div class="product-contents">' +
'<span class="product-name">' +
product.name +
//객체에 담긴 데이터를 js의 객체를 이용하여 html에 넣음
// span tag의 content에 넣음
"</span>" +
'<span class="product-price">' +
product.price +
//객체에 담긴 데이터를 js의 객체를 이용하여 html에 넣음
// span tag의 content에 넣음
"원</span>" +
'<div class="product-seller">' +
'<img class= "product-avatar" src="images/icons/avatar.png" alt="" />' +
"<span>" +
product.seller +
//객체에 담긴 데이터를 js의 객체를 이용하여 html에 넣음
// span tag의 content에 넣음
"</span>" +
"</div>" +
"</div>" +
"</div>";
}
document.querySelector("#product-list").innerHTML = productsHtml;
})
//#product-list tag안에 제품 판매 카드 tag를 넣음
.catch(function (error) {
console.log("error 발생");
});
//간단한 구조 axios.get().then().catch()
/* axios 라이브러리 이용하여 통신한다. get방식으로 요청 통신 성공하면 .then()실행, 통신 실패하면 .catch() 실행한다.*/- axios 외부 라이브러리 다운로드
- 간단한 구조 axios.get().then(function(result){console.log(result)}).catch(function(error){console.log(error)})
- axios 라이브러리 이용하여 통신한다.
- get방식으로 요청
- 통신 성공하면 .then()실행,
- 통신 실패하면 .catch() 실행한다.
- 통신 성공하거나 실패시, 익명함수 실행되고, 함수의 인수가 출력된다. 인수는 데이터 값을 사용하기 위해서 넣음
dev