takeU

JavaScript Arrow function ( 화살표 함수 ) 익명함수를 화살표 형태로 간략하게 쓸 수 있는 방법 ES6(ES2015)에서 나옴 특징 function 표현에 비해 구문이 짧다 this, arguments, super 등을 바인딩하지 않음 메소드 선언에 사용할 수 없다prototype에 사용할 수 없다 addEventListener 함수의 콜백 함수로 사용할 수 없다 생성자로 사용할 수 없다 항상 익명이다 2번에 추가로 설명을 보태자면 원래 자바스크립트의 this는 함수 호출 패턴에 따라 this에 바인딩되는 객체가 달라진다. Arrow function은 항상 자신을 포함하는 외부 scope에서 this를 받는데 이를 Lexical this라 한다. Arrow function을 사용하면..

JavaScript 문자열 메소드 (String method) 자바스크립트에서 자주 쓰이는 문자열 메소드를 정리 자바스크립트는 문자열을 배열과 같이 사용할 수 있기 때문에 배열과 중복되는 메소드는 제외하고 나머지만 정리 charCodeAt() 주어진 인덱스에 대한 UTF-16 코드를 나타내는 0부터 65535 사이의 정수를 반환 인자 - index ( 0 ~ str.length-1 ) const str = 'abcd'; str.charCodeAt(0); // 97 str.charCodeAt(1); // 98 repeat() 주어진 문자열을 반복하는 메소드 인자 - count const str = 'abc'; str.repeat(2); // 'abcabc' replace() 패턴에 일치하는 일부 또는 모든..

JavaScript 배열 메소드 ( Array method ) 자바스크립트에서 자주 쓰이는 배열 메소드를 정리 Array.isArray() (ES6) 인자에 들어가는 객체가 배열인지 확인할 때 사용 인자 - object Array.isArray({ a: 1, b: 2}) /// false Array.isArray([1,2,3]) //true concat() 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환 인자 - item1, item2, ... const arr = [1,2,3] arr.concat(4,5) // [1,2,3,4,5] arr.concat([4,5]) // [1,2,3,4,5] arr // [1,2,3] 원본이 바뀌지 않음 인자에 배열을 넣으면 배열의 원소 순서대로 들어감..

JavaScript Variable ( 변수 ) JavaScript는 크게 세가지의 변수 선언 방법이 있다. var let const var var는 ES6 이전까지 변수를 선언하는 유일한 방법이었다. 특징으로는 다음과 같다. Function-level scope전역 변수의 남발 for loop 초기화 식에서 사용한 변수를, 외부나 전역에서 참조 가능 중복 선언 가능의도하지 않은 변수값 변경 변수 호이스팅변수가 선언된 위치보다 위에서 참조가 가능 변수 선언시 선언과 초기화가 같이 이뤄짐. 위와 같은 특징 때문에 전역으로 선언되는 변수가 많아지고, 복잡성이 증가되면서 대안으로 ES6 에서 let과 const가 도입되었다. let let은 변수 선언에 사용되며 특징으로는 다음과 같다. Block-level ..

JavaScript 자료형 자바스크립트는 느슨한 타입 (loosely typed) 언어, 혹은 동적 (dynamic) 언어이다. 즉 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다. 또한 그 말은 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다. Data Type 종류 ECMAScript6( ES6, ES2015 ) 기준으로 다음과 같은 자료형이 있다. 기본 자료형 ( Primitive ) Boolean Null Undefined Number String Symbol (ECMAScript 6 에 추가됨) 위의 여섯가지에 객체 자료형까지 합치면 크게 7가지의 자료형이 있다. 기본 자료형 ( Primitive ) 1. Boolean boole..

