본문 바로가기

전체 글27

Web Animation Animation 구현 웹사이트의 애니메이션 구현은 Javascript와 CSS를 통해 이루어집니다. 웹 UI 애니메이션은 자바스크립트로 다양하게 제어할 수 있지만, 규칙적이고 비교적 단순한 방식은 CSS의 transition과 transform 속성을 사용해 구현가능합니다. 또한, 이 두 속성은 자바스크립트보다 더 빠른 성능을 보장하며 특히 모바일 웹에서는 CSS를 사용한 방법이 훨씬 더 빠릅니다. FPS( Frame per second) FPS는 1초당 화면에 표현할 수 있는 정지화면(Frame)수입니다. 매끄러운 애니메이션은 보통 60fps 입니다. 16.666 ms 간격으로 frame생성이 필요합니다. (1000ms/60fps = 16.666ms) JavaScript 애니메이션 자바스크립트로 애니.. 2019. 8. 5.
Ajax Ajax ( Asynchronous JavaScript and XML) Ajax를 이용해 서버로부터 데이터를 얻어오면 브라우저의 새로고침없이 화면을 다른데이터로 로드할수 있습니다. 즉, Ajax는 자바스크립트를 이용해 비동기 통신으로 서버와 브라우저가 데이터를 교환할 수 있는 방식을 의미합니다. Ajax 기술은 왜 나왔을까? 기존의 웹 애플리케이션은 서버에 요청을 하면 이에 대한 응답으로 HTML,CSS,Javascript 와 같은 파일들도 동시에 반환을 하여 이미 존재하는 동적인 코드들도 다시 랜더링하여 화면에 출력해야하므로 비효율적입니다. 반면, Ajax는 서버에 요청시 응답으로 필요한 데이터만 JSON 형태로 반환하여 페이지 전체로드가 아닌 일부분만 로드하면 되므로 빠른 화면 전환을 기대할수 있습니.. 2019. 8. 5.
DOM API 활용 DOM, 즉 HTML은 동적으로 다양하게 변경될 수 있습니다. DOM APIs 에서는 다양한 메서드와 속성을 지원하고 있으니 이를 활용하는 방법을 배워두면 라이브러리나 프레임워크를 사용하면서도 그 동작을 이해하고 유추하기가 쉬워 어떤 문제를 해결할 때도 유리할 것입니다. html을 문자열로 처리하면서 DOM에 쉽게 추가하는 방법을 정리했습니다. DOM 조작하기 API document. 으로 사용할 수 있는 APIs : https://www.w3schools.com/jsref/dom_obj_document.asp element. 으로 사용할 수 있는 APIs : https://www.w3schools.com/jsref/dom_obj_all.asp 유용한 DOM Element 속성 1. tagName: 엘리.. 2019. 8. 5.
자바스크립트 배열과 객체 자바스크립트 배열 배열의 선언 var a = []; var a = [1,2,3,"hello",null,true,[]]; 배열은 순서가 있고, 배열의 원소에는 모든 타입이 다 들어갈 수 있습니다. 배열 안에 배열도, 배열 안에 객체도 들어갈 수 있습니다. var a = [4]; // a에 원소 4를 가지는 배열 선언 a[1000] = 3; // 배열 a의 1001번째 인덱스 3 추가 [4, empty x 999, 3] console.log(a.length); // 1001 console.log(a[500]); // undefined 출력 a.push(5); //[4, empty x 999, 3, 5] push 메서드는 배열 인덱스 끝에 5 추가 console.log(a.length); // 1002 배열의.. 2019. 8. 5.
Rest 의미와 Web API 작성해보기 Rest 의미 Representational State Transfer 의 약자로 소프트웨어 프로그램 개발의 아키텍처의 한형식이며 좁은 의미로 HTTP를 통해 CRUD 를 실행하는 API 를 뜻한다. 출처 : https://www.a-mean-blog.com/ko/blog/%ED%86%A0%EB%A7%89%EA%B8%80/_/REST%EC%99%80-RESTful-API CRUD : Create, Read, Update, Delete의 약어. 데이터의 생성,조회,수정,삭제 가능함을 나타냄. RESTful - Rest의 비공식적 구현 가이드. - Restful 중 가장 대표적이며 보편적인 규칙이 확고하게 정해진 RESTful routing에 대해 간단한 예를 들어 알아보겠습니다. [GET]/products.. 2019. 8. 5.
레이어드 아키텍쳐 (Layered Architecture) 레이어드 아키텍쳐 (Layered Architecture) 웹 어플리케이션을 만들때 자주 사용하는 구조이며 Controller, Service, Repository 형태로 나누어지는 구조입니다. 레이어드 아키텍쳐를 적용하면 중복되는 코드를 줄일수 있고 각 클래스마다 기능이 나누어져있어 유지보수하는데 유리합니다. Controller와 Service Controller와 Service 의 관계는 다음과 같은 예로 쉽게 이해할 수 있습니다. 게시판에서도 회원정보를 가져와 이용하고 로그인 에서도 회원정보를 가져와 사용한다고 가정해 봅시다. URL 요청을 처리하는 컨트롤러는 각각 다르지만, URL에 해당하는 웹페이지를 보여주기 위해 실행되는 부분 중 중복이 되는 부분(회원정보 가져오기) 이 있다면 어떻게 해야될까.. 2019. 8. 5.