태그>front-end(총 29개의 글)

'front-end' 관련 최근글이글루스 'front-end' 태그 최근글 이 태그에 글쓰기

  • eslint 설정 및 간단 사용법
    링고파이  by 링고파이|01/23 09:29

    eslint는 여러 사람이 한 프로젝트를 진행 할 때 코딩 규칙증 강제할 수 있는 방법 중에 하나이다. 미리 규칙을 정의 해 두고 컴파일 시에 오류 여부를 확인할 수 있다. 그러기 위해 처음엔 npm을 통해 필요한 모듈을 설치해야 한다. npm install -g eslint eslint-config-airbnb..

    , , , , 

  • 구글 크롬 보안설정 끄기
    링고파이  by 링고파이|01/17 17:24

    가끔 웹개발 하다보면 보안때문에 막히는게 있는데, 일반 웹 상에서는 안될 일이지만 웹앱으로 개발할 경우 참고할 수 있도록 적어둔다. 커맨드라인 에서 실행 "크롬실행파일경로" -disable-web-security -user-data-dir="C:chrome"

    , , , , 

  • 동기 비동기 Promise, Async
    링고파이  by 링고파이|01/17 17:09

    자바스크립트는 기본적으로 동기로(등록된 순서대로) 실행한다. 즉, 예를 들어 청소랑 빨래가 있다면, 청소를 다 하고 나서 세탁기에 빨래를 돌리고 빨래를 넌다는 것이다. 그와 반대로 비동기는 세탁기에 빨래를 돌리고, 완료가 될 때 까지 청소를 하다가 완료가 되면 빨래를 널..

    , , , , 

  • Router(1) - 기본 옵션 및 설정
    링고파이  by 링고파이|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 = [ ..

    , , , , 

  • flux 패턴
    flux 패턴
    링고파이  by 링고파이|01/10 15:48

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

    , , , , 

  • 스코프와 this, apply, call, bind
    스코프와 this, apply, call, bind
    링고파이  by 링고파이|01/10 14:17

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

    , , , , 

  • localStorage, sessionStorage
    링고파이  by 링고파이|2019/12/27 12:56

    로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소이다. 딕셔너리 형태(key-value)형태로 저장하며, 기존의 쿠키에 비교할 수 있다. 1. 쿠키와의 차이점 - 만료기한이 없다. - 쿠키보다 더 많은 용량을 제공한다 (도메인별 2.5~10MB - 기존에 쿠키는 4KB), 세..

    , , , , 

  • Desktop Notification - 웹 알람(?)
    Desktop Notification - 웹 알람(?)
    링고파이  by 링고파이|2019/12/26 18:04

    잔디나, 네이버 웤스 등을 쓰다 보면 나오는 작업표시줄 근처에 표시되는 내용들이 있다. 이는 HTML5에서 추가된 기능인데, ie11은 미지원인걸로 알고 있으므로 웹 어플리케이션 등에서 자주 쓰면 좋을 것 같다...

    , , , , 

  • es6 클래스 문법 및 덕타이핑
    링고파이  by 링고파이|2019/12/26 15:58

    1. 클래스 정의방법.타 언어에서 진입하시는 분들이 종종 헷갈려하는 경우가 있다. es6에서의 class는 사실 es5의 function과 prototype의 연장선상에 있다! (es5의 function은 사실 1) 일급객체니까! 클래스처럼 사용할 수 있다규~) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ..

    , , , , 

  • javascript - 구조 분해 (destructuring) , 전개 (spread), 나..
    링고파이  by 링고파이|2019/12/26 11:31

    1. 구조 분해(destructuring)배열이나 객체 등을 {key: vlaue}의 형태로 분해시켜 key에 맟춰서 개별로 원하는 변수에 대입할 수 있도록 한다. (배열에서는 key가 index라고 보면 된다) 1 234 5 6 7let SampleArray = ['가','나','다','라']; let ['',ResultArray,..

    , , , , 

  • immutable / iteration / generator / enumerable
    링고파이  by 링고파이|2019/12/25 23:56

    1.immutable / mutable참조한 객체 특정 프로퍼티의 값을 변경할 수 없다. / 변경할 수 있다. 이 개념을 사용하는 이유가 참조한 객체의 값을 변경하면 참조 당한것도 의도치 않게 같이 변경되기 때문이다. 연관 사용법 : Object.freeze, Object.assign 1-1.Object.freeze..

    , , , , 

  • es6에서 Array에 추가된 기능
    링고파이  by 링고파이|2019/12/24 17:53

    es6에서는 기존에 array를 다루던 단순한 것들 외에 헬퍼 함수를 이용하여 array를 사용할 수 있는 방법을 늘렸다. 이 글에서는 헬퍼 함수 뿐만이 아니라 유용하게 추가된 기능까지도 포함하여 기술한다. 1. map : value-key들을 포함하여 함수 반복실행[].map((item,id..

    , , , , 

  • webpack 사용법
    링고파이  by 링고파이|2019/12/24 15:04

    webpack 은 기본적으로 여러 자바스크립트를 한데 모아 컴파일 해 주는 번들러이다. 여기에 SASS 혹은 HTML, TypeScript 등도 로더 등을 통해 원하는 형식으로 번들링 하여 사용 가능하다. webpack을 사용할 경우 html에 수 많은 script를 가져다 쓸 필요도 없다. [ htm..

    , , , , 

  • D3 - 예시 꺾은선 그래프
    D3 - 예시 꺾은선 그래프
    링고파이  by 링고파이|2019/12/24 11:21

    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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

    , , , , 

  • D3 - 개요 및 사용법
    링고파이  by 링고파이|2019/12/24 11:18

    D3란? D3는 데이터를 시각화 하는 라이브러리이다. 수치 데이터를 웹 브라우저에서 그래프로 변경하고 렌더링 할때 사용한다. 주로 서버와 같이 연동하며 서버의 내용이 변경되었을시 그래프를 새로 그릴 수 있는 형태를 지원한다. Import 1 2 3 4 5 사용법 D3는 jquery와 비슷한 사용법을

    , , , , 

1 2