til 37일차 오늘의 정예반 수업 정리

글로 쓰고, 기능이 있고, 화면 미화 이외의 용도가 있으면 그게 프로그래밍 언어지

html, 왜 언어가 아닐까

언어가 아닌건 내 스파게티 아니겠나요?

 

 

1. js에서 html넘기기

 

res.sendFile(__dirname + {내보낼 html 파일 경로})

 

이걸 왜 기억 못했을까

 

날로먹을 생각을 버려야한다

 

 

2. fetch

 

사용하게 된 이유

 

정예반 진도가 모듈까진 못갔는데 app.js하나 위주로 쓰고

그러니 html에서 어느정도 부담을 져줘야해서

 

js기술이 메인인데 html에서 쓰는걸 예시로 보여주셨다

 

----------------------

사용한 npm

express, cookie-parser

 

html에서 기억할것

fetch

-----------------------------------

 

이번 정예반의 꽃인 게시판 만들기가 내일인데

 

사용할 기술로 html이 선정되었다

당연한거지만

 

특기할 것은 html을 최근의 노드반 수업의 방향성과는 다르게 

'html-그냥 화면만 구현'이 아니라

예전 수업처럼 일단 html에서도 기능을 어느정도 분담하게 만드는 방식을 채택했다

 

여기서 사용된게 fetch

 

fetch는 찾아보니 js에서도 많이 쓰이는 물건이지만

html에서도 사용은 할 수 있는 모양

 

다시 지옥이 왔다

 

간단한 fetch 내용 긴빠이, 출처는 아래와 같습니다

 

[JavaScript] fetch 함수 쓰는 법, fetch 함수로 HTTP 요청하는 법 (velog.io)

자바스크립트의 fetch() 함수로 원격 API 호출하기 | Engineering Blog by Dale Seo

Fetch 사용하기 - Web API | MDN (mozilla.org)

좋은 설명 감사합니다, 내용 좀 배끼겠습니다

 

상세한 설명인데 내가 이해못하는건 의지가 부족한 것 같다

 

 

원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 게 fetch() 함수

라는게 간단한 설명 같다

 

이전엔 제이쿼리 같은걸로 했다는 모양

나도 써봤던거 같은데 하나도 몰라 진짜

 

fetch 사용법 

 

fetch() 함수는 첫번째 인자로 URL, 

두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. 

반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 

실패했을 경우에는 예외(error) 객체를 reject합니다.

 

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

이건 모질라 코드 예시

 

const data = {
    id: document.getElementById('id').value,
    password: document.getElementById('password').value
}

fetch("/", {
    method: "POST",
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data)
}).then((response) => response.json())
.then((data) => {
    location.href = "/profile"
}).catch((error) => {
    alert("너 계정없어")
})

이게 사용한 코드인데

 

const줄에서 데이터 json

 

fetch 에서 방식

 

post로 쏘고

헤더에 보낼 내용을 양식 저장

바디

그리고 하나하나 내려서

 

 

후