[WEB] Polling/Long-Polling/SSE/Web Socket
·
WEB
❗️ 기존 HTTP 요청 방식웹은 HTTP 요청-응답 모델을 기반으로 동작클라이언트의 요청이 있을 시에만 서버가 데이터를 보낼 수 있음(단방향)비연결성 프로토콜(connectionless) -> 서버는 데이터를 보내고 연결을 끊음무상태 프로토콜(stateless) -> 클라이언트의 상태를 저장하지 않음❗️ Polling클라이언트가 정기적으로 서버에 http 요청을 계속 보내서 데이터를 전달 받는 방식서버는 보낼 데이터가 있든없든 바로 응답을 해줌서버의 상태 변화에 즉각적으로 반응하지 못함 => 요청을 보내는 주기가 정해져 있기 때문에 실시간으로 보낼 수 없음계속해서 요청을 보내기 때문에 트래픽을 낭비http 오버헤드가 발생함일정하게 갱신되는 서버 데이터의 경우에 유용하게 사용❗️ Long-Pollin..
[JS] Array와 Array 메소드
·
HTML,CSS,JS
❗️ 자바스크립의 배열(인척 하는 객체)- 일반 배열같은 데이터 타입으로 이루어짐배열의 각 요소가 동일한 크기의 메모리 공간을 차지함 메모리 공간이 빈틈 없이 연속적으로 나열되어 있음이런 배열을 밀집 배열(dense array)라고 한다.  - 자바스크립트의 배열다양한 타입의 요소들이 저장될 수 있음배열의 요소들이 동일한 크기의 메모리 공간을 가지지 않음메모리 공간이 연속적으로 이어져 있지 않을 수도 있음이런 배열을 희소 배열(sparse array)라고 한다. 결론적으로 자바스크립트의 배열은 배열의 동작을 흉내 낸 특수한 객체이다. 이러한 특성 때문에 인덱스로 접근하면 일반 배열에 비해 느리지만특정 요소를 탐색하거나 요소를 삽입/삭제 하는 경우에는 일반 배열보다 빠르다.🤔 어떻게 하나의 배열에 여러 ..
[WEB] Nginx
·
WEB
👀 Web Server와 WAS 차이 - Web Server : 정적인 컨텐츠(HTML, CSS, JS)를 제공하는 서버HTTP 프로토콜을 기반정적 컨텐츠 제공 -> WAS를 거치지 않고 바로 제공동적 컨텐츠 제공을 위한 요청 전달 -> WAS에 클라이언트 요청을 전달하고, WAS에서 처리한 결과를 클라이언트에게 전달ex) Apache, Nginx - WAS(Web Application Server) : 동적인 컨텐츠를 처리하고 제공하는 서버HTTP 프로토콜 기반DB 조회 및 다양한 로직이 필요한 동적인 컨텐츠를 제공프로그램 실행 환경 및 DB 접속 기능 제공ex) Tomcat 🤔 웹 서버의 기능은 WAS에서도 처리 가능한데, 둘을 구분하는 이유는? 사용하는 '목적'이 다르다.정적인 컨텐츠는 웹 서버..
[WEB] SEO 최적화
·
WEB
👀 SEO란?Search Engine Optimization의 약자로 검색 엔진 최적화를 의미한다.웹 사이트를 검색 엔진 상위에 노출되도록 개선하는 것이다. 🤔 왜 SEO를 해야 할까?잠재 고객 증가웹 사이트가 검색 결과의 상위에 노출되면 자연스럽게 방문하는 고객이 증가한다.타겟 고객 접근특정 키워드를 검색 했다는 것은 이미 해당 제품이나 서비스에 관심이 있다는 것이다.👀 SEO vs SEMSEO는 검색 엔진 최적화, SEM(Search Engine Marketing)은 검색 엔진 마케팅을 의미한다. 🤔 SEM이란?검색을 했을 때, 상단에 위치하는 광고 게시물들이 SEM을 이용한 것이다. 🤔 SEM과 SEM 차이점SEO는 시간을 투자해야하지만, SEM은 적은 시간으로 트래픽을 모을 수 있다.SE..
[WEB] webpack vs vite
·
WEB
👀 모듈? 모듈 번들러?모듈이란 분리된 파일을 의미한다. 웹 사이트를 만들고 배포를 하면 사용자들이 브라우저를 통해 웹 사이트에 접근한다.이 때, 브라우저는 사용자에게 UI를 보여주기 위해 서버에 자원을 요청한다.모듈을 계속해서 분리하면 그만큼 브라우저에서 서버로 요청하는 파일의 개수가 증가하게 되는데,이는 네트워크 비용 증가와 페이지 로딩 시간을 증가시켜 사용자 경험에 안좋다.=> 브라우저에서 서버로 요청하는 http 개수를 줄이는 작업이 필요하다. 번들링 : 개발할 때는 모듈을 분리해서 개발하고, 배포하기 전에 모듈들을 하나로 묶어주는 작업모듈 번들러 : 번들링 작업을 해주는 툴  따라서 모듈 번들러를 사용해서파일 개수를 줄여, http 요청을 줄이는 동시에 로딩 속도도 줄일 수 있고JS 압축, C..
[JS] Class
·
HTML,CSS,JS
자바스크립트의 Class 문법은 ES6에 추가된 문법이다.추가되기 전에도 생성자 함수와 프로토타입을 통해 상속을 구현할 수 있었는데 굳이 추가된 이유가 뭘까?👀 Class가 나오게 된 배경프로토타입 체인을 이용해서 클래스 방식을 모방할 수 있지만, 구현이 복잡하고 어렵다.또한 기존 객체지향 프로그램 언어들과 달라서 개발자들이 어려움을 느꼈다. 결론적으로 개발자들의 편의를 위해 도입되었다는 것이다!👀 Class vs 생성자 함수- new 연산자생성자 함수는 new 연산자를 붙이지 않고 객체를 생성해도 오류가 발생하지 않지만,class는 new 연산자를 붙이지 않고 객체를 생성하면 오류가 발생한다. 생성자 함수에서 오류가 발생하지 않을뿐, 의도했던 동작과는 다르게 단순 함수 호출로 처리된다. - exte..