그린그린티라떼

로드 밸런서 로드 밸런서의 역할? 트래픽 분산: 로드 밸런서는 들어오는 네트워크 트래픽을 여러 대상 서버들 사이에 균형있게 분배합니다. 이를 통해 서버들의 부하를 고르게 분산시키고, 모든 서버의 성능을 최대한 활용할 수 있습니다. 부하 분석 및 성능 모니터링: 로드 밸런서는 각 서버의 상태와 성능을 지속적으로 모니터링하여 트래픽을 어떻게 분배해야 최적의 성능을 얻을 수 있는지 결정합니다. 이를 통해 가장 적절한 서버에 요청을 보내고 장애 서버를 우회하는 등 안정적인 서비스를 제공합니다. 고가용성과 장애 극복: 로드 밸런서를 통해 여러 대상 서버를 사용하면, 만약 하나의 서버에 장애가 발생하더라도 다른 정상적인 서버들이 트래픽을 처리할 수 있어 서비스의 중단을 최소화합니다. 이러한 기능으로 시스템의 가용성..

레이턴시(Latency)란? 레이턴시(Latency)란 시스템이나 네트워크에서 요청을 보내고 결과를 받는 데 걸리는 시간을 말합니다. 즉, 어떤 동작을 수행하기 위해 시작한 시점부터 해당 동작이 완료되어 결과를 얻을 때까지의 지연 시간을 의미합니다. 레이턴시는 일반적으로 시간의 차이로 표현되며, 초(ms), 밀리초(millisecond), 마이크로초(microsecond), 나노초(nanosecond) 등의 단위로 측정할 수 있습니다. 레이턴시는 컴퓨터 시스템의 성능과 반응성을 나타내는 중요한 지표 중 하나입니다. 레이턴시가 낮으면 요청에 대한 응답이 빠르고, 시스템이 빠른 속도로 동작하는 것으로 인식됩니다. 그러나 레이턴시가 높으면 응답이 느리고, 사용자들은 지연 현상을 더욱 강하게 느낄 수 있습니다...

Node.js에서 스트림(Stream)은 데이터를 읽고 쓰는 데 사용되는 추상적인 인터페이스입니다. 스트림은 크기가 큰 데이터를 조각 내어 작은 조각으로 처리하므로, 메모리 효율성과 성능을 높여줍니다. 여기서는 스트림을 사용하여 파일을 읽고 쓰는 예제를 보여드리겠습니다. 스트림을 사용하여 파일 복사하기 예제: 아래의 예제에서는 fs 모듈을 사용하여 파일을 읽고 쓰는 스트림을 생성하고, 파일을 복사하는 기능을 구현합니다. const fs = require('fs'); // 읽을 파일과 쓸 파일의 경로 const sourceFilePath = 'source.txt'; const destinationFilePath = 'destination.txt'; // 읽기 스트림 생성 const readStream = ..

코루틴(Coroutine) 코루틴은 경량 스레드와 비슷한 개념으로, 하나의 스레드 내에서 여러 개의 서브루틴(subroutine)이 동시에 실행되는 것을 가능하게 합니다. NodeJS에서는 코루틴을 구현하기 위해 co라이브러리나 async/await 문법을 사용할 수 있습니다. 코루틴은 비동기적인 코드를 동기적인 코드처럼 작성할 수 있도록 도와주어 비동기적인 프로그래밍을 보다 간편하게 만들어줍니다. NodeJS의 이벤트 루프와 코루틴을 통해 비동기 작업을 효율적으로 처리할 수 있으며, 단일 스레드로 더 높은 동시성을 구현하는 데 도움이 됩니다. 코루틴 라이브러리는 JavaScript에서 비동기적인 작업을 더욱 쉽게 다루기 위해 사용됩니다. 여기서는 co 라이브러리를 사용하는 코드 예시를 통해 설명하겠습니..

