[jQuery] JSON APIs와 Ajax를 이용해 데이터 가져오기

JSON APIs와 Ajax를 이용해 데이터 로딩 및 완료 된 데이터를 처리해 HTML 화면에 출력하는 예제 들어가며 만약 날씨 정보와 같이 수시로 변하는 데이터를 HTML을 통해 화면에 출력을 해주고 싶다면 어떻게 해야할까요? 이처럼 고정값이 아닌, 항상 변하는 값을 HTML을 통해 출력해야 하기 때문에 로컬 파일이나, 클라우드에 있는 파일에서 값을 가져와 HTML페이지에 출력을 해줘야 합니다. 그렇다면 데이터를 어떻게 어디서 어떤 형태로 가져오는지 알아보겠습니다. APIs(Application Programming Interfaces)는 애플리케이션 사이에 소통하는 인터페이스를 말합니다. 우리가 흔히 말하는 Google APIs도 같은 애플리케이션 간에 소통하는 인터페이스를 제공합니다. 우리가 특정 ..

• format_list_bulleted Javascript/jQuery
• · 2021. 4. 30.
• textsms

자바스크립트 함수, 이것으로 종결하자

| 참을 수 없는 거부감, 자바스크립트 함수 저번 포스팅에서 이야기한 것처럼 자바스크립트의 자유분방함은 자바에 어느정도 익숙한 나에게는 상당한 거부감으로 다가오고 있다. 자바보다 유연한 언어인 파이썬을 학습하면서도 이러한 거부감은 없었다. 이 거부감의 원인은 자바스크립트를 계속 학습하면서 깨닫게 되었다. 바로 낯선 "자바스크립트의 함수 동작 과정" 때문이란 것을 알게 되었다. 자바스크립트의 함수 동작 과정을 완전히 이해하기 위해서는 Scope Chaining, Lexcial Context, 함수 선언 방법, 함수 실행 방법 등 여러 가지 개념과 경우들을 따져야하기 때문이다. 자바스크립트는 일급함수다! 따라서 변수에다가 할당할 수도 있고 반환할 수도 있다! 클로져도 됨! 이라는 단순한 개념만 잡고 들어갈 ..

• format_list_bulleted Javascript/JavaScript
• · 2021. 3. 29.
• textsms

자바스크립트(JavaScript) 실행 구조와 프로그램 평가, 실행과정

현재 자그마한 쇼핑몰 솔루션을 사이트 프로젝트로 시작하는 중이다. 원래는 자바 기반 백엔드 쪽을 담당하고 있지만 결국에 클라이언트에게 제공해야할 화면을 만들어야 되기 때문에 자바스크립트를 공부하고 있는 중이다. 자바를 주로 하다가 자바스크립트를 공부하면서 그 유연성과 복잡스러움(?)을 느끼고 있고 동적 타입 언어가 제공하는 특징때문에 여러가지로 학습하는 데 애로사항이 피고 있다. 자바스크립트의 자유분방함은 아직 어색하기만 하다. 특히나 자바스크립트에서 프로그램이 어떻게 인터프리터에 의해 해석되고 실행되는 지 알 수 없는 상태에서 코드를 짜려고 보니 자바와 같은 컴파일 언어에서는 이해할 수 없는 동작방식으로 돌아갈 때 심히 당황하게된다. 이 기회에 헷갈리는 것들을 아예 정리하려고 이 글을 포스팅했다. | ..

• format_list_bulleted Javascript/JavaScript
• · 2021. 3. 29.
• textsms

ECMAScript 6

참조문서 https://developer.mozilla.org/ko/docs/Web/JavaScript http://www.ecma-international.org/ecma-262/6.0/ https://www.slideshare.net/WooyoungCho/ecmascript-6-64456124 흔히 생각하는 javascript는 2009년에 제정되고 11년에 개정된 ECMAScript 5.1 표준이다. ES6에서는 arrow functions, class, 향상된 객체리터럴, let과 const, iterator, for-of 등이 추가되었다. 좀더 나은 fp와 oop를 가능하게 해준다. 또한 기존 ES5코드와 모두 하위호환이 된다. 여기서는 ES6에 추가된 사항을 중점적으로 정리한다. 또한 몰랐던 ..

• format_list_bulleted Javascript/JavaScript
• · 2021. 3. 23.
• textsms

V8 javascript 엔진 (Hidden Class, 인라인캐싱, 메모리구조, 호출스택, heap, GC)

참조문서 https://www.html5rocks.com/ko/tutorials/speed/v8/ https://github.com/v8/v8/wiki 자바스크립트 엔진은 javascript로 작성된 코드를 해석하고 실행하는 인터프리터다. js엔진은 브라우저 벤더별로 다양하다. Mozilla의 Monkey시리즈, 자바의 바이트코드로 컴파일해주는 Rhino, 구글 크롬의 V8, Safari의 JavascriptCore, Explorer의 Chakra 등이 있다. 여기서 nodejs는 구글의 V8 JavaScript 엔진을 기반으로 동작한다. 우리가 자주쓰는 크롬브라우저도 V8엔진을 쓴다. 성능좋은 코드를 위해 V8을 알아보자 1. Hidden Class로 빠른 프로퍼티 접근과 정적 룩업 다른 JavaScr..

