Front-End: Web/JavaScript (97) 썸네일형 리스트형 Three.js 1: 시작하기 1. Three.js란? 1.1 OpenGL Open Graphics Library. 2D, 3D 그래픽 라이브러리이자 API이며 범용성이 있어 광범위하게 사용되고 있다. 1.2 WebGL Web Graphics Library. WebGL은 이러한 OpenGL을 플러그인 도움 없이 사용할 수 있도록 만들어진 웹 기반의 그래픽 API이다. 자바스크립트로 작성된 제어 코드와 컴퓨터의 GPU에서 실행되는 특수한 효과를 내는 코드로 구성되어 있으며, HTML의 요소를 통해서 3D 렌더링을 할 수 있다. 대부분 최신 버전의 웹 브라우저라면 사용할 수 있으므로 호환성이 높은 편이다. 또한 WebGL 요소들은 HTML 요소들과 섞어서 함께 사용할 수도 있으므로 웹 페이지를 꾸미는데 사용할 수도 있다. 예시 웹 사이트.. JavaScript란? 자바스크립트란? 구글에 자바스크립트를 검색하면 위키백과에 아래와 같이 뜬다. 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 자바스크립트는 객체지향 스크립트 프로그래밍 언어로 웹 브라우저 내에서 주로 사용되므로 웹 개발하는데에 사용된다. 웹의 프론트엔드를 개발하기 위해서 필요한 기술들은 기본적으로 HTML, CSS, JavaScript가 있다. 이 중에서 가장 핵심이 되는 기술이 자바스크립트이다. 자바스크립트 없이 웹 프로그래밍을 한다는 것은 거의 불가능에 가까운 일이 되었고, 언어가 가진 수 많.. JSON와 JSON 메서드 1. JSON이란? JSON 객체(JavaScript Object Notation)란, 속성-값 쌍 혹은 키-값 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 포맷이다. 비동기 브라우저/서버 통신(AJAX)을 위해, 넓게는 XML을 대체하는 주요 데이터 포맷으로, 주로 인터넷에서 자료를 주고 받을 때 자료를 표현하는 방법으로 알려져 있다. 자바스크립트 객체에 기반하고 있으나, 프로그래밍 언어나 플랫폼에 독립적이므로 다양한 프로그래밍 언어에서 이용된다. 파일 확장자는 .json이다. 장점 텍스트로 이루어져 있으므로, 사람과 기계 모두 읽고쓰기 쉽다. 프로그래밍 언어와 플랫폼에 독립적이므로, 서로 다른 시스템간에 데이터 객체를 교환하기에 좋다. 자바스크립트의 문법을 기반.. JSON과 Javascript Object의 차이 JSON은 객체, 배열, 숫자, 문자열, boolean, null을 직렬화하기 위한 구문으로, Javascript 구문에 기반을 두고 있으나 둘은 엄밀히 다른 개념이다. (*JSON이란?) 1) 속성명 JSON에서 속성명은 반드시 큰따옴표로 표시된 문자열이어야 한다. 후행 쉼표는 허용되지 않는다. Javascript Object는 상관없다. 그냥 키-속성값으로 구성되기만 하면 된다. 2) JSON.parse() JSON.parse() 메서드에 JSON 포맷의 객체를 넣으면 자바스크립트 객체로 변환된다. 3) 후행 쉼표 JSON에서 후행 쉼표는 허용되지 않지만, 자바스크립트 객체에서는 허용된다. 4) 숫자 JSON에서 선행 0은 허용되지 않는다. 또한 소숫점 뒤에는 적어도 한 자릿수가 뒤따라야 한다. Na.. 객체와 생성자 함수 1. 자바스크립트 객체의 특징 자바스크립트에서 객체는 객체지향 프로그래밍 언어의 객체와 조금 다른 점이 있다. 1.1 prototype 기반의 언어 Java와 C++은 클래스(Class) 기반의 객체지향 언어인 반면, JS는 프로토타입(Prototype) 기반의 객체지향 언어이다. Class 기반의 객체지향 언어는 class라는 껍데기를 정의하고 이를 통해 객체를 생성한다. 하지만 프로토타입 기반의 객체지향 언어는 class 정의없이도 객체를 생성할 수 있다. 물론 생성자 함수를 톻애 class를 따라할 순 있는데, ES6부터는 정식으로 class 문법이 추가되었다. 1.2 캡슐화와 상속 지원 객체지향 프로그래밍에서 중요한 특징 중 하나는 캡슐화와 상속이라는 개념이다. JS는 class가 없어도 클로저를.. [작성중]프로토타입(Prototype) 프로토타입 자바스크립트는 프로토타입 기반 언어 Java와 C++은 클래스 기반의 객체지향 언어인 반면, Javascript는 프로토타입 기반의 객체지향 언어이다. 모든 객체들이 메소드와 속성들을 상속 받기 위해 프로토타입 객체를 가진다. 클래스 기반의 객체지향 언어는 class라는 껍데기를 정의하고 이를 통해 객체를 생성한다. 하지만 프로토타입 기반의 객체지향 언어는 class 정의 없이도 객체를 생성할 수 있다. 물론 생성자 함수를 통해 class를 따라할 순 있지만, ES6부터는 정식으로 자바스크립트에서 class가 추가되었다. 프로토타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있는데, 이를 프로토타입 체인(prototype chain)이라 부른다. 다른 객체에 정의된 메소드.. 이벤트의 모든 것: on, addListener, onclick, addEventListener 노드 교과서 4장에서 addEventListener 메서드를 사용하여 클릭 이벤트를 작성하던 중, 예전에 클릭 이벤트 코드를 작성할 때 onclick 혹은 .on('click', listener) 메서드를 사용했던 기억이 떠올랐다. 그러다 이 이벤트들 사이에 어떤 차이가 있는지 궁금해졌고 조사하던 중 항상 헷갈렸던 용어들도 공부하며 이벤트의 모든 것을 정리하기로 했다. 1. 용어 정리 1.1 이벤트 웹 페이지에서 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글쓰기 등 특정 동작을 수행하는 것을 이벤트가 발생했다고 한다. 그리고 이벤트가 발생할 때마다 웹 브라우저가 서버에게 그 사실을 알려준다. 1.2 이벤트 처리기 1.2.1 이벤트 처리기란? 이벤트가 발생했을 때 이에 반응하여 수행할 동작이 .. jQuery란 무엇일까? jQuery 대부분 웹사이트가 사용하고 있는 라이브러리. 라이브러리일 뿐, 자바스크립트와 별개의 언어가 아니다! ('제이쿼리를 자바스크립트로 바꿔주세요'와 같은 말은 잘못된 것임). 특징 단점 무겁다. 제이쿼리 없이 순수 자바스크립트로 작성한 코드보다 속도가 10~100배 정도 더 느리다. 모듈화가 되어 있지 않다. 따라서 React, Angular를 사용하는 경우 제이쿼리를 사용하기 어렵다. 장점 코드가 간결해지고 가독성이 높아진다. document.getElementById('id'); 보다 $('#id') 라고 작성하는 게 훨씬 좋으니까! IE와 기타 브라우저에 대한 지원이 좋다. 따라서 하나의 코드로 여러 브라우저에서 다 호환이 된다. 플러그인을 지원하여 원하는 기능을 추가할 수도 있다. 애니메이.. 이전 1 ··· 7 8 9 10 11 12 13 다음
