codeStates front-end/node(server)
-
JSON.stringifycodeStates front-end/node(server) 2023. 2. 14. 16:18
📌 JSON.stringify 📍JSON의 탄생 배경 "JavaScript Object Notation" 데이터 교환을 위해 만들어진 객체 형태의 포맷 전송 가능한 조건 수신자(reciever)와 발신자(sender)가 같은 프로그램을 사용한다. 또는, 문자열처럼 범용적으로 읽을 수 있어야 한다(String -> 큰따옴표). const message = { sender: "김코딩", receiver: "박해커", message: "해커야 오늘 저녁 같이 먹을래?", createdAt: "2021-01-12 10:10:10" } ❗️❗️ 객체는 타입 변환을 이용해 String으로 변환할 경우 객체 내용 포함 X JS에서 객체를 문자열로 변환하기 위해 메서드(message.toString())나 형변환(St..
-
My Agora states servercodeStates front-end/node(server) 2023. 2. 9. 16:22
📌 My Agora states server 📖 학습 목표 전의 학습한 statesAirline Server를 구현해보셨다면 어렵지 않습니다! airline 코드를 보면서 구현해 봅시당 StatesAirline Server 📌 StatesAirline Server 📖 학습 목표 이를 학습하기 전의, 아래 기본 내용을 먼저 이해하자 Express 사용 Refactor Express 📌 Refactor Express 📍Express Express 설치 npm install express Hello world! 예제 만들기 Express hwantech.tistory.com 📣 서버를 처음 실행 시키면 미들웨어 셋팅 부분이 동작 그후 '주소/'를 들어가게 되면 라우트 부분이 실행되고 다시 요청을 기다림 주소/..
-
StatesAirline ServercodeStates front-end/node(server) 2023. 2. 9. 15:54
📌 StatesAirline Server 📖 학습 목표 이를 학습하기 전의, 아래 기본 내용을 먼저 이해하자 Express 사용 Refactor Express 📌 Refactor Express 📍Express Express 설치 npm install express Hello world! 예제 만들기 Express "Hello World" 예제 Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. hwantech.tistory.com 📣 서버를 처음 실행 시키면 미들웨어 셋팅 부분이 동작 그후 '주소/'를 들어가게 되면 라우트 부분이 실행되고 다시 요청을 기다림 주소/가 아닌 경우 다른 주소로 들어가면 라우트 실행 x 에러처리 동작 1. 미들웨어..
-
Refactor ExpresscodeStates front-end/node(server) 2023. 2. 8. 20:13
📌 Refactor Express 📍Express Express 설치 npm install express Hello world! 예제 만들기 Express "Hello World" 예제 Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. 이 앱은 하나의 파일로 된 앱이며 Express 생성기를 통해 얻게 되는 앱과는 같지 않습니다. (이 예제 expressjs.com 공식문서를 통해 실행 myapp 디렉토리 생성 npm init 실행 app.js 라는 이름의 파일을 작성 후 다음 코드 작성 const express = require('express') const app = express() const port = 3000 app.get('/'..
-
Mini-Node ServercodeStates front-end/node(server) 2023. 2. 8. 16:20
📌 Mini-Node Server 📍서버실행 node server/basic-server.js 📖 학습 목표 POST에 문자열을 담아 요청을 보낼 때는 HTTP 메시지의 body(payload)를 이용합니다. 서버는 요청에 따른 적절한 응답을 클라이언트로 보내야 합니다. CORS 관련 헤더를 OPTIONS 응답에 적용해야 합니다. 클라이언트의 preflight request에 대한 응답을 돌려줘야 합니다. preflight request에 대한 응답 헤더는 이미 작성되어 있습니다. basic.server.js const http = require('http'); const PORT = 4999; const ip = 'localhost'; const server = http.createServer((req..
-
CORS 개요codeStates front-end/node(server) 2023. 2. 6. 17:29
📌 CORS 개요 📍SOP(Same-Origin Policy) '같은 출처의 리소스만 공유가 가능하다' 라는 정책 💡 출처가 뭔가요? 📖 출처는 프로토콜, 호스트, 포트의 조합, 이 중 하나라도 다르면 동일 출처 x 출처가 다른 예시 http / https -> 두 url은 프로토콜이 다르기 때문에 동일 출처 X tistory.hwantech.com / velog.hwantech.com -> 두 url은 호스트가 다르기 때문에 동일 출처 O http://hwantech.tistory.com/81 / http://hwantech.tistory.com -> http 기본 포트는 80 이다 그러므로 뒤에 url은 포트가 적혀 있지 않으면 기본포트 80이기 때문에 동일 출처 X https://hwantech.t..
-
REST API - 나만의 언어로 블로깅 해보기codeStates front-end/node(server) 2023. 1. 31. 20:01
📌 REST API 📍REST( Representational State Transfer ) API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍쳐 대규모의 고성능 통신을 안정적으로 지원 📍API 애플리케이션 프로그래밍 인터페이스 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙을 정의 📍 REST API 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 REST 구성 자원(RESOURCE) - URI 행위(Verb) - HTTP METHOD 표현(Representations) REST 특징 1) 균일한 인터페이스 : 서버가 표준 형식으로 정보를 전송 2) 무상태 : 서버가 이전의 모든 요청과 독립적으로 모든 클라이언트 요청을 ..
-
브라우저의 작동 원리(보이는 곳) - AJAX, SSR과 CSRcodeStates front-end/node(server) 2023. 1. 30. 19:35
📌 브라우저의 작동 원리(보이는 곳) 🔗 AJAX(Asynchronous JavaScript And XMLHttpRequest) 비동기식 자바스크립트와 XML 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있는 기법 보통 웹페이지는 문서 객체라는 것으로 구성 -> HTML 여기는 환테크 티스토리 공간입니다 실제 브라우저의 처리 과정(문서 객체 모델) html -> head -> title -> text:"환테크 티스토리" -> body -> text:"여기는 환테크 티스토리 공간입니다" -> img -> src="hwan.jpg" 이미지를 바꾸려면 이미지만 분해하여 조작 가능하지만 웹페이지에 새로 보여줘야 하는 내용이 서버에서 와야 할 경우, 서버에 그 내용을 요청해놓고..