본문 바로가기 메뉴 바로가기

망고

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

망고

검색하기 폼
  • 분류 전체보기 (93)
    • 회고 (9)
    • CS (13)
      • OS (2)
      • Network (8)
    • 알고리즘 (10)
      • 개념정리 (5)
      • 프로그래머스 (5)
    • 스터디 (13)
      • 면접 스터디 (2)
      • 자바스크립트딥다이브 (11)
    • WEB (37)
      • HTML&CSS (3)
      • Vue.js (12)
      • Javascript (12)
      • Nuxt.js (3)
      • React.js (7)
    • APP (2)
      • React Native (2)
    • 기타 (8)
    • 취미 (1)
  • 방명록

CS/Network (8)
로드 밸런싱(Load Balancing)

📌 개요 웹사이트에 트래픽이 갑자기 많이 발생하게 된다면 어떻게 해결해야 할까? 서비스의 규모가 커지고, 이용자 수가 늘어나게 되면 기존의 서버만으로는 원활한 서비스 동작이 불가능하게 되고, 이에 대처할 수 있는 방법은 크게 두가지 이다. 1. 기존의 서버 성능을 확장하는 scale-up 방식 2. 기존의 서버와 동일하거나 낮은 성능의 서버를 증설하는 scale-out 방식 하드웨어 향상 비용이 더욱 비싸기도 하고, 서버가 여러대면 무중단 서비스를 제공하는 환경 구성이 용이하므로 Scale-out이 효과적이다. scale-out 방식을 통해 증가한 트래픽에 대처하기로 했다면, 여러 대의 서버로 트래픽을 균등하게 분산해주는 로드밸런싱이 반드시 필요하다. 📌개념 둘 이상의 CPU or 저장장치와 같은 컴퓨터..

CS/Network 2023. 4. 19. 10:11
CORS 에러 - 정의부터 해결방법까지!

📌 개요프론트엔드와 백엔드가 협업하면서 cors를 해결하는 현명한 방법📌cors의 정의cors란 (Cross-Origin Resource Sharing)의 약자로 직역하면 교차출처 리소스 공유이다. 좀 더 쉽게 말하면 동일한 출처가 아닌 다른 출처에서 데이터를 주고받는 것을 허용하는 정책이다.추가 http헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션을 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 그렇다면 이러한 정책이 왜 필요한것인가? 라는 것에 이유를 알기위해선 sop 즉 "동일 출처 정책"에 대해서 알아야한다.📌SOP(Same Origin Policy) - 동일 출처 정책동일 출처 정책은 웹 브라우저에서 보안을 강화하기 위해 동일한 출처에서..

CS/Network 2023. 4. 10. 09:15
웹훅 사용하고 테스트해보기

📌개요 전자서명을 하는 과정에서 웹훅 통신이 필요해서 테스트가 필요했다. 웹훅이라는 것이 외부 서비스에서 우리 서비스로 HTTP요청을 보낼수 있는 것인데 어떻게 테스트를 하는지 알아보자. 📌requestbin 으로 웹훅 테스트해보기 1. requestbin 사이트 접속 https://pipedream.com/ Connect APIs, Remarkably Fast - Pipedream Pipedream is a low code integration platform for developers that allows you to connect APIs remarkably fast. Stop writing boilerplate code, struggling with authentication and managin..

CS/Network 2023. 3. 20. 15:40
서버의 상태를 알려주는 HTTP 상태 코드

(1) 작업의 수행 상태를 알려주는 HTTP 상태 코드 클라이언트가 서버에게 작업을 요청하면 서버는 요청받은 작업을수행한 후 작업의 수행 결과를 응답으로 보내주는데, 이때 HTTP상태 코드를 사용하여 작업의 성공/실패 여부와 작업이 실패했다면 어떤이유로 실패했는지도 알려주게된다, HTTP 응답 바디에 작업의 실패 여부를 담아서 응답해주는 경우도 있지만, 더 좋은 방법은 바로 올바른 HTTP상태코드를 사용하는 것이다. HTTP 상태 코드는 200 = 성공,400 = 클라이언트가 요청 잘못함,500 = 서버가 잘못함 과 같이 각 상황에 맞는 코드가 표준으로 정해져 있으며,웹 상에서 돌아가는 기본적인 프로그램의 동작이나 프론트엔드, 백엔드 프레임워크들의 설계 또한 이 표준을 기준으로 만들어져 있기 때문에 되도..

CS/Network 2022. 8. 29. 19:20
(1) - 웹서버 개념

Web이란? 즉 Web = 인터넷이 아니라, 인터넷의 범위에 web은 한 종류인 것이다. 웹서버란? 웹서버란 두가지 의미를 모두 지닌다.그러나 우리가 사용할 웹 서버의 개념은 소프트웨어 측면이 더 강하다. 1)하드웨어 측면 Web server는 website의 컴포넌트 파일들을 저장하는 컴퓨터이다. (컴포넌트 파일에는 HTML 문서, images, CSS stylesheet, 그리고 js files가 있을 것이다.)그리고 이 파일들을 최종 소비자의 디바이스에 전달한다. 2)소프트웨어 측면 web server는 기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리한다. 이 문서에는 web server 는 HTTP서버로 국한한다. HTTP서버는 URL(web addresses)과 HTTP(본인 브..

CS/Network 2022. 8. 22. 16:32
(4) - HTTP 'axios' POST방식 request body, request header에 데이터 담아 요청 보내기

해당 작업을 수행하기 전 http 구조에 대해 이해하기 도움 request body와 request header에 대해 알았다면 각각에 다른 데이터를 넘겨주는 연습을 해보자. 예를 들어 request header에는 client-type 을 , request body에는 loginId를 url에 담아보도록 한다. const sendData = async() => { try const res = await axios.post(1,2,3); catch(error) error } 1의 인자, 2의 인자,3의 인자에 어떤 것을 넣어주느냐에 따라 각각 원하는 데이터를 전달할 수 있다. 1번 인자에는 주소를, 2번인자에는 body 정보를, 3번째 인자에는 header에 넣어줄 정보를 각각 넣어주면 된다. const..

CS/Network 2022. 8. 22. 16:17
이전 1 2 다음
이전 다음
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
  • 👻 github
  • ✏️ 공부 기록
TAG
  • 항해플러스후기
  • react
  • 결제기능
  • 이벤트리스너
  • vue.js3
  • vue3
  • 더미데이터
  • http
  • 알고리즘
  • 프로덕트설계
  • vite
  • props
  • 로그인 인증
  • 구름톤
  • 시스템설계
  • store.js
  • 개발자
  • 그림으로 이해하는 시스템 설계
  • 항해플러스프론트엔드
  • eventListner
  • 디자인시스템
  • focus와blur
  • JWT토큰
  • event종류
  • 회고
  • 레포지토리패턴
  • Vue.js
  • 항해솔직후기
  • Repository pattern
  • React18v
more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바