Blocks and IIFEsES5 이하에서는 var 변수 선언을 하면 전역변수가 되기 때문에 전역을 오염시키지 않기 위해 IIFE패턴을 썼습니다.1234// ES5(function(){ var a = 5;})(); 그러나 ES6에서 제공하는 let, const 선언은 지역변수이므로, 블록으로 묶어주기만 하면 IIFE패턴을 쓰지 않고도
스터디 모임 때 객체지향 프로그래밍의 개념에 대해 이야기를 나누었습니다.진행할 프로젝트에서 객체지향으로 짜보고 싶어 좀 더 깊게 공부해보려합니다. 객체지향 프로그래밍(Object-Oriented Programming)절차지향 프로그래밍과 비교해 보자절차지향은 문제를 순차적으로 호출해 처리하는 방식으로, 함수 단위 코딩을 하는 경우가 대표적인 예입니다.
알고리즘 15. 최소값 만들기 (JavaScript) 자연수로 이루어진 길이가 같은 수열 A,B가 있습니다. 최솟값 만들기는 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱한 값을 누적하여 더합니다. 이러한 과정을 수열의 길이만큼 반복하여 최종적으로 누적된 값이 최소가 되도록 만드는 것이 목표입니다.예를 들어 A = [1, 2] , B = [3, 4]
알고리즘 14. 약수의 합 (JavaScript) 어떤 수를 입력받아 그 수의 약수를 모두 더한 수 sumDivisor 함수를 완성해 보세요. 예를 들어 12가 입력된다면 12의 약수는 [1, 2, 3, 4, 6, 12]가 되고, 총 합은 28이 되므로 28을 반환해 주면 됩니다. 약수(divisor)는 어떤 정수를 나누어 떨어지게 하는, 0이 아닌 정
Firebase on the Web - Firecasts Youtube 실제 데이터를 구현하고 싶은 욕망이 항상 있었는데, 이번 예산관리 웹앱을 만들면서 파이어베이스로 디비구현 및 실제 데이터를 붙여보고 싶었습니다.파이어베이스가 스타트업으로 시작해서 구글에서 인수했다고 들었는데.. 능력자들! firebase로 할 수 있는 것들 (web기준) 인증, 스토
알고리즘 13. 피보나치 수열 (JavaScript) 피보나치 수는 F(0) = 0, F(1) = 1일 때, 2 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 점화식입니다.2 이상의 n이 입력되었을 때, fibonacci 함수를 제작하여 n번째 피보나치 수를 반환해 주세요.예를 들어 n = 3이라면 2를 반환해주면 됩니다. 피
NHN ent. JavaScript 코딩 컨벤션 스터디 멤버분이 소개해주신 nhn ent. js 코딩 컨벤션. 즉 코딩 스타일 가이드입니다.이제 모듈 패턴이나 클래스를 사용하여 객체지향으로 코딩해보려고 하는데,코딩 컨벤션도 보면서 좀 더 나은 코딩을 해봐야겠습니다. :)
스터디를 이어오고 있었는데 이제는 1주에 한번 서로 깨달은 점을 나누고,궁금한 것은 공부해와서 다음에 나누기로 하였습니다.이번주에 서로 나눈 내용은 JS성능향상을 위한 코드 리펙토링과 객체지향! 1. JavaScript 성능향상을 위한 고려조건문의 경우 if else보다는 아닐경우 빠져나오는 경우를 먼저 설정하면 성능에 좋다고 합니다.아래 예의 경우
최대공약수, 최소공배수.. 오랜만에 다시 보았네요 ㅋㅋㅋ 알고리즘 11. 최대공약수와 최소공배수 (JavaScript) 두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환해주는 gcdlcm 함수를 완성해 보세요. 배열의 맨 앞에 최대공약수, 그 다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 gcdlcm(3,12) 가 입력되면, [3, 12]
이번에 진행할 Free Project에서 Module Patton으로 Module을 구현하려고 합니다. Module : 모듈은 application’s architecture(구조)의 필수 요소이며 일반적으로 프로젝트의 코드 단위를 명확하게 분리하고 구성하는 데 도움이됩니다. 자바스크립트에서는 모듈 구현을 위한 몇가지 방법이 있습니다.The Modul
알고리즘 02. 평균구하기 (JavaScript) def average(list):함수를 완성해서 매개변수 list의 평균값을 return하도록 만들어 보세요.어떠한 크기의 list가 와도 평균값을 구할 수 있어야 합니다. 처음 나의 코딩1) 목표 : 배열 값을 모두 더하여 length만큼 나눠 평균을 구하자. 2) 매개변수로 들어온 배열.length의
한국에도 이런 사이트가 있어 기쁩니다. ^^해외에는 codecademy, udacity, udemy.. 등의 우수한 강의사이트가 있는데 tryhelloworld도 못지않게 훌륭하네요!JavaScript에 해당하는 알고리즘을 풀고난 후, 다른사람들의 풀이를 보니 공부에 많은 도움이 되고 있습니다. :) 알고리즘 01. 핸드폰번호 가리기 (JavaSc
사진 갤러리 : JavaScript, AJAX, JSON, CSS3결과화면 보기해당 소스 보기 Window10의 기본 사진 애플리케이션 기능을 웹버전으로 만들어보는 작은 프로젝트입니다. :) 특징 및 기능1) AJAX로 JSON data 불러오기2) JSON photo개수에 맞는 template 동적 생성3) hover, focus시 CSS3 tran
Free Project를 진행하면서 자주 사용하는 프로퍼티, 메소드 등을 계속 추가할 예정입니다. :) 목차charAt 메소드replace 메소드repeat 메소드slice 메소드substring 메소드 charAt 메소드문자열에서 특정 위치의 문자를 구할 수 있습니다. 1str.charAt(index) index : 문자열의 위치 인덱스 값으로 0부
Free Project를 진행하면서 자주 사용하는 Element Web API를 계속 추가할 예정입니다. :) element.classList요소의 class속성 목록을 반환합니다. 브라우저 호환 : IE10이상add : 요소의 클래스 목록에 클래스 추가remove : 요소의 클래스 목록에서 클래스 삭제toggle : 요소의 클래스 목록에서 특정 클
Free Project를 진행하면서 자주 사용하는 프로퍼티, 메소드 등을 계속 추가할 예정입니다. :) 목차length 프로퍼티indexOf 메소드splice 메소드 length 프로퍼티배열의 원소 개수를 나타냅니다. 만약에 배열 index에 임의대로 값을 저장하면 length는 가장 큰 index를 기준으로 정해집니다.123456var arr = [
CSS3 효과 모음 사이트 CSS3 Transition, Transform, Animation 효과를 직관적으로 보여주는 사이트입니다.재미있고 쉽게 익힐 수 있습니다. ^^
결과화면 보기 박스오피스 사이트 : AJAX 통신, Movie API 사용 2017-01-04 코드 리펙토링 : 익스플로러(IE)에서는 for of문이 인식되지 않아 일반 for문으로 처리하였습니다. 하단에 설명 추가 특징 및 기능1) 영화진흥위원회가 제공하는 영화 API사용: 로컬 서버에서는 구현이 잘 되고 있으나 github의 gh-pages에서는
AJAX(Asynchronous Javascript And XML) 개념Javascript가 XML을 만나면서 비동기 통신을 한다. -> 요새는 XML보다는 JSON으로 하지만 이름은 그대로 사용하고 있다고 하네요. ^^XML은 자유롭게 마음대로 정할 수 있지만 무겁고 구조화가 어렵다는 단점이 있습니다. 이를 해결하기위해 JSON 등장! 비동기 통신
JavaScript를 배운다는 건…core(문법), core library(기본 제공 함수 등), BOM, DOM이 중 DOM에 대해 정리해보겠습니다. DOM(Document Object Model)노드, 스타일, 속성, 이벤트, 위치 및 크기 등을 다룰 수 있는 다양한 기능이 포함되어 있습니다.※ 노드 : HTML 웹페이지 구성요소의 가장 작은 단위
JavaScript를 배운다는 건…core(문법), core library(기본 제공 함수 등), BOM, DOM이 중 BOM에 대해 정리해보겠습니다. BOM(Brower Object Model)웹 브라우저를 구성하는 객체들이 포함되어 있습니다. Window 객체Javascript 실행시 가장 상위에 존재하는 객체입니다.웹 페이지의 정보에 접근하거나
Arrow functions(애로우 펑션, 화살표 함수 표현식)화살표 함수 표현식(arrow function expression)은 함수 표현식(function expression)에 비해 구문이 짧으며(예제 1.)this, arguments, super 또는 new.target을 자체 바인딩하지 않습니다(예제 2.). 메소드가 아닌 함수에 가장 적합하며
ES6 변수, 상수 선언 키워드let : 정의된 블록내에서만 존재하는 변수 선언 (지역 변수)const : 위와 동일, 상수(변하지 않는 값) 선언 var : ES6문법 이전부터 사용하던 변수 선언 (전역 변수) 1234var x = 'global'; // 전역 변수let y = 'global'; // 지역 변수cons
AngularJS 도입 선택 가이드 - Naver D2 예전에 관리했던 블로그를 살펴보는데 참 재밋네요 :)그 당시에도 앵귤러에 관심이 있어서 링크해두었던 글입니다.
javascript30.com | github 소스 영어로 진행하는데도 재미있게 알아들을 수 있는 신선한 라이브코딩식 강의! 처음엔 30 Day Vanilla JS Coding Challenge라고 되어있기에 문제를 하나씩 던져주고 해결하라고 하는건가? 라고 생각했는데, 동영상으로 라이브코딩처럼 진행하는 방식입니다. Vanilla JS, 즉, 라이브러
Node Version Manager webpack이 자꾸 안되었던 이유가 node.js의 버전때문이었습니다. 하아 ㅜㅜ 지금이라도 알았으니 다행.. ^^gulp + webpack 설정으로 사용하고 싶어, 스터디 팀끼리 서로 정보 공유하며 씨름하다 결국엔 성공했습니다. ^^ 씐나씐나 ~~~ Windows 환경에서 NVM을 설치하여 node.js 버전을
해당 코드가 있는 Github 바로가기01해당 코드가 있는 Github 바로가기02 Nesting(중첩)중첩은 반복을 제거하고 스타일링에 분명한 DOM관계를 보여줌으로서 코드를 효율적으로 만듭니다. 확장자가 SCSS, SASS 일 때 문법이 다른데,SCSS파일의 경우는 기존의 CSS의 문법과 동일합니다.123456.parent { color:
해당 코드가 있는 Github 바로가기01해당 코드가 있는 Github 바로가기02 CSS로 style 코드를 작성하다보면 반복사용 하는 것들을 한번에 관리하면 좋겠다는 생각을 하게 됩니다.이럴 때 사용하면 좋을 문법이 sass의 변수입니다. 나중엔 mixin, 함수 개념등을 알면 좋은데 우선 변수만 잘 써도 일이 확 줄어드는 것을 알 수 있습니다. 조으
앵귤러 개발자가 놓치기 쉬운 10가지 사실들 - 김정환님 블로그 포스팅을 보며 앵귤러 코드 리펙토링하고 있습니다.저 글 뿐 아니라 앵귤러 세미나내용도 있으니 우리 썬쓰 SunS(스터디 팀)끼리 열심히 해볼 생각입니다. ^^저도 차근차근 실력쌓아서 도움되는 블로그를 만들고 싶네요. :)
12월 9일 금요일. UN 인권의 날 기념 - 2016 정보접근성 기술 컨퍼런스에 다녀왔습니다.집에서 먼 거리에 있어 상암쪽은 살면서 두번째네요~결론은.. 눈 비비며 먼 길 다녀온 보람이 있었다는 것입니다. ^^ 특히 우리 프론트엔드 개발스쿨의 야무쌤 파트였던 WAI-ARIA부분은 예전부터 알고 싶던 기술이었기 때문에 더 귀를 쫑끗하며 들었습니다.한국 웹