공부방

웹에서 양방향 통신을 가능하게 하는 고급 기술 전통적인 HTTP 통신과 달리, WebSocket은 클라이언트와 서버 간에 지속적인 연결을 유지하며, 양쪽 모두에서 언제든지 데이터를 주고받을 수 있게 해줌 주요 특징 양방향 통신 클라이언트와 서버 간의 양방향 통신을 가능하게 함. 지속적인 연결 한 번 연결이 되면, 클라이언트와 서버 사이의 연결이 지속적으로 유지 추가적인 HTTP 요청 없이 데이터를 빠르게 주고 받을 수 있게 해줌 실시간 통신 실시간으로 데이터를 교환해야 하는 애플리케이션에 이상적 온라인 게임, 채팅, 실시간 거래 플랫폼 등 서버와 클라이언트가 어떻게 연결을 유지하면서 데이터를 주고 받는거지? 연결 수립 클라이언트는 서버에 웹소캣 연결을 요청하는 특별한 형태의 HTTP 요청을 보냄. 'Up..

React란? 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨. SPA나 모바일 애플리케이션 개발에 사용 가능. SPA는? Single Page Application 웹 애플리케이션 또는 웹사이트의 한 형태로, 사용자와의 상호작용이 단일 HTML 페이지에서 발생하는 구조 페이지를 다시 로드하지 않고 동적으로 콘텐츠를 업데이트 SPA 작동 원리 초기 로딩 사용자가 SPA에 처음 접속하면, 웹 서버는 단일 HTML 페이지를 로드. 이 페이지는 필요한 JavaScript, CSS 기타 리소스를 포함 동적 콘텐츠 로딩 사용자가 애플리케이션 내에서 상호작용할 때, JavaScript는 서버로부터 데이터를 비동기적으로 요청하고 (JSON등을 통해), 이 데이터를 사용하여 페이지의 콘텐츠를 ..

TypeScript vs JavaScript? 타입 체크 JavaScript는 런타임에 타입 오류를 감지한다. 즉 코드가 실행될 때까지 타입 관련 문제를 알 수 없다. 하지만 TypeScript는 컴파일 시 타입 체크를 수행한다. 이는 개발 과정 중에 오류를 미리 발견하고 수정할 수 있게 해, 더 견고한 코드를 작성하도록 돕는다. 개발 도구 지원 JavaScript는 다양한 개발 도구와 통합될 수 있지만, 코드의 복잡성이 높아지면 오류를 찾기 어려워질 수 있다. TypeScript는 타입 시스템 덕분에 리팩토링 그리고 오류 감지 기능에 더 좋다. 결론 : TypeScript는 JavaScript의 모든 기능을 포함하면서, 정적 타입 체크와 같은 추가적인 기능을 제공. 프로젝트에나 팀 작업을 할 때 특히 ..

React Dom? DOM(Document Object Model) HTML 문서 안에 div, input, a 같은 태그들이 있는데 이 html 문서를 읽고 사용자에게 보여주는 방식. 브라우저와 HTML 문서를 파싱하여 DOM을 생성하고 이를 사용해 웹 페이지를 렌더링 그렇다면 React Virtual Dom? 가상 돔은 실제 돔의 경량화된 메모리 내 표현. 이는 주로 React와 같은 현대적인 JavaScript 프레임워크나 라이브러리에서 사용되며, 브라우저의 실제 돔을 직접 조작하는 대신 메모리 내에서 UI의 변경 사항을 먼저 처리한다. 이러한 접근 방식은 성능을 최적화할 수 있다. 실제 DOM을 직접 조작하는 것은 비용이 많이 드는 작업이기 때문에 가상 DOM은 변경 사항을 메모리 내에서 빠르게 ..

ES6란? ECMAScript 표준의 가장 최신 버전. 현대적인 코드를 사용함으로써 코드가 간결해지고 생산성을 향상시킬 수 있음. ES6의 기능으로는 변수 선언 방식의 차이 var는 재정의와 재선언이 모두 가능. let은 가변변수로 재정의가 가능하지만 재선언은 불가능. const는 불변변수로 재선언과 재정의 모두가 불가능. //변수 선언 var x = 2; // 재정의 x = 4; // 재선언 var x = 4; 이런 var의 문제점 변수 선언이 유연해서 예기치 못한 값을 반환할 수 있음. 코드가 길어진다면 어디에서 어떻게 사용될지 파악하기 힘듬. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환.(호이스팅)..