profile
Front-end 개발 공부일지
post-thumbnail

TypeScript - tutorial

Setting tsconfig.json target: 컴파일된 코드가 어떤 환경에서 실행될 지 정의합니다. 예를들어서 화살표 함수를 사용하고 target 을 es5 로 한다면 일반 function 키워드를 사용하는 함수로 변환을 해줍니다. 하지만 이를 es6 로 설

2020년 5월 2일
·
0개의 댓글

MarketReport

[DMC] 2019 국내외 디지털 광고 시장 분석 및 전망 광고 시장의 흐름 전 세계 광고비 성장, 광고비 점유율 1위(38.5%)는 디지털 광고 시장 전체 광고 시장 2019 전 세계 총 광고비는 전년 대비 3.6% 성장이 예견됨. 이는 2018년 성장률에 다소 못 미치는 수준, 여기에는 중국의 저성장, 일본의 소비세율 인상, 중국과 미국의 무역 ...

2020년 1월 23일
·
0개의 댓글

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

자바스크립트 개발자가 알아야 하는 33가지 개념 1. 호출 스택 (Call Stack) 자바스크립트 엔진 가장 대중적인 자바스크립트의 엔진은 구글의 V8 엔진입니다. V8 엔진은 크롬과 노드 안에서 동작합니다. 자바스크립트 엔진은 다음과 같은 두 가지 주요 구성 요소로 이루어져 있습니다. image.png 메모리 힙(Memory Heap) — 객...

2019년 11월 21일
·
0개의 댓글

33 Javascript Concepts

자바스크립트 개발자가 알아야 하는 33가지 개념 1. 호출 스택 (Call Stack) 자바스크립트 엔진 가장 대중적인 자바스크립트의 엔진은 구글의 V8 엔진입니다. V8 엔진은 크롬과 노드 안에서 동작합니다. 자바스크립트 엔진은 다음과 같은 두 가지 주요 구성 요소로 이루어져 있습니다. image.png 메모리 힙(Memory Heap) — 객...

2019년 11월 19일
·
0개의 댓글

[ Vue.js ] - Hacker News 2

동적 라우터 image.png 유저의 아이디를 클릭하면 해당하는 유저의 정보가 나타나도록 라우터를 설정하려고 한다. routes/index.js NewsView.vue router-link를 사용해서 path에 /user + 유저 아이디를 적용시키면 UserVuew에서 해당하는 유저의 정보를 가져올 수 있다. image.png 개발자 도구에서 ...

2019년 11월 18일
·
0개의 댓글

[ Vue.js ] - Hacker News

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

2019년 11월 17일
·
0개의 댓글

[ Node.js ] - Middleware

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

2019년 11월 15일
·
0개의 댓글

[ Node.js ] - Restful API

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

2019년 11월 13일
·
0개의 댓글

[ Vue.js ] - Component & Refs

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

2019년 11월 12일
·
0개의 댓글

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

v-for v-for지시문을 사용하여 배열을 기반으로 항목 목록을 렌더링 할 수 있다. index.html app.js image.png index 내부 v-for블록에는 부모 범위 속성에 대한 모든 액세스 권한이 있다. image.png Template template v-if과 마찬가지로 ``태그를 사용하여 v-for여러 요소의 블록을...

2019년 11월 12일
·
0개의 댓글

[ Vue.js ] - Dynamic Css & Conditionals

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

2019년 11월 11일
·
0개의 댓글

[ vue.js ] - Event & Input Data Binding

Event Modifiers v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다. index.html app.js image.png Vue는 v-on 이벤트에 이벤트 수식어를 제공한다. .stop .prevent .capture .self .once .passive Keyboard Event ...

2019년 11월 10일
·
0개의 댓글

[ Vue.js ]

프론트엔드 프레임워크인 Vue.js 공부를 시작해보자. 그동안 React & Redux를 사용한 프로젝트들을 만들면서 리액트에 어느정도 익숙해져 있는데, 많이 사용하는 프레임워크 중 하나인 뷰는 어떤 장점이 있는지 리액트와의 차이점을 느껴보고 싶다. 리액트에 비교적 뷰는 쉽게 접근할 수 있지만 깊게 공부할 수록 어렵기 때문에 원리를 잘 파악하며 공부하려고...

2019년 11월 9일
·
0개의 댓글

[ Learning Javascript ] - 노드

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

2019년 11월 7일
·
0개의 댓글

Webpack

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

2019년 10월 30일
·
0개의 댓글

Jquery

jquery

2019년 10월 28일
·
0개의 댓글
post-thumbnail

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

기본구조 나의 스킬 스택을 Data로 활용해 Tree 구조의 차트로 만들어 보자 image.png Meterialize를 사용해 기본적인 앱의 틀을 잡아주고 모달을 띄워 데이터를 추가할 수 있게 한다. Firebase Data Firebase에 데이터를 저장해 실시간으로 반영하려고 한다. HTML에 input과 firebase를 연결해주고 그래프를 그...

2019년 10월 22일
·
0개의 댓글

데이터 관계의 통찰

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

2019년 10월 22일
·
0개의 댓글
post-thumbnail

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

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

2019년 10월 21일
·
2개의 댓글

[ Goplan ] - Firebase 호스팅 연결

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

2019년 10월 20일
·
0개의 댓글