JavaScript란? 자바스크립트(Javascript)는 1995년 넷스케이프(Netscape) 웹 브라우져에서 웹페이지에 동적인 요소를 구현하기 위해서 발명 되었다. 그 후 많은 다른 웹 브라우져들 또한 이 언어를 탑재하기 시작했고, 그 결과로 현대의 웹 어플리케이션의 구현을 가능하게 만든 언어이다. 이 언어로 인해 웹 어플리케이션에서 더 이상 사용자가 페이지 새로고침 또는 페이지를 새로 불러오지 않고도 웹과 직접적인 연결이 가능하게 되었다. 지금은 웹 페이지를 꾸미는 역할 뿐만 아니라 다양한 환경에서 사용된다. 특징 스크립트 언어 프로토타입 기반 객체 지향 함수형 ECMAScript란? ECMAScript는 자바 스크립트를 이루는 코어(Core) 스크립트 언어로, 웹 환경에서만 호스트 되는 언어가 ..

CSS float과 clearfix 둘을 함께 알아야 사용할 수 있기 때문에, 하나의 글에 같이 정리해보려 함 CSS float float은 뜨다라는 의미이며, element에 부유 속성을 줘 배치할 수 있는 방법 설명 left, right을 사용할 수 있으며 해당 위치에 떠있게 된다. display 속성과 함께 쓰면 display 속성은 무시된다. width, height 설정이 가능하다 float으로 컨텐츠를 띄울 시 다음 내용은 빈자리를 채우려 올라오게 된다. 이러한 현상은 브라우저의 오류로 생겨난 것이고, 이를 해결하는 clearfix는 위의 오류를 해결하기 위한 일종의 버그 해결 방법이다. CSS clearfix clearfix는 네가지 방법이 있으며, 각 방법에 대해 알아보자. 가상 요소 ::..

CSS 정리 CSS란? Cascading Style Sheets HTML 문서를 꾸밀때 사용하는 스타일 시트 언어 CSS 적용방법 Linking Style Sheet ( 외부 스타일 시트 ) 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법 Internal Style Sheet ( 내부 스타일 시트 ) HTML 문서 안의 style 태그 안에 CSS 코드를 넣는 방법 Inline Style Sheet ( 인라인 스타일 시트 ) HTML 태그의 style 속성에 CSS 코드를 넣는 방법 안녕하세요 일반적으로 1번 이외의 방법은 HTML문서 안에 스타일이 들어가 있는 형태인데, 이는 HTML과 CSS 파일의 분리가 되어있지 않으므로 권장하는 방법이 아님. 만약 1, 2, 3번을 동시에 사용 했다면 ..

CSS 중앙정렬 가이드 수평정렬, 수직정렬에 대해 찾아보다가 잘 설명된 페이지가 있어 포스팅 예제 코드는 정확히 필요한 부분만 가져왔기 때문에 폰트,배경 색 같은 코드는 빠져있음 수평정렬 ( horizontally ) 1. inline 요소를 수평 중앙정렬 시 부모 요소에 text-align: center 적용 One Two Three Four 부모 요소인 nav 태그에 text-algin: center를 적용하면 인라인 태그이면서 자식 태그인 a 태그들은 중앙정렬이 된다. 2. block 요소를 수평 중앙정렬 시 block 요소가 한개일 때, 두개 이상일 때를 나누어 알아보자. 2-1. 1개의 block 요소를 수평 중앙정렬 할 때 block 요소는 width 속성을 따로 설정하지 않으면 자동으로 wi..

CSS 변수(variables) SASS로는 변수를 사용해 본 적이 있는데, CSS에서는 직접적으로 사용해 본 기억이 없어서 찾아보고 포스팅 해보려 함 사용법 자바스크립트에서는 변수를 선언할 때 ES5는 var, ES6는 let, const를 사용하는데 CSS 변수를 자바스크립트와 비교해보면 const와 비슷한 역할을 한다고 보면 된다. 굳이 한번 정한 변수의 값을 바꿀 일이 없기 때문. 예시를 통해 이해해보면, 페이지 전역에서 가져다 쓸 수 있는 #FFC600이란 색상값을 base 라는 이름으로 변수화 하고 싶다면 아래와 같이 작성하면 된다. :root { --base: #FFC600; } :root는 HTML 요소 중 가장 상위 요소에 적용한다는 뜻이고, --base는 base라는 CSS 변수를 생성..