본문 바로가기

웹프로그래밍22

배열의 함수형 메소드 웹 프론트엔드에서 배열을 순회하며 데이터들의 처리를 쉽게 할수 있도록 도와주는 자바스크립트 메소드에 대해 알아보겠습니다 . 자바스크립트에서 지원하는 배열 메소드는 아래와 같습니다. 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.

티스토리툴바