태그>프론트엔드(총 13개의 글)

'프론트엔드' 관련 최근글

• Router(1) - 기본 옵션 및 설정

  링고파이  by 링고파이|2020/01/13 09:05

  라우터는 vue.js 에서 경로에 따라 어떤 컴포넌트를 사용할지 결정 및 필요 데이터를 전달 해 주는 플러그인이다. 여기서는 기본 사용법 및 중요 사용법. 그리고 가드 사용법에 대해 짤막하게 설명하도록 한다. 1.기본 설정 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21const routerIn = [ ..

  vue.js, router, front-end, javascript, 프론트엔드

• Vuex

  링고파이  by 링고파이|2020/01/10 17:00

  Vuex는 flux의 영향을 받은 데이터 관리 라이브러리이다. 크게 4가지로 이루어져 있으며 'State' 'Action' 'Mutations', 'Getter' 기본적인 사용방법 및 위의 4가지가 무얼 의미하는지 알아보도록 하자. 1. 기본 사용법.Vue의 메인 인스턴스에 등록하여 사용하여야 한다. 등록법..

  vuex, vue.js, 사용법, mutation, actions

• 

  flux 패턴

  링고파이  by 링고파이|2020/01/10 15:48

  Flux 패턴의 기존의 MVC 패턴의 단점을 보완하고자 페이스북에서 고안한 데이터 관리 패턴이다. 가장 큰 특이점은 데이터의 순환이 한 방향으로만 흐른다는 것이다. 이 패턴은 vuex, redux 등에 영감을 주..

  vue, redux, flux, vuex, javascript

• 

  스코프와 this, apply, call, bind

  링고파이  by 링고파이|2020/01/10 14:17

  자바스크립트의 this는 무엇인가? 일단 두괄식으로 두고 시작하겠다. 엔진이 현재 포인트를 두고 있는 객체, 즉 현재 호출한 부분. 이다. 자바스크립트는 렉시컬스코프를 지원하긴 하지만 (문법상에서 식별자..

  javascript, apply, call, bind, this

• 플러그인 및 나름의 분석

  링고파이  by 링고파이|2020/01/07 18:10

  1. Vue 플러그인 개념.일반적으로 vue는 단일 컴포넌트의 활동에 중점을 두고 있다. 플러그인의 경우 여러 컴포넌트들이 통합된 기능을 사용해야 할때 쓴다. vuex나 router 처럼. 아니면 통째로 뭔가 만들어진걸 내놓거나. 2. 플러그인 작성법일단 플러그인을 등록하려면 Vue..

  vue, plugin, 플러그인, javascript, frontend

• babel cli 사용하기 및 babel 이란.

  링고파이  by 링고파이|2020/01/07 17:35

  1. 바벨이란.바벨은 es6(es2015) 이후의 문법을 기존의 es5로 변환해 주는 트랜스파일러이다. 이렇게 사용하는 것은 아직 es6를 전부 지원하지 않는 브라우저가 많기 때문이다. (HOXi.IE11? ^^) 2. 사용법.주로 webpack 이나 grunt 등의 번들러를 통해 하나의 모듈로써..

  babel, javascript, es6, babelrc, 프론트엔드

• 사용자 지정 디렉티브

  링고파이  by 링고파이|2020/01/06 18:32

  vue 에서는 속성에다가 대표적으로 v-bind, v-show 등을 통해 템플릿 문법 처럼 동작할 수 있도록 하는게 있다. 이걸 앵귤러와 똑같이 디렉티브라고 한다. 작성방법은 EACD(?) 이렇게 네 가지가 있던 것과는 다르게 오직 어트리뷰트로만 가능하며, 등록하는 방법은 다음과..

  vue, directive, javascript, custom, es6

• 컴포넌트 작성법

  링고파이  by 링고파이|2020/01/03 16:55

  1. 순수 js를 통한 작성방법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31Vue.component("TableTdComponent", { // 뷰 인스턴스에 이름 추가. 나중에 이건 케밥표기법으로 사용 가능 props: { // 부모로부터 속성을 통해 받아들일 내용 예) 내용 ..

  vue.js, vue, component, frontend, 프론트엔드

• 

  MVVM 패턴과 directive

  링고파이  by 링고파이|2020/01/03 15:47

  MVVM 패턴 기존의 MVC 패턴에서 Controller에 해당하는 내용을 템플릿 문법및 데이터 바인딩을 통해 View와 ViewModel Model이나눠서 처리하는 것을 의미한다. - 브라우저에서 나타나는 dom(view)과..

  vue.js, directive, 지시자, 뷰, frontend

• SASS - 믹스인

  링고파이  by 링고파이|2019/12/19 09:19

  기존 css는 재사용성이 매우 떨어졌다. 그러나 sass에서는 특정 부분을 컴포넌트 화 시켜 다른 파일에서 import 해서 사용할 수 있도록 하는데 이 기능을 mixin이라 한다. 1. 기본 mixin 1 2 3 4 5 6 7@mixin radius($rad1, $rad2, $rad3, $rad4){ border-radius: $rad..

  sass, css, stylesheet, front-end, web

• SASS - 기본 문법

  링고파이  by 링고파이|2019/12/13 11:08

  sass는 기존 css에 약간의 기능을 더한 것이며, 컴파일 하여 CSS를 사용할 수 있게 하는 일종의 도구라고 볼 수 있다. 이 글에서는 기본적인 문법 및 컴파일 방법에 대해 알아보도록 한다. 1. 셀렉터 중첩 1 2 3 4 5 6 7.content { p { font-size: 7rem; } } .content p { font..

  css, stylesheet, sass, frontend, 프론트엔드

• [JavaScript] 클로저 제대로 이해하기

  cadenzah's hideOut  by cadenzah|2017/08/30 16:45

  * 본 글은 MDN 클로저(링크)를 읽고나서 스스로 정리한 글입니다. 혹자는 클로저가 자바스크립트 입문 단계에서 가장 이해하기 어려운 헷갈리는 파트라고 말한다. 결론적으로 봤을 때 동의한다. 왜 결론적으로 라는 단서를 붙였냐면, 코드가 작성되고, 실행되기까지의 내부에..

  자바스크립트, 클로저, 자바스크립트클로저, 자바스크립트함수, 웹프로그래밍

• 프론트엔드 자동화 및 bootstrap 컴파일

  With U  by 마법사|2016/11/16 16:07

  1. nodejs 설치2. grunt 설치3. bower 설치4. bower-installer 설치 = nodejs 설치 후 npm은 해당 디렉토리에서 디렉토리명을 기반으로 pakage.json 파일을 통해 해당 디렉토리 기반 패키지 관리를 수행한다.-g 옵션을 주면 전역으로 설치되며 user/node-module..

  npm, bower, grunt, bootstrap, less