1. 코드스테이츠
-
node로 디버깅하기
"scripts": { "start": "nodemon --inspect server/basic-server.js", }, // nodemon도 --inspect를 지원하니 nodemon으로 쓸것
- 시작하자 마자 브레이크 포인트가 걸려있다.
"scripts": { "start": "node --inspect-brk server/basic-server.js", }, -
라우팅
조건(url & method)에 따른 분기- 요청의 URL, 요청의 method에 따라 분기한다.
-
URL
전체가 다 URL이지만 서버에서 처리할때는 엔드포인트만 본다.
-/endpoint/와/endpoint는 다르다./endpoint/: 디렉토리를 의미/endpoint: 파일을 의미- 트레일링 슬래시
URL의 끝에 붙이는 슬래시(/)를 트레일링 슬래시(trailing slash)라고 부른다.
결론적으로 같은 URL에서 트레일링 슬래시를 명시해준다면 파일을 확인하는 과정을 생략함으로써 브라우저와 서버의 통신과정에서 처리/응답 속도에 약간의 이득이 있을 수 있다.
1. URL에 트레일링 슬래시가 있을 때(디렉토리)
URL에 트레일링 슬래시가 존재할 때, 서버는 이 요청에 대한 리소스를 디렉토리로 간주합니다.
그 디렉토리가 존재하면 디렉토리의 기본파일(Ex. index.html)을 확인
2. URL에 트레일링 슬래시가 있을 때(디렉토리)
URL에 트레일링 슬래시가 존재하지 않을 때, 서버는 이 요청에 대한 리소스를 파일로 간주합니다.
우선 해당 이름과 동일한 파일이 존재하는지를 먼저 확인하고, 없을 경우에는 디렉토리를 확인 후, 기본파일을 확인한다.
URL 끝에 ‘/’ 는 왜 붙이는 걸까?
[WEB/네트워크]트레일링 슬래시 – URL 뒤의 ‘/’의 의미
- 트레일링 슬래시
-
HTTP 트랜젝션 해부(from Node.js)
const http = require('http'); //서버를 만드는 과정 // 콜백의 parameter로 반드시 request, response 두가지가 들어가야한다. // 서버를 통해 항상 요청이 들어갈텐데 request객체를 이용하여 요청을 처리/구현한다. http.createServer((request, response) => { //request에 대한 response를 한번에 받아오는 것이 아니다. const { headers, method, url } = request; let body = []; // on method는 이벤트를 붙이는 것이다. // like element.addEventListener("click", () => { // 클릭했을 때 }); request.on('error', (err) => { // 요청에서 에러가 났을때 console.error(err); }).on('data', (chunk) => { // 데이터가 왔을 때 body.push(chunk); // 버퍼를 body에 차곡차곡 쌓아서 // 버퍼를 chunk로 이름 붙임, chunk(조각이라는 의미를 갖고있다) // chunk를 콘솔로그로 찍으면 하기에 나타낸 Buffer형태로 나온다 // buffer, 여기서의 chunk는 +연산자로도 사용 가능하다 }).on('end', () => { // 요청이 끝났을 때 body = Buffer.concat(body).toString(); //* 버퍼를 body에 concat해서 스트링화 시킨다 // 너무 긴 바디가 있을수 도 있다. // 청크가 한번에 와야하는데 부분만 먼저 오고 나머지부분이 오면 합쳐야 하기 때문에 // 여기서부터 새로운 부분입니다. response.on('error', (err) => { console.error(err); }); response.statusCode = 200; response.setHeader('Content-Type', 'application/json'); // 주의: 위 두 줄은 다음 한 줄로 대체할 수도 있습니다. // response.writeHead(200, {'Content-Type': 'application/json'}) const responseBody = { headers, method, url, body }; response.write(JSON.stringify(responseBody)); response.end(); // 항상 요청이 있으면 응답으로 마무리 해줘야 한다. // 없으면 응답없는 요청이 된다. → 한참 기다리다가 타임아웃이 걸린다. // 주의: 위 두 줄은 다음 한 줄로 대체할 수도 있습니다. // response.end(JSON.stringify(responseBody)) // 새로운 부분이 끝났습니다. }); }).listen(8080); // 8080 포트로 서버를 연다는 의미- Buffer : 데이터의 조각
- 유튜브 영상볼때 조각조각 데이터를 토막내서 보낸다.
- buffering : 버퍼가 쪼개져 있는 상태, 버퍼를 받는 것 - streaming : buffer를 받는 즉시 재생할 수 있는 것을 스트리밍이라고 한다.
- 스트림 : 개울가, 냇가에 물 흐르듯이 데이터가 흐르는 것
Buffer의 형태 - 데이터가 항상 텍스트 문서가 아닐 수 도 있다.
- buffer 16진수들이 담겨있는 형태로 온다.
- 버퍼라는 클래스 인스턴스로 생각할 것!
- 타입중 하나라고 생각하면 편하다.
<Buffer 7b 0a 20 20 20 20 22 75 73 65 72 6e 61 6d 22 3a 22 74 65 73 74 31 22 2c 0a 20 20 20 20 22 74 65 78 74 22 20 3a 20 22 74 65 73 74 22 2c 0a 20 20 20 20 ... 17 more bytes>인터넷에서 데이터를 가져올때 텍스트가 아닌 경우
- 이미지, 비디오
- 텍스트 포맷이 아닌 경우 내부에서는 Buffer처럼 바이너리 파일 형태로 되어있다.
body = Buffer.concat(body).toString(); // ↓ <html> <head> </head> <body> // 바디 </body> </html> - Buffer : 데이터의 조각
-
Browser의 Network
- General : 일반적인 내용
- Response Headers : 응답(응답을 어떻게 줄지도 서버가 결정할 수 있다), 응답에 CORS설정을 두면 CORS해결을 할 수 있다.
- Request Headers : 요청할때의 header들
- Request Payload : 요청에 대한 payload(트럭에 실린 짐) -
.concat() : 문자열에도 사용가능
'hello'.concat('world') // 'helloworld' -
payload : 데이터에서 필요한 부분만 뽑아서 쓰는 것, 나머지는 protocol overhead
- payload = http body1{ 2 "status":"OK", 3 "data": { 4 "message":"Hello, world!" 5 } 6} // "Hello, world!"가 payload이다
TODAY MOOD
오늘의 나는 마음이 조금 더 단단하다🥰
