본문 바로가기

분류 전체보기171

서비스 개발을 위한 디렉토리 구성 들어가기 전에서비스를 개발할 때 JavaScript 코드가 많아지면 어떻게 보관하고 관리해야 하는지 잘 모를 때가 있다. 소스코드상에서도 많아진 JavaScript 코드를 어떻게 표현해야할지도 고민이다. 학습 목표1. 웹 브라우저 렌더링에 필요한 JavaScript와 CSS파일의 구성방법을 이해한다. 핵심 개념- 개발환경 구성- 브라우저에서 동작가능하도록 JavaScript와 CSS 소스코드 위치시키기 디렉토리 구성(환경 설정)- 예를 들어 HTML, CSS, JavaScript 파일을 여러개 만들고, 그것들을 서로 HTML 기반으로 CSS와 JavaScript를 불러 동작되게 함 CSS- 보통 HTML 상단의 head 태그 안에 위치- DOM을 렌더링하기 위해 미리 CSS 파일을 로딩해야되기 때문 Ja.. 2019. 2. 12.
CSS3 transition 활용 들어가기 전에애니메이션 효과는 부드러운 UX를 제공하는 것이 좋다. 버벅거리는 효과는 오히려 답답하고 느린 웹사이트로 인식될 수 있다. 최적의 방법을 찾아서 적용해야 할텐데, 이번 장에서 다루는 CSS3 효과가 그 답이라고 해도 될 것 같다. 학습 목표1. CSS3 transition 속성 기반 웹 애니메이션 구현방법을 이해한다. 핵심 개념- CSS3 transition- CSS3 transform CSS 기법으로 애니메이션 구현- transition을 이용한 방법이다. 이 방법이 JavaScript로 구현하는 것보다 더 빠르다고 알려져 있다. 특히 모바일 웹에서는 transform을 사용한 element의 조작을 많이 구현한다.- https://thoughtbot.com/blog/transitions-.. 2019. 2. 12.
requestAnimationFrame 활용 들어가기 전에setTimeout이나 setInterval을 사용해서 연속적인 함수 호출로 애니메이션을 구현하는 방법은 약간의 delay가 발생하는 문제가 있다. 이 함수들은 애니메이션을 위해 생겨난 기능은 아니다. 애니메이션 구현을 위해서는 끊임없이 부드럽게 처리가 돼야하는데, 다행히도 이를 위한 메서드를 브라우저가 제공하고 있다. 학습 목표1. requestAnimationframe를 사용해서 최적화된 타이밍에 animation 관련 함수가 실행되도록 한다. 핵심 개념- requestAniamtionframe requestAnimaionFrame- setTimeout은 animation을 위한 최적화된 기능이라고 보기는 어렵다. animation 주기를 16.6 미만으로 하는 경우 불필요한 frame .. 2019. 2. 11.
웹 애니메이션 이해와 setTimeout 활용 들어가기 전에웹 사이트의 애니메이션 구현은 어떻게 할까요? JavaScript와 CSS를 다루면서 웹 애니메이션을 구현하는 방법을 익혀보자 학습 목표1. setInterval 애니메이션의 문제를 이해한다.2. setTimeout을 사용한 재귀호출 방식의 애니메이션을 이해한다. 핵심 개념- setTimeout 기반 애니메이션 방식 애니메이션애니메이션은 반복적인 움직임의 처리이다. 웹 UI 애니메이션은 자바스크립트로 다양하게 제어할 수 있지만, 규칙적이고 비교적 단순한 방식으로 동작하는 CSS3의 transition과 transform 속성을 사용해서 대부분 구현이 가능하다. 그 뿐만 아니라 자바스크립트보다 더 빠른 성능을 보장한다. 특히 모바일 웹에서는 CSS를 사용한 방법이 훨씬 더 빠르다. FPS(Fr.. 2019. 2. 11.
Ajax 응답 처리와 비동기 들어가기 전에브라우저의 새로고침 없이 데이터를 얻어오는 방법이 있다. 더 좋은 UX(User Experience)를 제공하는 방법이니 알아보도록 하자 학습 목표1. Ajax 기술은 왜 나왔고, 어떻게 사용하는지 이해한다. 핵심 개념- XHR(XLMHTTPRequest)- Ajax Ajax와 비동기- 새로고침(갱신)이 일어나지 않고, 서버 측의 데이터를 브라우저의 화면 전환 없이 서버측에 어떤 데이터를 별도로 요청해서 받아와 화면에 그려주는 것12345678910function ajax() { var oReq = new XMLHTTPRequest(); oReq.addEventListener("load", function() { console.log(this.responseText); }); oReq.ope.. 2019. 2. 11.
DOM APIs 실습 참고 링크 : https://jsbin.com/mebuha/1/edit?html,js,output 실습1 Q. 지금 나온 DOM API를 사용해서, strawberry 아래에 새로운 과일을 하나 더 추가하시오. 추가된 이후에는 다시 삭제하시오.A. var melon = document.createElement("li");var melonText = document.createTextNode("melon")melon.appendChild(melonText); //실습1var ul = document.querySelector('ul');ul.appendChild(melon);ul.removeChild(melon);cs 실습2Q. insertBefore 메소드를 사용해서, orange와 banana 사이에 새.. 2019. 2. 10.
DOM Node 조작하기 들어가기 전에DOM, 즉 HTML은 동적으로 다양하게 변경될 수 있다. DOM APIs 에서는 다양한 메소드와 속성을 지원하고 있으니 이를 활용하는 방법을 배울 필요가 있다. 이제부터 배울 다양한 DOM API는 라이브러리를 쓰는 것 보다 차이가 크지는 않지만 대체로 더 빠르다. 물론 라이브러리보다 그 사용법이 불편하고 어려울 수는 있으나, low-level의 DOM API를 이해한다면, 라이브러리나 프레임워크를 사용하면서도 그 동작을 이해하고 유추하기가 쉽고 어떤 문제를 해결할때도 더 유리할 것이다. 따라서 다양한 DOM APIs를 잘 배울 필요는 분명하다. 또한, HTML을 문자열로 처리하면서 DOM에 쉽게 추가하는 방법을 알아보자 학습 목표1. 다양한 DOM(Document Object Model).. 2019. 2. 10.
자바스크립트 객체 들어가기 전에자바스크립트 객체는 key와 value로 이루어진 dictionary 자료구조이다. 간단한 형태로 아주 많이 사용되고 있으니 그 사용법을 잘 알아보도록 하자 학습 목표1. 자바스크립트 객체를 선언하고, 값을 얻는 방법을 알 수 있다. 핵심 개념- JavaScript object(객체) 객체- 자바스크립트 개발에서 어떤 데이터를 저장하고, 보관하고, 관리하고, 수정하고 이런 것들을 할 때, 배열 그리고 또 다른 어떤 키값이 필요하다면 개체 데이터를 쓸 수밖에 없다.- 배열은 순서가 있는 리스트고, 객체는 순서는 없지만 키값이 있는 어떤 이름이다. 키 값이 이름이 있는 어떤 데이터를 보관할때 많이 쓰인다. - key, value 구조의 자료구조- JavaScript로 데이터를 표현하기 위해서는 .. 2019. 2. 10.
자바스크립트 배열 들어가기 전에자바스크립트에서 데이터를 보관하고 조작하는 방법은 리스트 형태로 보관할 수 있는 배열과 키와 밸류로 된 어떤 해시 구조로 되어있는 오브젝트 객체를 다루는 것이다. 자바스크립트에서 배열은 가장 많이 사용되는 자료구조(Data Structure)이다. 학습 목표1. 자바스크립트 배열을 다루는 방법을 알아보자. 핵심 개념- array- array method 배열의 선언- 자바스크립트 배열의 선언은 간단하다.var a = [];//배열안에는 모든 타입이 다 들어갈 수 있다.var a = [1, 2, 3, "hello", null, true, []];cs- new Array() 문으로 선언할 수도 있지만, 보통은 간단히 '[ ]'를 사용한다.- 배열에는 length 속성이 있어 그 길이를 쉽게 알 .. 2019. 2. 3.

티스토리툴바