2025/03 62

JavaScript 프레임워크 - 3대장

Angular JS • 구글에서 만든 JavaScript 기반의 오픈 소스 프레임워크• 양방향 데이터 바인딩으로 양방향 웹 애플리케이션에 적합• 2016년도 이후 점유율 하락 중• Ex) 유튜브, 페이팔, 구글, 텔레그램 등등  React JS• 동적 사용자 인터페이스를 만들기 위해 2011년 페이스북에서 만 든 오픈 소스 JavaScript 라이브러리• 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합• Angular 보다 배우기 쉽다고 이야기 됨.• Ex) 페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스 등등 Vue.js  • 2013년 출시된 JavaScript 프레임워크• Angular와 React의 장점을 수용한 프레임워크• 중국어 기반으로 Reference가 적음.• Ex) 샤오미,..

Socket.io의 기본적 사용법

Socket.io• 클라이언트와 서버 간의 짧은 지연 시간, 양방향 및 이벤트 기반 통신을 실시간 으로 가능하게 하는 라이브러리• WebSocket 프로토콜 위에서 구축되었으며 통신 과정을 단순화하고 개선하 기 위한 추가 기능을 제공• 이벤트 기반이며, 연결이 끊어질 시 자동으로 재연결 시도를 한다는 특징이 있다. Socket.io의 기본적인 이벤트이벤트명의미connection• 클라이언트가 서버에 연결되었을 때 발생.• 클라이언트와의 상호작용을 초기화하거나 초기 데이터를 전달할 수 있 음disconnect클라이언트가 연결을 해제했을 때 발생disconnecting클라이언트가 연결을 해제하려는 경우에 함수를 실행하고 싶다면 발생error연결 중에 오류가 발생했을 때 발생 사용자 지정 이벤트룸 관련 함수 ..

TCP/IP 와 WebSoket

TCP (Transmission Control Protocol)컴퓨터 네트워크에서 데이터 통신을 위한 프로토콜 하나로 데이터 교환을 가능하게 함TCP는 데이터를 신뢰성 있게 전송하기 위한 프로토콜 특징의미신뢰성데이터의 손실이나 손상을 최소화하고, 데이터의 순서를 보장연결 지향데이터를 주고받기 전에 송신자와 수신자 간에 연결흐름 제어데이터의 흐름을 제어하여 수신자가 처리할 수 있는 속도에 맞춰 데이터를 전송혼잡 제어네트워크의 혼잡 상태를 감지하고 조절하여 네트워크 성능을 유지 IP (Internet Protocol)인터넷상에서 데이터를 주고받기 위한 통신 규약(약속)특징의미패킷 기반데이터를 작은 패킷 단위로 나누어 전송하고, 각 패킷은 목적지 주소와 출 발지 주소 정보를 포함비연결성패킷은 독립적으로 처리되..

데이터 암호화란?

암호화 종류 - 단방향● 데이터 무결성을 검증하는 데 주로 사용되며, 패스워드 저장 등에서도 활용● 단방향이므로 원본 데이터를 복원하는 건 불가능● 동일한 데이터에 대해서는 항상 동일한 해시 값이 생성됨- 서로 다른 데이터에 대해서도 같은 해시 값이 나올 수 있음● 미세한 데이터 변화에서도 해시 값은 완전히 다르다.● 주로 해시 함수(MD5, SHA-1, SHA-256 등)을 사용하여 구현 해시(Hash)● 해시(Hash) : 해시 함수에 의해 얻어지는 값● 해시 함수(Hash Function) = 해시 알고리즘● 임의의 크기의 데이터를 고정된 크기의 데이터로 변환하는 함수● 키(key) : 매핑 전 원래 데이터 값● 해시 값(hash value) : 매핑 후 데이터 값● 해싱(hashing) : 매핑하..

OAuth와 JWT

OAuth(Open Authorization)• 인터넷 사용자들이 비밀번호를 직접 제공하지 않고 다른 웹사이트 상의 자신 들의 정보에 대해 웹사이트나 어플리케이션의 접근 권한을 부여할 수 있는 공 통적인 수단으로서 사용되는, 접근 위임을 위한개방형 표준• 즉, 서드파티 어플리케이션이 사용자의 계정에 접근할 수 있는 권한을 부여하 기 위한 프로토콜 OAuth의 버전버전 명특징OAuth 1.0• 서드파티 어플리케이션이 사용자의 데이터에 접근할 권한을 얻기 위해 서명된 요청을 사용• 요청의 서명 부분은 어플리케이션의 비밀 키와 사용자의 토큰을 조합하여 생성되며, 이를 통해 보안 유지OAuth 2.0• OAuth 2.0은 보다 간편하고 확장성이 있는 버전으로, 기본적으로 인증과 권한을 분 리하여 다루는 것을 특..

