분류 전체보기 318

Rate Limiting Mechanism

Spring Boot REST API to prevent users from making too many requests within a short period of time 서버가 제공할 수 있는 자원에는 제한이 있기 때문에 안정적으로 서비스를 제공하기 위해 예를 들어api 호출횟수를 1분당 60회로 제한하고, 60회를 넘어서는 순간 요청을 처리하지 않고 리턴한다. 이를 Throttling이라고도 한다. Rate Limit가 필요한 사례 1. 서비스의 안정성 및 성능보장 : 서버가 다운되는 등의 사고를 미연에 방지하기 위해 2. 서비스의 가용성 확보 : 과도한 트래픽으로부터 서비스를 보호 3. 보안 : 로그인, 프로모션 코드와 같이 보안적으로 중요한 기능을 brute force attck으로부터 보호한..

nohup 과 &, 리눅스 백그라운드 실행

1. nohup, &이란 리눅스를 사용할 때 백그라운드에서 세션과의 연결이 끊어져도 프로세스를 돌려야 하는 경우 사용하는 명령어가 nohup과 & 명령어이다. putty나 cmd를 통한 ssh로 서버와 연결했을 때 세션을 끊어도 해당 프로세스를 백그라운드에서 돌릴 수 있다는 말이다. * nohup = no hang up = 끊지 말라는 것 nohup yarn start nohup을 이렇게 실행시키면 nohup: appending output to `nohup.out` 메세지와 함께 nohup을 실행시킨 경로에 nohup.out 파일이 생성된다. 다른 파일에 출력하려면 아래와 같이 // 다른 파일에 출력을 할 경우 nohup yarn start > nohup_script.out // 출력 내용이 필요하지 ..

React.js와 Vue.js가 등장하게 된 배경, 기존 JSP같은 server-side-redering과의 차이점

제대로 알고 쓰자 1. 등장배경 Front-end frameworks like Vue.js and React.js have arisen primarily to address the challenges and complexities of building modern web applications. These frameworks provide a structured and efficient way to manage the user interface (UI) of web applications. Here are some reasons why these frameworks have become popular: User Experience Demands: Modern web applications require ..

WebSocket 통신 개념, 프론트, 백엔드 연결

1. WebSocket 의미 Polling, Long Polling, WebRTC 개념 같이알기 https://velog.io/@codingbotpark/Web-Socket-%EC%9D%B4%EB%9E%80 Web Socket 이란? 유튜브 [10분 테코톡] 🧲코일의 Web Socket을 정리한 웹소켓 과 웹소켓의 특징, 동작방법, 특이점 을 포함한 내용입니다 velog.io 2. 스프링 부트 설정 STOMP = Simple Text Oriented Messaging Protocol 방식이랑 세션을 서버에서 따로 관리하는 MAP 자료구조 방식 비교해서 알아두기, 차례 : 외부 메시지 브로커 필요한 이유 ~ https://brunch.co.kr/@springboot/695 Spring Websocket &..

CS/Network 2023.08.01

비동기 처리 및 콜백함수 -> Promise -> async와 await

1. 비동기 처리 및 콜백 함수 'Promise는 자바스크립트 비동기 처리에 사용되는 객체'라는 말을 이해해야 한다. 1) 비동기 처리란? 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 그 예시로는 제이쿼리의 ajax, setTimeout()이다. 2) 콜백 함수로 비동기 처리 방식의 문제점을 해결할 수 있다. 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있다. 3) 콜백 지옥(인코딩, 사용자 인증 등을 처리하기 위해 비동기로 처리하다가 콜백 안에 콜백을 계속 물게 되는 형식) : Promise와 Async를 이용해서 해결 가능. 2. Promise 'Promise는 자바스크립트 비동기 처리에 사용되는 객체..

.SVG 사용 이유, 렌더링 속도 개선

1. SVG란 : SVG란 Scalable Vector Graphics의 약자로 벡터 이미지를 뜻한다. jpg/jpeg, png파일을 크게 화대해 나타내면 이미지 테투리 부분이 울퉁불퉁해진다. 이런 이미지를 비트맵 이미지라고 한다. 반면, 이미지를 아무리 확대하거나 축소해도 원래 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지라하는데 그런 이미지가 SVG이미지이다. 아이콘이나 로고 이미지에 SVG 이미지 파일 형식을 많이 사용한다. 복잡한 데이터를 웹에 표현해주는 d3.js나 Raphael.js 같은 자바스크립트 라이브러리에서 차트나 그래프를 표현하는 방식이 바로 SVG 이미지이다.

가운데 정렬

1. text-align = "center" block 요소 안 inline 요소만 가운데 정렬 된다. https://blog.pages.kr/2556 [html/css] text-align 속성으로 정렬하기 (left, right, center, justify) html에서는 문서를 수평으로 정렬할 때 align 속성을 썼는데요 align은 html5에서 지원하지 않는 속성으로 되도록 css로 정렬하는 것을 권장한다고 합니다... css에서는 문서를 수평으로 정렬할 때 text-a blog.pages.kr 2. display = "flex", justifycontent="center" 3. maring = "0 auto" https://kikit-study.tistory.com/entry/%EC%B4%..

css 선택자

1. 가상클래스와 가상요소 웹 요소를 클릭하거나 마우스 커스를 올러놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶을 때 활용한다. 1) : link, 가상 클래스 선택자 : 방문하지 않은 링크 스타일에 적용 2) : visited : 방문한 링크 스타일에 적용 3) : hover : 마우스 커서를 올려놓았을 때 스타일 적용 4) : active : 웹 요소를 활성화 했을 때 스타일 적용 5) : focus : 웹 요소에 초점이 맞추어졌을 때 스타일 적용 6) : enabled, :disabled : 요소를 사용할 수 있을 때와 없을 때 7) :checked : 라디오 박스나 체크 박스에서 해당항목을 선택했을 때의 스타일 지정 8) :root : 문서 전체에 적용하기 ... ex13) ::befo..