오늘 한 일 및 회고

@ 노드강의를 express.js, REST API 까지 들었다. 내일은 이제 API 설계해보고 개인과제 슬슬 시작해야겠다.
@ 이정원 기술 매니저님이 DB설계와 API 설계를 가르쳐주셨다. 마침 내일 딱 하려고 했던게 많은 도움이 되었다.

Node.js 강의 2주차

2-2강. HTTP의 이해
프로토콜은 '약속'

HTTP 구성요소
Method
• Get : 이름 그대로 어떤 리소스를 '얻을 때" 사용.
• Post : 웹 서버에 데이터를 "게시"할 때 사용하는게 일반적 (ex. 회원가입, 게시글 작성, 댓글 작성)
Header :추가 데이터, 메타 데이터. 메서드도 사실은 헤더에 포함되어 보내짐.
Payload : 실직적인 데이터

2-3강. 웹서버의 이해
웹서버: 일반적으로 HTTP로 데이터를 주고받는 서버. 브라우저들이 HTTP를 쓰니깐.

2-4강. express.js의 이해

• Node.js로 서버를 빠르고 간편하게 만들 수 있게 도와주는 웹 프레임워크
• 라이브러리랑 프레임워크 차이 : 라이브러리는 작은 단위의 코드 묶음. 프레임워크는 큰 단위 기능이 짜여져 있는 거대한 코드 덩어리. 제약을 많이 가하고 이렇게 안하면 동작안하면 프레임워크

2-5강. Express.js로 웹서버 구현
새 프로젝트 만들고 app.js 만들고
터미널에서 npm init -y 입력 (-y옵션은 전부 다 수락한다는 거) 하면 package.json 파일 생성됨
확인 후, npm I express 입력하면 여러가지 생김.

app.js 에다가 이제 코딩 작성
const express = require("express");
const app = express(); //express를 함수처럼 실행. 서버객체를 받아서 app에 넣은 것. 이렇게만 하도록 제약되어 있음.
const port = 3000;

app.listen(port, () => {
console.log(port, "포트로 서버가 켜졌어요!");
});
이거까지 치고 node app.js 치면 서버 켜진거
브라우저에서 localhost:3000 치면 뭐가 뜨긴 뜸. ctrl+c로 끄고 다시들어가면 연결 안됨.

app.get('/', (req, res) => {    // '/'부분은 주소창에 뒤에 아무것도 안치고 /만 있을 때 처리해주겠다.  req, res 넣는건 약속.
res.send("Hello World");
})
이걸 저 세번째줄 밑 빈칸에 추가하고 다시 들어가면 Hello World가 뜸.
localhost 이거는 loofback주소라는 127.0.0.1에 붙힌 별명. 127.0.0.1:3000 으로 들어가도 똑같음. 어디서 접속하는 내 자신의 컴퓨터를 가리킴. 피씨방에서 치면 피씨방 컴퓨터의 주소.

지금 한거
자바스크립트로 언어를 짜고
express.js로 웹서버를 구현했고, node.js로 실행을 했다.

2-6강. 미들웨어
node.js 에 있는 개념. 웹서버에 왠만하면 다 있는 개념인데 다른 웹서버에서는 모듈이라는 개념으로 존재.
서버에 추가적인 기능을 붙이는 느낌.
요청과 응답에 대한 공통적인 처리를 해준다.
https도 미들웨어 (이건 사용하지 않는 걸 추천. 다른데서 서비스로 해줌.)

app.listen : 서버를 요 포트로 열겠다.
app.get : get메소드로 이 경로로 들어오면 이 안에있는 거를 실행. res.send로 리스폰스를 보내겠다.

app.use가 미들웨어를 사용할 수 있게 도와주는 것. 위에 두개보다 위에 작성해야 영향을 줄 수 있음.
next() 이걸 써줘야 다음 미들웨어를 호출한다?
app.use((req, res, next) => {
console.log("미들웨어가 구현됐나?");
next();
})
이거 까지 써주고 서버 다시 키고 들어가면 들어갈 때마다 미들웨어구현됐나? 저 로그가 계속 뜸. 요청마다 뜸.
근데 여기서 next만 주석처리하고 다시 서버키고 들어가보면, 저 로그는 뜨는데 서버 화면 로딩이 안끝남.
next함수가 있어야 그 다음 미들웨어인 라우터(밑에 get함수)로 넘어가는데 안넘어가기 때문.

console.log("주소는?", req.path);
이거 use안에 추가하면 요청들어온 경로 로그에 뜸. 페이지를 안만들어서 라우터가 동작하지 않았더라도 일단 경로는 뜸. 페이지가 안뜰뿐.

    if (req.path === "/test"){
res.send("테스트 주소로 왔구나!");
} else{
next();
}
app.use 내용 다 지우고 위와같이 변경하면. local:3000/test라는 경로에도 답변이 옴.

미들웨어 사용할 때는 next를 안쓰면 무한루프나 버그등이 있을 수 있으니 주의하고
미들웨어 사용은 순서가 중요하다.

미들웨어들 보기
https://expressjs.com/en/4x/api.html#app
https://www.npmjs.com/search?q=express%20middleware

