Andamiro25

*Ajax 어원 확인 1. Ajax (XMLHTTPRequest 통신) 이 기술은 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했습니다. 더 좋은 UX를 제공할 수 있는 기술입니다. 페이지 전체의 데이터를 가져오는 것이 아닌, 필요한 부분의 데이터만 가져오는 기술 Ajax통신의 이해 Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고받을 수 있지만, 일반적으로 사용이 편리한 JSON포맷으로 데이터를 주고 받습니다 JSON이 무엇인지 찾아보고, JSON 포맷으로 데이터를 작성하려면 어떤 규칙이 필요한지 알아보세요. JSON 클라이언트와 서버가 데이터를 주고 받을 때 어떠한 포맷이 필요한데, 현재 많이 쓰는 것이..

Event 브라우저에는 많은 이벤트가 발생합니다. 브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생합니다. 이벤트를 브라우저가 발생시켜주니, 우리는 그때 어떤 일을 하라고 할 일을 등록할 수가 있습니다. 다시 말해, HTML엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를(어떤 일) 하고 싶다면, 대상엘리먼트를 찾고 어떤 일을 등록하면 된다. 그것을 자바스크립트로 구현할 수 있습니다. 이벤트 등록 이벤트 등록 표준방법입니다. addEventListener 함수를 사용할 수 있습니다. var el = document.querySelector(".outside"); el.addEventListener("cl..

1. DOM 브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체형태의 모델로 저장합니다. 그렇게 저장된 정보를 DOM Tree라고 합니다. 결국 HTML element는 Tree 형태로 저장됩니다. Dom tree 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하면 너무 힘듭니다. 그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공하고 있습니다. 브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공합니다. 2. getElementById() ID 정보를 통해서 찾을 수 있습니다. MDN사이트를 참고해서 이를 ..

window 객체 브라우저 개발을 하다 보면, window라는 객체가 있습니다. window에는 많은 메서드들이 존재하며, 아래처럼 사용할 수 있습니다. window는 디폴트의 개념이므로 생략할 수 있습니다.window.setTimeout() setTimeout() //window는 전역객체라서 생략 가능하다. 또 다른 ex) window.elert() setTimeout() 실행 순서 예제1) 1 2 3 4 5 6 7 8 9 10 function run(){ console.log("run start"); setTimeout(function(){ var msg = "hello codesquad"; console.log(msg); },3000); console.log("run end"); } run(); ..

1.WebBoard 다운로드 및 압축해제 2.WebBoard 임포트(Import) import → Maven → Existing Maven Projects → Root Directory : Browse WebBoard 선택, Finsih 실행 후 브라우저로 잘 되는지 확인. localhost:8080/boards/list 3. 데이터 다 가져오기, 그리고 화면에 출력하기 데이터 전부 가져오기 - findAllBy 오름차순 정렬 - OrderBy 모델의 Updates(updatedata) 기준 - Updates Asc(); board → src/main/java → ks.ac.ks.board → WebBoardRepository.java *WebBoardRepository.java 1 2 3 4 5 6 7..

자바스크립트의 버전 자바스크립트 버전은 ECMAScript(줄여서ES)의 버전에 따라서 결정되고, 이를 자바스크립트 실행 엔진이 반영합니다. ES5, ES6(ES2015).. 이런 식으로 버전을 일컫습니다. 2018년을 중심으로 ES6를 지원하는 브라우저가 많아서 몇 년간 ES6 문법이 표준으로 쓰이고 있습니다. ES6는 ES5문법을 포함하고 있어 하위호환성 문제가 없습니다. 다만 feature별로 지원하지 않는 브라우저가 있을 수 있어 조심해야 합니다. 변수 변수는 var, let, const로 선언 할 수 있다. 어떤 것을 사용하는 가에 의해서 scope라는 변수의 유효범위가 달라진다. 우선 var를 사용해서 변수를 선언해 확인해보자 let과 const는 ES6에 있는 기능, var를 많이 사용한다...

position 레이아웃 - 일반 배치나 float 배치는 소스 코드 나열 순과 브라우저 표시 순으로 연동하기 때문에 어느정도 제약이 따른다. - position 속성을 이용하면 순서에 상관없이 자유로운 레이아웃을 구성 할 수 있다. - position은 표시 위치를 지정하는 방법을 나타내는 속성이며 디폴트값은 static이다. - static은 일반 배치(여태 작성해온 방식)을 의미한다. -이를 absolute(절대 배치)로 변경하면 프리 레이아웃이 가능해진다. 절대 배치의 구조 - position : absolute;가 설정되면 그 콘텐츠는 기본 콘텐츠 배치의 흐름에서 벗어나 '기준 박스'를 지점으로 자유롭게 배치된다. - 기본 배치때 표시될 영역이 없어지고 후속 콘텐츠로 채워진다. - 마치 보통 H..

워크스페이스\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\프로젝트 폴더명\org\apache\jsp 에 가면 JSP파일이 서블릿으로 바뀐 파일을 확인 할 수 있다. WAS에 따라 약간 다른 이름으로 선언되어 있을 수 있지만, 앞시간에 배웠던 Init(), Destroy(), Service() 라는 글자가 들어간 메소드들을 확인 할 수 있다. (톰캣 기준 _jspService()) Service()안에 우리가 코드를 작성해 클라이언트에게 제공한다. java파일로 바뀐 sum10.java를 열어 _jspService() 확인해 보면 앞 게시물 작성했던 10까지의 합 코드를 확인 할 수 있다. sum10.jsp가 실행 ..