오늘은 HTTPS에 대해서 알아보도록 하겠습니다.... 사실 HTTPS를 설명하기 위해서 HTTP를 해왔던거라고 보시면 됩니다.. 왜냐하면 3차프로젝트에서 HTTPS로 배포해야하는 상황이었는데, 그게 잘 안되고 찾아볼 레퍼런스도 부족해서 얘를 완벽하게 이해하고 접근해야겠다는 생각에 다시 공부하기로하고 공부를 끝내고 적고있는겁니다,,,ㅎ 그럼 시작해 보겠습니당!! 일단 HTTPS?? 간단하게 말하자면 암호화된 HTTP입니다. 그럼 먼저 암호화가 무엇인지부터 알고 가는게 좋겠죠? 1. 암호화 암호화는 승인된 당사자만 정보를 이해할 수 있도록 데이트를 "스크램블"한 방법입니다. 이를 복호화하려면 송신자와 수신자가 서로 동의한 "key"가 필요합니다. 또한 이를 만들기 위한 키가 쓰이기도 합니다. ciphert..
1. HTTP/2 2009년 구글은 HTTP/1.1의 한계를 극복하기 위해 SPDY 프로토콜을 개발했습니다. 이후 2015년, SPDY를 기반으로 하는 HTTP/2 프로토콜을 만들었습니다. (1) 바이너리 포맷 계층 애플리케이션 계층과 전송 계층 사이에 바이너리 포맷 계층을 추가합니다. HTTP 1.0은 일반 텍스트 메시지를 전송하고 줄바꿈으로 데이터를 나눴다면, HTTP 2.0은 0과 1로 이루어진 바이너리 데이터로 변경되었고, 더 작은 메시지가 프레임으로 캡슐화되어 전송됩니다. (2) 멀티플렉싱 단일 TCP연결의 여러 스트림에서 여러 HTTP 요청과 응답을 비동기적으로 보낼 수 있습니다. 이를 통해 HOL을 해결합니다. 1.1에서는 병렬요청을 하려면 다중TCP연결을 통해서 하고 일반적으로는 TCP연결..
오늘은 HTTP의 발전과정을 알아보도록 하겠습니다 1. HTTP/1.0 수명이 짧은 연결이라고 합니다. HTTP요청은 자체 요청에서 완료가 됩ㄴ다. 각 요청당 TCP핸드셰이크가 발생되며 기본적으로 한 연결당 하나의 요청을 처리하도록 설계되어 있습니다. 한번 연결할 때마다 TCP연결을 계속해야하니 RTT가 늘어나는 문제점이 있었습니다. ** RTT?? Round Trip Time(왕복지연시간): 신호를 전송하고 해당 신호의 수신확인에 걸린 시간을 더한 값이자 어떤 메시지가 두 장치 사이를 왕복하는데 걸린 시간 이를 해결하기 위해 HTTP/1.1이 나옵니다! 2. HTTP/1.1 이전과의 3가지 차이점 (1) keep-alive default 매번 데이터를 요청할 때마다 TCP연결을 하는게 아닌, 한번 해놓..
새싹에서 1,2차 프로젝트를 하면서 모두 Http로 배포를 하였는데요! 오늘은 이 HTTP에 대해서 꼼꼼히 살펴보도록 하겠습니다! 1. HTTP 헤더(header) 사용자가 HTTP요청을 하게 되면 헤더와 바디를 주고 받습니다. 여기에서 Headers에 있는 컨텐츠를 헤더! Body에 있는 컨텐츠를 바디라고 합니다! 당연하죠?ㅎㅎ 바디는 본문이라고 할 수 있으며 서버에서 보내고자하는 컨텐츠 본문인 JSON, html, image등이 담깁니다. 우리가 보통 api요청을 하면 JSON이 왔지만, 특정한 경우에 에러가 올때... 특히 502에러같은게 나오면 html이 오는 경우를 종종 봤었죠..? 헤더는 바디를 설명하는 정보를 포함해서 여러가지 정보가 담긴 정보 묶음이라고 보면 됩니다! 즉, HTTP전송에 필..
드디어 프로젝트가 끝나고 다시 수업을 듣게 되었습니다! 오늘은 프론트에서 매우매우 중요하다고 하는 리액트에 대해서 배워보았습니다! 1. 리액트 왜 배워야하지? angular-양방향 데이터 바인딩--> 양방향 웹 애플리케이션에 적합, react-동적 사용자 인터페이스, 페이스북에서 만든 오픈소스 javascript 라이브러리!!, 규모가 큰 라이브러리에 적합, angular보다는 배우기 쉽다. vue.js-2013년에 출시된 javascript 프레임워크, 현재 점유율은 리액트가 가장 높음 리액트 공식문서 React React The library for web and native user interfaces react.dev 그런데 라이브러리?? 프레임워크랑 헷갈려서 정리해보았습니다. 라이브러리(Libr..
1. 쿠키(Cookie) VS 세션(Session) 쿠키는 로컬이고 세션은 서버에 저장 되는 것 쿠키는 웹브라우저에서 확인가능하지만 서버는 확인 불가능함 따라서 서버가 보안측면에서 더 우수하고 세션은 서버에 저장되어있으니 서버까지 갔다와야하지만 쿠키는 서버에 갔다올 필요가 없으니 속도는 쿠키가 더 빠르다 그래서 로그인 정보와 같은건 세션을 주로 사용한다. 2. 환경변수 설정 index.js // const ps = process.env;//process.env는 환경변수임 // console.log(ps); const express = require('express'); const app = express(); const dotenv = require('dotenv'); dotenv.config(); /..
1. REST API? Representational state transfer API : REST 아키텍쳐 스타일을 따르는 API 즉, 클라이언트와 서버 간의 통신 방식을 정의할 때 REST 원칙을 따름 ==> REST 기반으로 서비스 AP I를 구현한 것!! method는 어떤 방식으로? 1. GET:읽기, 검색== Read (특정 뉴스기사를 클릭했을 때 해당 뉴스의 제목 & 내용 가져오기) 2. POST: 입력, 등록 ==Create (댓글 등록, 게시판 글 등록) 3. PUT: 모두 수정==Update(원래 있는 글 모두 수정) 4. DELETE: 삭제==Delete 5. PATCH: 일부 수정(Update) 그럼 백엔드가 있어야 API사용할 수 있는건가? 백엔드에서 연결된 DB에 대해 API를 ..
저번시간에는 visitor파일들이 많아서 visitor지옥이었는데요.. .오늘은 sequelize변수들이 많아서 sequelize지옥이었습니다.. sequelize지옥 같이한번 가볼까요?> { res.render('index'); }; //read all exports.getVisitors = async (req, res) => { // [before] // res.render('visitor', { data: Visitor.getVisitors() }); // [after-> before] // console.log(Visitor.getVisitors()) // Visitor.getVisitors((result) => { // console.log('controller >>', result); // r..