Study-Note

http://www.edwith.org/boostcourse-web * Java Config를 이용해 설정하기 ApplicationConfig.javapackage kr.or.connect.diexam01; import org.springframework.context.annotation.*; @Configuration public class ApplicationConfig { @Bean public Car car(Engine e) { Car c = new Car(); c.setEngine(e); return c; } @Bean public Engine engine() { return new Engine(); } }@Configuration 은 스프링 설정 클래스라는 의미를 가진다.JavaConfig로 ..

Caused by: org.xml.sax.SAXParseException; lineNumber: 3; columnNumber: 6; "[xX][mM][lL]"과 일치하는 처리 명령 대상은 허용되지 않습니다. 위와 같은 오류가 발생했을 경우 applicationContext.xml 파일로 들어가서 주석처리가 되어있는 문장이 없는지 확인해 본다. 주석 이 존재 xml에서 이 주석을 삭제하여 해결했다. 위와 같은 방법으로 해결되지 않는다면, xml 파일 첫 부분에 공백이 있는지 확인한 후 제거해주어 해결한다.

http://www.edwith.org/boostcourse-web * Maven으로 Java프로젝트 만들기 pom.xml에 JDK를 사용하기 위한 플러그인 설정을 추가한다.123456789101112131415161718192021222324252627282930313233343536373839404142 4.0.0 kr.or.connect diexam01 0.0.1-SNAPSHOT jar diexam01 http://maven.apache.org UTF-8 junit junit 3.8.1 test -------------------------------------추가---------------------------------------------------- org.apache.maven.plugin..

3. 웹 애플리케이션 개발 - Tab UI * Tab UI 형태 Tab UI는 많은 컨텐츠를 효과적으로 보여줄 수 있다. 아래와 같이 상단 메뉴를 누를 때마다, 새로 고침 없이 아래 내용이 변경되는 경우 사용한다. * Tab UI에 필요한 기능 Tab 메뉴를 누르면 Ajax를 통해서 데이터를 가져온 후, 그 내용이 화면에 노출한다. 다른 Tab 메뉴를 누르면 역시 동일하게 Ajax를 통해서 데이터를 가져온 후 그 내용이 화면에 노출한다. 화면에 노출하기 위해서는 HTML 코드를 가져오고, 서버에서 받은 데이터를 HTML Templating 작업을 해야 한다. 화면에 추가하기 위해서 DOM API를 사용한다. * 실습 코드 - Tab UI가 동작하도록 JavaScript로 구현하기 TAB UI TEST c..

3. 웹 애플리케이션 개발 - HTML templating * HTML Templating 아래 화면에 데이터를 Ajax로 받아와서 화면에 추가해야 한다고 생각해보자. JSON 형태의 데이터를 받을 것이며 아래 리스트들의 내용은 모두 다 비슷하다. list 태그로 html을 구현해보면 사진, 가격, 이름, 별점, 추가정보를 비슷한 tag를 사용해서 표현하면 된다. 여기서 templating 이라는 개념을 도입하면 좋다. * HTML Templating 작업이란? HTML과 Data를 섞어서 웹 화면에 변경 내용을 적용시켜 주는 것을 말한다. 서버에서 데이터를 조회한 다음에 그 내용들을 클라이언트에 동적으로 HTML을 만들어서 보내주는 것! 반복적인 HTML부분을 template로 만들어두고 서버에서 온 ..

3. 웹 애플리케이션 개발 - Event delegation 아래 화면은 가로로 배치된 책 리스트이며 각각 리스트에 클릭을 할 때 어떤 이벤트가 발생해야 한다고 가정해보자. addEventListener를 사용해서 이벤트 등록을 할 수 있다. 위 HTML 코드의 li 각각에 addEventListener를 통해 이벤트를 등록할 수 있다. 아래 코드는 클릭한 지점의 이미지 src가 출력된다. var log = document.querySelector(".log"); var lists = document.querySelectorAll("ul > li"); for(var i=0, len=lists.length; i < len; i++) { lists[i].addEventListener("click", func..

3. 웹 애플리케이션 개발 - DOMContentLoaded * DOMContentLoaded와 load의 차이 웹사이트에 접속해서 크롬 개발자도구로 이를 확인할 수 있다. 크롬 개발자도구의 Network panel을 열어서 하단에 DOMContentLoaded, load를 확인해보자. => 두 개의 시간이 조금 다르다. DOM Tree 분석이 끝나면 DOMContentLoaded 이벤트가 발생하며, 그 외 모든 자원을 다 받고 브라우저에 렌더링(화면 표시)까지 다 끝난 시점에는 Load가 발생한다. 이를 이해하고, 필요한 시점에 두 개의 이벤트를 사용해서 자바스크립트 실행을 할 수 있다. 보통 DOM tree가 다 만들어지면 DOM APIs를 통해서 DOM에 접근할 수 있기 때문에 실무에서 대부분의 자..

3. 웹 애플리케이션 개발 - 디렉토리 구성 * JavaScript, CSS파일 구성 - javascript 간단한 내용의 JavaScript라면 한 페이지에 모두 표현하는 것도 좋다. 태그 안에 대부분의 자바스크립트 코드는 DOM을 찾는 경우가 많다. 한 페이지에 위치시킬 경우 body 위(head 사이)에 위치하면 null이 뜨는 오류가 발생할 수 있다. JavaScript는 위에서부터 한 라인씩 읽어서 수행하기 때문이다. 그러므로 body 태그가 닫히기 전에 소스파일 간 의존성을 이해해서 순서대로 배치한다. 그렇지 않다면, 의미에 맞게 구분하는 방법이 더 좋다. (유지보수에 조금 더 용이하다.) - CSS CSS는 head태그 안에 상단에 위치키신다. 태그 안에 간단한 내용이 아니라면 아래와 같이 ..

3. 웹 애플리케이션 개발 - Web Animation * 웹 애니메이션 이해와 setTimeout활용 1. 애니메이션 애니메이션은 반복적인 움직임의 처리를 말한다. 웹 UI 애니메이션은 자바스크립트로 다양하게 제어할 수 있지만, 규칙적이고 비교적 단순한 방식으로 동작하는 방식은 CSS3의 transition과 transform속성을 사용해서 대부분 구현 가능하다. 이는 자바스크립트보다 더 빠른 성능을 보장하며 특히 모바일 웹에서는 CSS를 사용한 방법이 훨씬 더 빠르다. 2. FPS FPS (frame per second): 1초당 화면에 표현할 수 있는 정지화면(frame) 수 매끄러운 애니메이션은 보통 60fps이므로 16.666밀리세컨드 간격으로 frame 생성이 필요하다. ..

3. 웹 애플리케이션 개발 - 크롬 개발자도구 사용하기 1. 크롬 개발자 도구의 네트워크 패널 크롬 개발자도구는 여러 가지 기능을 제공한다. 녹화기능을 통해서 HTML, CSS, JavaScript, image파일을 내려받는 상황을 알 수 있다. 흔히 겪는 404와 같은 응답 오류에 대해서 문제를 쉽게 찾을 수 있다. 얼마나 서버로부터 응답이 걸리는지 알 수 있다. 성능개선을 위해서 진단할 수 있는 도구 역할 다양한 탭을 통해서 XHR, JS 등 통신 항목만 추려서 그 결과를 확인할 수 있으므로, 디버깅을 쉽게 할 수 있다. Name, status, type과 같은 항목을 내 맘대로 설정해서 노출할 수 있다. 전체적으로 HTTP통신과정에서 생기는 문제는 여기서 대부분 실마리를 찾을 수 있다. [참고] 구..