비동기 프로그래밍?Javascript는 싱글 스레드로 동작하기 때문에 한 번에 하나의 작업만 실행할 수 있다. 하지만, Call Stack, Web API, Event Loop, Callback Queue와 함께 동작하여 비동기 프로그래밍이 가능하다.  Call Stack자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조로 실행 중인 함수들이 쌓인다. Web API브라우저에서 제공하는 API로 Call Stack에 있는 비동기 작업들을 위임받아 멀티 스레드로 처리한다. Callback QueueWeb API의 비동기 작업이 완료되고 실행을 대기하는 함수가 쌓인다.  Event Loop Call Stack이 비어있는 경우 Callback Queue에서 대기중인 함수를 Call Stack으로 옮겨 실..

쿠키(Cookie)브라우저에 저장되는 작은 크기의 문자열이다. 쿠키를 활용하여 HTTP 통신의 무상태 프로토콜(Stateless) 특성을 보완할 수 있다. 하지만, 쿠키에 모든 상태정보를 저장하는 것은 보안에 취약하고 용량의 한계가 있어 대부분 상태정보는 서버 측 세션에 저장하고, 해당 세션 ID를 쿠키에 저장하여 사용한다. 특징도메인 단위로 데이터를 공유도메인마다 저장할 수 있는 쿠키의 개수는 20개(브라우저에 따라 다름)쿠키의 데이터 크기는 약 4KB로 제한만료시간 설정 가능HTTP 요청 시 자동으로 요청 헤더에 Cookie에 값을 포함하여 전달 읽기document.cookie에 name=value 형태로 저장되고, 각 값은 ;(세미콜론)으로 구분된다. 쓰기클라이언트에서 document.cookie에..

함수 바인딩Javascript는 함수가 어떻게 호출 되었는지에 따라 this 객체가 동적으로 할당된다. 크게 함수 호출 방식은 함수, 메소드, 생성자 함수, call/apply/bind 호출이 있다. Javascript는 렉시컬 스코프를 따라 함수의 상위 스코프를 결정한다. 글로벌 영역에 함수 호출을 예로 들면 this는 상위 스코프인 전역 객체(Global Object)를 의미한다. Browser-side에서는 window, Service-side에서는 global 객체가 전역 객체가 된다. var name = 'john';function greet() { console.log(`hello, ${this.name}`); // this: window}greet(); // 'hello, john'var ..

Laravel Reverb는 Laravel 팀에서 제공하는 first-party 오픈소스 웹소켓 서버다. Laravel의 BroadCasting, Pulse, Laravel Echo 등 다양한 기능들과 통합을 지원한다. 속도를 위해 미세 조정되었고, 단일 서버에서 수천 개의 연결이 가능하다고 한다.  Laravel Reverb - Real-time WebSocketLaravel Reverb brings real-time WebSocket communication to Laravel applications.reverb.laravel.com 개요운영중인 서비스에 중복로그인 및 실시간 알림이 필요하여 웹소켓 서버가 필요했다. 운영중인 서비스의 API 서버는 Laravel 애플리케이션이었다. Nest.js를 사..

배경맡고 있는 프로젝트가 Electron, React로 개발된 데스크탑 애플리케이션으로 초기에 모놀리식 아키텍처로 개발 되었다. 혼자 진행하던 프로젝트라서 모놀리식 구조를 유지하였다.모놀리식 아키텍처는 단일 코드 베이스의 애플리케이션 구조를 의미한다. 프로그램의 전통적인 구조로 모든 기능이 하나로 결합되어 있으며 타 애플리케이션과 독립적인 것이 특징이다. 프로젝트가 통합되어 있어 단순하며 보편성이 장점이다. 하지만 규모가 커졌을 경우 복잡도로 인해 유지 보수 및 유연한 확장이 어려울 수 있다. 하지만 UI 변경이 있을 때마다 앱을 새로 빌드하고 배포하는 과정이 비효율적이었다. 반복되는 작업이 점점 번거로워지면서, Electron과 React 코드를 분리해 멀티레포 방식으로 전환했다. React 앱은 S3..

span, div와 같은 비대화형 컨텐츠에 focus 기능을 추가한다. tabindextabindex 특성을 갖는 요소는 포커스가 가능하며 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정한다. 정수 값을 지정할 수 있다.양수(1)tab을 이용한 키보드 탐색 시 값의 순서로 탐색된다0모든 양수 값 요소 탐색 이후에 document 소스 순서에 따라 탐색된다.음수(-1)tab을 이용한 키보드 탐색에서 제외된다. tabindex: 0을 사용하는 것이 일반적인 방법인 것 같다.주의tabindex 값은 0 또는 음수(-1)를 권장하고 있다. 요소의 순서를 변경할 수 있는 CSS 속성 보다 큰 값을 사용할 경우 키보드 사용자가 컨트롤하기 어려워 진다고 한다. 참고https://develop..

JavaScript에서 연속적으로 이벤트가 발생할 경우 핸들러 내부의 코드가 여러 번 실행된다. 예를 들어 핸들러가 서버에 HTTP 요청을 한다고 가정했을 때 연속적으로 이벤트가 발생하면 서버에 부담을 줄 것이다. Debouncing과 Throttling은 이런 상황을 방지하여 성능을 최적화하는 프로그래밍 기법이다. 대표적으로 스크롤, 버튼 클릭, 텍스트 입력 등과 같이 연속으로 발생하는 이벤트에 사용된다. 1. Debouncing특정 이벤트가 연속해서 발생할 때, 마지막 이벤트가 발생하고 일정 시간이 지난 후에 함수를 실행하는 방법이다. 에 입력하는 동안 불필요한 HTTP 요청을 줄이기 위해 많이 사용한다. 예를 들어 검색창을 구현할 때, 텍스트 입력이 완료되고 일정 시간이 지난 후에 요청을 보낸다.예..

문제  나의 제출(오답)import java.io.*;import java.util.*;public class Main { public static BufferedReader br; public static BufferedWriter bw; public static int n; public static int[] s; public static boolean[] visited; public static int max; public static StringBuffer sb = new StringBuffer(); public static void main(String[] args) throws IOException { br = new BufferedRea..

문제나의 제출(오답)import java.io.*;import java.util.*;public class Main { public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out)); int N = Integer.parseInt(br.readLine()); boolean[][] line = new boolean[N + 1][N + 1]; ..

나의 제출import java.io.*;import java.util.*;public class Main { public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out)); String S = br.readLine(); char[] arr = S.toCharArray(); Stack stack = new Stack(); ..