일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- WebVR
- vuex
- package-lock.json
- version mismatch
- web
- aframe
- A-Frame
- PDO
- Component
- 3d
- bootstrap
- Three.js
- JS
- 상태관리
- vue
- javscript
- CI/CD
- WebXR
- array
- Node
- AR
- VR
- vuetify
- PHP
- promise
- EM6
- auth0
- JavaScript
- npx
- vue-template-compiler
- Today
- Total
목록개발/Javascript (22)
대가는 결과를 만든다
함수의 메서드! 생소한 문법이었는데 정리해본다. 이전에 javascript this에 대한 이해가 먼저 선행되는게 좋다. 우리가 정의하는 함수에도 사용할 수 있는 기본 메서드가 있다는 것이다. (Array 메서드, Object 메서드 같이...) 함수의 메서드 중 call, apply, bind가 대표적이다. 1. call, apply 함수를 호출하는 일반적인 방법은 '함수명( )'이다. call, apply는 함수를 호출하는 또다른 방법이라고 생각하면 쉽다. let example = function (a,b,c) { return a+b+c; } //== 아래 세개의 함수호출은 모두 똑같은 동작을 한다. ==// example(1,2,3); example.call(null, 1, 2, 3); exampl..
INTRO promise 패턴과 array method를 활용한 비동기 시퀀스 처리에 대해 예제와 함께 정리해보았다. 아직도 복잡하고 좀 익숙치 않다. 특히 맨마지막 4.개선은 아직 좀 더 익숙해져야 하겠다. array method에 대해 정리가 필요하다면 여기 참고 : https://developers.google.com/web/fundamentals/primers/promises?hl=ko 참고하여 예제를 정리했다. 예제 케이스가 참 좋은 것 같은데 설명 번역이 좀 엉성하긴하다. 여러개의 비동기 처리 콜은 하되, 결과 값은 순차적으로 저장 하도록 하는 예제를 살펴본다. 4.개선에서는 이전 비동기 콜 실행이 끝나는 것을 기다리는 것이 아니라 콜은 모두 동시에 하되, 결과는 순서대로 표시하도록 효율적인 ..
아래의 Array 메서드들이 ES6에서부터 사용가능한 메서드들인 줄 알았으나, 아니다. 모두 ES5에서 사용 가능한 메서드이다. 하나씩 예제코드와 함께 정리해보겠다. 목차 1. forEach 2. mp 3. some 4. every 5. filter 6. reduce 7. find 내용 다음 배열을 공통적으로 사용한다는 전제하에 예제 코드를 설명하겠다. var testArray = ["a", "b", "c", "d"]; 1. Array.forEach - 배열 전체를 돌며 해당 배열의 요소에 직접 어떤 작업 수행하고 싶을 때 "배열자체를 변경" - callback parameter : item, index, array testArray.forEach( function (item, index, array){..
Export 방법에는 두가지가 있다. 1. Named Export : 변수/함수/객체 명을 export, 초기화와 export 동시에 가능 //초기화와 동시에 export export const something = 5; export function sum(a,b){ return a+b; } //선언된 객체의 export const something = 5; const sum = function(a, b) { return a + b; }; export {something, sum}; - alias 지정 const somthing = 5; export {something as somethingNew}; //something이라는 상수는 somethingNew라는 이름으로 export된다. - 다른 모듈의 ..
1. 비구조화 할당 : 객체의 필드를 꺼내 새로운 변수를 대입하는 상황을 단순화 //ES5 var example ={ name : "james", age: "15", school: "some" }; var name = example.name; var age = example.age; //ES6 비구조화 할당 const example ={ name : "james", age: "15", school: "some" }; let {name, age} = example; console.log(name, age);//james 15 //ES6 함수 파라미터 응용 const example ={ name : "james", age: "15", school: ["some", "any", "how"] }; functio..
기본적인 내용은 제외하고, 개인적으로 기록하고픈 내용들만 정리한다. 1. String 1) startsWith() , endsWith() : 앞/뒤로 일치하는 문자열 판단 2) includes() : 문자열 포함여부 판단 let str = "A is B"; str.startsWith("A");//true str.endsWith("B");//true str.includes("is");//true 2. Array 1) for in의 문제 보완한 for of //for-in의 경우 index로 순회 : 상위 prototype의 값도 포함될 수 있음 let data = ["A","B"]; Array.prototype.getIndex = "C"; for(let index in data){ console.log(d..
웹페이지에서 스크롤을 내리다가 맨 위쪽으로 한번에 이동하는 go top scroll button을 구현하는데, 대부분의 구현 방식이 jQuery를 이용하고 있다. CSR 박식 프로젝트를 진행하면서 무거운 라이브러리에 속하는 jQuery를 이용하지 않는 추세라 jQuery가 아닌 순수 자바스크립트로 구현하는 방법을 찾다가 기록 용으로 남겨 놓는다. 물론 스크롤 애니메이션 관련 라이브러리들도 많다. * code내에서 document.body => document.documentElement 로 수정 필요 document.getElementsByTagName('button')[0].onclick = function () { scrollTo(document.documentElement, 0, 1250); } f..
Webpack을 이용하여 현대 웹app을 개발하면서는 es6 사용을 하게 되었지만, pure한 javascript 표준 라이브러리를 구현할 기회가 생기게 되면서 es6에서 class처럼 사용했던 문법과 기존 전통적인 문법을 비교할 일이 생겨서 참고했던 잘 비교해둔 사이트를 스크랩 한다. https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420 “Super” and “Extends” In JavaScript ES6 - Understanding The Tough Parts ES6 has made JavaScript l..