빨간색코딩

참조문서 : http://ejs.co/#docs1. ejs 란?ejs는 Embedded JavaScript Template의 약자로 nodejs 진영에서 많이 사용하는 템플릿엔진이다. 문법이 단순하다.2. 기본 문법주석 : JS 코드 : 변수 출력(html escape 처리: >를 $gt로 변환) : 태그내부 공백 제거 : html escape안하고 변수 출력 : ejs 분할3. nodejs와 연동(= 데이터 넘겨주기)3-1. express 없이 연동하기const ejs = require("ejs"); ejs.render(경로, 데이터, 옵션); 3-2. express 에서 연동하기app.js 에서 app.set('view engine', 'ejs');처리하는 라우터에서 아래와 같은 로직이 있으면 된다...

참조문서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로 빠른 프로퍼티 접근과 정적 룩업 다른 JavaScrip..

참조문서 : 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배열같은 ..

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

참조문서 : https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript 참고서적 : 자바스크립트 핵심가이드(더글라스 크락포드) JS는 매우 경량화되어있고 표현적이다. 함수형 프로그래밍도 가능하다. 장점 : 함수, 느슨한 타입체크, 동적 객체, 강력한 객체 리터럴 표기법 단점 : 프로그래밍 모델이 전역변수에 근간(최상위 레벨의 변수들은 모두 전역객체라 불리는 namespace에 위치함) 자바스크립트는 문장 끝에 세미콜론이 없어도 행을 바꾸면 실행에 지장이 없다. 그러나 관례상 세미콜론을 붙인다. 1. 식별자 키워드를 사용하면 안된다 특수문자는 _ , $ 만 가능 숫자로 시작하면 안됨 공백안됨 2. 명명관례 낙타표기법 사용, 생성자 함수의 이..

JS를 이용한 HTML includeHTML에서 보통 머릿말, 꼬리말, 메뉴바 등이 흔하게 중복된다.(서버사이드언어나 동적언어를 사용하지 않는다면 메뉴가 바뀔때마다 전부다 수동으로 바꾸어 주어야한다.) 이러한 문제를 해결하는 방법에는 여러가지가 있겠지만 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.getAttribute..

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