Web

웹 서버(Web Server) 와 WAS (Web Application Server)의 차이점 서버를 개발함에 있어 기초적인 개념인 "웹 서버(Web Server)"와 "WAS(Web Application Server)"의 차이점을 포스팅 해보려고 합니다. 💡 웹 서버(Web Server) HTTP 프로토콜을 기반으로 클라이언트의 요청을 서비스 웹 서버란 클라이언트(사용자)가 웹 브라우저에서 어떠한 페이지 요청을 하면 웹 서버에서 그 요청을 받아 정적컨텐츠를 제공하는 서버이다. ex) Apache, Nginx 여기서 정적 컨텐츠는 html, css, js, 이미지 등 즉시 응답 가능한 컨텐츠이다. * 클라이언트에서 요청이 올 때 가장 앞에서 요청에 대한 처리를 한다. 그렇다면 웹 서버는 정적 컨텐츠만 제..

문서 객체 모델 DOM은 무엇인가? - DOM의 개념, 종류, 구조 등 문서 객체 모델 (DOM)이란? 문서 객체 모델(DOM, Document Object Model)은 웹 페이지에 대한 인터페이스 입니다. DOM은 문서 내의 모든 요소를 정의하고, 페이지의 콘텐츠 및 구조, 스타일 등 각각의 요소에 접근하여 읽고 조작할 수 있는 API를 제공합니다. 즉, 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. 이러한 DOM은 HTML, ECMAScript에서 정의한 표준이 아닌 W3C의 표준 객체 모델이며, 아래와 같이 계층..

DataTables 사용법 및 예제 ✔️ DataTables는 을 그리드 형식으로 사용하고 표시 건수 제어, 페이징, 정렬, 검색, 필터, 스크롤 기능 등을 제공하는 라이브러리다. DataTables는 서버에서 데이터를 JSON으로 받아 표시할 수 있으며, 아래와 같은 기능이 제공되어 추가할 수 있다. - 표시 건수 제어 기능 - 검색 기능 - 정렬 기능 - 필터 기능 - 스크롤 기능 DataTables - JSON 데이터 테이블에 출력하기 DataTables를 사용하기 위해서는 DataTables의 JS파일, CSS파일, jQuery를 필요로 합니다. [ {"id" : "JSON01", "name" : "제이슨01", "location" : "서울"}, {"id" : "JSON02", "name" : ..

React Developer Tools (디버깅 툴) - 크롬 확장 프로그램 설치 방법 크롬에서 리액트 디버깅 툴 설치 방법을 알아봅시다. React 사용시 개발자모드 Elements 탭에서는 브라우저가 이해하는 코드를 보여주기 때문에 우리가 React를 사용하여 스크립트로 작성한 컴포넌트 구조를 정확히 볼 수 없습니다. React Developer Tools를 사용하게 되면, 크롬 웹에서 개발자 모드로 컴포넌트(Components) 구조를 볼 수 있고 변경하면서 테스트에 용이합니다. 1. 크롬 리액트 디버깅 툴 설치 Link chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Devel..

Ajax 개념 및 구성 요소 Ajax 개념 Ajax는 그 자체가 별도의 새로운 언어가 아니다. HTML, CSS, 자바스크립트, XML 등 기존에 사용되던 여러 기술을 함께 사용하며, 웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신할 수 있게 하는 '비동기 통신'을 가능하게 해주는 기법이다. Ajax 구성 요소 웹 페이지의 표현을 위한 HTML과 CSS 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델 데이터 교환을 위한 JSON이나 XML 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체 위의 기술들을 결합해 작업 흐름을 제어하는 데 사용되는 JavaScript 2. Ajax의 동작 원리 Ajax의 동작은 위에서 언급한 구성 요소들을 사용하여 이루어진다...