개발자의 끄적거림

JavaScript에서 문서가 완전히 로드되었을 때 코드를 실행하는 방법에는 여러 가지가 있습니다. 주로 사용되는 방법으로는 `document.ready`, `window.onload`, 그리고 최근에는 `window.addEventListener('DOMContentLoaded', ...)`이 있습니다. 이 글에서는 document.ready window.ready window.onload 3가지 로드의 차이점에 대해서 말씀드리겠습니다. 1. **`document.ready` (jQuery):** jQuery 라이브러리를 사용하는 경우, 주로 `$(document).ready()`를 활용하여 문서가 준비되었을 때 코드를 실행합니다. 이벤트 핸들러는 DOM이 준비되었을 때 즉시 실행됩니다. $(docum..

[Html 코드] Load Data 위의 예제에서는 "Load Data"라는 버튼을 클릭하면 loadData() 함수가 호출됩니다. 이 함수에서는 XMLHttpRequest 객체를 생성하여 Ajax 요청을 보냅니다. xhr.onreadystatechange 이벤트 핸들러를 등록하여 서버 응답을 처리합니다. readyState 속성이 4인 경우 요청이 완료되었음을 의미하며, 이때 status 속성을 통해 HTTP 상태 코드를 확인할 수 있습니다. 성공적인 응답을 받은 경우 responseText 속성을 통해 서버에서 받은 응답 데이터를 가져올 수 있습니다. 이 데이터를 웹 페이지에 삽입하여 화면에 표시합니다. 요청이 실패한 경우 status 속성을 통해 에러 상태 코드를 확인하고, 콘솔에 에러 메시지를 출..

Server와 Client에 대해 항상 까먹고 궁금점이 자주 생겨서 찾아보던 중 간단, 명료하게 쓰여진 좋은 글을 발견해 퍼왔습니다. 저와 같이 궁금증이 있으신 분들은 이분의 블로그를 꼭 들어가 보기를 바랍니다. Web Java DB server : : 클라이언트의 요청에 따라 웹 페이지를 가져오거나 데이터를 가져오는 등의 응답을 보내는 역할 수행 - WAS : Web Application Syetem - 웹 서버 안에 들어가있음 *server + container - Server는 크게 server와 container로 구성되어 있다. - container는 session과 folder를 가지고 있음(파일 저장용) - server 는 Client의 요청을 받아(request) 필요한 데이터를 전송(re..

JavaScript에서 Ajax를 사용하여 서버와 비동기 통신을 하는 방법은 다음과 같습니다: 1. XMLHttpRequest 객체를 생성합니다. var xhttp = new XMLHttpRequest(); 2. 서버로 요청을 보냅니다. xhttp.open("GET", "url", true); xhttp.send(); 위의 코드에서 "GET"은 HTTP 메소드입니다. HTTP 메소드는 서버에 요청을 보낼 때 사용되며, "GET"은 서버로부터 정보를 받아오는 메소드입니다. "url"은 요청을 보낼 서버의 주소입니다. "true"는 비동기식 요청을 의미합니다. 3. 요청 상태를 확인합니다. xhttp.onreadystatechange = function() { if (this.readyState == 4 &..

JavaScript에서 return false는 일반적으로 이벤트 핸들러 (예: 버튼 클릭)의 기본 동작을 취소하는 데 사용됩니다. 이는 특정 이벤트가 발생할 때 브라우저가 수행하는 기본 작업을 막을 수 있으므로, 웹 개발자가 커스텀 동작을 구현할 수 있습니다. 예를 들어, return false를 사용하여 클릭 이벤트를 취소하면 해당 버튼이 클릭되었을 때 브라우저가 새로고침되거나 페이지가 다시로드되는 것을 방지할 수 있습니다. 대신, 개발자가 원하는 작업을 수행하도록 JavaScript 함수를 호출할 수 있습니다. 그러나 return false는 모든 경우에 유용하지는 않습니다. 일부 경우에는 이벤트 핸들러에서 return true를 반환해야 하며, 때로는 이벤트 객체를 인자로 받는 preventDef..

React.js는 Facebook에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스를 만들기 위한 것이다. React는 컴포넌트 기반으로 작동하며, 각 컴포넌트는 자체적으로 관리되고 독립적으로 작동한다. React의 주요 기능은 다음과 같다: Virtual DOM: React는 가상 DOM (Virtual DOM)을 사용하여 브라우저에 렌더링할 때의 성능을 향상시킨다. React는 변경된 부분만 실제 DOM에 적용하므로, 전체 DOM을 다시 그리는 것보다 훨씬 효율적이다. JSX: JSX는 React에서 사용되는 문법으로, JavaScript와 HTML을 결합한 것입니다. JSX를 사용하면 React 컴포넌트를 더 직관적이고 가독성 있게 작성할 수 있다. 컴포넌트 기반: React는 컴포넌트..