innerHTML 프로젝트 개발과정 중 html 파일 전체 내용을 리턴하여 사용하는 곳이 있었다. 항상 아래의 jquery 의 .html() 을 사용하여 넣었으나 최대한 바닐라스크립트를 사용하기 위해 변경 중에 넘긴 html 데이터 중 스크립트가 실행이 되지 않았다. // Javascript axios({ method: 'post', url: Request URL, params: {action_type : action_type, site_code : site_code} }).then(function(result){ // jquery 의 .html() ==> html 내 스크립트 실행됨 $('#modalTest').html(result.data); // innerHTML ==> html 내 스크립트 실행 ..

브라우저란? 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Edge, Firefox 등을 말한다. 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이다. 브라우저는 사용자가 원하는 페이지에서 필요한 자원을 서버로부터 받아와서 유저에게 보여준다. 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함한다. 브라우저는 받아온 자원들(페이지, 이미지, 비디오)을 렌더링 과정을 통해 사용자에게 보여준다. 렌더링이란? 서버로부터 HTML, CSS, Javascript 등 제공받은 파일들을 가공하여 브라우저에 보여준다. 브라우저의 기본 구조 브라우저의 주요 구성 요소는 아래와 같다. 1. 사용자 인터페이스 주소표시줄, 이..

History.pushState 란 페이지를 리로드하지 않고 페이지 주소만 변경할 때 사용한다. 쉽게 말해 페이지 이동 없이 주소만 바꿔준다. 브라우저에서 페이지를 이동하면 window.onpopstate 라는 이벤트가 발생하게 되는데 pushState 를 했을때는 popstate 이벤트가 발생하지 않고, 뒤 / 앞으로 가기를 클릭 했을 때 popstate 이벤트가 발생하게 된다. 구문 history.pushState(state, title[, url]); state 브라우저 이동 시 넘겨줄 데이터(popstate 에서 받아서 원하는 처리 가능) title 변경할 브라우저 타이틀 url 변경할 브라우저 주소 실제로 사용해보면 아래와 같다. 아래와 같이 함수를 호출하는 버튼이 있습니다. testPPP Fu..

input 태그의 type="text"는 위와 같이 maxlength 를 통해 최대길이를 설정할 수 있다. 하지만 type="number" 는 maxlength 를 설정할 수 없기 때문에 직접 함수를 통해 설정해줘야 한다. let numberMaxLengthCheck = function(obj){ if(obj.value.length > obj.maxLength){ obj.value = obj.value.slice(0, obj.maxLength); } }; // HTML obj.value = obj.value.slice(0, obj.maxLength); oninput 을 통해 값이 입력될 때마다 numberMaxLengthCheck() 함수를 호출한다. numberMaxLengthCheck 에서는 inpu..

HTML HTML은 Hyper Text Markup Language 의 약자로 웹페이지를 만들기 위한 마크업 언어로 웹브라우저 위에서 동작한다. 여기서 Hyper Text의 Hyper 뜻이 '뛰어넘다', '초월하다' 의미를 가지고 있듯이 Hyper Text란 웹페이지에서 다른 페이지로 이동할 수 있도록 하는 개념을 가지고 있습니다. JSP와 다르게 WAS 필요 없이 웹브라우저 위에서 동작하므로 편리하다. JSP JSP는 JavaServer Pages의 약자로 Java 언어를 기반으로 하는 Server Side 스크립트 언어이다. HTML 코드에 Java 코드를 넣어 동적인 웹 페이지를 생성하는 웹 어플리케이션 도구 * 웹 어플리케이션(Web Application) 어플리케이션이란 사용자가 컴퓨터로 원하는..