• format_list_bulleted Javascript/JavaScript
• · 2021. 3. 23.
• textsms

JQuery 기초 (JQuery 객체, 조작)

참조문서 : http://api.jquery.com/ 제이쿼리는 DOM을 조작하거나 Ajax 요청을 할 때 널리 쓰이는 라이브러리다. 제이쿼리로 할 수 있는 건 모두 DOM API로도 할 수 있다. 하지만 제이쿼리를 쓰면 다음과 같은 장점이 있다. 브라우저 호환성을 걱정안해도 된다. Ajax 관련 API가 무척 단순하다. 내장된 DOM API를 더 유용하고 단순하게 바꾼 메소드를 제공한다. 주로 달러기호($)로 표현하며, 제이쿼리를 불러올 때는 1 cs 이런식으로 CDN을 이용하면 된다. 1. DOM 기다리기 제이쿼리에서는 브라우저가 페이지를 완전히 읽고 DOM을 구축한 다음에만 호출되는 콜백함수가 있다. $(document).ready(function () {} // 단축표기 $(function() {..

• format_list_bulleted Javascript/jQuery
• · 2021. 3. 23.
• textsms

Client(브라우저) Javascript (DOM API, data-, event, ajax)

참조문서 : https://developer.mozilla.org/en-US/docs/web/api 1. 문서 객체 모델(Document Object Model) 문서객체모델(DOM)은 HTML문서의 구조를 나타내는 표기법이며 브라우저가 HTML문서를 조작하는 핵심이다. DOM은 트리 구조로 표현하며 노드로 구성된다. root 노드를 document라고 부른다. DOM 트리의 모든 노드는 Node 클래스의 인스턴스이다. Node 객체에는 트리구조를 나타내는 parentNode와 childNodes 속성, 자신에 대한 속성인 nodeName과 nodeType이 있다. 2. get 메소드 DOM에는 원하는 HTML 요소를 빨리 찾을 수 있는 메소드들이 있다. DOM 메소드들이 반환하는 컬렉션은 JS배열같은 ..

• format_list_bulleted Javascript/JavaScript
• · 2021. 3. 23.
• textsms

자바스크립트 함수 Core (this, arguments, closure, memoization 등)

함수는 1급 객체(대입, 파라미터, 반환, 연산 등 제약 없음)이고 람다 언어(익명 함수나 클로저 등을 정의하기 위한 표현식)이다. 모듈화의 근간이다. 함수 객체는 Function.prototype에 연결되고, Function은 Object.prototype에 연결된다. 1. 함수 생성 함수는 함수 리터럴로 생성할 수 있다. 함수리터럴은 function 이라는 필수 예약어, 선택사항인 함수명, 매개변수의 집합(일반 변수는 undefined으로 초기화하지만, 매개변수는 넘겨진 인수로 초기화된다), 코드집합으로 구성된다. 함수문장 VS 함수 표현식 함수문장은 hoisting의 대상이 된다. 함수가 위치한 곳에 관계없이 유효범위의 가장 상위로 이동된다. 그렇기때문에 함수 호출이 함수를 정의하는 문장보다 앞에 ..

• format_list_bulleted Javascript/JavaScript
• · 2021. 3. 23.
• textsms

JS를 이용한 HTML include(header,nav,footer 따로 관리하기)

JS를 이용한 HTML include HTML에서 보통 머릿말, 꼬리말, 메뉴바 등이 흔하게 중복된다.(서버사이드언어나 동적언어를 사용하지 않는다면 메뉴가 바뀔때마다 전부다 수동으로 바꾸어 주어야한다.) 이러한 문제를 해결하는 방법에는 여러가지가 있겠지만 AJAX를 이용해서 해결해보자 1. 사용법 에 를 넣어준다. 에 를 넣고 를 호출해준다. 여기서는 navbar를 관리하고 있다. 2. includeHTML.js 코드 function includeHTML() { var z, i, elmnt, file, xhttp; z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z[i]; file = elmnt.getAttr..

• format_list_bulleted Javascript/JavaScript
• · 2021. 3. 23.
• textsms

자바스크립트(JavaScript) 공부

자바스크립트(JavaScript)를 들어가며 1. 자바스크립트란? 약칭 js라고 하며 객체 기반의 스크립트 프로그래밍 언어이다. 주로 웹브라우저(스크립트엔진-인터프리터가 내장되어 있다)에서 사용한다. CSS가 디자인을 담당한다면 js는 클라이언트 단에서 웹페이지가 동적으로 랜더링하는 것을 담당해준다. 최근에는 node.js로 서버사이드부분에도 상당히 유명해졌다. 뿐만 아니라 앵귤러, 리액트, 리액트 네이티브는 웹과 앱개발에서 매우 상승세타고있다.. 주변에서 하도 리액트리액트거려서 리액트공부해야하나 싶을정도다ㅋㅋㅋ 결국 할거지만 2. 자바와는 관계가 있나요? 자바스크립트는 자바와 이름이 비슷해서 착각을 할 수 있다. 자바와 문법, 구문이 유사한 점도 있지만, 이는 C언어를 조상으로 물려받았기 때문이며, 두..

• format_list_bulleted Javascript/JavaScript
• · 2021. 3. 23.
• textsms