다음으로 배울것

자바스크립트로 웹 페이지를 조작하는 방법을 배운 것을 축하합니다! 새로운 HTML 특성 이용하기 꽤 많은 기능이 “HTML5” 스펙의 일부로 브라우저에 추가되었지만 이 과정에서는 그 대부분을 다루지 않았습니다. 예를 들어, 멀티미디어, 저장 및 그래픽에 대한 내용을 이 슬라이드에서 살펴볼 수 있습니다.  또는 관심이 있는 기능을 인터넷에 검색해 보세요. 데이터를 페이지로 불러오기 많은 웹 페이지는 사용자가 데이터베이스나 서비스에서 다이내믹 데이터와 소통할 수 있도록 해줍니다. 웹 페이지가 자신의 서버에서 호스트되는 경우에는 AJAX를 이용해 데이터를 불러올 수 있습니다. 외부 서버에서 데이터를 불러오고 해당 서버가 데이터를 다른사람이 사용할 수 있게 한다면 그 서버의 API나 JSONP를 이용해 불러올 수 있습니다. 예를 들어, 칸아카데미는 API 탐색기로 자신의 서버로 불러오고 싶은 데이터를 탐색할 수 있게 해줍니다. 이 웹 페이지가 이 API를 사용하는 웹 페이지입니다. 이 웹 페이지 환경은 […]

어떤 JS 라이브러리를 사용해야 할까요?

출처: 어떤 JS 라이브러리를 사용해야 할까요? 세상에는 수많은 라이브러리가 있으며, 어떤 기능을 수행하는 라이브러리가 필요할 때, 같은 기능이 있는 라이브러리를 여러 개 찾을 수 있을 겁니다. 예를 들어, 웹상에는 수많은 날짜 선택기 라이브러리가 있는데, 다음과 같은 “Top 15 jQuery DatePickers” 글은 가장 좋은 라이브러리를 선택해서 보여줍니다. 그러나 선택지가 너무 많으면 우리 같은 웹 개발자는 혼란에 빠지게 됩니다. 제일 좋은 것이 무엇인지 어떻게 알 수 있을까요? 만약 잘못된 선택을 한다면 어떡할까요? 웹 개발을 할 때 단 한 개의 “최고의 선택”은 없는 경우가 많습니다. 그러나 어떤 선택이 다른 선택보다 나은 경우는 있습니다. 아래 글은 앞으로 더 나은 선택을 할 수 있도록 도와줄 것입니다. JS 라이브러리가 사용자와 대면하는 제품을 개발할 때 자주 사용되기 때문에, 해당 라이브러리를 사용하여 […]

JS 라이브러리의 세계

출처: JS 라이브러리의 세계 우리가 사용할 수 있는 JavaScript 라이브러리는 수 천 가지가 있고, 이 라이브러리는 웹 페이지의 다음과 같은 부분을 작성하는 것을 도와줄 수 있습니다: DOM 조작 DOM 이벤트 AJAX / 데이터 검색 효과 & 애니메이션 HTML 템플릿 페이지 레이아웃 UI 위젯 그래픽 & 차트 데이터 모델링 라우팅 & 탐색 접근성 다중 브라우저 지원 모바일 지원 이렇게 생각해보면 쉽습니다. 웹 페이지는 사용자 인터페이스 (HTML & CSS), 상호성 (JS + DOM), 데이터 (종종 JS를 통해 가져오는)로 이루어집니다. 데이터 기반의 대화형 UI를 라이브러리를 사용하지 않고 만들 수도 있고, 서로 다른 라이브러리를 각 부분에 사용할 수도 있습니다. 어떤 라이브러리는 여러 가지 일을 하는 방면에 어떤 라이브러리는 한 가지 일만 하도록 설계되어 있습니다. […]

JS 라이브러리를 호스트하는 곳은 어디일까요?

출처: JS 라이브러리를 호스트하는 곳은 어디일까요? 지난번 토크 스루 (Talk through)에 나왔던 슬라이드쇼 JS 라이브러리를 웹페이지에 포함시킬 때, 이 URL을 입력했습니다: https://cdn.rawgit.com/pamelafox/a8b77c43f56da1753348/raw/slideshow.js 이 URL은 “절대” URL입니다. 해당 URL 이 프로토콜과 도메인을 포함한다는 뜻입니다. 만약 JS 라이브러리를 칸 아카데미 환경에 포함시킨다면, 환경이 라이브러리의 전체 경로를 알 수 있도록 하기 위해서 꼭 절대 URL을 사용해야 합니다. 만약 자신의 컴퓨터에서 웹 페이지 작업을 하고 있고 모든 파일을 내려받았다면, slideshow.js 나 lib/slideshow.js 처럼( lib 폴더 안에 있다면), 간단하게 “상대” 주소를 사용할 수 있습니다. 로컬에서 작업한다면, 브라우저 네트워크 패널을 열어서 브라우저가 JS 파일이나 CSS 파일같은 모든 로컬 리소스들을 찾았는지 확인하세요. 만약 브라우저가 리소스를 찾지 못한다면, 404 페이지를 보게 될 것이며, URL과 파일 위치를 디버깅해야 합니다. […]

