2020년 03월 06일
jQuery는 서버로부터의 Ajax 데이터를 처리하기 위해 jqXHR 이라는 객체를 제공합니다. jQuery로 데이터 로드하기 메서드를 사용해 요소에 HTML 코드를 로드합니다. Ajax 요청 상세 제어하기 메서드를 사용하면 모든 Ajax 요청을…
2020년 03월 05일
Ajax (Async Javascript And XML)는 웹 페이지에서 새로운 데이터를 보여주려고 할 때 웹페이지 전체를 새로고침 하지 않고, 보여주고자 하는 데이터가 포함된 페이지의 일부 만을 로드 하기 위한 기법입니다. Ajax는 비동기 처리 …
객체를 이용하면 사용자들의 위치 정보를 웹 사이트에서 사용할 수 있습니다. (IE9 이상). 웹브라우저는 사용자의 위치를 결정하기 위해 IP주소, 무선 네트워크, 셀룰러 데이터, GPS 등을 활용하게 되며 사용자의 브라우저 설정에 따라 개발자가 원하…
SPA과 같이 Ajax를 많이 사용하는 웹 앱의 경우 URL이 자동으로 웹 브라우저의 히스토리에 반영되지 않습니다. 이러한 경우 SPA의 히스토리 및 URL관리를 위해 history API를 사용하게 됩니다. History API history 객체…
웹 스토리지 API는 브라우저에 데이터 저장하고 조회하기 위해 사용되며, localStorage 및 sessionStorage가 있습니다. localStorage 및 sessionStorage는 html5에 추가된 데이터 저장 api이며 이전에는 쿠…
브라우저 객체 모델 (Brower Object Model)은 웹 브라우저에 구현된 JavaScript 객체 모델을 의미하며 객체의 프로퍼티로 조회할 수 있습니다. 여기서 객체는 현재 웹 브라우저의 창이나 탭을 표현하기 위한 객체들이며, 웹 브라우…
자바스크립트에서 이벤트는 다양한 상황에서 발생합니다. 마우스 클릭, 키보드 프레스 이벤트 뿐 아니라, 페이지 로딩, 스크롤, 요소 선택 등 다양한 상황에서 이벤트가 발생하며, 이러한 이벤트를 다루어 사용자와 인터랙션하는 웹을 만드는 것이 웹브라우저에…
jQuery Animation
jQuery Event 처리 on() 메서드를 통해 모든 이벤트를 처리할 수 있다. 같은 이벤트 핸들러 메서드는 사용을 자제해야 한다.
jQuery 노드 수정 (요소 변경) 노드 Manipulation 속성 조작하기 (attribute & style)
jQuery 위치 및 크기 조작하기 요소의 위치 및 크기 윈도우 및 마우스 커서의 위치 및 크기
jQuery 노드 찾기 (요소 탐색) jQuery 셀렉터 필터 속성옵션 필터 폼 요소 노드 Traversing 요소 필터링
jQuery 시작하기 다른 라이브러리와의 충돌방지
jQuery 유틸리티 문법 jQuery 플러그인 문법
2020년 03월 02일
DOM에 요소의 속성 - class, attribute 등을 추가하거나 제거하는 방법을 확인해 보겠습니다. 요소의 속성을 조작함으로써 문서의 콘텐츠 및 디자인을 동적으로 변경할 수 있습니다. 더불어 HTML5에 추가된 data 속성의 조작에 대해서도…
2020년 02월 28일
CSS Box Model과 관련된 , , , 속성을 확인해 보겠습니다. box-sizing 속성은 기본적인 CSS box model을 대체하기 위해 사용하는 속성입니다. box model은 요소의 너비와 높이를 계산하는 데에 사용되며, 기본적으로…
css size matter CSS에서 텍스트의 크기, 박스의 크기 등을 지정하기 위한 사이즈는 , , 등의 단위를 이용합니다. 조금씩 헷갈리는 각각의 단위의 차이점과 사용법을 간단하게 확인해 보겠습니다. px 픽셀 (pixel, px)은 폰트와 …
css에서 웹문서의 레이아웃을 지정하고 수정하기 위한 중요한 속성인 position, display, float 속성에 대해 확인해 봅니다. position 엘리먼트에 CSS 속성으로 position을 지정하여 속성의 상대적, 절대적 위치를 지정할 …
ES6에서는 OOP 스타일의 클래스를 정의하여 사용할 수 있습니다. 형식은 다른 프로그래밍 언어의 클래스 정의와 유사하여 다른 프로그래밍 언어의 경험이 있다면 금방 이해할 수 있습니다. 클래스 정의 상속 Static 멤버 Getter / Setter…
ES6에 도입된 새로운 데이터 타입인 Set, Map에 대해 알아봅니다. Set - 집합 Map - 키-값 쌍
문서 객체 모델 (Document Object Model) DOM은 현재 웹페이지의 문서 모델을 의미합니다. 사용자가 웹페이지를 통해 보게 되는 콘텐츠에 접근하거나 변경할 수 있을 뿐 아니라, 사용자의 동작에 반응할 수도 있게됩니다. DOM의 최상위…
DOM에 텍스트 및 마크업 요소를 추가하거나 제거하는 방법을 확인해 봅니다. 요소 조회 선택한 요소의 컨텐츠를 조회할 수 있는 두가지 프로퍼티가 있습니다. textContent - 선택한 요소에서 HTML 요소를 제거한 순수한 텍스트 데이터의 값 i…
2020년 02월 27일
LESS는 Sass와 더불어 많이 사용되는 CSS Pre Processor의 일종입니다. 최근에는 sass의 일종인 scss가 가장 폭넓게 사용되지만 여전히 레거시 코드에서는 꾸준히 사용되고 있습니다. http://lesscss.org/ 변수 기호…
SCSS 디렉티브는 으로 시작하는 명령문으로, 코드 내부의 분기, 반복, 믹스인 등의 제어에 사용되는 강력한 기능입니다. 조건분기 - @if…@else if…@else 리스트 반복 - @each 조건 반복 - @while 결과 스타일 정의 재사용 …
SCSS에서는 확장 스크립트를 통해 변수, 연산자, 함수등을 사용할 수 있습니다. SCSS의 확장 스크립트를 사용하면 css를 프로그래밍적으로 관리할 수 있습니다. 변수 scss 변수는 과 같이 로 시작하는 변수명을 사용해 정의할 수 있습니다. 폰…
Sass는 CSS preprocessor 의 하나로 현재 가장 폭넓게 사용되는 CSS Preprocessor입니다. Sass의 초창기 문법은 css와 판이합니다. css의 대괄호 와 세미콜론 을 사용하지 않아 문법적으로는 간소하지만 CSS에 익숙한…
HTML에서 특수문자를 사용하기 위해서는 아래와 같이 표현합니다. html 코드 내부에서 특수문자의 시작과 끝을 알리기 위해서는 , 를 사용합니다. - 특수 문자를 표현하기 위한 시작 - 특수 문자를 표현하고 끝마침 이와는 별도로, 기호는 A…
맥의 기본 터미널을 대체하는 iTerm2와 기본 shell 환경인 bash를 대체하는 zs...
터미널 shell 환경의 사용성을 크게 개선해주는 zsh와 zsh를 더욱 편하게 사용하도록...
2019년 03월 14일
사용자 비밀번호 보관 문제나 암호화된 데이터 전송 등, 웹 애플리케이션에서 암호화는 매우 중요한 숙제입니다. 노드에서는 암호화를 위해 모듈을 제공합니다. 이번 장에서는 crypto 모듈에 대한 사용법을 알아볼 예정입니다. 암호화 기법에 대한 자세한…
path - 파일 및 폴더 경로 핸들링 path 모듈은 파일 및 디렉토리 경로의 작업을 위한 유틸리티를 제공합니다. 파일의 경로를 읽어올 경우 운영체제 별로 경로의 정보가 다릅니다. Windows 운영체제와 POSIX 타입의 운영체제들은 서로 파일…
URL 주소는 아래와 같은 체계로 분리할 수 있습니다. 웹 애플리케이션 개발을 위해서는 이러한 url과 query string 의 처리가 필요합니다. 노드에는 주소쳬계 조작을 지원하기 위해 url 모듈과 querystring 모듈을 제공합니다. U…
노드에서 모듈을 활용하는 방법은 크게 세 가지가 있습니다. 노드에서 자체적으로 제공하는 코어모듈을 사용하는 방법과, 사용자가 직접 모듈을 작성해서 사용하는 방법, 그리고 npm 패키지 저장소에서 다른 사람이 만들어 놓은 모듈을 다운로드 받아서 사용하…
Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. 위 문장은 Node.js의 공식 웹사이트의 메인 페이지에 적혀있는 Node.js에 대한 소개 문장입니다. 공식 웹사이트에 사용된 문장인 만큼 …
모듈은 자바스크립트 패키지를 만들고 자바스크립트 코드를 네임스페이스로 구분하는 메커니즘입니다. 모듈을 이용하면 특정한 기능을 하는 함수나 객체를 패키지화 해서 재사용할 수 있도록 할 수 있으며, 기능에 따라 코드를 분리하여 프로젝트를 구조화 할 수 …
노드의 설치가 완료되었으면 기본적인 사용법을 확인해 볼 차례입니다. 우선 노드 REPL을 사용해 커맨드라인 창에서 간단하게 코드를 테스트 해보며, 실제 자바스크립트 파일을 작성하고 작성한 파일을 실행해보겠습니다. Node.js REPL REPL은 R…
노드는 실행중인 프로그램 어디에서든지 접근할 수 있는 전역 변수 및 전역 객체를 제공합니다. , 등이 이러한 전역 객체에 해당하며 모듈을 불러오지 않고도 사용할 수 있습니다. 이것은 웹 브라우저에서 지원하는 전역 객체인 , 객체 등과 비슷합니다.…
Node.js 개발환경을 설정하기 위해서는 우선 Node.js를 설치해야 합니다. 그리고 코드 작성을 위한 에디터가 필요합니다. 코드 에디터로는 어떠한 것을 사용해도 상관 없습니다. 만약 사용하고 있는 코드 에디터가 없다면 비주얼 스튜디오 코드(Vi…
2019년 03월 11일
자바스크립트에서 모듈을 이용하면 전역 네임 스페이스 오염없이 값을 내보내고 가져올 수 있습니다. CommonJS 모듈 자바스크립트에서는 CommonJS 모듈 문법을 주로 사용했습니다. 이 방식은 모듈을 불러오기 위해 를 사용하고, 모듈을 내보기위 …
비구조화 할당 혹은 구조분해 할당을 이용하면 손쉽게 배열, 객체에서 데이터를 추출하여 변수에 할당할 수 있습니다. ES5 기존의 JavaScript에서 객체의 값을 각각 할당하려면 아래와 같이 합니다. 객체 비구조화 할당 이때 ES6의 비구조화 할당…
2018년 10월 28일
ES6 Object에 추가된 기능 ES6에서 추가된 객체의 기능들을 확인해보겠습니다. 프로퍼티 단축 구문 객체의 프로퍼티를 단순하게 표기할 수 있습니다. 예를 들어 외부 변수명을 이용해 객체에 데이터를 전달할 경우 아래와 같이 간략하게 표현할 수 있…
2018년 10월 27일
ES6에서 함수를 편리하게 사용할 수 있는 여러 기능이 추가되었습니다. 함수 파라미터의 기본값을 지정할 수 있으며, 레스트 파라미터를 이용해 기존의 arguments를 대신해 편리하게 가변 인수를 사용할 수 있습니다. 그리고 화살표 함수를 사용해 함…
2018년 10월 26일
ES2015에서 부터 정수 리터럴을 이용해 8진수와 2진수를 표현할 수 있게 되었습니다. 그리고 Symbol을 사용해 실행 컨텍스트 내에서 고유하고 불변인 값을 정의할 수 있게 되었습니다. 숫자 기존 JavaScript에서는 10진수와 16진수의 표…
ES2015에서 문자열 조작을 위한 편리한 기능이 많이 추가되었습니다. 백틱을 이용한 템플릿 리터럴과 문자열 보간은 문자열을 쉽게 다룰 수 있도록 해주는 아주 편리한 기능입니다. 그리고 String 객체에도 문자열을 쉽게 탐색할 수 있는 메서드가 추…
와 은 ES6에 새롭게 추가된 변수 선언자입니다. 와 은 를 사용한 변수 선언과는 달리 블록 수준의 유효범위를 갖는 변수를 선언합니다. 기존의 를 이용하여 변수를 선언할 경우 변수는 함수 스코프를 가지는 반면, 블록 스코프를 가지는 과 를 이용해 변…
2018년 09월 02일
웹페이지에서 자바스크립트 코드 실행하기 웹페이지에 자바스크립트 코드를 삽입하고 실행하기 위해서는 HTML 문서 내부에서 태그를 이용해야 합니다. script 태그를 사용하는 방식에는 인라인 스크립트 를 직접 작성하는 방식과 외부 스크립트를 링크하…
2018년 08월 13일
JavaScript JSON JSON(JavaScript Object Notation)은 자바스크립트 객체를 문자열로 표현하는 데이터 포맷입니다. 자바스크립트 객체 리터럴과 유사하지만 객체가 아닌 문자열일 뿐이며, 이를 이용해 다른 도메인과 데이터를…
2018년 08월 12일
문자열 조작은 프로그래밍에서 필수적인 요소입니다. 특히 웹 애플리케이션의 경우 문자열의 비중이 상대적으로 높고, 그만큼 문자열을 다루는 일이 많으므로 반드시 이해해야 합니다. String 객체 String 객체에는 문자열을 처리하기 위한 다양한 프로…
2018년 08월 11일
Date 생성자 자바스크립트에서는 Date 객체를 이용해 날짜와 시간을 표현할 수 있습니다. Date 객체는 Date 생성자를 이용해 생성합니다. 날짜 (Date) 위 코드가 실행되면 실행된 시점의 날짜와 시간 정보를 담은 객체가 생성되어 변수에 저…
자바스크립트에서는 복잡한 수학 연산을 위해 Math 객체를 사용할 수 있습니다. Math 객체의 여러 프로퍼티와 메서드를 이용해 복잡한 수학연산을 진행하는데, 예를 들어 원주율을 이용하기 이해서는 Math 객체에 상수로 정의된 프로퍼티를 이용할 수…
2018년 06월 29일
자바스크립트 배열이 제공하는 map, filter, forEach, reduce 메서드는 배열 조작을 위해 폭넓게 사용되는 메서드입니다. 이러한 함수들은 함수형 프로그래밍 패러다임으로 더욱 많이 사용되는 추세입니다. map 메서드 Array.prot…
그동안 Windows 환경에서는 Mac의 Homebrew 나 Linux의 apt 와 같은 ...
마크다운은 “존 그루버” 라는 분에 의해 만들어진 텍스트 기반의 마크업 언어로, 쓰기 쉽고 읽기 쉬운 문서를 편하게 작성할 수 있는 방법입니다. 만약 문서의 제목을 표현하고 싶다면 과 같이 문장 앞에 을 하나 추가하는 것 만으로 간단하게 표현됩니…
2018년 06월 28일
자바스크립트 배열 메서드 중 원본 배열은 변경하지 않은체로, 메서드의 반환값으로 새로운 배열을 리턴하는 메서드들을 확인해 보겠습니다. 아무래도 이러한 메서드들이 개발자의 실수를 예방할 수 있기에 선호하는 편입니다. 배열 요소 조작 concat 메서드…
배열(Array)은 JavaScript 객체의 특수한 형태로써, 객체의 프로퍼티명이 0부터 시작해서 순차적으로 커지는 자연수로 이루어진 형태라고 생각할 수 있습니다. 이를 통해 어떠한 데이터를 순차적으로 저장하거나 조회하는데 유용하게 사용됩니다. …
2018년 06월 27일
instanceof 연산자 연산자는 객체의 인스턴스가 해당 객체 생성자의 객체인지 확인할 떄 사용합니다. 위와 같이 사용자가 생성한 객체는 객체 자신과 부모 객체인 객체의 인스턴스라는 것을 확인할 수 있습니다. hasOwnProperty hasO…
객체 (Object) 객체는 우리 주변의 사물(Object)을 상태(State)과 행위(Behavior)로 나타내어 추상화하는 개념입니다. 상태는 어떠한 사물의 특성을 나타내고, 행위는 그 사물이 가지는 행동을 나타내요. 즉, 객체란 사물에 대한 모…
2018년 06월 26일
JavaScript 재귀함수 함수가 함수 내부에서 자기 자신을 호출하는 함수를 재귀 함수 (Recursive function) 라고 부릅니다. 이러한 재귀 함수는 재귀 호출을 이용해 간단하게 문제를 해결할 수 있는 특정 경우에 사용되며, 가장 많이 …
Javascript에서 함수는 일급 객체입니다. 따라서 함수 자체를 다른 함수의 파라미터로 넘길 수 있고, 넘겨받은 함수를 언제 실행할지 결정할 수도 있습니다. 이렇게 다른 함수에 인수로 넘겨지는 함수를 콜백함수 (Callback Function) …
JavaScript Closure 클로저는 자바스크립트가 가진 강력한 기능으로, 특정 변수를 외부에 노출시키지 않은 체로 변수의 상태를 유지할 수 있습니다. 일반적으로 함수는 상태를 가지고 있지 않습니다. 함수는 입력값에 따라 동일한 반환값을 가진다…
함수 정의하기 함수 선언문을 통해 선언한 함수는 호이스팅되며, 함수가 해석되는 시점에 메모리에 할당되어 실행됩니다. 함수 표현식 (함수 리터럴)을 사용한 함수는 호이스팅되지 않습니다. 변수만 선언된 상태로, 함수는 실행되는 시점에 변수에 할당됩니다.…
2018년 06월 25일
실행 컨텍스트 (Execution Context) 자바스크립트 해석기는 실행 컨텍스트라는 개념을 사용하여 구문을 해석합니다. 실행 컨텍스트는 코드가 실제로 실행되는 영역을 말하며, 실행 컨텍스트에는 전역 컨텍스트와, 각 함수가 생성한 새로운 실행 컨…
2018년 06월 24일
반복문은 어떠한 조건이 참일 경우 블록 내부의 문장을 반복 실행해요. 자바스크립트의 반복문에는 while문, do…while문, for문 등이 있어요. while 문 while문은 괄호 내의 조건식이 true일 경우 블록 내의 문장을 실행해요. 블록…
2018년 06월 23일
조건문은 어떠한 조건에 따라 논리 구조를 분기시키는 역할을 해요. 표현식의 참 거짓 여부에 따라 어떠한 문장은 실행시키고 어떠한 문장은 건너뛰고 하는거죠. if 문 조건문의 기본은 if 문이에요. if문은 기본적으로 아래처럼 구성되요. if 뒤에 괄…
2018년 06월 22일
자바스크립트의 형변환 프로그래밍을 하다보면 여러가지 경우에 데이터의 타입을 변화시켜야할 경우가 생깁니다. 자바스크립트에서 문자열을 숫자로, 숫자를 문자열로 바꾸는 등의 형을 변화시키는 방법은 크게 두가지가 있는데요. 연산의 결과에 의해 암시적으로 형…
홈브루는 루비 기반으로 만들어진 Mac OS X 용 패키지 관리자 입니다. 패키지 관리자는...
WSL(Windows Subsystem for Linux)은 한글로는 리눅스용 윈도우 하위 시스템 정도로 해석되며, 리눅스의 네이티브 바이너리를 윈도우 환경에서 돌아가도록 만들어낸 시스템입니다. 즉, 윈도우 환경 위에 가상머신없이 리눅스 배포판 버전…
2018년 06월 21일
자바스크립트에서는 값의 조작을 위해 다양한 연산자를 제공해요. REPL에 아래 코드들을 입력해 보면서 연습하세요. 산술 연산자 산술연산자는 이미 몇번 사용해 봤던 연산자죠. 더하기, 빼기, 곱하기, 나누기와 같은 기본적인 사칙연산을 위해 사용했었죠.…
함수 (Function) 함수는 일련의 연관성있는 명령어들을 사용하기 쉽게 포장해 놓은 것이에요. 함수는 보통 믹서기에 비유를 많이해요. 예를들어, 믹서기라는 함수에 당근과 토마토라는 값을 넣으면 당근 토마토 주스라는 결과를 우리에게 돌려주는 라…
자바스크립트에서 원시 자료형(string, number, boolean 등)을 제외한 모든 자료형은 객체 (Object) 라고 하고, 참조 자료형 (Reference Data Type)이라고도 해요. 자바스크립트의 객체의 여러가지 형태로는 객체 (O…
2018년 06월 20일
프로그래밍 언어에서 숫자나 문자열(String) 같은 것들은 자료형(Data type)이라 부릅니다. 자료형, 즉 데이터 타입은 변수에 저장하는 데이터의 종류를 말하며 자바스크립트에서는 데이터 타입을 크게 원시자료형과 참조자료형으로 나눌수 있습니다.…
변수(Variable)은 문자나 숫자와 같은 데이터를 임시로 담아놓기 위해 사용해요. 예를 들어 우리가 원의 지름을 구한다고 생각해봐요. 3.1415926535 라는 숫자와 원의 지름을 곱하면 원둘레가 나오죠. 그런데 원둘레를 구할때마다 매번 3.1…
문자열과 숫자 (string & number) 문자와 숫자는 중요해요. 당장 브라우저 탭을 열고 아무 웹사이트나 들어가 보면 대부분의 내용이 문자와 숫자로 이루어져 있죠. 이러한 숫자나 문자열(String) 같은 것들은 프로그래밍에서 자료형(Data…
2018년 06월 19일
JavaScript의 주석 (Comment) 우리는 이미 자바스크립트에서 숫자나 문자를 작성하는 것을 해봤어요! 심지어 가장 중요한 사칙연산인 더하기도 해봤죠. 이제 우리의 프로그램에 주석을 남기는 방법에 대해 알아볼거에요. 주석은 말 그대로 실행되…
JavaScript 작성하고 실행하기 우리는 Node.js를 설치 했으니 Node.js를 통해 JavaScript 파일을 작성하고 실행하는 법을 알아봅시다. REPL 터미널 우선 작성부터 해보죠. CLI 창에 라고 입력하세요. 그러면 자바스크립트를…
Node.js 설치하기 - Ubuntu 리눅스 배포판은 우분투를 기준으로 설명할 거에요. 사실, 리눅스 쓰시는 분들은 이런 구구절절한 설명들 필요 없죠. Node.js에 대해 조금만 더 알아보죠. Node.js는 크롬의 JavaScript 엔진인 V…
Node.js 설치하기 - Mac OSX Node.js에 대해 조금만 더 알아보죠. Node.js는 크롬의 JavaScript 엔진인 V8엔진에 기반하고 있어요. 구글이 만든 V8엔진을 이용해 자바스크립트를 웹브라우저가 아닌 다른 환경에서 실행되도록…
Node.js 설치하기 - 윈도우 Node.js에 대해 조금만 더 알아보죠. Node.js는 크롬의 JavaScript 엔진인 V8엔진에 기반하고 있어요. 구글이 만든 V8엔진을 이용해 자바스크립트를 웹브라우저가 아닌 다른 환경에서 실행되도록 만들었…
JavaScript는 웹페이지의 여러 요소들을 제어하기 위한 언어로 Mozilla 재단의 Brendan Eich라는 분이 처음으로 만들었어요. 처음에는 웹 브라우저계의 조상님중 하나인 Netscape Navigator에 탑재되어 출시되었어요. 그러…
NVM이란? NVM(Node Version Manager)은 Node.js의 버전을 관리하...
