JS Stack
[JS] memoization, currying
[JS] memoization, currying
2017.06.02memoization동일한 계산을 반복해야 할 때 이전 계산 결과를 저장해놓음으로써 효율을 높이는 것. 관례상 변수는 ``js memo[]`````jsvar fibonacci = function ( ) {var memo = [0, 1];var fib = function (n) {var result = memo[n];if (typeof result !== 'number') {result = fib(n - 1) + fib(n - 2);memo[n] = result;}return result;};return fib;}( );```* 클로저를 이용해 ``js memo[]``를 감췄다. recursive를 사용하지 않고 iteration으로 짜면서 memo하려면 별도의 ``stack`` 변수를 하나 선언하고 거기..
[JS] 함수 #2. Call pattern, 생성자 대안(함수형 패턴), 상속
[JS] 함수 #2. Call pattern, 생성자 대안(함수형 패턴), 상속
2017.05.31함수 객체 함수도 객체이기 때문에 다른 값들처럼 배열에 저장하거나 인수, 반환값으로 사용할 수 있다. 함수 객체는 ``js Function.prototype``에 연결된다. ( ``js Function``이 ``js Object.prototype``에 연결되어 있다. ) 모든 함수는 두 개의 숨겨진 속성 ``context``과 ``code``를 가지고 있다. 또한, 모든 함수 객체는 ``prototype`` 객체를 속성으로 가지고 있다. 이 객체는 다시 함수 자기 자신(``this``) 자체를 값으로 갖는 ``constructor``라는 속성을 가지고 있다. * 함수 객체가 만들어질 때, 함수를 생성하는 Function 생성자는 다음과 같은 코드를 실행한다. ```js this.prototype = {c..
[JS] 함수 #1. 유효범위(scope), callback, 클로저(closure), 접근 제어
[JS] 함수 #1. 유효범위(scope), callback, 클로저(closure), 접근 제어
2017.05.31함수선언식 vs 함수표현식 함수선언식 ```js functino foo( ) {} ``` 함수표현식 ( 함수리터럴 ) ```js var foo = function ( ) {}; ``` 일반적으로 함수 표현식을 사용하는 것이 좋다. JS를 잘 사용하기 위해서는 함수도 값이라는 것을 이해하는 것이 중요하기 때문. 이라고 "자바스크립트 핵심 가이드"에서 얘기하고 있음 일반적으로 함수를 선언 할 때, 선언식으로 하냐 표현식으로 하냐 관점에서는 hoisting 정도가 차이점이고, JS가 함수표현식을 지원하기 때문에 = 함수는 값 = [클로저, 일회용 함수(즉시eval), 함수를 인자로 전달]이 가능 hoisting 규칙 ``js let/const`` 변수는 hoisting 되지 않는다. ``js var`` 변수는..
[JS] 객체, 프로토타입, 기본 타입에 기능 추가
[JS] 객체, 프로토타입, 기본 타입에 기능 추가
2017.05.29JS에서 단순 데이터 타입인 숫자, 문자열 등을 제외하면 배열, 함수, 정규표현식 등이 모두 객체로 이루어져 있다. 숫자, 문자열 등은 메소드가 있기 때문에 유사 객체라고 할 수 있지만 이들은 immutable이다. JS에서 객체는 변형 가능한 속성들의 집합이라고 할 수 있으며 이름과 값이 있는 속성들을 포함하는 컨테이너다. JS에는 객체 하나에 있는 속성들을 다른 객체에 상속하게 해주는 프로토타입(prototype) 연결 특성이 있다. 프로토타입을 잘 활용하면, 객체를 초기화 하는 시간과 메모리 사용을 줄일 수 있다. JS에서는 클래스가 따로 없고, ``js new``와 ``Constructor``를 사용할 수는 있지만, 프로토타입과 클로저를 활용한 함수형 패턴으로 객체를 정의한다. 2017/05/31..
[Front-end] Ajax
[Front-end] Ajax
2017.05.28Ajax : Asynchronous JavaScript and XML 프레임워크나 언어를 지칭하는 것이 아닌, 대화식 웹 어플리케이션 제작 기법을 의미 페이지 전환 없이 JS단에서 서버에 데이터를 요청하는 것이 Ajax Ajax 예? 자동완성 기능. 페이스북. 페이지 이동을 하지 않고 데이터를 불러오고, 댓글이 새로고침되니까 F12의 Network탭을 보면 주고받는 데이터를 확인할 수 있음 JSON ( JavaScript Object Notation ) 자바스크립트에서 사용하는 객체 형태로 데이터를 표시하는 형식이다. json data는 ``js eval()``을 이용해 바로 js 객체로 만들 수 있다. (``$.extend``를 사용해도 가능할 것 같다.) ```js let json = eval('('..
[Regex] JS
[Regex] JS
2017.05.28JS Regexregex에서 "또는 or"을 표현하기 위해 ``js [(bar)(foo)]`` 처럼 사용하면 ``()``로 묶어도 한 char 씩 잘라서 인식하기 때문에 ``js ((bar)|(foo))``를 사용해야 한다.()가 추가되기 때문에 캡쳐링 그룹 인덱스가 틀려질 수 있다는 점에 주의한다. JS에서 정규 표현식은 보통 같은 문자열에 대해 반복해서 연산을 수행할 때 주목할 만한 성능상의 이점이 있다. 그래서 ``indexOf``를 쓰는 것 보다는 정규 표현식을 쓰는 것이 좋다. 정규식은 inline 보다는 변수에 저장해서(stored) 사용하는 것이 좋고,RegExp 객체를 사용하는 것 보다 literal을 사용하는 것이 좋다.또한, 반복문 안에 넣으면 계속 컴파일 되는 경우가 있으므로 반복문 ..
[JS] TIP
[JS] TIP
2017.05.25JS에서 ||는 boolean이 아닐 수 있다. ```js let a = {} a.none || "abc" // "abc"가 출력된다. let b = a.none || "abc" // b에 "abc"가 할당된다. a.none === undefined || "abc" // true가 출력된다 ``` 이렇게 할당에 사용할 수 있음 Object 유틸 관련 IE에서 지원 안되므로 babel polyfill (preset-env) 필요함. /* Object.assign 객체 병합 */ const a = {a: 1, b:3} a >>> {a: 1, b: 3} Object.assign(a, {c:4}) >>> {a: 1, b: 3, c: 4} Object.assign(a, {b:5}) >>> {a: 1, b: 5, ..
CSS Selector
CSS Selector
2017.05.24CSS Selectorcascading 우선순위```!important > style attribute > #id > .class > tag selector```같은 cascading 우선순위를 가질 경우 아래에 위치한 style이 더 높은 우선순위를 가진다.minify할 때 주의해야 할 점이, 같은 속성 같은 값을 지정하는 경우 cascading을 고려해서 일부러 따로 지정해놓은 경우도 하나로 합쳐버린다. 그래서 끝 값 1정도를 다르게 주어야 하는 경우가 있다.가장 구체적으로 지정된 selector가 제일 우선시 된다.그래서 ``html ``요렇게 있는 DOM에서... `` .body.center``로 선택한 것이 `` .body``로 선택한 것 보다 우선한다.이런 경우 `` .body.body``로 ..
CSS 팁과 기본 지식
CSS 팁과 기본 지식
2017.05.03CSS tip생활코딩 CSS 사전 뭔가를 숨길 때```cssheight: 0px;보다는display: none;을 사용하는 편이 좋다.``` 줄바꿈```css// 한문자 단위로 쪼개려면 word-break: break-all; // 스페이스바 나와도 안쪼개고 1자로 쭉 이어 갈거면(스크롤 있는 경우)white-space: nowrap;``` css 세로 가운데 정렬다양한 방법이 있지만, flex를 쓰거나 아래 링크에서 저자가 괜찮다고 한 방법이 좋아 보임.https://mytory.net/archives/9727 CSS selector2017/05/24 - [Web/Front-end] - CSS Selector px과 rem, empx - 절대 크기rem - root element(html)의 상대 크기..
[HTML, JS] refresh / redirect
[HTML, JS] refresh / redirect
2017.04.29사실 HTML과 JS를 이용해 redirect하는 것 보다 서버 측에서 HTTP redirection status code(301, 302)를 보내 redirect하도록 하는 것이 더 좋다. 2017/06/08 - [Web/Back-end] - [PHP] HTTP response header 수정 JS를 이용하면 JS가 비활성화 되어 있는 경우 제대로 동작하지 않으니 JS보다는 HTML을 사용한 방법이 나은 것 같다. HTML```htmlrefresh : redirect : `````content``에 url이 한꺼번에 들어간다는 것에 유의. JS```jsrefresh : location.reload() redirect : location.href='http://www.example.com/'```
[jQuery] CDN, Usage
[jQuery] CDN, Usage
2017.04.13jQuery보다 먼저 알았으면 좋았을 것들 jQueryjQuery는 주로 DOM, Ajax, 그리고 event와 effect를 처리하기 위해 사용하는데, effect같은 경우 css로 처리할 수도 있다. hover같은건 effect로 봐야하기 때문에 css로 처리하는 것이 좋고, onclick은 event로 봐야하기 때문에 JS로 처리해야 한다. effectcss로는 어려운 동적으로 페이지를 꾸미는 작업은 보통 jQuery Plugin을 활용해 처리하게 된다. DOM기존 JS로 DOM을 선택, 추가, 수정하려면 제한이 많은데, jQuery를 활용하면 복제, 이동 등의 작업도 간단히 처리할 수 있다. 그래서 DOM 관련 작업을 하다가 뭔가 복잡한 것 같으면 그냥 jQuery를 찾아보는게 더 빠를 수 있다...
쿠키(Cookie)와 저장소(Storage)
쿠키(Cookie)와 저장소(Storage)
2017.04.12Cookie와 Storage 모두 개발자 도구의 Application 탭에서 확인할 수 있다.Cookie는 EditThisCookie 크롬 확장프로그램을 사용하는 것이 편하다. Cookie서버에서 클라이언트가 쿠키를 설정하도록 지정할 수도 있고, 클라이언트에서 자체적으로 설정할 수도 있다.HTTP는 stateless protocol이므로 상태를 저장하기 위해 쿠키를 이용한다. 쿠키는 기본적으로 `` Name=Value`` 형태로 지정한다.다음 속성들도 가질 수 있다.Expires / Max-Age : 파기 날짜를 지정하지 않으면 브라우저가 종료될 때 쿠키가 삭제된다.Path : 입력하지 않으면 현재 도메인의 경로로 자동 입력된다. 지정한 경로의 하위에서만 해당 쿠키에 접근할 수 있다.Domain : 입력..