2-7강. Routing 이해
라우팅 : 클라이언트가 어떻게 요청했을 때 어떻게 대응할지 정하는 객체
프로젝트 내에 routes라는 폴더 만들고 goods.js 파일 만들어서 코드 따라 작성.
근데 항상 실행은 app.js로 할건데 거기서 지금 이 파일의 존재를 모름
app.js가서 const goodsRouter = require("./routes/goods");
를 4번째 줄 쯤에 추가. require함수 내에서는 goods.js까지 써도되는데 안써도 됨.
goods.js를 외부에서 쓸 수 있게 하려면 goods.js 가서
module.exports = router;
이걸 마지막에 작성. 이 위에 정의한 router 객체를 모듈로서 내보내겠다.

app.js에
app.use("/api", goodsRouter);
이걸 추가하고나서 서버 다시키고 localhost:3000/api로 들어가면 this is root page가 뜬다.
router가 자기를 호출한 함수에 적힌 경로인 localhost:3000/api 까지를 기본 주소로 보고
router.get("/"로 시작했던 미들웨어를 실행 한 것.
즉, http://localhost:3000/api/goods 로 들어가면 밑에 꺼가 실행된다.

2-8강. API와 REST API

API(Application Programming Interface)
우리가 API를 작성한다는 의미는?
웹 어플리케이션(프론트엔드)에서 원하는 기능을 수행하는 URL과 인터페이스를 제공한다는 의미.

REST API (Representational State Transfer)
레스트풀도 같은 말임.

update하는 메소드중에 PUT과 PATCH가 있는데 put은 명시안한 모든걸 null로 초기화하고 PATCH는 명시한 것만 바꾸고 나머지는 내비둠.
지울때는 DELETE 메소드가 있다.

res.json을 썼을 경우엔 express가 알아서 http 헤더의 Content-Type을 json으로 넣어줌.

2-9강. REST AI 개발
예시데이터 복사해서 good.js에 넣고
router.get("/goods", (req, res) => {
res.json({
goods: goods
})
});
이와 같이 수정 후 api/goods 경로 들어가면 데이터들 나옴. 저 복사한 goods객체를 json형태로 goods라는 변수에 입력해서 출력한거.
자바스크립트에서는 키이름이 변수이름과 같을 때는 그냥 저줄을 지우고 goods 이거만 써도 됨.
또는 goods, 이렇게 콤마하나 넣어도 됨.
객체초기자라고 하는건데 키랑 밸류가 항상 같을 땐 약식으로 쓸 수 있음
let o = {a, b, c} 이와 같이

• 상품상세조회 API 구현하기
router.get("/goods/:goodsId", (req, res)=>{
	const goodsId = req.params.goodsId;
    console.log(goodsId);

});
이와 같이 :을 붙이면 그 뒤에 아무 값이나 받겠단 거. 그 별명을 goodsId로 부르겠다고 정한거.
그걸 받아서 변수 goodsId에 넣어서 찍어내느 것.
근데 이렇게만 하면 아직 응답을 하는 걸 작성 안해서 무한루프가 돌 것. 항상 응답하는 것을 넣어야함.
그래서 res.send("goods id 확인용"); 이거 한줄 추가.

router.get("/goods/:goodsId", (req, res)=>{
const goodsId = req.params.goodsId;

    const [detail] =  goods.filter((item) => item.goodsId === Number(goodsId));
res.json({
detail,
});
});
상품상세조회 API 구현 최종 구현한 코드.
일단 예시보기가 detail이란 키 안에 출력하게 해서 그거대로 한거고.
filter함수 써서 goodsid가 해당 번호인 애를 찾아서 [detail]에 넣은건데 []로 감싼 이유는 지금 데이터가 이미 []로 감싸져있기 때문에 저렇게 []로 감싼거에 넣은다음 res.json안에는 그냥 detail 넣으면 [] 벗긴채로 출력하는 거.
만약에 filter함수로 찾아진 결과가 여러 개라면
const [detail1, detatil2, detail3] = ~~ 이런식으로 여러 개 해도 됨.
그리고 또 다른 포인트가. 주소값은 문자열로 처리하기 때문에 그걸 number로 바꿔준뒤에 ===에 대입해야 제대로 비교함.

2-10강. 3주차 대비해서 강의자료 따라서 몽고DB랑 Robo 3T 설치.
강의랑 버전이 달라서 그런거같은데 mongo말고 mongod 쳐야하나봄 마지막에 확인할 때.
난 6.0.0 다운받음.

API 설계 팁

@ 데이터베이스 설계부터 먼저한 다음에 한다.
@ 테이블마다 API 명세서를 따로 만드는게 좋다.
@ 글 게시나 수정도 업데이트 후에 다시 보여줄 거기 때문에 응답에 그 게시물 정보를 넣어준다.
@ 경로에 쓰는 건 주로 대상의 이름인 명사로 쓰고 login, join같은 등등 제한적인 상황에서만 동사를 쓴다.
@ 경로는 명사로 쓰되 단수로 쓴다. 하지만 복수 취급이고 뒤에 구분할 수 있는 변수가 주어지면 그 때 단수가 되는 거라 보면 된다.
@ 대문자를 쓰지 않는다.
@ 스페이스바, 언더바(_)를 쓰지않고 하이픈(-)을 쓴다.
@ 메소드 이름은 대상을 가지고 할 행동으로 정한다.