본문 바로가기

lang/javascript web9

[Web app] Tab UI 설명, 구현 Tab UI Tab은 자주 사용되는 UI 중 하나 입니다. 많은 컨텐츠를 효과적으로 보여줄 수 있습니다. 1) 자주 보는 Tab UI 형태 상단 메뉴를 누르면, 새로고침 없이 아래 내용이 변경됩니다. 기본 코드 TAB UI TEST crong jk pobi honux hello jk Lorem ipsum dolor sit amet consectetur adipisicing elit. Error dignissimos nostrum voluptates atque fuga natus molestiae distinctio provident perferendis consequatur, ipsum saepe libero omnis quibusdam obcaecati placeat quidem excepturi ex.. 2019. 12. 31.
[js] Web animation 웹 애니메이션 1. 웹 애니메이션 이해와 setTimeout 활용 사용자에게 매끄러운 UX를 지원해주어야 합니다. 1) 애니메이션 반복적 움직임의 처리를 말합니다. 웹 UI 애니메이션은 규칙적이고 단순한 방식으로 동작하는 CSS3의 transition, transform 속성을 사용하여 구현가능합니다. javascript로도 구현이 가능하지만 그보다 더 빠른 성능을 보장합니다. 특히 모바일웹에서는 CSS 방법이 더 빠릅니다. (특히 transition) 2) FPS FPS(frame per second)는 1초에 화면에 표현할 수 있는 정지화면(frame) 수 입니다. 매끄러운 애니메이션은 보통 60fps 입니다. 16.666ms 간격으로 frame생성이 필요합니다. (1000ms / 60fps = 16.. 2019. 12. 30.
[Webapp] Ajax 비동기, 응답처리 Ajax 1. Ajax응답 처리와 비동기 1) Ajax와 비동기 새로고침없이 웹 화면의 일부분을 수정합니다. 자바스크립트 엔진과 웹 브라우저의 렌더링이 별도로 진행됩니다. function ajax() { var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function(){ console.log(this.responseText); }) oReq.open("GET", "localhost"); oReq.send(); } line 4의 익명함수는 line 8, 9보다 더 늦게 실행됩니다. 이 익명함수는 비동기로 실행되며, event queue에 보관되었다가 load 이벤트가 발생하면(서버로부터 브라우저가 데이터를 받으면) call stack에 실행.. 2019. 12. 8.
[Webapp] DOM API, HTML 구조 수정 DOM API HTML은 동적으로 다양한게 변경될 수 있습니다. DOM APIs에서 이를 지원하는 다양한 메서드와 속성이 있습니다. 라이브러리를 사용하기 전, low-level의 DOM API를 먼저 배워봅니다. querySelector getElementById 등등.. createElement, createTextNode, appendChild insertBefore, innerText, innerHTML, insertAdjacentHTML 등등 1. DOM Node 조작 DOM API 1 다양한 APIs 1) document. 2) element. 2 DOM 탐색 APIs 유용한 DOM element 속성 var a = document.querySelector(".w3-table-all"); a.t.. 2019. 12. 7.
[Webapp] DOM API 탐색, 조작 DOM API HTML은 동적으로 다양한게 변경될 수 있습니다. DOM APIs에서 이를 지원하는 다양한 메서드와 속성이 있습니다. 라이브러리를 사용하기 전, low-level의 DOM API를 먼저 배워봅니다. querySelector getElementById 등등.. createElement, createTextNode, appendChild insertBefore, innerText, innerHTML, insertAdjacentHTML 등등 1. DOM Node 조작 DOM API 1 다양한 APIs 1) document. 2) element. 2 DOM 탐색 APIs 유용한 DOM element 속성 var a = document.querySelector(".w3-table-all"); a.t.. 2019. 12. 6.
[js] Array, Obejct JavaScript Javascript로 데이터를 표현하기 위해 배열(array)과 객체(object)를 이용합니다. 1. Javascript Array(배열) Declaration var a = [1, 2, 3, "hello", null, true, [[{1:0}]]]; console.log(a.length); console.log(a[500]); >> 7 undefined Method a.push() a.indexOf(x) : x가 배열 a에 있는지 확인 - 있으면 a[x] 출력 a.join() : 배열의 문자열로 합침 a.slice() a.concat(x) : a에 x를 붙인 값을 반환. a는 바뀌지 않습니다. * Spread operator : [...a, x] 라고하면 위와 문법이 똑같습니다.i.. 2019. 12. 5.
Web API 설명 WEB API 디자인 가이드 URI는 정보의 자원을 표현해야 합니다. 자원에 대한 행위는 HTTP method로 표현합니다. HTTP METHOD 역할 POST URI 요청시 리소스를 생성 GET 리소스를 조회하고 해당 document에 대한 자세한 정보 가져옴 PUT 리소스 수정 DELETE 리소스 삭제 URI는 정보의 자원을 표현 POST /members ​ 생성 GET /members ​ 멤버의 모든 정보 요청 PUT /members/1 ​ 수정 DELETE /members/1 ​ 삭제 슬래시 구분자(/)는 계층을 나타낼 때 사용 URI 마지막 문자로 슬래시 구분자 포함하지 않음 하이픈(-)은 URI 가독성 높일 때 사용 언더바(_)는 사용하지 않음 URI경로는 소문자만 사용. RFC 3986(UR.. 2019. 12. 3.
[Boostcourse] DB 연결 웹 - 2. WEB UI 개발 FE WEB UI 개발 - FE 1. Window 객체 (setTimeout) window.setTimeout() setTimeout() setTimeout 활용 (비동기 함수) setInterval 도 활용 인자로 함수를 받음, 보통 나중에 실행되는 함수를 콜백함수로 한다. js는 함수를 매개변수로 받고, 함수를 리턴할 수도있다. function run() { setTimeout(function() { var msg = "hello code"; console.log(msg); }, 2000); } run(); 2초 뒤에 함수실행 function run() { setTimeout(function() { var msg = "hello code"; console.log(msg); console.log("run ... 2019. 11. 18.
[Boostcourse] DB 연결 웹 - 1. JavaScript FE 1. Javascript ECMAScript(ES) 버전에 따라 결정, 이를 자바스크립트실행 엔진이 반영한다. ES5, ES6(ES2015) 등 버전 ES6를 지원하는 브라우저(Firefox, Chrome)가 많아서 ES6 문법이 표준 ES6를 지원하면 ES5문법도 포함, 하위호환성 문제가 없다. 다만 feature별로 지원하지 않는 브라우저가 있어 조심해야 한다. 변수 var, let, const 변수의 유효범위 scope 재할당 연산자 우선순위 표현 위해 ()사용 +, -, *, / , % or연산자로 if, else 코드를 줄일 수 있다. ===은 타입까지 체크한다. 그래서 ===을 습관적으로 쓰는 것이 좋다 다음은 참(true) 결과가 나온다. 0 == false; "" == false; 0 ==.. 2019. 11. 18.
728x90

티스토리툴바