카테고리 없음 2025.03.28

서버구축

서버와 클라이언트• 클라이언트(애플리케이션, 브라우저 등)의 요청을 컴퓨터가 수행할 수 있도록 하는 작업• 서버는 클라이언트의 요청을 늘 수행할 수 있어야 하므로 365일 24시간 다운되지 않고 전원 이 켜져 있어야 함• 주로 리눅스(Linux)나서버용 윈도우 운영체제(OS)를 사용• CLI (Command Line Interface) 환경에서 운영하는 것이 대부분• 클라이언트의 요청에 대해 안전하게 응답만 하면 되기 때문에 GUI 환경이 필요 없을 뿐더러 컴퓨터는 GUI를 운영하는데에도 리소스가 소모됨. 프로토콜이란?• 사람과 사람이 대화할 때 서로 이해할 수 있는 공용 언어를 사용 (ex. 영어)• 컴퓨터와 컴퓨터도 서로 이해할 수 있는 언어를 사용해야함! 콜!!• 사전적 정의는 정보를 주고받는 양식..

환경변수?

환경변수?• 환경변수는 운영 체제(OS)나 애플리케이션에서 사용되는 데이터 값을 저장하는 메커니즘• 프로그램의 동작을 조정하거나 구성• Node.js에서도 이러한 환경변수를 활용하여 애플리케이션의 설정과 동작을 조정Node.js에서는 process.env 객체를 통해 환경변수에 접근 Nodejs 환경변수 .env 파일• 환경변수를 관리하기 위해 .env파일을 사용하는 것이 일반적• 깃 저장소에 업로드 하지 말아야함!• File Zilla(FTP 소프트웨어)를 통해 서버에 파일만 업로드• env 파일에 들어가는 정보 예시 : DB Port 주소, ID, PW 등등 Node JS에서 환경변수를 사용하는 방법1. npm 명령어를 이용해 환경변수를 사용하기 위한 설정을 프로젝트에 추가한다.npm install ..

Cookie, Session

Cookie• 웹 브라우저(클라이언트) 에 저장되는 키와 값이 들어있는 작은 데이터 파일• 이름, 값, 만료일, 경로 정보로 구성되어 있다. Cookie의 동작 방식1. 클라이언트가 페이지를 요청함2. 서버에서 쿠키를 생성함3. HTTP 헤더에 쿠키를 포함시켜 응답을 전달함4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에 보관해둠5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 저장하여 전달함6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트하여 변경된 쿠키를 HTTP 헤더에 포함시켜서 응답을 전달함 express에서의 Cookie 사용하기1. Cookie를 사용하기 위해 관련 npm을 설치한다.npm intall cookie-parser2. requi..

Node js - Sequelize

Sequelize 란?• 자바스크립트 구문을 알아서 SQL로 변환해준다.• DB 작업을 쉽게 할 수 있도록 도와주는 ORM(객체 관계 매핑) 라이브러리 중 하나• Node js에선 Sequelize과 Spring boot에선 JPA, Mybatis가 해당 매핑을 담당하는 라이브러리 Sequelize 실행 시 준비 사항1. 아래의 명령어를 실행하여, Sequelize를 프로젝트에 연결시킨다.npm install sequelize : 시쿼라이즈를 실제 프로젝트에 설치하는 명령어npm install sequelize-cli : 시퀄라이즈 명령어를 실제 실행하는 명령어npm install mysql2 : mysql을 실제 연결하여 실행하는 명령어2. 아래의 명령어를 실행하여 Sequelize를 사용할 초기 상태..

MVC패턴

MVC(Model View Controller)소프트웨어 공학에 사용되는 디자인 패턴의 하나로 프로그램을 Model, View, Controller로 나누어 설계하는 것  Model어플리케이션의 데이터와 비즈니스 로직을 담당함데이터베이스와의 상호작용, 데이터 처리, 유효성 검사 등을 수행함뷰나 컨트롤러에 종속되지 않으며, 독립적으로 작동함 View사용자 인터페이스(UI)를 담당하는 부분모델로부터 데이터를 받아 사용자에게 보여주는 역할을 담당함사용자 입력을 처리하지 않으며, 단순히 데이터를 보여주는 역할 만을 담당함 Controller모델과 뷰 사이의 상호작용을 관리하며, 어플리케이션의 흐름을 제어하는 곳사용자의 입력을 받아 모델을 업데이트하고,  모델의 변경사항을 뷰에 반영하는 장소  MVC 패턴의 장단..