SPA에서 서버 사이드 렌더링(SSR)이 필요한 이유? 단일 페이지 애플리케이션(SPA)은 현대 웹 개발의 주요 트렌드 중 하나이며, 이는 그들의 빠른 응답 시간과 사용자 경험에 큰 부분을 차지합니다. 그러나 SPA만으로는 모든 것을 해결할 수 없으며, 때로는 서버 사이드 렌더링(SSR)이 필요한 경우가 있습니다. SSR의 장점을 살펴보고, SPA에 이를 적용할 때 고려해야 할 주요 사항들에 대해 논의해 보겠습니다. 1. SEO 최적화 검색 엔진 최적화(SEO)는 모든 웹사이트에게 중요한 요소입니다. 검색 엔진은 보통 서버에서 렌더링된 콘텐츠를 클라이언트 측에서 렌더링된 콘텐츠보다 더 쉽게 크롤링하고 이해할 수 있습니다. Google과 같은 검색 엔진은 자바스크립트를 실행하여 콘텐츠를 인덱싱하지만, 이 ..

클라이언트측 렌더링(CSR) CSR에서 서버는 CSS 및 JavaScript에 대한 링크와 함께 거의 비어 있는 HTML 문서를 보냅니다. 그런 다음 JavaScript는 클라이언트의 브라우저에서 실행되어 HTML을 만들고 페이지를 업데이트합니다. 이로 인해 JavaScript가 처리되는 동안 "로딩" 화면이 나타날 수 있습니다. 다음은 CSR의 기본 흐름입니다. 사용자가 페이지를 요청합니다. 서버는 CSS 및 JavaScript에 대한 링크가 포함된 최소한의 HTML을 보냅니다. 클라이언트는 최소한의 HTML을 수신하고 표시합니다. 클라이언트가 JavaScript를 다운로드하고 해석합니다. JavaScript는 페이지의 HTML을 생성하고 상호 작용을 추가합니다. 코드에서 React와 같은 라이브러리를..

javascript tutorial websocket https://ko.javascript.info/websocket 간단하게 웹소켓 통신 nodejs, express로 구현 https://github.com/syoungee/websocket 정리를 정말 잘해둔 포스팅 https://hudi.blog/websocket-with-nodejs/

Windows 기기에서 스크롤바 숨기기 Windows에서 작업할 경우, vw를 추가하면 스크롤바가 나타나는 것을 경험했을 것입니다. 스크롤바가 포함되지 않은 Windows에서 vw를 사용할 때 일어나는 현상입니다. - vw: 100 = 뷰포트 너비의 100% + 스크롤바 Mac에서는 문제가 없지만, Windows에서는 스크롤바가 자동으로 표시되는 문제가 발생합니다. 스크롤바를 표시하고 싶지 않은 경우, 다음 방법 중 하나를 활용하시면 됩니다. - 너비(width) 활용: vw: 100 대신 100% 사용하기 - shared.css 파일에서 body 선택자에 overflow-x: hidden을 추가해 가로 스크롤바 숨기기 (세로 스크롤바를 숨기려면 overflow-y: hidden 추가) ::-webkit..

문자열 다루기 이제 익숙해질 때가 됐는데 매번 검색하는 나 발견 substr, substring, slice 이 세 가지 함수들만 기억하자 ✔️ 문자열을 뒤에서부터 자르려면 slice()함수 사용 const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // Expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // Expected output: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // Expected output: Array ..

✔️ Vite에 대해 간단히 정리 npm package를 활용한 웹 개발 시 의존성 있는 패키지 소스코드를 esbuild를 사용해서 빠르게 pre-bundling해 준다 es6 modules, HMR을 이용해 실시간 미리보기(npm run build) 기능 제공 JSX, CSS module 번들링도 잘 되는 build tool 웹팩처럼 plugin 사용 가능, cli를 이용한 프로토타이핑 쉬움 ✔️ 문제? npm을 이용한 라이브러리 다운로드(node_modules 용량 매우 큼) 친화적이지 않은 import / require 문법 ✔️ 이에 대한 해결책? Static ASSETS bundling을 통해 모든 JS파일을 하나로 합쳐서 사용하기 ✔️ 결론적으로 VITE 사용 이유? 1. 빠른 빌드 빠른 es..