시각화를 배우고 정리합니다

NPM : package.json 파일 생성하기 package.json 파일을 만드는 방법은 간단하다. 터미널에 npm init을 입력하면된다. npm init 그러면 npm은 몇가지 이에대한 질문은 하게되어있다. 영어 질문은 언제나 당황스럽기마련이다. 다행스럽게도 기본 답변이 함께 제공된다. 특별한 내용이 없다면, 엔터키를 누름으로써 각 질문에 대한 답을 해나갈 수 있다. npm init을 실행하면 위 사진과같은 형태로 몇가지 질문이 나온다. (여기서 name이 'eg1'이라고 나온 이유는, npm init을 실행한 현재 폴더이름이 eg1이기 때문이다. 어느폴더에서 실행하는지에 따라 이름은 달라진다.) name : 이 프로젝트의 이름version : 현재 생성하는 npm 파일의 버전. 이전에 따로 배포..

RxJS - Subject 사용하기 이 글은 xgrommx.github.io의 글을 학습하며 정리한 글입니다. 내용에 문제가 있거나 개선가능한 부분이 있다면 언제든지 연락주세요. Subject class 는 Observable과 Observer를 모두 상속받는다. 즉, Observable이면서 Observer 라는 말이다.Observable에 여러 operator가 있는 것 처럼, Subject에도 여러 operator가 있다. (map, filter, reduce 등).우리는 Subject를 사용하여 모든 observer를 subscribe 할 수 있고, 그 다음 subscribe를 backend data source에 subject할 수 있다. 이러한 방식으로, Subject는 subscriber g..

Javascript ▶ Gulp 설치하기이번 글에서는 (대부분의 경우 아주 간단하지만), 경우에 따라서는 엄청 애를 먹는ㅜㅜ 이 'Gulp'를 설치하는 방법에 대해 정리해보려고 한다. 1. install gulp globally만약 이전에 gulp를 global로 설치한 적이 있다면, 다음 코드로 삭제 후 진행한다. 이는 오래된 버전과 충돌하는 것을 막기 위함이다. npm rm --global gulp 2. 프로젝트 경로로 초기화 npm init 3. gulp를 설치한다 : in your project devDependency npm install --save-dev gulp 4. gulpflle.js를 프로젝트의 root 단계에 생성한다. var gulp = require('gulp'); gulp.ta..

자바스크립트 - 프로토타입이란?(나를 포함하는) 초급 개발자의 경우, 알아야할 것들이 한 두개가 아니다보니, 개발에 바로 쓰여야할 중요한 개념이아니고서야(사실 모르면서 개발에 써본적이 매우 있다.) 그냥 못본척 지나쳐버리는 개념들이 굉장히 많다. 나에게 이 Prototype 개념역시 그 중에 하나이다. 이전까지 대-충 알아왔지만, 한번도 깊게 기술적인 내용을 들여다 본적은 없었기에, 이번 기회를 통해 제대로 정리해보고자 이렇게 글로 정리하고있다.* 그래서, 이 글에서 살펴볼 내용 : 자바스크립트의 '프로토타입' 개념 왜 프로토타입을 알아야 할까?프로토타입 관련 개념이 자바스크립트에서 OOP를 구현하는데 있어 기본 바탕이 되기때문이다. *OOP란, object-oriented programming의 약자로..

▶패럴랙스(parallax)기능과 기술을 구성하는 원리실제 패럴랙스(parallax) 라는 단어는 변경을 의미하는 그리스어 parallaxis 에서 파생된 것이다. 인간의 눈에 가까이 있는 물체일수록 더 큰 시차를 가지고 있다. 이것은 달리말해 가까운물체가 멀리있는 물체보다 더 빠른 속도를 갖는 것처럼 보일 수 있음을 의미하기도한다. 웹페이지의 패럴랙스(parallax)기능은 어떤 원리로 만들어지는가? 웹디자인의 관점에서보면, 이는 가장 일반적으로 오브젝트 또는 배경의 레이어화를 통해 얻을 수 있다. 또한 이것은 웹페이지의 스크롤과 애니메이션의 속도로 깊이에 대한 착시를 이끌어낼 수 있다. 기술으로, 패럴랙스(parallax)효과는 고정된 뷰포트(viewport)에서 화면의 배경이미지 외의 다른 전경 요..

▶자바스크립트 :: Ajax ② - Ajax의 동작방식지난글에서 Ajax의 기본개념과 활용방안, 그리고 동기/비동기 처리모델에 대해서 살펴보았고, 이번글에서는 구체적으로 Ajax가 어떻게 동작하고있는지에대해 살펴보고자 한다. 지난글 : Ajax의 기본개념과 활용방안 [바로가기] Ajax의 동작방식에 대하여 Ajax를 사용할 때 브라우저는 웹 서버에 정보를 요청한다. 그런 후 서버의 응답을 처리하여 페이지에 해당 데이터를 표시한다. 1. 요청 : 브라우저는 서버에 정보를 요청한다. [ 서버의 동작 : 서버는 응답으로 데이터를 전달한다(주로 HTML, XML, JSON형식). ] 2. 응답 : 브라우저는 콘텐츠를 처리하여 페이지에 추가한다. 1. 요청 : 브라우저는 서버에 정보를 요청한다.브라우저는 서버에 ..

▶자바스크립트 :: Ajax ① 개념 및 활용방향 이 글에서는 자바스크립트 라이브러리중 jQuery와 함께 가장 많이 활용되고있는 Ajax에 대해서 살펴보려고한다. 짧게 요약해보면, Ajax는 "전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법"이라고 할 수 있다. 모든 내용을 하나의 글에 담기보다는 여러 글에 나누어 정리해보려고하는데, 이번 글은 그 중 첫 번째글이며, 여기에서는 개념과 활용, 그리고 가장 기본적으로 알아야할 기능의 동작방식에 대해서 살펴볼 것이다. Ajax란 무엇인가 Ajax는 서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법이다. 본래 Ajax는 비동기 요청을 보내는 데 필요한 기술, 즉 Asynchoronou..