es6 React의 이벤트 핸들러에서 "Cannot read property '〇〇' of undefined"라고 나온다 ES6 기법으로 React 코드를 쓰고 있을 때 이벤트 핸들러 내에서 this 를 사용할 수 없게 되었기 때문에 그 원인을 공유합니다. App.jsx 이 경우 브라우저에서 실행해 보면 다음과 같이 표시됩니다. 이 버튼을 누르면 표시되는 문자가 'Yes'로 바뀔 것입니다만, 변하지 않고 아래와 같은 에러가 발생했습니다. render() 함수의 onClick에서 다음과 같이 변경합니다. App.... 자바스크립트es6ReactJSX JavaScript로 카드 놀이를 넘기는 애니메이션을 만들려고했습니다. 카드를 넘기는 애니메이션을 만들어 보았습니다. 폴더 구성은 다음과 같습니다. 코드는 다음과 같습니다. card_turning.html 다음은 JavaScript 코드입니다. cardTurning.js 결과는, 이런 느낌이 됩니다.... 애니메이션트럼프자바스크립트es6 【Codility Lesson3】FrogJmp A small frog wants to get to the other side of the road. The frog is currently located at position X and wants to get to a position greater than or equal to Y. The small frog always jumps a fixed distance, D. Count the m... 자바스크립트es6알고리즘codilityarray 【Codility Lesson2】Odd Occurrences In Array A non-empty array A consisting of N integers is given. The array contains an odd number of elements, and each element of the array can be paired with another element that has the same value, except for one element that i... 자바스크립트es6알고리즘codilityarray 【Codility Lesson2】CyclicRotation An array A consisting of N integers is given. Rotation of the array means that each element is shifted right by one index, and the last element of the array is moved to the first place. For example, the rotation of array... 자바스크립트es6알고리즘codilityarray 【DOM 조작(전편)】JavaScript의 addEventListener에 대해서, 「・・하면」을 정리해 보았다 이번에는 JavaScript의 DOM 조작 addEventListener 에 대해 정리해 보았습니다. DOM 조작 초보자의 참고가되면 기쁩니다. 기본 DOM 조작 (addEventListener)의 흐름 ① 우선은 요소의 취득. ② 취득한 요소에 addEventListener로 처리를 추가한다 ③처리의 "계기(제1인수)"를 기술 →⭐️ 이번 메인은 이 ③이 됩니다. ④ "처리를 함수내(제2인... dom 조작자바스크립트es6초학자용 Next.js 9.3 내장 sass autoprefixer 참고 Next.js 9.3에서 내장 Sass가 지원되는 것 같습니다. 기존 Built-in CSS와 같은 느낌으로, 글로벌 스타일 외에도 CSS 모듈로도 사용할 수 있습니다. 내장되어 있으므로 설정없이 사용할 수 있지만 sass 모듈을 설치합시다. 템플릿의 git을 만들었으므로 여기에서 부디. sass 이외의 부분은 아래의 기사를 참고로 하고 있습니다. 전역적으로 사용하려는 스타일은 _app.ts... Sasses6next.js 노드에서 스푸시 데이터를 csv → json으로 변환하여 조건에 맞는 요소를 나열합니다. 스푸시의 대규모 데이터를 정리할 때 편해졌으므로 비망록으로 남깁니다. 이 기사에서 다루는 데이터는 소설입니다. 실재의 인물이나 단체 등과는 관계 없습니다. ※이 기사의 더미 데이터는 이쪽으로부터 빌리고 있습니다. 이 기사의 목표 : 주소가 오사카 사람을 나열하고 텍스트 데이터에 내보내기! OS: macOS Node: v12.2.0 npm: 6.9.0 Node와 npm의 환경 설정은 생략합니다... spreadsheet자바스크립트es6Node.js오, ぇ D 리브 Nuxt.js의 axios를 초로 모의하는 npm 모듈의 입문 샘플 Nuxt.js는 환경 구축 락이기 때문에 그만한 API의 구현을 기다리지 않고 프론트 개발을 시작하고 싶어요! Nuxt.js 및 이 설치된 Node 프로젝트를 준비합니다. 개인적으로는 에서 axios도 동시에 설치하는 것을 추천합니다. 필요한 구성을 쉽게 만들 수 있습니다. Nuxt 자신의 $axios를 조롱합니다. plugins/mock.js 작성한 플러그인의 경로를 추가합니다. nuxt.... axios자바스크립트es6nuxt.js window.open()에서 열린 창간에 데이터 교환 window.open()는 새 창을 여는 메서드이지만 반환 값으로 열린 창에 대한 참조를 반환합니다. 또한 window.opener 속성은 현재 창을 연 창에 대한 참조를 반환합니다. 클라이언트측 JavaScript의 전역 변수는 window 객체의 속성이므로 window.open() 에서 열린 창은 서로의 전역 변수를 참조할 수 있게 됩니다. 이 예제에서는 창간에 값이 리액티브하게 공유되는... 자바스크립트es6 ES6 import에서 Firebase Admin, Cloud Storage 작성 자바 스크립트 -> TypeScript로 변환하는 동안 좀처럼 발견되지 않았기 때문에 메모가 나왔습니다 이상입니다... Firebase자바스크립트es6 JavaScript | Set 객체 Set 객체는 값의 컬렉션입니다. 삽입 순서로 요소를 반복할 수 있습니다. Set에 중복되는 값은 저장할 수 없습니다. Set 내의 값은 컬렉션 내에서 고유합니다. 단순히 독특한 목록이라면 기억하십시오. size 프로퍼티는 0으로, prototype 안을 들여다 보면 배열과는 전혀 다른 메소드를 사용할 수 있는 것을 알 수 있다(add라든지 delete라든지) 그건 그렇고 이해하기 쉽기 때문... 자바스크립트es6 VSCode를 사용한 JavaScript 모듈 추출 브라우저용 JavaScript의 개발에서도, 나 와 같은 모듈 번들 툴을 만드는 것으로, 파일 단위로 모듈을 분할한 개발이 가능하게 되었습니다. VSCode의 리팩토링 기능을 사용하면 기계적인 수고를 줄일 수 있습니다. 참고 : 이번에는 이미 파일에 private static 함수가있는 상황을 대상으로합니다. private static 함수를 추출하는 방법은 대상이 아닙니다. 아래와 같이 e... module자바스크립트es6VSCodeRefactoring React를 알게 된 신경이 쓰이는 #1 React의 특징 그래서 React의 특징과 그 거친 의미 등의 상류 부분을 만져갑니다. 그 중에서도 이번에는 React의 특징에 대해 다루고 싶습니다. (은)는 유저 인터페이스를 구축하기 위한 JS 라이브러리입니다. React의 개발은 Facebook이 실시하고 있어 2019년 7월 현재 의 스타는 132,000이상이나 있는 web프론트 세계에서는 주류가 되고 있는 라이브러리입니다. React의 특징은 크게... SinglePageApplicationReactVirtualDom자바스크립트es6 React에서 이미지를 미리로드하는 방법 환경 - react v16.8.6 React에서 이미지를 다룰 때 미리로드하고 부드러운 디스플레이를 만드는 방법을 살펴 보았습니다. 이미지 프리로드 jsx에 그리기 전에 Image 객체를 미리 생성합니다. 생성된 Image 객체에 이미지 경로를 전달합니다. 전달할 때 Image 객체는 프리로드를 시작합니다! onload에 콜백을 전달하여 로드가 끝나면 그리기를 할 수도 있습니다. 비포 애프터... 이미지자바스크립트es6React webpack에서 모듈간에 공통 변수를 갖고 싶습니다. 잘 작동하지 않습니다,, hoge.js의 변경 사항이 huga.js에 반영되지 않았습니다. 상수를 다루는 것처럼, huga.js의 glogals.a는 10으로 남아 있습니다. 이것을 시도해도 역시 같은 느낌입니다. webpack의 사양이 바뀌었는가. 우선 window 객체에 네임스페이스 준비할 수밖에 없을까. 누군가 알고 계시다면, 알려주세요! 그 옛날에는,,, globals.js a.js ... webpackes6 ES6 이후의 구문과 ES5의 구문 비교 분할 대입이라든지 스프레드 구문이라든지 잘 듣지만, 결국 사용도를 모르는 분에게 ES5라면 이런 느낌으로 쓸게-라는 비교 기사. 자주 사용하는 것만 소개합니다. ES6 ES5 설명 애로우 함수는 Java나 C# 의 람다 식의 생략계와 같은 것입니다.this 의 참조가 바뀌므로 주의가 필요. function(a = 1, b = 2) ES6 ES5 설명 인수가 있는 경우는 그 인수를 사용해, 그... 자바스크립트es6 CheckiO로 JavaScript의 연습에 힘쓰는 【그 1】 라는 JavaScript와 Python 연습을 할 수 있는 재미있는 사이트가 있었으므로, 그 날에 풀린 문제를 통해 배운 것을 정리합니다. 배열 중에서 쓰지 않은 숫자를 제외하고 새롭게 배열을 만든다 or 쓰고 있는 숫자만을 사용하여 새롭게 배열을 만드는 문제였습니다. 인수로 주어진 테스트 함수를 각 배열 요소에 대해 실행하고 이를 통과한 모든 배열 요소로 구성된 새 배열을 생성합니다. in... 자바스크립트es6 요소의 maxlength 를 이모티콘에도 대응시킨다 사로 게이트 쌍 문자열에 대한 대응이 최근의 JS에서는 의외로 간단하게 할 수 있게 되었기 때문에 기억합니다. 덧붙여서 IE 는 비대응이므로, IE 대응이 필요한 분은 진심을 내 주세요. [추기] 타이틀이 미묘하게 거짓말을 하고 있었습니다. maxlength 는 사용하지 않고, 최대 입력 문자수의 제어를 합니다. NO GOOD 오 K 참고로 다음은 <input> 요소에 대리자 쌍 문자열을 입... Vue.jses6 React&ES6에서 카운터 앱을 만들어 보았습니다. 〇참고 사이트 만드는 것 상품 재고 수를 계산할 수 있는 카운터 앱 카운터를 클릭하면 과일의 개수가 늘어납니다. 초기 설정 먼저, Chrome 확장 프로그램인 React Developer Tools를 소개합니다. 검색하면 나옵니다. 또 이번은, 로컬 파일로 개발하므로, 「확장 기능을 관리」 → 「파일에의 액세스를 허가한다」를 ON으로 해 주세요. 그러면 위 이미지처럼 빨간색 멋지게 표시가 나... es6React 【Type Script】Spread 구문을 사용할 수 없다! ? ! ? tsc하면 Oops! 아마 tsconfig의 compilerOptions가 es5 Array 이외의 Spread는 es5에서는 대응하지 않는, 알려진 버그인 것 같다. 이것을 es6로 하면 일단 해결한다. 다만, es6에 target을 변경해 영향이 있는지는 각각의 환경에 의한다고 생각하므로, 주의해 주었으면 한다. 그리고 tsc하면 Object.assign입니다!... spreades6TypeScriptES5 세계에서 가장 간단한 서버 측 노드로 ES6을 시작하는 방법 서버 측 node는 commonjs로 작성되는 경우가 많네요. 프런트 엔드 사람은 commonjs를 보면 ES6가 사용하고 싶어서 어쩔 수 없게됩니다. commonjs도 훌륭하지만 모처럼이므로 익숙한 ES6에서 개발합시다. 노드 앱 만들기 //js 파일은 src 폴더에 넣는 것이 관례입니다. Node 앱이 완성되었습니다. 그럼 달리자. 터미널에 'Hello kaba' 라고 표시되어 넣으면 성... babeles6Node.js ES2015+에서 객체 지향 운동 「오브젝트 지향 운동」은, 9개의 룰로 되어 있습니다만, ES2015+용으로 일부 제약을 풀고 있습니다. 하나의 메소드에 대해 들여 쓰기는 1 단계까지로 한다 else 절을 사용하지 마십시오 모든 원시형과 캐릭터 라인형을 랩 하는 것 1행에 대해 도트는 1개까지로 하는 것 => (ES2015+용 추기) 단, this의 뒤의 도트는 카운트하지 않는다 모든 엔티티를 작게 한다. 한 클래스에 대해... 객체 지향ES2015+자바스크립트es6ECMAScript6 Vue.js의 v-for로 분할 할당 의 v-for 지시어로 과 같은 것을 하고 싶었습니다만, 「Vue.js 분할 대입」이나 「v-for 분할 대입」과 같이 검색해도 히트하지 않고 , 영어에서 "Vue.js Destructuring assignment"를 찾으면 라는 기사를 발견했습니다. 분할 할당 이미지 기사에 의하면 v-for 지시어 내에서도 분할 대입을 사용할 수 있다는 것이었으므로, 시험해 보았습니다. 공식 문서의 에는 ... Vue.js자바스크립트es6ECMAScriptInternetExplorer webpack의 도입을 최소 단위로 시도 은 JavaScript를 정리해 주는 모듈 번들러입니다. 왜 정리해야 하는가? 이는 한 번에 웹 서버와 통신할 수 있는 파일 수가 제한되어 있기 때문에 파일 크기가 작은 파일을 세밀하게 전송하는 것보다 큰 파일을 한 번에 전송하는 것이 효율이 좋기 때문입니다. 그렇다면 다른 도구도 실현 가능하지만, webpack의 경우는 표준 사양의 ES Modules를 사용할 수 있고 node_module... webpack자바스크립트es6gulp 포트폴리오를 만들기 시작하고 무료로 공개 (Webpck4, Babel에서 ES6 → ES5로 변환) 의 계속입니다. 전회, Babel로 변환 후에, Chrome으로 열람시에 수수께끼 에러로 움직이지 않게 되어 버렸습니다만, 마침내 Chrome과 IE11 모두에서 움직였습니다! 한 일의 비망록을 적어 둡니다. 에러는 결국, jQuery 주위의 변환이 제대로 할 수 없었던 것이 원인인 것 같았습니다. 그 대책도 플러그인이었습니다. 설치한 Babel package.json .babelrc web... 자바스크립트es6webpack4babelHTML5 프런트 엔드 테스트 도구 비교 Puppeteer #02 테스트 링크 대상의 구축 순서에 따라 준비해 주세요. 로그인 화면 조작 로그인 화면 테스트 케이스 ・로그인 화면 열기 ・타이틀의 어설션, 캡쳐 ・입력 폼에 onfocus, 배경색 변경 후에 캡쳐 ・ID와 패스워드를 입력하지 않고, 로그인 버튼을 클릭 와 패스워드를 입력, 캡쳐 입력값 ID:takedaPassword:shinji·로그인 버튼을 클릭 로그인 후 목록 화면 조작 목록 화면 테스트 케이스 ... headless-chrome자바스크립트es6puppeteerNode.js 프런트 엔드 테스트 도구 비교 Puppeteer #01 환경 구축 Puppeteer의 환경을 구축하고 Headless-Chrome이 작동하는지 확인할 때까지. 직원 하지만 프런트 엔드 테스트 도구는 puppeteer가 최고라고 말하면 동료의 가 「selenium에서도 같은 일을 한다」라고 말하기 때문에. 직원의 이 기사를 쓰고 나는 그것을 지켜 보았습니다. 여러가지 비교해 가 Puppeteer를 활용할 수 있게 될 수 있을 때까지를 연재해 가고 싶습니다. ... headless-chrome자바스크립트es6puppeteerNode.js
React의 이벤트 핸들러에서 "Cannot read property '〇〇' of undefined"라고 나온다 ES6 기법으로 React 코드를 쓰고 있을 때 이벤트 핸들러 내에서 this 를 사용할 수 없게 되었기 때문에 그 원인을 공유합니다. App.jsx 이 경우 브라우저에서 실행해 보면 다음과 같이 표시됩니다. 이 버튼을 누르면 표시되는 문자가 'Yes'로 바뀔 것입니다만, 변하지 않고 아래와 같은 에러가 발생했습니다. render() 함수의 onClick에서 다음과 같이 변경합니다. App.... 자바스크립트es6ReactJSX JavaScript로 카드 놀이를 넘기는 애니메이션을 만들려고했습니다. 카드를 넘기는 애니메이션을 만들어 보았습니다. 폴더 구성은 다음과 같습니다. 코드는 다음과 같습니다. card_turning.html 다음은 JavaScript 코드입니다. cardTurning.js 결과는, 이런 느낌이 됩니다.... 애니메이션트럼프자바스크립트es6 【Codility Lesson3】FrogJmp A small frog wants to get to the other side of the road. The frog is currently located at position X and wants to get to a position greater than or equal to Y. The small frog always jumps a fixed distance, D. Count the m... 자바스크립트es6알고리즘codilityarray 【Codility Lesson2】Odd Occurrences In Array A non-empty array A consisting of N integers is given. The array contains an odd number of elements, and each element of the array can be paired with another element that has the same value, except for one element that i... 자바스크립트es6알고리즘codilityarray 【Codility Lesson2】CyclicRotation An array A consisting of N integers is given. Rotation of the array means that each element is shifted right by one index, and the last element of the array is moved to the first place. For example, the rotation of array... 자바스크립트es6알고리즘codilityarray 【DOM 조작(전편)】JavaScript의 addEventListener에 대해서, 「・・하면」을 정리해 보았다 이번에는 JavaScript의 DOM 조작 addEventListener 에 대해 정리해 보았습니다. DOM 조작 초보자의 참고가되면 기쁩니다. 기본 DOM 조작 (addEventListener)의 흐름 ① 우선은 요소의 취득. ② 취득한 요소에 addEventListener로 처리를 추가한다 ③처리의 "계기(제1인수)"를 기술 →⭐️ 이번 메인은 이 ③이 됩니다. ④ "처리를 함수내(제2인... dom 조작자바스크립트es6초학자용 Next.js 9.3 내장 sass autoprefixer 참고 Next.js 9.3에서 내장 Sass가 지원되는 것 같습니다. 기존 Built-in CSS와 같은 느낌으로, 글로벌 스타일 외에도 CSS 모듈로도 사용할 수 있습니다. 내장되어 있으므로 설정없이 사용할 수 있지만 sass 모듈을 설치합시다. 템플릿의 git을 만들었으므로 여기에서 부디. sass 이외의 부분은 아래의 기사를 참고로 하고 있습니다. 전역적으로 사용하려는 스타일은 _app.ts... Sasses6next.js 노드에서 스푸시 데이터를 csv → json으로 변환하여 조건에 맞는 요소를 나열합니다. 스푸시의 대규모 데이터를 정리할 때 편해졌으므로 비망록으로 남깁니다. 이 기사에서 다루는 데이터는 소설입니다. 실재의 인물이나 단체 등과는 관계 없습니다. ※이 기사의 더미 데이터는 이쪽으로부터 빌리고 있습니다. 이 기사의 목표 : 주소가 오사카 사람을 나열하고 텍스트 데이터에 내보내기! OS: macOS Node: v12.2.0 npm: 6.9.0 Node와 npm의 환경 설정은 생략합니다... spreadsheet자바스크립트es6Node.js오, ぇ D 리브 Nuxt.js의 axios를 초로 모의하는 npm 모듈의 입문 샘플 Nuxt.js는 환경 구축 락이기 때문에 그만한 API의 구현을 기다리지 않고 프론트 개발을 시작하고 싶어요! Nuxt.js 및 이 설치된 Node 프로젝트를 준비합니다. 개인적으로는 에서 axios도 동시에 설치하는 것을 추천합니다. 필요한 구성을 쉽게 만들 수 있습니다. Nuxt 자신의 $axios를 조롱합니다. plugins/mock.js 작성한 플러그인의 경로를 추가합니다. nuxt.... axios자바스크립트es6nuxt.js window.open()에서 열린 창간에 데이터 교환 window.open()는 새 창을 여는 메서드이지만 반환 값으로 열린 창에 대한 참조를 반환합니다. 또한 window.opener 속성은 현재 창을 연 창에 대한 참조를 반환합니다. 클라이언트측 JavaScript의 전역 변수는 window 객체의 속성이므로 window.open() 에서 열린 창은 서로의 전역 변수를 참조할 수 있게 됩니다. 이 예제에서는 창간에 값이 리액티브하게 공유되는... 자바스크립트es6 ES6 import에서 Firebase Admin, Cloud Storage 작성 자바 스크립트 -> TypeScript로 변환하는 동안 좀처럼 발견되지 않았기 때문에 메모가 나왔습니다 이상입니다... Firebase자바스크립트es6 JavaScript | Set 객체 Set 객체는 값의 컬렉션입니다. 삽입 순서로 요소를 반복할 수 있습니다. Set에 중복되는 값은 저장할 수 없습니다. Set 내의 값은 컬렉션 내에서 고유합니다. 단순히 독특한 목록이라면 기억하십시오. size 프로퍼티는 0으로, prototype 안을 들여다 보면 배열과는 전혀 다른 메소드를 사용할 수 있는 것을 알 수 있다(add라든지 delete라든지) 그건 그렇고 이해하기 쉽기 때문... 자바스크립트es6 VSCode를 사용한 JavaScript 모듈 추출 브라우저용 JavaScript의 개발에서도, 나 와 같은 모듈 번들 툴을 만드는 것으로, 파일 단위로 모듈을 분할한 개발이 가능하게 되었습니다. VSCode의 리팩토링 기능을 사용하면 기계적인 수고를 줄일 수 있습니다. 참고 : 이번에는 이미 파일에 private static 함수가있는 상황을 대상으로합니다. private static 함수를 추출하는 방법은 대상이 아닙니다. 아래와 같이 e... module자바스크립트es6VSCodeRefactoring React를 알게 된 신경이 쓰이는 #1 React의 특징 그래서 React의 특징과 그 거친 의미 등의 상류 부분을 만져갑니다. 그 중에서도 이번에는 React의 특징에 대해 다루고 싶습니다. (은)는 유저 인터페이스를 구축하기 위한 JS 라이브러리입니다. React의 개발은 Facebook이 실시하고 있어 2019년 7월 현재 의 스타는 132,000이상이나 있는 web프론트 세계에서는 주류가 되고 있는 라이브러리입니다. React의 특징은 크게... SinglePageApplicationReactVirtualDom자바스크립트es6 React에서 이미지를 미리로드하는 방법 환경 - react v16.8.6 React에서 이미지를 다룰 때 미리로드하고 부드러운 디스플레이를 만드는 방법을 살펴 보았습니다. 이미지 프리로드 jsx에 그리기 전에 Image 객체를 미리 생성합니다. 생성된 Image 객체에 이미지 경로를 전달합니다. 전달할 때 Image 객체는 프리로드를 시작합니다! onload에 콜백을 전달하여 로드가 끝나면 그리기를 할 수도 있습니다. 비포 애프터... 이미지자바스크립트es6React webpack에서 모듈간에 공통 변수를 갖고 싶습니다. 잘 작동하지 않습니다,, hoge.js의 변경 사항이 huga.js에 반영되지 않았습니다. 상수를 다루는 것처럼, huga.js의 glogals.a는 10으로 남아 있습니다. 이것을 시도해도 역시 같은 느낌입니다. webpack의 사양이 바뀌었는가. 우선 window 객체에 네임스페이스 준비할 수밖에 없을까. 누군가 알고 계시다면, 알려주세요! 그 옛날에는,,, globals.js a.js ... webpackes6 ES6 이후의 구문과 ES5의 구문 비교 분할 대입이라든지 스프레드 구문이라든지 잘 듣지만, 결국 사용도를 모르는 분에게 ES5라면 이런 느낌으로 쓸게-라는 비교 기사. 자주 사용하는 것만 소개합니다. ES6 ES5 설명 애로우 함수는 Java나 C# 의 람다 식의 생략계와 같은 것입니다.this 의 참조가 바뀌므로 주의가 필요. function(a = 1, b = 2) ES6 ES5 설명 인수가 있는 경우는 그 인수를 사용해, 그... 자바스크립트es6 CheckiO로 JavaScript의 연습에 힘쓰는 【그 1】 라는 JavaScript와 Python 연습을 할 수 있는 재미있는 사이트가 있었으므로, 그 날에 풀린 문제를 통해 배운 것을 정리합니다. 배열 중에서 쓰지 않은 숫자를 제외하고 새롭게 배열을 만든다 or 쓰고 있는 숫자만을 사용하여 새롭게 배열을 만드는 문제였습니다. 인수로 주어진 테스트 함수를 각 배열 요소에 대해 실행하고 이를 통과한 모든 배열 요소로 구성된 새 배열을 생성합니다. in... 자바스크립트es6 요소의 maxlength 를 이모티콘에도 대응시킨다 사로 게이트 쌍 문자열에 대한 대응이 최근의 JS에서는 의외로 간단하게 할 수 있게 되었기 때문에 기억합니다. 덧붙여서 IE 는 비대응이므로, IE 대응이 필요한 분은 진심을 내 주세요. [추기] 타이틀이 미묘하게 거짓말을 하고 있었습니다. maxlength 는 사용하지 않고, 최대 입력 문자수의 제어를 합니다. NO GOOD 오 K 참고로 다음은 <input> 요소에 대리자 쌍 문자열을 입... Vue.jses6 React&ES6에서 카운터 앱을 만들어 보았습니다. 〇참고 사이트 만드는 것 상품 재고 수를 계산할 수 있는 카운터 앱 카운터를 클릭하면 과일의 개수가 늘어납니다. 초기 설정 먼저, Chrome 확장 프로그램인 React Developer Tools를 소개합니다. 검색하면 나옵니다. 또 이번은, 로컬 파일로 개발하므로, 「확장 기능을 관리」 → 「파일에의 액세스를 허가한다」를 ON으로 해 주세요. 그러면 위 이미지처럼 빨간색 멋지게 표시가 나... es6React 【Type Script】Spread 구문을 사용할 수 없다! ? ! ? tsc하면 Oops! 아마 tsconfig의 compilerOptions가 es5 Array 이외의 Spread는 es5에서는 대응하지 않는, 알려진 버그인 것 같다. 이것을 es6로 하면 일단 해결한다. 다만, es6에 target을 변경해 영향이 있는지는 각각의 환경에 의한다고 생각하므로, 주의해 주었으면 한다. 그리고 tsc하면 Object.assign입니다!... spreades6TypeScriptES5 세계에서 가장 간단한 서버 측 노드로 ES6을 시작하는 방법 서버 측 node는 commonjs로 작성되는 경우가 많네요. 프런트 엔드 사람은 commonjs를 보면 ES6가 사용하고 싶어서 어쩔 수 없게됩니다. commonjs도 훌륭하지만 모처럼이므로 익숙한 ES6에서 개발합시다. 노드 앱 만들기 //js 파일은 src 폴더에 넣는 것이 관례입니다. Node 앱이 완성되었습니다. 그럼 달리자. 터미널에 'Hello kaba' 라고 표시되어 넣으면 성... babeles6Node.js ES2015+에서 객체 지향 운동 「오브젝트 지향 운동」은, 9개의 룰로 되어 있습니다만, ES2015+용으로 일부 제약을 풀고 있습니다. 하나의 메소드에 대해 들여 쓰기는 1 단계까지로 한다 else 절을 사용하지 마십시오 모든 원시형과 캐릭터 라인형을 랩 하는 것 1행에 대해 도트는 1개까지로 하는 것 => (ES2015+용 추기) 단, this의 뒤의 도트는 카운트하지 않는다 모든 엔티티를 작게 한다. 한 클래스에 대해... 객체 지향ES2015+자바스크립트es6ECMAScript6 Vue.js의 v-for로 분할 할당 의 v-for 지시어로 과 같은 것을 하고 싶었습니다만, 「Vue.js 분할 대입」이나 「v-for 분할 대입」과 같이 검색해도 히트하지 않고 , 영어에서 "Vue.js Destructuring assignment"를 찾으면 라는 기사를 발견했습니다. 분할 할당 이미지 기사에 의하면 v-for 지시어 내에서도 분할 대입을 사용할 수 있다는 것이었으므로, 시험해 보았습니다. 공식 문서의 에는 ... Vue.js자바스크립트es6ECMAScriptInternetExplorer webpack의 도입을 최소 단위로 시도 은 JavaScript를 정리해 주는 모듈 번들러입니다. 왜 정리해야 하는가? 이는 한 번에 웹 서버와 통신할 수 있는 파일 수가 제한되어 있기 때문에 파일 크기가 작은 파일을 세밀하게 전송하는 것보다 큰 파일을 한 번에 전송하는 것이 효율이 좋기 때문입니다. 그렇다면 다른 도구도 실현 가능하지만, webpack의 경우는 표준 사양의 ES Modules를 사용할 수 있고 node_module... webpack자바스크립트es6gulp 포트폴리오를 만들기 시작하고 무료로 공개 (Webpck4, Babel에서 ES6 → ES5로 변환) 의 계속입니다. 전회, Babel로 변환 후에, Chrome으로 열람시에 수수께끼 에러로 움직이지 않게 되어 버렸습니다만, 마침내 Chrome과 IE11 모두에서 움직였습니다! 한 일의 비망록을 적어 둡니다. 에러는 결국, jQuery 주위의 변환이 제대로 할 수 없었던 것이 원인인 것 같았습니다. 그 대책도 플러그인이었습니다. 설치한 Babel package.json .babelrc web... 자바스크립트es6webpack4babelHTML5 프런트 엔드 테스트 도구 비교 Puppeteer #02 테스트 링크 대상의 구축 순서에 따라 준비해 주세요. 로그인 화면 조작 로그인 화면 테스트 케이스 ・로그인 화면 열기 ・타이틀의 어설션, 캡쳐 ・입력 폼에 onfocus, 배경색 변경 후에 캡쳐 ・ID와 패스워드를 입력하지 않고, 로그인 버튼을 클릭 와 패스워드를 입력, 캡쳐 입력값 ID:takedaPassword:shinji·로그인 버튼을 클릭 로그인 후 목록 화면 조작 목록 화면 테스트 케이스 ... headless-chrome자바스크립트es6puppeteerNode.js 프런트 엔드 테스트 도구 비교 Puppeteer #01 환경 구축 Puppeteer의 환경을 구축하고 Headless-Chrome이 작동하는지 확인할 때까지. 직원 하지만 프런트 엔드 테스트 도구는 puppeteer가 최고라고 말하면 동료의 가 「selenium에서도 같은 일을 한다」라고 말하기 때문에. 직원의 이 기사를 쓰고 나는 그것을 지켜 보았습니다. 여러가지 비교해 가 Puppeteer를 활용할 수 있게 될 수 있을 때까지를 연재해 가고 싶습니다. ... headless-chrome자바스크립트es6puppeteerNode.js