Day3 - wjddnjswjd12/fe-w3-shopping GitHub Wiki

라우팅이란

URI(경로) 및 특정한 HTTP 요청 메소드 (get, post)의 클라이언트 요청에 응답하는 방법을 결정
각 라우트는 하나 이상의 핸들러 함수를 가질수있고, 라우트가 일치할 때 실행된다.

app.get(PATH(경로),HANDLER함수)

app은 express객체이다. method에는 get과 post방식이 있다 PATH에는 해당하는 프로젝트 내의 서버 경로를 넣으면 된다. HANDLER은 라우트가 일치할떄 발생하는 함수이다.

오늘 미션을 하면서 사용해본 app.get()관련 코드:


let homeContents;
homeContents = JSON.parse(
  fs.readFileSync("./public/data/homeContents.json", "utf8")
);
app.get("/homeContents.json", (req, res, next) => {
  res.json(homeContents);
});

Adela의 코드를 염탐하던 중 저런 방식으로 서버에서 보낼 수 있기에 옳거니! 하고 가져다 써봤다.

구글링으로 찾아보니까 res.send()보다 res.json()으로 보내는게 좋다고 한다. 객체의 참조값을 변수에 담아서 인자로 넘기기 때문에 res.send(homeContents);를 쓴다면 JSON데이터를 보내는지 뭘 보내는지 확실하지 않기에 res.json을 사용하여 JSON데이터를 보낸다는 의도가 명확하게 드러나도록 하는게 좋다고 한다....!

다른 이유도 있는데... 설명을 보고도 잘 이해가 안돼서 이건 이해가 되면 정리해봐야겠다..

fetch API

fetch는 Ajax 방식 중 하나다. fetch api를 틀대로 적용해본 코드:

fetch("http://localhost:3000/planningEvent.json")
    .then((response) => response.json())
    .then((data) => console.log(data));

fetch API는 promise방식을 기반으로 한다. then키워드=> 앞의 함수 실행이 끝나면 그 다음으로 할 일을 정해주는 것 'fetch(서버주소)'는 웹 브라우저에게 "이 서버 주소로 요청해줘!!" 라는 의미이고, 뒤에 .then이 붙으면, "요청 끝나고 나서 이 할일을 해줘!!!!" 라는 것이다.

마무리...

무튼 오늘 캐러셀? carousel 을 구현해봤는데... 버튼에다가 event를 걸어야하는데 뭔가 자꾸 삑사리나서 작동하나 확인만 하려고 setInterval을 통해 carousel을 움직여봤다..

현재상태(outline:red 흉측주의):

current

참고: