Javascript
-
let vs const [ES6] :: 마이구미Javascript 2017. 2. 24. 15:49
이번 글은 es6에서 제공하는 let과 const 키워드에 대해 다뤄본다.글의 이해에 도움이 되는 이전 글을 읽기를 바란다. (function scope vs block scope)원본 글을 번역하여 작성하였다. 이전 글에서 언급했듯이 var는 function scope, let과 const는 block scope를 의미한다. 같은 scope 내부에서 선언된 변수들을 보자. const key = 'abc123';let points = 50;let winner = false; 위 코드에서 우리는 winner 변수를 다시 선언해보자. let winner = true; 무슨 결과가 나올까?우리가 알고 있기로는 문제가 없는 코드이다.var를 통해 변수 선언의 경우에는 같은 변수로 처리가 되기 때문이다.이러한 경..
-
function scope VS block scope :: 마이구미Javascript 2017. 2. 23. 23:08
이번 글은 function scope와 block scope를 다뤄본다.es6에서 let과 const 키워드를 다루기 위한 필요한 지식들을 위한 글이다.자바스크립트에서 변수 선언시 var 키워드를 사용한다는 것을 알고 있다.아직까지는 es5를 대부분 사용한다. (잘 모른다면 현재 사용하거나 책에서 보는 것들이 es5)하지만 점차 es6를 접하고 있고 훨씬 빠른 속도로 지향할 것으로 생각한다. es6에서는 var 키워드만을 사용하지 않고, let, const가 추가되었다.var 와 let, const의 차이점은 크게 유효 범위(scope) 라고 볼 수 있다.var는 function scope이고, let, const는 block scope이다.function scope는 함수(function) 단위, bl..
-
자바스크립트 유용한 팁 - Comma :: 마이구미Javascript 2016. 8. 8. 17:04
이번 글은 자바스크립트의 Comma 즉, 콤마를 다뤄본다.너무도 당연히 알고 있고, 당연히 사용하고 있는 것이 콤마다.그렇다면 도대체 무엇을 위해 글을 다뤘는가?한번 보자. 후회 없을거다! var obj={a:0,b:1,c:function(){}}; var arr=[1,2,3,4]; var a=1,b=2,c=3; 위와 같이 객체, 배열, 변수 등등 다양하게 사용하고 있다.그렇다면, 아래와 같은 코드를 본 적이 있는가? var a = 0; var b = ( a++, 99 ); var c = ( 1, 2, 3 );var d = 4, 5; //error console.log(a); // 1 console.log(b); // 99console.log(c); // 3 b 변수는 a++를 실행되어진 후, 99가 대..
-
animate를 활용한 상단 메뉴 노출 :: 마이구미Javascript 2016. 8. 2. 15:43
이번 글은 제이쿼리의 animate 메소드의 활용법에 대하여 알아볼 것이다.이번 주제는 지식인으로부터 팁을 얻었다. 지식인에 질문이 올라왔다.http://www.kwater.or.kr/main.do?s_mid=1#this 위의 이미지는 첫 로딩 시 기본 페이지이다.상단부분 오른쪽 돋보기 버튼이 보이는가?돋보기 버튼을 누른다면 아래 이미지처럼 통합검색이라는 영역이 노출될 것이다. 즉 돋보기 버튼을 누른다면 통합검색 영역이 상단 메뉴 영역이 노출된다.통합검색 영역의 오른쪽 닫기 버튼을 누른다면 노출된 영역이 사라진다.직접 페이지에서 해보길 바란다. 많이 볼 수 있고, 많이 활용되고 있는 기능이다.이거 또한 다른 글 transition으로 가능하다.여기서는 jquery의 animate 메소드를 사용해보겠다. ..
-
이미지 슬라이드 [javascript] :: 마이구미Javascript 2016. 8. 1. 21:18
최신 글 - http://mygumi.tistory.com/326 이번 글은 이미지 슬라이더에 대해 알아볼 것이다.다들 페이지 작업을 해봤다면 누구나 이 기능을 넣을려고 했을 것이다.많은 라이브러리가 존재하고 대중화된 기능이다. 대중화되고 쉽게 라이브러리가 존재하여도 힘든 사람들을 위해 작성해보았다. 사용할 라이브러리는 딱 필요한 기능과 적절히 확장할 수 있다.또한 자바스크립트로만 만들어진 라이브러리다.그러므로 jquery를 사용하지 않는다면 더더욱 좋은 라이브러리이다. 간단히 샘플 소스를 보자. html 소스 위의 소스만 있으면 이미지 슬라이더 기능을 사용할 수 있다. 아래 페이지를 참고하자.샘플 페이지 실질적인 라이브러리 스크립트 파일을 보면 아래와 같다. javascript 소스 var slider..
-
자바스크립트 모듈 패턴 :: 마이구미Javascript 2016. 7. 26. 20:25
이번 글에서는 모듈 패턴을 알아볼 것이다.이전 즉시실행함수에 대한 글을 살펴보고 오면 좋다.이전 글 내용에서 조금 더 들어간 내용이다. 모듈패턴이란 로직을 캡슐화하고 전역 공간의 남발을 방지하는 훌륭한 기법이다. (function() { var a = 1, b = 2;}()); 자바스크립트에서는 위와 같이 익명함수와 즉시실행함수가 있기 때문에 가능하다.익명함수 내부의 변수들은 지역변수가 되므로 외부에서 접근할 수가 없지만, 익명함수 내부에서는 전역변수를 이용할 수 있다.이런 식으로 커지다 보면, 변수에 대한 명확성이 떨어지게 된다.또한 당연히 전역변수를 사용 시에는 지역변수 접근보다 시간이 더 걸린다. 이 문제를 해결하기 위한 방법이 이전 글에서도 살짝 언급했었다. (function($) { consol..
-
자바스크립트 즉시실행함수 :: 마이구미Javascript 2016. 7. 25. 00:54
이번 글은 자바스크립트에서 즉시실행함수에 대해 알아볼 것이다.한번 쯤은 봤을 것이고, 궁금증을 가졌을 것이다.표기법은 많지만, 일반적으로 아래와 같이 쓰인다. (function() { console.log("!!"); }()); 일단 먼저, 자바스크립트에서는 함수를 표기할 때 크게 두 분류로 나뉜다.함수 선언문과 함수 표현식이다. 한 가지 더 나누자면 즉시실행함수로 볼 수 있다.함수 선언문과 함수 표현식에 대해서는 다음 글에 다뤄볼 예정이다. 즉시실행함수는 이름 그대로 즉시 실행하는 함수이다.즉, 선언과 동시에 실행이 된다. function fn() { conosle.log("!!"); } var fn = function() { conosle.log("!!"); } fn(); // fn함수 호출 //선언..
-
|| , && 연산자 사용법 [javascript] :: 마이구미Javascript 2016. 7. 24. 16:46
이번 글은 자바스크립트를 사용할 때 유용한 팁들을 알아볼 것이다.어려운 내용이 아니라 쉬운 내용이다.하지만 또 쉬운 내용이라고, 중요하지 않은 것은 아니다.알고있다면 훨씬 좋은 팁들이다.시작해보자. 1. 함수 인자를 통한 변수 초기화 (|| 연산자) function documentTitle(theTitle) { if (!theTitle) { theTitle = "Untitled Document"; } } 위의 코드는 함수를 통해 인자를 전달 받아 theTitle 변수에 인자의 값을 할당해주는 것이다.하지만 인자가 없을 경우를 위해 이런 식으로 많이 if문을 통해 사용할 것이다.이러한 처리를 할 때는 아래와 같이 이용해보자. function documentTitle(theTitle) theTitle = t..