전체 글

WebSocketWebSocket과 Rest API● REST API (Representational State Transfer API) ○ HTTP 프로토콜을 기반으로 동작하는 요청-응답 방식의 통신으로 클라이언트가 서버에 HTTP 요청을 보내고, 서버는 그에 따른 HTTP 응답을 반환 ○ 일반적으로 단방향 요청-응답 형태로, 클라이언트가 요청을 보내면 서버가 응답을 주고 연결이 끊어지고, 연결은 요청마다 새롭게 이루어짐● WebSocket ○ WebSocket 프로토콜을 사용하며, 클라이언트와 서버 간 양방향 실시간 통신을 제공, HTTP와 달리 연결을 유지하고 있어 서버나 클라이언트에서 언제든 데이터를 전송 가능 ○ 연결 설정 시에는 HTTP프로토콜을 설정하고, WebSocket프로토콜로 업..

GraphQLGraphQL● GraphQL은 API용 쿼리 언어로. API의 데이터에 대한 이해하기 쉬운 설명을 제공하고, 클라이언트가 필요한 것을 정확하게 요청할 수 있는 능력을 제공, 페이스북이 개발● 실행흐름: 데이터 묘사 -> 클라이언트에서 필요한 데이터를 요청 -> 서버에서 예측한 데이터를 받아옴● GraphQL의 장점 ○ 주로 개발 과정은 백엔드 개발자가 REST API 개발 마치고 그 후에 프런트 엔드 개발자가 그 API에 호출해서 받아온 데이터를 이용해 화면에 데이터를 보여줌 ○ GraphQL을 사용하면 프론트엔드 개발자는 백엔드 개발자가 REST API 개발을 마칠 때까지 기다리지 않아도 돼서 전체 개발 프로세스를 병렬 작업가능 ○ Overfetching, Underfetching ..

DB데이터베이스● DB란 여러 사람이 공유해서 사용할 목적으로 체계화된 데이터의 집합, 여러 응용 시스템들에서 필요한 정보를 효과적으로 저장하고 관리할 수 있도록 구성● 다양한 정보를 통합해 공용 데이터의 묶음을 형성하며, 이를 통해 정보를 효율적으로 검색하고 활용 가능● 중요한 정보를 안정적으로 보관하고 필요할 때 빠르게 접근할 수 있는 도구● 장점: 데이터 중복 최소화, 공유, 표준화 가능, 논리적, 물리적 독립성, 용이한 데이터 접근, 데이터 저장 공간 절약● 단점: 데이터베이스 전문가 필요, 많은 비용, 데이터 벡업과 복구가 어려움, 시스템의 복잡성, 대용량 디스크로 엑세스가 집중되면 과부하 발생● 필요한 이유: 앱을 만들었을때 데이터를 CRUD작업을 하고, 서버를 다시 시작하면 데이터가 사라지므..

인증인증이 필요한 이유● 어떤 사이트에서 서비스를 이용하려면 로그인과 같은 인증을 필요로 함● 상태 비저장 프로토콜은 서버가 여러 요청 기간 동안 각 사용자에 대한 정보나 상태를 유지할 필요가 없음, 각 요청에 대한 연결을 재설정하는데 소요되는 시간, 대역폭을 최소화● HTTP Stateless특징 때문에 첫 번째 요청에서 사용자 a라고 말해도 다시 서버에 요청하면 서버는 누군지 모름● 서버가 첫 요청을 받은 후에도 사용자를 기억하길 바라면 인증을 사용 인증 및 인가 절차 기본 흐름● 1: 클라이언트는 유저 정보 요청을 서버에게 전송● 2: 서버는 유저정보를 포함하는 토큰을 생성● 3: 응답으로 클라이언트에 HTTP Response Header에 토큰을 올려서 전송● 4: 클라이언트는 토큰을 로컬스토리지..

