thumbnail

자바스크립트 개발자가 알아야 하는 33가지 개념 (1 ~ 19)

자바스크립트 개발자가 알아야 하는 33가지 개념 1. 호출 스택 (Call Stack) 자바스크립트 엔진 가장 대중적인 자바스크립트의 엔진은 구글의 V8 엔진입니다. V8 엔진은 크롬과 노드 안에서 동작합니다. 자바스크립트 엔진은 다음과 같은 두 가지 주요 구...

2019년 11월 21일0개의 댓글

[ Vue.js ] - Hacker News 2

동적 라우터 image.png 유저의 아이디를 클릭하면 해당하는 유저의 정보가 나타나도록 라우터를 설정하려고 한다. routes/index.js image.png 유저 데이터를 가져와 화면에 뿌리는 동적 라우팅을 생성해봤다....

2019년 11월 18일0개의 댓글

[ Vue.js ] - Hacker News

프로젝트 셋팅 대표적인 IT 지식 관련 뉴스 그룹 서비스인Hacker news API를 연동한 Vue.js 프로젝트를 만들어 보자. 해커 뉴스 해커뉴스는 유명투자가이자 ‘해커와 화가’(한빛미디어 출판, 임백준 번역)의 저자, 그리고 스타트업 기업 대상 인큐베이터...

2019년 11월 17일0개의 댓글

[ Node.js ] - Middleware

미들웨어는 익스프레스의 핵심이다. 요청과 응답의 중간(middle, 미들)에 위치하여 미들웨어 라고 부른다. 라우터와 에러 핸들러 또한 미들웨어의 일종이므로 미들웨어가 익스프레스의 전부라고 해도 과언이 아니다 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고,...

2019년 11월 15일0개의 댓글

[ Node.js ] - Restful API

Express Express를 사용해서 RESTful API를 만들어 보자 익스프레스는 노드를 만든 패키지의 일종으로 웹 서버를 만들기 위한 것이라고 볼수 있습니다. 클라이언트와 서버는 HTTP라는 규칙을 이용해서 서로 통신하게 됩니다. 웹에서도 이 HTTP를 이...

2019년 11월 13일0개의 댓글

[ Vue.js ] - Component & Refs

image.png 컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특...

2019년 11월 12일0개의 댓글

[ Vue.js ] - Multiple Instance & v-for

v-for v-for지시문을 사용하여 배열을 기반으로 항목 목록을 렌더링 할 수 있다. index.html image.png two 객체에서 one.title을 변형시키는 것도 가능하고 객체의 밖에서 값을 바꿔도 바뀌게 된다....

2019년 11월 12일0개의 댓글

[ Vue.js ] - Dynamic Css & Conditionals

Dynamic Css 데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 일반적으로 사용됩니다. 이 두 속성은 v-bind를 사용하여 처리할 수 있습니다. 우리는 표현식으로 최종 문자열을 계산하면 됩니다. 그러나 문자열 연결에 간섭하는 것은 짜증나...

2019년 11월 11일0개의 댓글

[ vue.js ] - Event & Input Data Binding

Event Modifiers v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다. index.html image.png...

2019년 11월 10일0개의 댓글

[ Vue.js ]

프론트엔드 프레임워크인 Vue.js 공부를 시작해보자. 그동안 React & Redux를 사용한 프로젝트들을 만들면서 리액트에 어느정도 익숙해져 있는데, 많이 사용하는 프레임워크 중 하나인 뷰는 어떤 장점이 있는지 리액트와의 차이점을 느껴보고 싶다. 리액트에 비교적 ...

2019년 11월 9일0개의 댓글

[ Learning Javascript ] - 노드

노드는 자바스크립트를 서버에서 사용할 목적으로 만들어졌고, 보통 다른 언어에 맡겨지던 작업을 자바스크립트로 가능하게 만들었다는 의미가 있다. 웹 개발자에게는 언어의 선택 이상의 의미가 있다. 서버에서 자바스크립트를 쓸 수 있게 된 것은, 사고방식을 바꿀 필요 없이 일...

2019년 11월 7일0개의 댓글

Webpack

Module 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태 분리되어 있는 다른 파일의 코드를 참조해 재사용성을 높힌다. + 코드의 재사용성이 증가한다 + 코드의 관리가 편해진다 + 코드를 모듈화하는 기준이 명확해진다 모듈의 구조 + Common...

2019년 10월 30일0개의 댓글

Jquery

jquery

2019년 10월 28일0개의 댓글
[ Data Visualizing - D3.js ] Tree Chart 만들기 Thumbnail

[ Data Visualizing - D3.js ] Tree Chart 만들기

기본구조 나의 스킬 스택을 Data로 활용해 Tree 구조의 차트로 만들어 보자 image.png Meterialize를 사용해 기본적인 앱의 틀을 잡아주고 모달을 띄워 데이터를 추가할 수 있게 한다. Firebase Data Firebase에 데이터를 저장해 실...

2019년 10월 22일0개의 댓글

데이터 관계의 통찰

마케팅의 경우 사용자의 반응을 즉각적으로 확인하고, 그에 따른 적절한 행동을 취할 때 마케팅 효율을 높일 수 있습니다. 시각화는 이런 통찰을 가능하게 합니다. 통찰은 단순한 과정이 아니라 내부 요인 간의 관계를 통해 대상들 사이에 숨겨진 관계를 찾는 것을 의미합니다. ...

2019년 10월 22일0개의 댓글
[ Data Visualizing - D3.js ] Interactive Line Chart 만들기 Thumbnail

[ Data Visualizing - D3.js ] Interactive Line Chart 만들기

기본 셋팅 - 각각의 버튼을 클릭하면 해당하는 데이터에 따라 다른 차트를 보여주려고 한다. html에는 버튼과 데이터를 추가할 input, 차트가 그려지는 canvas로 구성했고, 기본적인 레이아웃은 meterialize로 스타일링을 해줬다. Firebase 연동...

2019년 10월 21일2개의 댓글

[ Goplan ] - Firebase 호스팅 연결

완성한 리엑트 프로젝트를 라이브 서버에 연결하기위한 Firebase 호스팅 연결 방법을 배워보고 싶어서 아래 블로들을 참조해서 연동했습니다. 정리를 잘 해두셔서 링크만 연결해 둡니다. 참조 - https://forest71.tistory.com/169 http...

2019년 10월 20일0개의 댓글

[ Data Visualizing - D3.js ] Data Hierarchy

데이터 계층구조 image.png Data 계급 부모 관계를 포함하는 구조화된 데이터 다른 말로 하면 서열이 되는 것. image.png 데이터에서 이와 같은 계층 구조를 가질 때, 구조에서 다른 것들을 노드라고 부른다. 맨 위에 있는 것은 루트 노드라고 불린...

2019년 10월 18일0개의 댓글

[ Learning Javascript ] - 브라우저의 자바스크립트

자바스크립트는 원래 브라우저 스크립트 언어로 시작해, 이제는 그 역할을 거의 독점하고 있다. 브라우저에서 자바스크립트를 사용할 때 알아야 하는 API가 있드며 브라우저 개발에 중요한 핵심 개념을 알아보자. 문서 객체 모델 DOM, 즉 문서 객체 모델은 HTML 문서...

2019년 10월 18일0개의 댓글

[ Goplan ] - Redux & Firebase Authentication

사용자 인증 Firebase Authentication 에서 테스트용 사용자를 추가한다. image.png 사용사 인증 action을 생성할 authActions.js 파일을 작성 store/ authActions.js image.png...

2019년 10월 17일0개의 댓글