본문 바로가기

Programing Language/JavaScript19

js 1. chatList.html에 가 있고// chatList.jslet loginId;let eventSource = new EventSource("/sse/chatList");sse는 스프링부트와 통신하고있는데 브라우저가 chatList.html를 렌더링하다가, chatRoom.html를 렌더링하면변수 loginId랑 스프링부트와의 sse통신은 어떻게 될까? >>>chatList.js는 chatList.html에서만 로드되는 상황. 페이지가 이동하면(chatRoom.html로 전환되면), chatList.html과 함께 실행 중이던 chatList.js가 종료됨. chatList.js의 모든 변수(loginId 포함)는 삭제됨 eventSource 객체도 더 이상 유지되지 않으며 자동으로 SSE 연결이.. 2025. 2. 12.
코딩하면서 js정리 01 JavaScript에는 "List" 인터페이스가 존재하지 않고, 배열(Array)이 리스트 역할을 수행   📌 Java의 List   vs   JavaScript의 Array 차이점 Java - List (예: ArrayList)JavaScript - Array자료 구조동적 배열 또는 연결 리스트 기반동적 배열크기 고정 여부자동 확장됨자동 확장됨타입제네릭 지원 (List)모든 타입 혼합 가능메서드add(), remove(), subList(), get() 등push(), splice(), slice(), map() 등동작 방식Java의 컬렉션 프레임워크 내에서 동작JS의 빌트인 Array 객체   var 에 숫자도 들어감 Math.ceil() 로 숫자 올림  JS에선 true, false가 그냥 let.. 2025. 2. 5.
JavaScript engine 자바스크립트 엔진( JavaScript engine )자바스크립트 코드를 실행하는 프로그램 또는 인터프리터(해석기). 대체적으로 웹 브라우저에서 사용된다. JS엔진은 다양한 종류가 있으며 각각 엔진은 특정 브라우저 또는 환경에 특화되어 있다. 대표적인 JS 엔진은 아래와 같다.V8( Chrome, Node.js )Hermes( React Native )Google에서 개발한 오픈소스 엔진이다.C++로 개발되었으며 빠른 실행 속도와 높은 성능을 갖추고 있다.주로 Chrome 브라우저와 Node.js 런타임 환경에서 사용된다.Facebook에서 개발한 엔진이다.모바일 환경에서의 빠른 시작 시간과 적은 메모리 사용량에 최적화하는 장점이 있다.React Native 애플리케이션에서 사용된다. 자바스크립트는 Ca.. 2025. 1. 28.
Js변수 선언 방식 var, let, const JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당(및 const제외 재할당) 가능 js 주요 변수 타입( != 변수 선언 방식 )기본(primitive) 타입number, string, boolean, undefined, null, bigint, symbol객체(object) 타입Object, Array, Function  변수를 var, let으로 만들면 재할당이 가능하고 const로 만들면 값 재할당이 불가능let 이름 = 'Kim';이름 = 'Park'; //가능const 나이 = 30;나이 = 40; //에러const는 constant의 약자로 바뀌지 않는 일정한 값을 뜻함바뀌면 큰일날 값을 저장하고 싶을 때 사용하면 좋습니다.     https://dev.. 2025. 1. 27.
new StompJs.Client( ) new StompJs.Client()const stompClient = new StompJs.Client({ brokerURL: 'ws://localhost:8080/gs-guide-websocket'});STOMP( Simple Text Oriented Messaging Protocol )를 사용하여 WebSocket을 통해 메시지를 주고받을 수 있도록 해주는 JavaScript클라이언트 brokerURL : WebSocket서버의 주소 설정 이벤트 핸들러onConnect연결 성공 시 실행할 함수onDisconnect연결 종료 시 실행할 함수onWebSocketError WebSocket 오류 처리onStompError STOMP 프로토콜 오류 처리 메서드activate(): WebSocket 연.. 2025. 1. 26.
브라우저 렌더링 과정과 window.onload = () => { } , $(document).ready( ) 브라우저 렌더링 과정  1. HTML 파싱 및 DOM 생성 ( DOMContentLoaded 이벤트 발생 )브라우저가 HTML 문서를 위에서 아래로 읽으며 **DOM( Document Object Model )**을 생성합니다. 이 시점에서는 CSS 및 이미지 같은 외부 리소스가 완전히 로드되지 않았을 수 있습니다.    2. CSSOM 생성 및 렌더링 준비CSS 파일을 파싱하여 CSSOM( CSS Object Model )을 생성합니다. DOM과 CSSOM이 결합되어 **렌더 트리( Render Tree )**를 구성합니다.    3. 렌더링 및 페이지 표시브라우저가 렌더 트리를 기반으로 레이아웃을 계산하고 페이지를 화면에 그립니다. 일부 인터랙션이 가능해질 수 있습니다.     4. 모든 리소스 로드.. 2025. 1. 21.