파일전송Express에서 파일 전송● 정적인 파일을 보관할 폴더 생성 public/images● 예제 파일 아무거나 인터넷에서 다운로드 후 images폴더에 저장● res.sendFile() 메서드를 통해 posts.controllers.js파일 수정● posts.controllers.jsconst path = require('path');function getPost(req, res){ res.sendFile(path.join(__dirname, '..', 'public', 'images', 'cats.jpeg'))}module.exports = { getPost }● postman Static()NodeJS에서 프론트엔드 구현하기● public/index.html It is a cat! ..

MVCMVC Patern● MVC는 관련 프로그램 로직을 상호 연결된 3개의 요소로 나누는 사용자 인터페이스를 개발하는데 일반적으로 사용되는 소프트웨어 아키텍처 패턴● 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴, 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점● Model: 데이터와 비즈니스 로직을 관리, 앱이 포함해야 할 데이터가 무엇인지 정의, 데이터의 상태가 변경되면 모델을 일반적으로 뷰에게 알리고 컨트롤러에게 알리기도 함● View: 레이아웃과 화면을 처리, 앱의 데이터를 보여주는 방식을 정의, 항목이 사용자에게 보이는 방식을 정의하며, 표시할 데이터를 모델로부터 전달받음● Controller: 명령을 모델과 뷰 부분으로 라우팅, 앱의 사용자로부..

Express ExpressJS 란?● Express는 웹 및 모바일 애플리케이션 구축을 위한 광범위한 기능을 제공하는 노드 js 웹 애플리케이션 프레임워크● Node.js의 API를 단순화하고 유용한 기능들을 추가시켜 Node.js를 더 편리하고 유용하게 사용할 수 있게 해주는 프레임워크● 단일 페이지, 다중 페이지 및 하이브리드 웹 애플리케이션을 빌드하는 데 사용, 서버와 경로를 관리하는 데 도움이 되는 Node js 상단에 구축된 레이어● Express js 를 사용하는 이유: Node.js의 API를 쉽게 사용가능, 굉장히 많은 사람들이 사용, express 기반 프레임워크가 많이 만들어지고 있어서 지식확장성이 좋음 ExpressJS 기본 구조 코드● package.json: npm init, 프..

CSS CSS CSS CSS class -> 태그 --> CSS CSS CSS 배경 CSS 배경 CSS 배경 CSS 배경 CSS 배경 CSS 배경 CSS 테두리 CSS 테두리 CSS 테두리 CSS 테두리 네이버 CSS 리스트 CSS 리스트 CSS 리스트 CSS 리스트 CSS 리스트 CSS 리스트 CSS 리스트 영화 설명 bbb 박스1 박스2 박스3 박스1 박스2 ..

Redis OSS 설정● Redis OSS 설정  ○ ElastiCache -> > Redis OSS 캐시 ->Redis OSS 캐시 생성  ○ 과금 위험: cache.t2.micro 또는 cache.t3.micro을 선택, 복제본 개수는 0개  ○ VPC는 EC2가 위치한지만 확인● 보안그룹: 인바운드, 아웃바운드 트래픽에 대해 6379 포트 열기 EC2 REDIS 접속● redis-cli 설치sudo yum install gccwget http://download.redis.io/redis-stable.tar.gztar xvzf redis-stable.tar.gzcd redis-stable# ubuntu에서만 입력make distclean make● redis 접속src/redis-cli -..

백엔드 요청 흐름 구성● 처음 구상  ○ 정적 호스팅된 홈페이지 https://(cloudFront 주소) -> http://(Ec2퍼블릭ip주소)/api/v1/login로 백엔드 호출  ○ EC2의 80포트로 HTTP요청이 전송되고 ec2의 nginx가 80포트로 온 http 요청을 받아 ec2내의 localhost:8080포트인 스프링 서버로 전달  ○ 웹페이지에서 요청이 https://(cloudFront 주소)/api/api/v1/auth/login 면 중간의 /api를 찾아 /api 한개를 삭제하고 서버에 전송● nginx 설정sudo apt install nginxvi /etc/nginx/conf.d/default.conf>>server { listen 80; listen..