태그>front-end(총 30개의 글)
'front-end' 관련 최근글
-
- 1. 환경설정
-
popsapple 개발블로그 by 링고파이|2021/04/30 00:38
그동안 react 16버전 이상의 최신(?)형 문법을 사용하지 않아 스스로 뒤쳐진 것은 물론, 이 기회에 APP도 만들어 보고 싶어 Native에 도전하고자 한다. 1. JDK 자바 개발 도구 설치https://www.oracle.com/java/technologies/javase-jdk16-downloads.htmlJAVA_H..
- 1. 환경설정
-
- eslint 설정 및 간단 사용법
-
링고파이 by 링고파이|2020/01/23 09:29
eslint는 여러 사람이 한 프로젝트를 진행 할 때 코딩 규칙증 강제할 수 있는 방법 중에 하나이다. 미리 규칙을 정의 해 두고 컴파일 시에 오류 여부를 확인할 수 있다. 그러기 위해 처음엔 npm을 통해 필요한 모듈을 설치해야 한다. npm install -g eslint eslint-config-airbnb..
eslint, javascript, lint, es6, front-end
- eslint 설정 및 간단 사용법
-
- 구글 크롬 보안설정 끄기
-
링고파이 by 링고파이|2020/01/17 17:24
가끔 웹개발 하다보면 보안때문에 막히는게 있는데, 일반 웹 상에서는 안될 일이지만 웹앱으로 개발할 경우 참고할 수 있도록 적어둔다. 커맨드라인 에서 실행 "크롬실행파일경로" -disable-web-security -user-data-dir="C:chrome"
- 구글 크롬 보안설정 끄기
-
- 동기 비동기 Promise, Async
-
링고파이 by 링고파이|2020/01/17 17:09
자바스크립트는 기본적으로 동기로(등록된 순서대로) 실행한다. 즉, 예를 들어 청소랑 빨래가 있다면, 청소를 다 하고 나서 세탁기에 빨래를 돌리고 빨래를 넌다는 것이다. 그와 반대로 비동기는 세탁기에 빨래를 돌리고, 완료가 될 때 까지 청소를 하다가 완료가 되면 빨래를 널..
es6, javascript, async, await, front-end
- 동기 비동기 Promise, Async
-
- 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 = [ ..
- Router(1) - 기본 옵션 및 설정
-
-
- 스코프와 this, apply, call, bind
-
링고파이 by 링고파이|2020/01/10 14:17
자바스크립트의 this는 무엇인가? 일단 두괄식으로 두고 시작하겠다. 엔진이 현재 포인트를 두고 있는 객체, 즉 현재 호출한 부분. 이다. 자바스크립트는 렉시컬스코프를 지원하긴 하지만 (문법상에서 식별자..
javascript, apply, call, bind, this
- 스코프와 this, apply, call, bind
-
- localStorage, sessionStorage
-
링고파이 by 링고파이|2019/12/27 12:56
로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소이다. 딕셔너리 형태(key-value)형태로 저장하며, 기존의 쿠키에 비교할 수 있다. 1. 쿠키와의 차이점 - 만료기한이 없다. - 쿠키보다 더 많은 용량을 제공한다 (도메인별 2.5~10MB - 기존에 쿠키는 4KB), 세..
- localStorage, sessionStorage
-
- Desktop Notification - 웹 알람(?)
-
링고파이 by 링고파이|2019/12/26 18:04
잔디나, 네이버 웤스 등을 쓰다 보면 나오는 작업표시줄 근처에 표시되는 내용들이 있다. 이는 HTML5에서 추가된 기능인데, ie11은 미지원인걸로 알고 있으므로 웹 어플리케이션 등에서 자주 쓰면 좋을 것 같다...
알람, 웹, html5, html5api, javascript
- Desktop Notification - 웹 알람(?)
-
- 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 ..
es6, javascript, ducktyping, 덕타이핑, class
- es6 클래스 문법 및 덕타이핑
-
- javascript - 구조 분해 (destructuring) , 전개 (spread), 나..
-
링고파이 by 링고파이|2019/12/26 11:31
1. 구조 분해(destructuring)배열이나 객체 등을 {key: vlaue}의 형태로 분해시켜 key에 맟춰서 개별로 원하는 변수에 대입할 수 있도록 한다. (배열에서는 key가 index라고 보면 된다) 1 234 5 6 7let SampleArray = ['가','나','다','라']; let ['',ResultArray,..
- javascript - 구조 분해 (destructuring) , 전개 (spread), 나..
-
- immutable / iteration / generator / enumerable
-
링고파이 by 링고파이|2019/12/25 23:56
1.immutable / mutable참조한 객체 특정 프로퍼티의 값을 변경할 수 없다. / 변경할 수 있다. 이 개념을 사용하는 이유가 참조한 객체의 값을 변경하면 참조 당한것도 의도치 않게 같이 변경되기 때문이다. 연관 사용법 : Object.freeze, Object.assign 1-1.Object.freeze..
- immutable / iteration / generator / enumerable
-
- es6에서 Array에 추가된 기능
-
링고파이 by 링고파이|2019/12/24 17:53
es6에서는 기존에 array를 다루던 단순한 것들 외에 헬퍼 함수를 이용하여 array를 사용할 수 있는 방법을 늘렸다. 이 글에서는 헬퍼 함수 뿐만이 아니라 유용하게 추가된 기능까지도 포함하여 기술한다. 1. map : value-key들을 포함하여 함수 반복실행[].map((item,id..
javascript, array, es6, 헬퍼함수, 합성함수
- es6에서 Array에 추가된 기능
-
- webpack 사용법
-
링고파이 by 링고파이|2019/12/24 15:04
webpack 은 기본적으로 여러 자바스크립트를 한데 모아 컴파일 해 주는 번들러이다. 여기에 SASS 혹은 HTML, TypeScript 등도 로더 등을 통해 원하는 형식으로 번들링 하여 사용 가능하다. webpack을 사용할 경우 html에 수 많은 script를 가져다 쓸 필요도 없다. [ htm..
webpack, javascript, front-end, 웹개발, 웹팩
- webpack 사용법
-
- 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, javascript, front-end, web, 데이터시각화
- D3 - 예시 꺾은선 그래프
