오늘은 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..
오늘은 드디어 MVC에 MySQL을 연결하는 것을 배웠습니다... 파일이 너무 많아서 왔다갔다하는데 너무 헷갈렸고.. 복잡하고.. 그래서 미뤘다가는 큰일 날 것 같다는 생각이 들어서 호다닥 정리를 해보도록 하겠습니다. 우선 파일 구조는 이렇게 만들면 됩니다.. 아직은 어색하기만 한 복잡한 구조의 파일들.. 1.작성 후 “등록” 을 누르면 DB 에 저장된다. (Create) 2.“등록” 된 내용이 아래 Table 에 바로 보인다. (Read) 3.“수정” 을 누르면 방명록 수정이 가능하다. (Update) 4.“삭제” 를 누르면 방명록이 삭제된다. (Delete) 오늘 해내야 할 것들입니다.... CRUD라고 하죠..Create, Read, Update, Delete 일단 먼저 해주어야 할 것은 npm i..
오늘은 지난 시간에 이어 MYSQL과 MVC패턴에 대해서 배웠습니다!! 한번 다시 정리하면서 복습해보도록 하겠습니다 ㅎㅎ 1. MySQL 지난 시간에 dml에서 select문을 이어서배웠습니다 1) order by order by이 default값은 asc(오름차순)이고, 내림차순으로 정렬하기 위해서는 order by (key) desc를 해주면 됩니다! 코드로 알아볼게요~ -- -- order by 없는 경우: PK기준으로 오름차순 정렬 SELECT * FROM customer; SELECT * FROM customer order by custname; -- asc가 default값이기 떄문에 생략하면 가나다 순으로 오름차순 정렬이 됨 SELECT * FROM customer order by custn..