전체 글27 배열의 함수형 메소드 웹 프론트엔드에서 배열을 순회하며 데이터들의 처리를 쉽게 할수 있도록 도와주는 자바스크립트 메소드에 대해 알아보겠습니다 . 자바스크립트에서 지원하는 배열 메소드는 아래와 같습니다. 1. forEach 2. map 3. filter 4. reduce 5. immutable forEach vs for var data = [{title : "이기적 유전자",author : "리처드 도킨스", price : 13500}, {title : "객관성의 칼날",author : "찰스 길리스피", price : 25200}, {title : "부분과 전체",author : "베르너 하이젠베르크", price : 15120}]; 위와같은 데이터가 있습니다. for(var i=0; i v *10); //output [10.. 2019. 8. 16. jQuery 사용하기 1. jQuery 라이브러리 사용 선언 jQuery라이브러리를 사용하기 위해서는 해당 라이브러리를 추가해야합니다. 간단하게 CDN 방식으로 HTML파일에 아래 링크를 추가합니다. CDN(Content Delivery Network)이란? 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때, 자동으로 가장 가까운 서버에서 다운받도록 하는 기술이다.이 기술을 이용하면 특정 서버에 트래픽이 집중되지 않고, 콘텐츠 전송 시간이 매우 빨라지는 장점이 있다. CDN을 이용하면 jQuery 파일을 서버에 따로 저장하지 않아도 jQuery를 사용할 수 있다.현재 이용할 수 있는 jQuery 버전 3.x의 CDN은 다음과 같으며, 어떤 CDN을 이용하더라도 동일한 동작을 한다. 출처:https://araikuma... 2019. 8. 15. JavaScript 라이브러리와 SPAs Framework jQuery의 10년 지난 10년간, 자바스크립트의 라이브러리는 jQuery가 가장 많이 사용되었으나, 현재 그 인기는 많이 줄었습니다. jQuery가 인기 많았던 이유는 다음과 같습니다. 1. IE6,7,8을 포함해서 다양하게 동작하는 웹브라우저의 API 간의 차이를 줄임 2. 복잡하고 어려운 DOM APIs를 추상화해서 제공해서 쉽게 DOM 조작 가능 3. 사고의 흐름에 맞춰 프로그래밍할 수 있음 그러나 최근엔 jQuery의 인기는 다음과 같은 이유로 차차 줄어들고 있습니다. 1. 7~8년 전부터 등장한 JS Frameworks들이 좀 더 추상화된 방식으로 DOM 접근을 도와주고 있습니다. 2. 다른 라이브러리들도 jQuery와 비슷한 방식을 지원합니다. (ECMAScript 2015부터 편리한 함수.. 2019. 8. 15. Tab UI 구현하기 Tab UI 형태 위의 사진처럼 상단에 카테고리가 출력되고 카테고리 클릭시 하단의 내용이 변경되는 형태가 Tab UI 입니다. 전체 페이지가 로드되는것이 아닌, 카테고리 하단의 내용부분만 변경되는 형태를 가지고 있습니다. 이와 유사하지만 간단한 Tab UI를 구현해 보겠습니다. Tab UI 구현하기 구현 요구사항 - Tab 메뉴를 누르면 Ajax를 통해서 데이터를 가져온 후, 그 내용이 화면에 노출됩니다. - 다른 Tab 메뉴를 누르면 역시 동일하게 Ajax를 통해서 데이터를 가져온 후 그 내용이 화면에 노출됩니다. - 화면에 노출하기 위해서는 HTML 코드를 가져오고, 서버에서 받은 데이터를 HTML Templating 작업을 해야 합니다. - 화면에 추가하기 위해서 DOM API를 사용합니다. - c.. 2019. 8. 11. Spring MVC 정의 및 구성요소 1. MVC 정의 2. MVC Model 1 아키텍쳐 3. MVC Model 2 아키텍쳐 4. MVC Model2 발전 형태 (Spring MVC) 5. Spring MVC 구성요소 - DispatcherServlet 이 동작 순서 - DispatcherServlet에서 사용되는 컴포넌트(객체) 1. MVC 정의 Model-View-Controller의 약자입니다. Model : View 가 렌더링 하는데 필요한 데이터(사용자가 요청한 상품목록리스트와 같은 객체) 입니다. View : Model에서 받아온 데이터를 랜더링하여 를 출력하며 Jsp, HTML 페이지로 결과 표현합니다. Controller : 사용자의 요청을 받아 모델 업데이트 및 뷰에 모델에서 받아온 데이터 넘기는 역할을 합니다. MVC M.. 2019. 8. 7. Web UI DOMContentLoaded 이벤트 로딩 이후에 자바스크립트 동작이 이뤄지는것이 일반적입니다. 자바스크립트가 실행되어야 할 가장 적절한 타이밍은 언제인지 아래의 표를 보겠습니다. load 와 DOMContentLoaded의 차이 확인 화면 로딩 시점 이벤트 발생 시점 DOM Tree 분석 종료시 DOMContentLoaded 이벤트 발생 그외 모든 자원(image, script, css)이 다 받아져서 브라우저에 렌더링(화면 출력) 완료시 load 이벤트 발생 보통 DOM tree가 다 만들어지면 DOM APIs를 통해서 DOM에 접근할 수 있기때문에 실무에서는 대부분의 자바스크립트코드는 DOMContentLoaded 이후에 동작하도록 구현합니다. 이 방법이 로딩속도 성능에 유리하다고 생각하기 때문입니.. 2019. 8. 5. 이전 1 2 3 4 5 다음
