[네트워크] WebSocket (ws/wss)

1. 웹소켓(WebSocket)웹소켓(WebSocket)의 등장 배경초기의 인터넷 통신 방식은 주로 HTTP 를 이용한 클라이언트(요청) - 서버(응답) 모델을 통해 진행했지만 HTTP 방식은 실시간으로 데이터를 주고 받는 데에는 한계점이 있음클라이언트는 항상 새로운 데이터가 있는지 확인을 하기 위해서는 서버에 지속적으로 요청을 보낼 수 밖에 없음그렇게 되면 트래픽을 불필요하게 증가시키고, 이로 인해 서버의 비용이 증가될 뿐더러 요청과 응답사이의 지연시간이 있기 때문에 실시간 통신의 효율성을 저하시킬 수 있는 단점이 있기에 웹소켓이 등장함웹소켓(WebSocket)이란?https://tadaktadak-it.tistory.com/186 [네트워크] TCP 통신1. TCP/IP 프로토콜TCP/IP는 인터넷 ..

[네트워크] HTTP/HTTPS

1. HTTP(Hyper Text Transfer Protocol) HTTP(Hyper Text Transfer Protocol)란 웹상에서 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜 데이터는 HTML뿐만이 아닌 평문, JSON 등 다양한 포맷이 가능 서버/클라이언트 간의 연결을 유지하기 위한 리소스를 줄여 많은 연결을 할 수 있도록 비연결적인 특징을 갖도록 설계 81번 포트를 기본적으로 사용TCP/IP 위에서 작동HTTP는 애플리케이션 레벨의 프로토콜로 TCP/IP 위에서 작동TCP/IP 위에서 작동하기 때문에 연결의 시작과 끝은 TCP 연결과 해제가 이루어짐TCP/IP랑은 다르게 무상태성이며 비연결성 특성을 가짐HTTP의 무상태성(Stateless)서버는 응답 메세지를 반환한 후에..

[네트워크] TCP 통신

1. TCP/IP 프로토콜TCP/IP는 인터넷 통신 시 실제로 사용하는 표준 모델전송 계층으로 응용 계층으로부터 메시지를 받아 패킷으로 캡슐화하여 전송패킷 : 네트워크를 통해 전송되는 형식화된 데이터 덩어리OSI 7계층- Open Systems Interconnection, 컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나누어 설명하기 위해 개발한 모델TCP/IP 4계층- 현재의 인터넷에서 컴퓨터들이 서로 정보를 주고받는데 쓰이는 프로토콜의 모음OSI 모델을 기반으로 실제 사용될 수 있도록 단순화된 모델 2. TCP(Transmission Control Protocol)3-way, 4-way handshake 과정을 통해 데이터를 신뢰성 있게 전송할 수 있도록 하는 프로토콜TCP 통신는 밑에 순서를 ..

[네트워크] OSI 7계층 및 TCP/IP 계층

1. OSI 7계층 OSI (Open Systems Interconnection)네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나누어 설명하기 위해 개발한 모델흐름을 한눈에 알아보기 편하고, 통신 과정에서 이상이 생겼을 때 다른 계층의 하드웨어 및 소프트웨어를 건드리지 않고 문제가 생긴 계층만 살펴보면 되기 때문에 에러를 고치는데 용이OSI 7계층을 통해 본 데이터 송/수신캡슐화 과정송신 호스트가 수신 호스트에게 데이터를 전송하게 되면 응용 계층부터 물리 계층까지 각 계층의 프로토콜 특성에 대한 정보가 담긴 헤더를 포함하여 데이터 이동역캡슐화 과정이 데이터가 물리 계층에서 다시 수신 호스트에게 가기까지 각 층의 프로토콜 정보를 털어냄2. TCP/IP..

[API] slick 슬라이더

slick 슬라이더 API https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io - slick slider는 반응형 웹을 지원하는 슬라이더 라이브러리다. slick 다운로드 및 js, css 파일 로드 - slick 홈페이지에 들어가서 get it now을 눌러서 js, css 파일을 다운 받거나 링크를 복사해서 로드하면 된다. CSS JS 기본 ..

[Node] 미들웨어, Mysql DB 연결(순수 쿼리문)

1. 미들웨어 미들웨어란? 미들웨어 함수는 req(요청) 객체, res(응답) 객체, 그리고 어플리케이션 요청-응답 사이클 도중 그 다음의 미들웨어 함수에 대한 엑세스 권한을 갖는다. 즉, 미들웨어란 클라이언트에서 요청을 받고 응답을 처리하기 전 중간에 목적에 맞게 처리를 하는 함수라고 생각하면 된다. 그래서 next()라는 함수가 꼭 필요하다. 미들웨어에서 처리를 하고 그 다음 실제 요청을 받는 함수로 넘어가기 위해서는 next() 함수를 사용해야 한다. 예를 들어, 요청이 들어오면 각 요청마다 필요한 로그 같은 것을 응답을 처리하기 전에 중복을 방지하기 위해 미들웨어로 출력한다.(passport, oauth) 미들웨어 예시 // 미들웨어 : 요청이 와서 응답을 하기 전에 들르는 곳 // logger로..

[Node] Sequelize 사용과 DB 연결, 회원가입 예시

1. Sequelize - 객체와 관계형 DB를 연결하는 ORM (Object Relational Mapping)의 한 종류 - SQL문을 사용하지 않아도 명령문만으로도 DB 관리가 가능 - 필요에 따라 Row Query(SQL 쿼리문)도 사용 가능 2. Sequelize 설치 및 DB 연결 사용 1. 설치 및 폴더 - 설치 : npm i mysql2 sequelize sequelize-cli - 기본 설정 : npx sequelize init - config : DB와 연결 설정 - models : 테이블 정의 및 스키마 구현 - migrations : 테이블, 스키마 수정 - seeders : 백업본 저장 - 설치 후 env를 사용하기 위해 config.json을 config.js로 바꾸고 modul..

[React] prettier와 eslint

1. prettier - code formatter (탭, 간격, 띄어쓰기, 줄바꿈, 세미콜론, 따옴표... 자동으로) file - 깃허브(원격저장소)에 데이터를 저장할 때[협업용] - 모든 개발자들이 같은 형태의 데이터를 저장하기 위해 설정하는 파일 .prettierrc 내 로컬 환경 vscode의 extension을 활용하여 내가 마음대로 커스텀한 코드 포메터를 사용 2. eslint - lintter의 일종 (화살표함수, 일반함수, console.log를 허용할 것인지, 사용되지 않는 변수가 있다면 error 정의되지 않음 함수가 있다면...) - 여러분들의 코드 문법을 통일화 file - 깃허브(원격저장소)에 데이터를 저장할 때[협업용] - 모든 개발자들이 같은 형태의 데이터를 저장하기 위해 설정..

[Node] Project - Header, Home

1. Header Component Client import { Image, Title, Subtitle, Button, Input } from "./Component" import MORE_ICON from '../images/more.png' import FACEBOOK_ICON from '../images/facebook-icon.png' import HOME_ICON from '../images/home.png' import YOUTUBE_ICON from '../images/youtube.png' import PEOPLE_ICON from '../images/people.png' import GAME_ICON from '../images/game.png' import MENU_ICON from ..

[Node] Project - Identify, DeleteUser

1. Identify Client import { Image, Title, Subtitle, Button, Input } from "./Component" import IMG_LOGO from "../images/facebook-logo.svg" import { useState } from "react" import axios from 'axios' export default function Identify(props) { const [email, setEmail] = useState(""); const onChangeEmail = (event) => { // console.log(event.target.value) setEmail(event.target.value) } const onClickCance..