어떤 DOM 애니메이션을 사용해야 할까요?

출처: 어떤 DOM 애니메이션을 사용해야 할까요? 웹 페이지의 일부에 애니메이션을 적용하는 세 가지 기술인 : window.setInterval/setTimeout, window.requestAnimationFrame, CSS animations/transitions를 살펴보았습니다. 어떤 기술을 이용할 것인지를 고려할 때 다음의 질문을 고려해야 합니다. 그 기술이 실제로 내가 수행하고 싶어하는 것을 수행할 수 있는가? 이 기술의 성능이 어떤가? (이 기술로 브라우저/컴퓨터가 느려지지 않는가?) 타이밍이 얼마나 정확해야 하는가? 이 기술이 내가 원하는 모든 브라우저에서 호환되는가? 웹 페이지를 만들 때 성능에 매우 관심을 가지므로 가장 중요한 기준으로 성능을 고려하는 경향이 있습니다. 그러나 브라우저 성능은 새로운 브라우저가 나올 때 변하고 모바일 브라우저는 데스크톱 브라우저와는 매우 다르게 동작하므로 오늘날 가장 잘 동작하는 기술이 나중에 가장 잘 동작하는 기술이 아닐 수도 있습니다. 현재 CSS animations/transitions의 성능이 가장 좋지만 이후에는 […]

CSS 애니메이션으로 style에 애니메이션 효과주기

출처: CSS 애니메이션으로 style에 애니메이션 효과주기 Animating styles with CSS animations @keyframes getbigger { from { width: 50px; } to { width: 300px; } } @-webkit-keyframes getbigger { from { width: 50px; } to { width: 300px; } } #ohnoes { animation-name: getbigger; animation-duration: 3s; /* vendor prefixes */ -webkit-animation-name: getbigger; -webkit-animation-duration: 3s; } #countdown:hover { font-size: 150px; transition: font-size 1s linear; } Oh noes, the world will end in 30 seconds! var infoDiv = document.getElementById(“info”); var countdown = document.getElementById(“countdown”); var countItDown = function() { var currentTime = parseFloat(countdown.textContent); if (currentTime > 0) { countdown.textContent = currentTime – 1; } else { window.clearInterval(timer); } }; var timer = window.setInterval(countItDown, 1000); […]

requestAnimationFrame으로 style에 애니메이션 효과주기

Challenge: Catwalk #cat { position: absolute; left: 0px; } 출처: requestAnimationFrame으로 style에 애니메이션 효과주기 Oh noes, the world will end in 30 seconds! var infoDiv = document.getElementById(“info”); var countdown = document.getElementById(“countdown”); var countItDown = function() { var currentTime = parseFloat(countdown.textContent); if (currentTime > 0) { countdown.textContent = currentTime – 1; } else { window.clearInterval(timer); } }; var timer = window.setInterval(countItDown, 1000); // Step 1. What element do we want to animate? var ohnoes = document.getElementById(“ohnoes”); ohnoes.style.width = “50px”; // Step 2. What function will change it each time? var startTime = new Date().getTime(); var makeItBigger = function() { var currTime = new Date().getTime(); var newWidth = (50 + ((currTime – […]

setInterval로 DOM에 애니메이션 효과주기

출처: setInterval로 DOM에 애니메이션 효과주기 Oh noes, the world will end in 5 seconds! // Step 1. What element do we want to animate? var countdown = document.getElementById(“countdown”); // Step 2. What function will change it each time? var countItDown = function() { var currentTime = parseFloat(countdown.textContent); if (currentTime > 0) { countdown.textContent = currentTime – 1; } else { window.clearInterval(timer); } }; // Step 3: Call that on an interval var timer = window.setInterval(countItDown, 1000); Oh noes, the world will end in 5 seconds! // Step 1. What element do we want to animate? var countdown = document.getElementById(“countdown”); // Step 2. What function will change it each time? var […]

window 객체 (object)

출처: window 객체 (object) I’m all about that window… var infoDiv = document.getElementById(“info”); console.log(window); console.log(window.location); infoDiv.textContent += “The URL of this page is ” + window.location.href; infoDiv.textContent += “The user agent is ” + window.navigator.userAgent; infoDiv.textContent += ” This webpage is ” + outerWidth + ” by ” + outerHeight; // KA_ I’m all about that window… var infoDiv = document.getElementById(“info”); console.log(window); console.log(window.location); infoDiv.textContent += “The URL of this page is ” + window.location.href; infoDiv.textContent += “The user agent is ” + window.navigator.userAgent; infoDiv.textContent += ” This webpage is ” + outerWidth + ” by ” + outerHeight; // KA_