Category: Front-End
JavaScript ES6 문법 - default parameter
default parameter아래 함수처럼 파라미터 개수에 맞지 않게 함수를 실행시킨다면 오류를 발생시킵니다.1234const sum = function(x,y){ return x+y;}sum(); // NaN ES6에서는 파라미터에 기본 값을 할당해줄 수 있습니다.1234const sum2 = function(x=5,y=10)&
JavaScript ES6 문법 - spread operator
spread operator(...)copy목적으로 씁니다.length를 갖고 있는, 즉 순회를 할 수 있는 대상들(배열, 문자열)에 적용가능합니다. 12345678const defaultColors = ['red', 'green'];const userFavoriteColors =['yellow', &
JavaScript ES6 문법 - rest parameter
rest parameter(나머지 파라미터 ...)일정하지 않은 갯수의 파라미터를 넘길 때 유용합니다. 1234567function addNum(...numbers) { return numbers.reduce((sum, number) => { return sum + number; }, 0);}addNum(
JavaScript Array - find, every, some, reduce 내장 메소드
반복자 함수 2. find, every, some, reduce (추후 추가)목차find 메소드 find 메소드콜백함수가 요구하는 조건을 만족하는 첫번째 값을 하나 반환합니다. 없으면 undefined를 반환합니다. 1arr.find(callback[, thisArg]) 예: 특정 프로퍼티, 값을 가지는 첫번재 객체를 찾는 함수를 완성해보세요.주어진 문제
JavaScript Array - forEach, map, filter 내장 메소드
반복자 함수 1. forEach, map, filter목차forEach 메소드map 메소드filter 메소드 forEach 메소드배열의 각 요소에 대해 한번씩 순서대로 콜백함수를 실행합니다. 1arr.forEach(callback[, thisArg]) callback 함수 : 배열의 각 요소에 대해 실행할 함수로 다음 세 가지 인수를 가집니다.1) cur
스터디그룹모임 - JavaScript의 this
이번주에 우리 스터디모임에서 나눈 주제는 크로스브라우징, JS ES6 - Arrow Function, 원시데이터와 참조데이터였습니다.Arrow Function에 대해서는 제가 발표자였는데, JavaScript의 this에 대해 좀 더 자세하게 다뤄야할 필요성이 느껴지더라고요. 잘 알고있다고 생각했는데 클래스, 인스턴스, 메소드 등의 this에 대해서 정
JavaScript ES6 문법 - class
Class 클래스자바스크립트 ES5 문법으로 class를 만들기 위해서 prototype 상속을 이용하는 방법을 사용하였습니다. 해당 포스팅 바로가기ES6 문법에서는 class 문법을 지원함으로서 이를 좀 더 쉽게 만들게 해줍니다. ES5 와 ES6 비교1_ ES5123456789101112131415// Person 클래스. 생성자 함수var Perso
JavaScript 객체지향 - 캡슐화
캡슐화 (encapsulation)객체의 중요한 프로퍼티(데이터)와 메소드(기능)를 외부에서 접근하지 못하게 하는 작업을 말합니다. 일반적으로 객체 내부의 프로퍼티, 메소드는 1)객체 내부, 2)객체 외부, 3)자식 객체에서 접근해 사용합니다. ES5 소스 예시1234567891011121314151617181920// MyParent 클래스functio
JavaScript 객체지향 - 추상화
추상화 (abstraction)객체의 프로퍼티와 메소드를 정의 하는 작업으로, 이름을 작성하는 선언 부분만 만들 뿐 구현부분은 작업하지 않습니다. 자바스크립트에서는 인터페이스와 추상클래스를 제공하지 않기 때문에 클래스만을 이용해서 추상화 작업을 해야합니다. 예: 이미지 슬라이더 추상화 하기 ImgSlider 프로퍼티 현재 선택된 이미지 인덱스
스터디그룹모임 - Event(이벤트)
설연휴로 인해 2주만에 만난 스터디모임 ^^ 알차고 재밋었던 시간이었습니다~이번엔 이벤트 버블링, 이벤트 객체, 이벤트 위임, ES6, 알고리즘 등을 나눴는데,그 중 이벤트에 대해 포스팅해보려합니다. 이벤트 버블링 (Event Bubbling)이벤트 버블링이란 자식노드에서 부모노드 순으로 이벤트가 전파되는 것으로, 반대방향으로 전파되는 것은 캡쳐링이라
JavaScript ES6 문법 - Strings 문자열표기법 등
Template StringsES5에서 문자열을 변수, 함수와 함께 쓰고자 할 때 +기호를 씁니다.12345678910let firstName = 'John';let lastName = 'Smith';const yearOfBirth = 1990;function calcAge(year) { return 2017
JavaScript ES6 문법 - Blocks and IIFEs
Blocks and IIFEsES5 이하에서는 var 변수 선언을 하면 전역변수가 되기 때문에 전역을 오염시키지 않기 위해 IIFE패턴을 썼습니다.1234// ES5(function(){ var a = 5;})(); 그러나 ES6에서 제공하는 let, const 선언은 지역변수이므로, 블록으로 묶어주기만 하면 IIFE패턴을 쓰지 않고도
JavaScript 객체지향 프로그래밍
스터디 모임 때 객체지향 프로그래밍의 개념에 대해 이야기를 나누었습니다.진행할 프로젝트에서 객체지향으로 짜보고 싶어 좀 더 깊게 공부해보려합니다. 객체지향 프로그래밍(Object-Oriented Programming)절차지향 프로그래밍과 비교해 보자절차지향은 문제를 순차적으로 호출해 처리하는 방식으로, 함수 단위 코딩을 하는 경우가 대표적인 예입니다.
스터디그룹모임 - JavaScript 성능향상을 위한 노력, OOP(객체지향 프로그래밍)
스터디를 이어오고 있었는데 이제는 1주에 한번 서로 깨달은 점을 나누고,궁금한 것은 공부해와서 다음에 나누기로 하였습니다.이번주에 서로 나눈 내용은 JS성능향상을 위한 코드 리펙토링과 객체지향! 1. JavaScript 성능향상을 위한 고려조건문의 경우 if else보다는 아닐경우 빠져나오는 경우를 먼저 설정하면 성능에 좋다고 합니다.아래 예의 경우
JavaScript - Module Patton
이번에 진행할 Free Project에서 Module Patton으로 Module을 구현하려고 합니다. Module : 모듈은 application’s architecture(구조)의 필수 요소이며 일반적으로 프로젝트의 코드 단위를 명확하게 분리하고 구성하는 데 도움이됩니다. 자바스크립트에서는 모듈 구현을 위한 몇가지 방법이 있습니다.The Modul
JavaScript String 프로퍼티, 메소드
Free Project를 진행하면서 자주 사용하는 프로퍼티, 메소드 등을 계속 추가할 예정입니다. :) 목차charAt 메소드replace 메소드repeat 메소드slice 메소드substring 메소드 charAt 메소드문자열에서 특정 위치의 문자를 구할 수 있습니다. 1str.charAt(index) index : 문자열의 위치 인덱스 값으로 0부
Web DOM API - Element
Free Project를 진행하면서 자주 사용하는 Element Web API를 계속 추가할 예정입니다. :) element.classList요소의 class속성 목록을 반환합니다. 브라우저 호환 : IE10이상add : 요소의 클래스 목록에 클래스 추가remove : 요소의 클래스 목록에서 클래스 삭제toggle : 요소의 클래스 목록에서 특정 클
JavaScript Array 프로퍼티, 메소드
Free Project를 진행하면서 자주 사용하는 프로퍼티, 메소드 등을 계속 추가할 예정입니다. :) 목차length 프로퍼티indexOf 메소드splice 메소드 length 프로퍼티배열의 원소 개수를 나타냅니다. 만약에 배열 index에 임의대로 값을 저장하면 length는 가장 큰 index를 기준으로 정해집니다.123456var arr = [
Networking - AJAX 비동기 통신 기술
AJAX(Asynchronous Javascript And XML) 개념Javascript가 XML을 만나면서 비동기 통신을 한다. -> 요새는 XML보다는 JSON으로 하지만 이름은 그대로 사용하고 있다고 하네요. ^^XML은 자유롭게 마음대로 정할 수 있지만 무겁고 구조화가 어렵다는 단점이 있습니다. 이를 해결하기위해 JSON 등장! 비동기 통신
DOM(Document Object Model)
JavaScript를 배운다는 건…core(문법), core library(기본 제공 함수 등), BOM, DOM이 중 DOM에 대해 정리해보겠습니다. DOM(Document Object Model)노드, 스타일, 속성, 이벤트, 위치 및 크기 등을 다룰 수 있는 다양한 기능이 포함되어 있습니다.※ 노드 : HTML 웹페이지 구성요소의 가장 작은 단위
BOM(Brower Object Model)
JavaScript를 배운다는 건…core(문법), core library(기본 제공 함수 등), BOM, DOM이 중 BOM에 대해 정리해보겠습니다. BOM(Brower Object Model)웹 브라우저를 구성하는 객체들이 포함되어 있습니다. Window 객체Javascript 실행시 가장 상위에 존재하는 객체입니다.웹 페이지의 정보에 접근하거나
JavaScript ES6 문법 - Arrow functions
Arrow functions(애로우 펑션, 화살표 함수 표현식)화살표 함수 표현식(arrow function expression)은 함수 표현식(function expression)에 비해 구문이 짧으며(예제 1.)this, arguments, super 또는 new.target을 자체 바인딩하지 않습니다(예제 2.). 메소드가 아닌 함수에 가장 적합하며
JavaScript ES6 문법 - 변수선언 let, const
ES6 변수, 상수 선언 키워드let : 정의된 블록내에서만 존재하는 변수 선언 (지역 변수)const : 위와 동일, 상수(변하지 않는 값) 선언 var : ES6문법 이전부터 사용하던 변수 선언 (전역 변수) 1234var x = 'global'; // 전역 변수let y = 'global'; // 지역 변수cons
SASS Nesting(중첩)
해당 코드가 있는 Github 바로가기01해당 코드가 있는 Github 바로가기02 Nesting(중첩)중첩은 반복을 제거하고 스타일링에 분명한 DOM관계를 보여줌으로서 코드를 효율적으로 만듭니다. 확장자가 SCSS, SASS 일 때 문법이 다른데,SCSS파일의 경우는 기존의 CSS의 문법과 동일합니다.123456.parent { color:
SASS Variables (변수)
해당 코드가 있는 Github 바로가기01해당 코드가 있는 Github 바로가기02 CSS로 style 코드를 작성하다보면 반복사용 하는 것들을 한번에 관리하면 좋겠다는 생각을 하게 됩니다.이럴 때 사용하면 좋을 문법이 sass의 변수입니다. 나중엔 mixin, 함수 개념등을 알면 좋은데 우선 변수만 잘 써도 일이 확 줄어드는 것을 알 수 있습니다. 조으
2016 정보접근성 기술 컨퍼런스 & WAI-ARIA
12월 9일 금요일. UN 인권의 날 기념 - 2016 정보접근성 기술 컨퍼런스에 다녀왔습니다.집에서 먼 거리에 있어 상암쪽은 살면서 두번째네요~결론은.. 눈 비비며 먼 길 다녀온 보람이 있었다는 것입니다. ^^ 특히 우리 프론트엔드 개발스쿨의 야무쌤 파트였던 WAI-ARIA부분은 예전부터 알고 싶던 기술이었기 때문에 더 귀를 쫑끗하며 들었습니다.한국 웹
SASS Satting
해당 코드가 있는 Github 바로가기 CSS Preprocessor 인 SASS. 웹 스타일링을 담당하는 CSS를 좀 더 똘똘하게 사용하고 유지보수를 좋게하는 프리프로세서입니다. 설치 및 Sass to CSSSass to CSS를 위해 node sass를 실행합니다. 추후엔 Gulp같은 자동화툴로 관리하도록 합니다. 다운로드 및 설치git bash :
JavaScript Class (ES5)
완전정복 스터디 3권(웹동네)으로 공부 + 코드 리펙토링 :)해당 코드가 있는 Github 바로가기 Class함수가 특정 알고리즘을 포장하는 기술이라면, 클래스는 연관있는 변수와 함수만을 포장하는 기술입니다.클래스로 포장하는 이유는 객체 단위로 코드를 그룹화 하고 재사용하기 위함입니다. ES6에서는 class가 생겼지만 아직 이전 버전으로 개발을 많이 하