자바스크립트 프런트 엔드 초보자가 grunt-file-dependencies를 개조해 보았습니다. 그들은 grunt-file-dependencies를 사용하여 해결할 수 있다고 믿습니다. 또한 정의 부분과 이용 부분을 코드 위에서 해석하기 위해 다음과 같은 설정을 추가했습니다. gruntfile.js 같은 파일이 정의 및 요청에 추가되고 순환 참조 오류 순환 참조 오류에 대한 자세한 내용을 알 수 없습니다. 어떤 정의 정보가 문제인지 제시하지 않는다 순환 참조 오류 파일을 참조하는 파일도... 종속성자바스크립트gruntgrunt-file-dependencies generator-react-webpack이라는 것을 발견했기 때문에 사용해 보았다 React 유행하는 것 같지만 무엇을 손에 넣을 수 있는지 잘 모르는 사람 (= 완전히 자신) 되는 것을 발견했기 때문에 readme 등 보면서 조사 조사해 갑니다. 아무 생각 없이 다음을 수행npm install -g generator-react-webpack 아무 생각 없이 다음을 수행yo react-webpack sample react-routerr를 포함하거나 듣는 아키텍처의 유무를 ... React자바스크립트gruntwebpack Jade로 만드는 맞춤 태그 입문 예를 들어, 아래와 같이 표시되는 rating 태그를 만들고 싶은 경우. HTML에는 <input type="rating" /> 도 <ratings /> 태그도 없기 때문에, 로 자작합니다. 와 같이 작성하면 컴파일 후에 다음과 같은 HTML이 나옵니다. HTMLimg 태그와 같은 빈 요소의 경우는 이렇게 씁니다. 실제로 이런 일도 할 수 있습니다. 앞에 +를 붙이면 함수 (mixin)를 호... 자바스크립트CSSWebComponentsgruntJade grunt의 node-webkit 빠져서 메모. grunt로 node-webkit 앱을 빌드합니다. package.json Gruntfile.js 포인트는 options.version. 규정치는 'latest'입니다만, 알파판 등 동작하지 않는 버젼의 node-webkit가 선택되었을 경우에 빌드가 통과하지 않게 됩니다. 에 놓여 있는, 정상적으로 움직이는 버젼을 지정합시다. build/{프로젝트명} 폴더 아래에 각 플랫폼용... node-webkit자바스크립트grunt 【Grunt】 복수의 CSS, JavaScript 파일을 minfy한다 여러 CSS, JavaScript 파일을 Grunt를 사용하여 단번에 각각 하나의 파일로 minfy합니다. ① Gruntfile 작성 ② package.json 쓰기 ④ html CSS, JavaScript 지정 부분에 build 코멘트 추가 ⑤ grunt 태스크 실행 src 폴더에는 작업 대상 파일군을 넣어 둡니다. 처리 후의 파일군은 dist 폴더내에 작성됩니다만, 폴더 마다 자동적으로 ... CSS자바스크립트grunt Stripe Element에서 카드 번호 입력 필드를 세로로 정렬하고 싶습니다. 을 사용하여 카드 번호를 입력하는 양식을 생성 할 때 기본적으로 카드 번호, 만료 날짜 및 CVC의 입력 필드가 가로로 정렬됩니다. 디자인상, 필드를 세로로 늘어놓고 싶을 때에 어떻게 폼을 생성하면 좋을지 조사했다. 우선 폼의 생성시는 stripe.elements() 의 반환값으로부터 카드 번호·유효 기한·CVC를 입력하는 각 필드를 create 한다. 이 때, element.create()... 자바스크립트스트라이프 코드를 판매할 수 있는 서비스 「Code-sell」을 릴리스했다! (개인 개발) 추추추추추추기 수수료 0 % 캠페인하고 있습니다! 지금이 기회! 처음에 이번 약 2개월 만에 웹 앱을 공개했습니다. 프로그래밍 코드를 판매할 수 있는 서비스 Code-sell입니다. 가능한 한 부담없이 판매 · 구입할 수 있도록 고안했습니다. 100엔부터 가격 설정할 수 있습니다. 덧붙여서 내가 지금까지 만들어 온 4개의 web 앱의 코드를 모두 무료로 공개하고 있습니다! 원하는 사람이 있는... 스트라이프Rails개인 개발자바스크립트루비 JavaScript에서 특정 키 입력을 트리거하고 싶습니다. 「마우스를 사용하지 않고 키보드만으로 조작해 효율 UP하고 있다!」라고 하는 사람이 일정 수 있을 것 같기 때문에, Web 어플리를 만든다면 키보드만으로도 조작할 수 있도록 할까라고 생각하고 있습니다. 예를 들어 자작의 마크다운 메모 앱에 바로 가기 키로 조작하는 기능을 붙이고 싶다고 합니다. "Windows라면 Ctrl + / 를, Mac이라면 Control + / 를 눌러 "마크다운 기법... 자바스크립트키보드 Node.js에서 LINE Notify로 이미지 보내기 샘플 #protoout Node.js의 axios를 사용하여 LINE Notify에 이미지를 보내는 샘플입니다. 찾아도 별로 없었기 때문에 남겨 둡니다. axios 설치를 잊지 마세요. imageFullsize와 imageThumbnail의 위치에 이미지 URL을 지정하면 OK입니다. 적당히 이용하고 싶은 화상으로 변경합시다. app.js 이런 느낌으로 보내집니다. 이번 이미지는 https://dog.ceo/api... Line자바스크립트axiosLineNotifyNode.js WSL로 Kuromoji.js에 단어 추가 WSL 설치 WSL 재설정 Mecab 설치 UTF-8 변환/사전 작성 Kuromoji.js에 등록 Mecab 설치 동작 확인 작업 디렉토리 작성 사전 및 모델 다운로드 웹상의 정보라면 URL이 잘못되어 있는 경우가 많다. 커멘드는 기재하지만, 정규의 URL은 이하로부터 따릅니다. 파일 작성 person_name_tmp.csv 비용 계산 사전 만들기 1. 쿠로모지 다운로드 작성한 사전 파일 k... 형태소 분석자바스크립트 【Nuxt.js】axios로 header에 Authorization를 항상 붙이고 싶다! 투고자의 고민 ・JWT 인증의 앱으로 axios로 API 두드릴 때 headers에 Authorization:token을 붙이는 공통 처리를 만들고 싶다 (여러가지 기사 봐도 어쩔 수 없어···) 고민 해결 nuxt plugins를 사용하여 axios를 래핑하는 처리 준비 plugins/axios.js 독자의 목소리: 어이! 공식적으로 그대로 쓰여져 있다! 이 정도로 기사에 아무쪼록! 투고자... JWTVue.js자바스크립트nuxt.jsaxios 【Vue.js】지연 로딩과 vue-cli3의 prefetch의 구조 일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 지연 로딩 SPA의 성능을 향상시키기 위해 특정 구성 요소가 필요할 때 로드해야 합니다. 왜 지연 로딩 메커니즘이 있습니까? router로 정의하고 있는 컴퍼넌트가 늘어나고, 실제로는 특정의 조작을 할 때 밖에 사용하지 않는 컴퍼넌트도 나온다. 그 때, 디폴트의 vue-router에서는, SPA의 컴퍼넌트 모두를 로드하는 구조... 프런트 엔드vue-routerVue.js자바스크립트초보자 【Vue.js】컴포넌트의 3개의 네비게이션 가드 일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 그 이름에서 알 수 있듯이 무언가를 가드하기위한 처리로, 대체로 페이지 천이 전에 특정 처리를 실행시켜 페이지 천이시키지 않게 한다. Vue.js의 vue-router가 가지는 네비게이션 가드의 구조 3개 글로벌 비포 가드 루트 단위 가드 구성 요소 내 가드 모든 페이지 천이 전에 무언가의 처리를 실행하는 것으로, 가드를 실현... Vue.js자바스크립트vue-router프런트 엔드 【Vue.js】scrollBehavior 함수로 페이지 천이시의 스크롤을 유효하게 하는 비동기의 경우(transition 있음)도 원래 Vue.js에서는 event.preventDefault() 가 효과가 있어 디폴트의 움직임을 하지 않는다 아래와 같이 router-link 의 to 에 hash(#) 가 붙은 URL을 지정해, 그 링크를 클릭해 브라우저로 그 URL에 천이해도, id=next-user 의 요소에 자동적으로 스크롤 하지 않는다. (URL을 브라우저에 직타했을 때는, 브라우저의 기능으로 id=next-use... 프런트 엔드vue-routerVue.js자바스크립트초보자 【Vue.js】vue-router의 동적 URL로 파라미터가 바뀌었을 때, 라이프 사이클 훅은 불리지 않기 때문에 주의 일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 제대로 기억하지 않으면 우선 그런 것을 비망록으로 하나하나 남겨둔다. vue-router의 동적 URL이란? 다음과 같이 /users/ 에 계속되는 임의의 캐릭터 라인의 URL (URL 패스의 :id 의 부분이 그것)인 경우에, 그 때에 있는 컴퍼넌트를 표시하게 하는 설정의 일. router.js vue-router의 동적 U... 프런트 엔드vue-routerVue.js자바스크립트초보자 【Vue.js】router-link의 active-class・exact 사용법 일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 제대로 기억하지 않으면 우선 그런 것을 비망록으로 하나하나 남겨둔다. router-link란? vue-router를 사용할 때 URL에서 화면의 내용을 전환할 때 사용하는 태그로 SPA를 구축하는데 있어서 필수 기능. router-link의 active-class 속성 active-class 속성을 사용하면, router-li... Vue.js자바스크립트vue-router프런트 엔드 Vue3 (beta) + TypeScript + vue-router + Vuex 환경 구축 메모 Typescript, Router, Vuex를 넣어 둡니다. 최신 버전의 Vue beta를 사용해야 합니다. 이대로 움직이지 않기 때문에 몇 가지 수정합니다. 참고까지 변경전의 코드는 코멘트 아웃했습니다. shims-tsx.d.ts 삭제 shims-vue.d.ts shims-vue.d.ts component/HelloWorld.vue HelloWorld.vue router/index.ts i... Vue.js자바스크립트vue-routerゔ그림x vue-router에서 부모와 자식 간의 이벤트 처리 vue-router 사용시의 「자식 → 부모」또는 「아이 1 → 자식 2」의 이벤트 전달의 기술 방법에 대해서 자신 용 메모 소스 코드는 간략화한 것으로, 제대로 테스트하고 있지 않기 때문에 움직이지 않을지도 this.$router.app.$on 를 다루는 것이 포인트. 그 이외는 통상의 이벤트 버스의 방법과 같다. app.js parent.vue 목표로 하는 동작은 하기. child1에서 ... 비망록vue-routerVue.js자바스크립트자신의 메모 컴파일 없이 vu 컴포넌트를 외부 파일화 webpack 등의 컴파일 툴을 이용하지 않고 vue를 이용해, 컴포넌트를 외부 파일화해 보았다. 단일 파일 컴포넌트(.vue)라면, 태그를 이용하는 곳을 .js로 템플릿 리터럴을 이용합니다. home_component.js child_component.js 임포트하는 쪽에서는 보통으로 import해, 이용합니다. import.js html에서는 cdn에서 vue, vue-router를 읽습... Vue.js자바스크립트vue-router템플릿 리터럴 jquery가 사용되는 루트 디렉토리 이하, 모든 파일을 표시하는 명령 운영중인 웹 사이트에서 JQuery 버전을 업데이트하기 위해 영향 범위를 확인하는 작업이 있으며 jQuery 코드가 작성된 파일을 모두 파악해야 했으므로 여기에 메모를 둡니다. jQuery의 코드는 $( 와 jQuery( , 2 패턴이 있으므로, 2개 검색하는 것으로 jQuery가 사용된 파일을 모두 알 수 있습니다. -r 는 디렉토리에서도 검색할 수 있는 옵션입니다.-l 는 파일 이름만 표... 검색자바스크립트jQuery리눅스grep 해상 자위대의 HP가 아베 히로시의 라이벌로서 자칭을 줬다 ※기술적인 기사가 아닙니다. 다소 기술적인 이야기는 나옵니다. 우선, 그 페이지는 ・https 대응 ・2019.6.4 홈페이지 재개설(이전 사이트는 어디인가) ・로고와 타이틀이 입고 있다 · Failed to load resource: the server responded with a status of 404 (Not Found)라는 콘솔 오류가 있습니다. (1211.jpg 로드 오류) ・인... HTMLChrome자바스크립트CSS성능 Lighthouse에서 파일 전송량이 얼마나 많았는지 알아보기 Chrome에서 사용할 수 있는 Lighthouse의 기능이 최근 Google I/O로 업데이트되었습니다. Performance Budget이라고 하는 HTML/CSS/Javascipt/image등의 파일 전송 용량의 예산을 결정해, 그것을 모니터링할 수 있는 구조가 탄생하고 있었으므로, 그 움직임 방법과, 계측의 방법등을 간단하게 설명합니다. 명령을 조금 이해하고 있는 분이라면, 대응 가능... LightChrome자바스크립트google성능 Vue.js에서 큰 Object를 다룰 때는 Object.freeze하면 100 배 정도 빨라집니다. 제목대로이므로 우선 결과를 봅시다. See the Pen by isuke ( ) 실행 결과 ↓ 정확한 측정은 아니지만 분명한 속도의 차이를 알 수 있습니다. 라고 말하는 것으로 큰 Object를 취급할 때는 Object.freeze 하면 좋다. Object 를 렌더링 하는 경우는 이것을 해도 병목의 해소는 되지 않을 가능성이 있습니다. 결국 렌더링에 시간이 걸리기 때문에. devtools 가... Vue.js자바스크립트성능 VSCode에서 파일을 저장할 때 Prettier를 실행하는 방법 macOS를 새로 사서 VsCode를 다시 설치했을 때 파일을 저장할 때 Prettier를 실행하는 설정 방법을 잊어버려 반나절 이상 녹았다. 구그라고 보았지만 체계적으로 정리된 정보가 없어 좀처럼 시간을 녹였기 때문에 처음으로라도, 이 기사를 보면 「VSCode 유저라면 누구라도 파일 보존시에 Prettier를 달릴 수 있다」 처럼 언제부터 정중하게 기사를 썼다. VSCode 사용자 파일을... 자바스크립트prettierVSCodeMicrosoft Jest에서 new Date()를 모형화하기 Date 와 같은 메소드를 모형화하는 것은 매우 간단하고, 단순히 Date.now 로 옮겨놓으면 됩니다. 그러나 jest.fn() 는 런타임에 따라 값이 바뀌어 버리기 때문에, 조금 테스트에서는 그대로 사용하기 어렵고, 가능하면 Date 우선 테스트 대상 파일의 코드입니다. datetime.js 간단하게 Date 객체의 인스턴스를 생성해, Date 메소드를 실행해 메소드 실행시의 밀리 세컨드... Jest테스트자바스크립트datetime모의 가상화폐의 시가총액과 Qiita 관련 기사수의 상관관계를 조사해 보았다! 첫 투고가 됩니다! "있으면 좋겠다!"나 "신경이 쓰인다!"를 형태로 가려고 생각합니다. 프로그래밍 경험이 없는 초보자입니다만, 아웃풋 중시로 발신을 해 나가려고 생각하므로, 아무쪼록 잘 부탁드립니다! 코로나 화가 되어, 외출도 별로 하지 않게 된 오늘 요즘 여러분은 어떠세요? 나는 뭔가 새로운 취미를 생각하고 몇 년 전에했던 가상 통화를 재개했습니다. cryptocurrency가 가진 변동... 가상 통화QiitaAPI자바스크립트초보자crypto kintone 앱에 qiita 기사 정보 표시 kintone 앱에 설치한 버튼을 눌러 등록한 Qiita의 개인 액세스 토큰에 연결하는 기사 정보를 취득하고, 기사의 title·view count·LMGT count·url을 테이블에 표시할 수 있었습니다. 이런 느낌. Qiita에 블로그를 올렸습니다만, 현재의 view와 LMGT의 수가 신경이 쓰이네요. 그러나 Qiita의 내 페이지에는 LMGT 만 표시됩니다. 그래서 버튼 하나로 얻을 ... QiitaAPI자바스크립트금과 총 행이 포함된 HTML 테이블 정렬 ・이전, JavaScript로, DB에 하고 있는 자신의 Qiita의 데이터(QiitaAPI로 취득)를 「2축 그래프」와 「테이블」에 표시해 본다고 하는 것을 실시했습니다. (Qiita: ) ・기사나 데이터도 쌓여 왔으므로, 거기서 작성하고 있던 테이블을 정렬할 수 있는 기능을 붙이고 싶었습니다. 'Views'로 정렬한 화면 ①Sorttable의 사용법 기본은, 이하의 사이트를 참고로 했습니... QiitaAPI자바스크립트sortable.js 초보자가 지금은 기술을 조사해 보았습니다. 이번에 Node.js를 사용하여 QiitaAPI를 사용해 여러가지 해보자는 것으로, 지금 초보자용으로는 무엇이 유행하고 있는지를 조사해 보았습니다. QiitaAPI를 사용하여 '초보자'라는 단어가 포함된 기사를 검색했습니다. 프로그램 실행 시점(2020년 9월 27일 11시 30분 시점)에서 투고 시간이 새로운 것부터 상위 100건을 대상으로 하고 있습니다. 2020년 9월 27일 11시 3... QiitaAPI자바스크립트Node.js 이전 기사 보기
프런트 엔드 초보자가 grunt-file-dependencies를 개조해 보았습니다. 그들은 grunt-file-dependencies를 사용하여 해결할 수 있다고 믿습니다. 또한 정의 부분과 이용 부분을 코드 위에서 해석하기 위해 다음과 같은 설정을 추가했습니다. gruntfile.js 같은 파일이 정의 및 요청에 추가되고 순환 참조 오류 순환 참조 오류에 대한 자세한 내용을 알 수 없습니다. 어떤 정의 정보가 문제인지 제시하지 않는다 순환 참조 오류 파일을 참조하는 파일도... 종속성자바스크립트gruntgrunt-file-dependencies generator-react-webpack이라는 것을 발견했기 때문에 사용해 보았다 React 유행하는 것 같지만 무엇을 손에 넣을 수 있는지 잘 모르는 사람 (= 완전히 자신) 되는 것을 발견했기 때문에 readme 등 보면서 조사 조사해 갑니다. 아무 생각 없이 다음을 수행npm install -g generator-react-webpack 아무 생각 없이 다음을 수행yo react-webpack sample react-routerr를 포함하거나 듣는 아키텍처의 유무를 ... React자바스크립트gruntwebpack Jade로 만드는 맞춤 태그 입문 예를 들어, 아래와 같이 표시되는 rating 태그를 만들고 싶은 경우. HTML에는 <input type="rating" /> 도 <ratings /> 태그도 없기 때문에, 로 자작합니다. 와 같이 작성하면 컴파일 후에 다음과 같은 HTML이 나옵니다. HTMLimg 태그와 같은 빈 요소의 경우는 이렇게 씁니다. 실제로 이런 일도 할 수 있습니다. 앞에 +를 붙이면 함수 (mixin)를 호... 자바스크립트CSSWebComponentsgruntJade grunt의 node-webkit 빠져서 메모. grunt로 node-webkit 앱을 빌드합니다. package.json Gruntfile.js 포인트는 options.version. 규정치는 'latest'입니다만, 알파판 등 동작하지 않는 버젼의 node-webkit가 선택되었을 경우에 빌드가 통과하지 않게 됩니다. 에 놓여 있는, 정상적으로 움직이는 버젼을 지정합시다. build/{프로젝트명} 폴더 아래에 각 플랫폼용... node-webkit자바스크립트grunt 【Grunt】 복수의 CSS, JavaScript 파일을 minfy한다 여러 CSS, JavaScript 파일을 Grunt를 사용하여 단번에 각각 하나의 파일로 minfy합니다. ① Gruntfile 작성 ② package.json 쓰기 ④ html CSS, JavaScript 지정 부분에 build 코멘트 추가 ⑤ grunt 태스크 실행 src 폴더에는 작업 대상 파일군을 넣어 둡니다. 처리 후의 파일군은 dist 폴더내에 작성됩니다만, 폴더 마다 자동적으로 ... CSS자바스크립트grunt Stripe Element에서 카드 번호 입력 필드를 세로로 정렬하고 싶습니다. 을 사용하여 카드 번호를 입력하는 양식을 생성 할 때 기본적으로 카드 번호, 만료 날짜 및 CVC의 입력 필드가 가로로 정렬됩니다. 디자인상, 필드를 세로로 늘어놓고 싶을 때에 어떻게 폼을 생성하면 좋을지 조사했다. 우선 폼의 생성시는 stripe.elements() 의 반환값으로부터 카드 번호·유효 기한·CVC를 입력하는 각 필드를 create 한다. 이 때, element.create()... 자바스크립트스트라이프 코드를 판매할 수 있는 서비스 「Code-sell」을 릴리스했다! (개인 개발) 추추추추추추기 수수료 0 % 캠페인하고 있습니다! 지금이 기회! 처음에 이번 약 2개월 만에 웹 앱을 공개했습니다. 프로그래밍 코드를 판매할 수 있는 서비스 Code-sell입니다. 가능한 한 부담없이 판매 · 구입할 수 있도록 고안했습니다. 100엔부터 가격 설정할 수 있습니다. 덧붙여서 내가 지금까지 만들어 온 4개의 web 앱의 코드를 모두 무료로 공개하고 있습니다! 원하는 사람이 있는... 스트라이프Rails개인 개발자바스크립트루비 JavaScript에서 특정 키 입력을 트리거하고 싶습니다. 「마우스를 사용하지 않고 키보드만으로 조작해 효율 UP하고 있다!」라고 하는 사람이 일정 수 있을 것 같기 때문에, Web 어플리를 만든다면 키보드만으로도 조작할 수 있도록 할까라고 생각하고 있습니다. 예를 들어 자작의 마크다운 메모 앱에 바로 가기 키로 조작하는 기능을 붙이고 싶다고 합니다. "Windows라면 Ctrl + / 를, Mac이라면 Control + / 를 눌러 "마크다운 기법... 자바스크립트키보드 Node.js에서 LINE Notify로 이미지 보내기 샘플 #protoout Node.js의 axios를 사용하여 LINE Notify에 이미지를 보내는 샘플입니다. 찾아도 별로 없었기 때문에 남겨 둡니다. axios 설치를 잊지 마세요. imageFullsize와 imageThumbnail의 위치에 이미지 URL을 지정하면 OK입니다. 적당히 이용하고 싶은 화상으로 변경합시다. app.js 이런 느낌으로 보내집니다. 이번 이미지는 https://dog.ceo/api... Line자바스크립트axiosLineNotifyNode.js WSL로 Kuromoji.js에 단어 추가 WSL 설치 WSL 재설정 Mecab 설치 UTF-8 변환/사전 작성 Kuromoji.js에 등록 Mecab 설치 동작 확인 작업 디렉토리 작성 사전 및 모델 다운로드 웹상의 정보라면 URL이 잘못되어 있는 경우가 많다. 커멘드는 기재하지만, 정규의 URL은 이하로부터 따릅니다. 파일 작성 person_name_tmp.csv 비용 계산 사전 만들기 1. 쿠로모지 다운로드 작성한 사전 파일 k... 형태소 분석자바스크립트 【Nuxt.js】axios로 header에 Authorization를 항상 붙이고 싶다! 투고자의 고민 ・JWT 인증의 앱으로 axios로 API 두드릴 때 headers에 Authorization:token을 붙이는 공통 처리를 만들고 싶다 (여러가지 기사 봐도 어쩔 수 없어···) 고민 해결 nuxt plugins를 사용하여 axios를 래핑하는 처리 준비 plugins/axios.js 독자의 목소리: 어이! 공식적으로 그대로 쓰여져 있다! 이 정도로 기사에 아무쪼록! 투고자... JWTVue.js자바스크립트nuxt.jsaxios 【Vue.js】지연 로딩과 vue-cli3의 prefetch의 구조 일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 지연 로딩 SPA의 성능을 향상시키기 위해 특정 구성 요소가 필요할 때 로드해야 합니다. 왜 지연 로딩 메커니즘이 있습니까? router로 정의하고 있는 컴퍼넌트가 늘어나고, 실제로는 특정의 조작을 할 때 밖에 사용하지 않는 컴퍼넌트도 나온다. 그 때, 디폴트의 vue-router에서는, SPA의 컴퍼넌트 모두를 로드하는 구조... 프런트 엔드vue-routerVue.js자바스크립트초보자 【Vue.js】컴포넌트의 3개의 네비게이션 가드 일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 그 이름에서 알 수 있듯이 무언가를 가드하기위한 처리로, 대체로 페이지 천이 전에 특정 처리를 실행시켜 페이지 천이시키지 않게 한다. Vue.js의 vue-router가 가지는 네비게이션 가드의 구조 3개 글로벌 비포 가드 루트 단위 가드 구성 요소 내 가드 모든 페이지 천이 전에 무언가의 처리를 실행하는 것으로, 가드를 실현... Vue.js자바스크립트vue-router프런트 엔드 【Vue.js】scrollBehavior 함수로 페이지 천이시의 스크롤을 유효하게 하는 비동기의 경우(transition 있음)도 원래 Vue.js에서는 event.preventDefault() 가 효과가 있어 디폴트의 움직임을 하지 않는다 아래와 같이 router-link 의 to 에 hash(#) 가 붙은 URL을 지정해, 그 링크를 클릭해 브라우저로 그 URL에 천이해도, id=next-user 의 요소에 자동적으로 스크롤 하지 않는다. (URL을 브라우저에 직타했을 때는, 브라우저의 기능으로 id=next-use... 프런트 엔드vue-routerVue.js자바스크립트초보자 【Vue.js】vue-router의 동적 URL로 파라미터가 바뀌었을 때, 라이프 사이클 훅은 불리지 않기 때문에 주의 일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 제대로 기억하지 않으면 우선 그런 것을 비망록으로 하나하나 남겨둔다. vue-router의 동적 URL이란? 다음과 같이 /users/ 에 계속되는 임의의 캐릭터 라인의 URL (URL 패스의 :id 의 부분이 그것)인 경우에, 그 때에 있는 컴퍼넌트를 표시하게 하는 설정의 일. router.js vue-router의 동적 U... 프런트 엔드vue-routerVue.js자바스크립트초보자 【Vue.js】router-link의 active-class・exact 사용법 일에서 사용하게 되었기 때문에 1부터 Vue.js에 대해 배웠다. 제대로 기억하지 않으면 우선 그런 것을 비망록으로 하나하나 남겨둔다. router-link란? vue-router를 사용할 때 URL에서 화면의 내용을 전환할 때 사용하는 태그로 SPA를 구축하는데 있어서 필수 기능. router-link의 active-class 속성 active-class 속성을 사용하면, router-li... Vue.js자바스크립트vue-router프런트 엔드 Vue3 (beta) + TypeScript + vue-router + Vuex 환경 구축 메모 Typescript, Router, Vuex를 넣어 둡니다. 최신 버전의 Vue beta를 사용해야 합니다. 이대로 움직이지 않기 때문에 몇 가지 수정합니다. 참고까지 변경전의 코드는 코멘트 아웃했습니다. shims-tsx.d.ts 삭제 shims-vue.d.ts shims-vue.d.ts component/HelloWorld.vue HelloWorld.vue router/index.ts i... Vue.js자바스크립트vue-routerゔ그림x vue-router에서 부모와 자식 간의 이벤트 처리 vue-router 사용시의 「자식 → 부모」또는 「아이 1 → 자식 2」의 이벤트 전달의 기술 방법에 대해서 자신 용 메모 소스 코드는 간략화한 것으로, 제대로 테스트하고 있지 않기 때문에 움직이지 않을지도 this.$router.app.$on 를 다루는 것이 포인트. 그 이외는 통상의 이벤트 버스의 방법과 같다. app.js parent.vue 목표로 하는 동작은 하기. child1에서 ... 비망록vue-routerVue.js자바스크립트자신의 메모 컴파일 없이 vu 컴포넌트를 외부 파일화 webpack 등의 컴파일 툴을 이용하지 않고 vue를 이용해, 컴포넌트를 외부 파일화해 보았다. 단일 파일 컴포넌트(.vue)라면, 태그를 이용하는 곳을 .js로 템플릿 리터럴을 이용합니다. home_component.js child_component.js 임포트하는 쪽에서는 보통으로 import해, 이용합니다. import.js html에서는 cdn에서 vue, vue-router를 읽습... Vue.js자바스크립트vue-router템플릿 리터럴 jquery가 사용되는 루트 디렉토리 이하, 모든 파일을 표시하는 명령 운영중인 웹 사이트에서 JQuery 버전을 업데이트하기 위해 영향 범위를 확인하는 작업이 있으며 jQuery 코드가 작성된 파일을 모두 파악해야 했으므로 여기에 메모를 둡니다. jQuery의 코드는 $( 와 jQuery( , 2 패턴이 있으므로, 2개 검색하는 것으로 jQuery가 사용된 파일을 모두 알 수 있습니다. -r 는 디렉토리에서도 검색할 수 있는 옵션입니다.-l 는 파일 이름만 표... 검색자바스크립트jQuery리눅스grep 해상 자위대의 HP가 아베 히로시의 라이벌로서 자칭을 줬다 ※기술적인 기사가 아닙니다. 다소 기술적인 이야기는 나옵니다. 우선, 그 페이지는 ・https 대응 ・2019.6.4 홈페이지 재개설(이전 사이트는 어디인가) ・로고와 타이틀이 입고 있다 · Failed to load resource: the server responded with a status of 404 (Not Found)라는 콘솔 오류가 있습니다. (1211.jpg 로드 오류) ・인... HTMLChrome자바스크립트CSS성능 Lighthouse에서 파일 전송량이 얼마나 많았는지 알아보기 Chrome에서 사용할 수 있는 Lighthouse의 기능이 최근 Google I/O로 업데이트되었습니다. Performance Budget이라고 하는 HTML/CSS/Javascipt/image등의 파일 전송 용량의 예산을 결정해, 그것을 모니터링할 수 있는 구조가 탄생하고 있었으므로, 그 움직임 방법과, 계측의 방법등을 간단하게 설명합니다. 명령을 조금 이해하고 있는 분이라면, 대응 가능... LightChrome자바스크립트google성능 Vue.js에서 큰 Object를 다룰 때는 Object.freeze하면 100 배 정도 빨라집니다. 제목대로이므로 우선 결과를 봅시다. See the Pen by isuke ( ) 실행 결과 ↓ 정확한 측정은 아니지만 분명한 속도의 차이를 알 수 있습니다. 라고 말하는 것으로 큰 Object를 취급할 때는 Object.freeze 하면 좋다. Object 를 렌더링 하는 경우는 이것을 해도 병목의 해소는 되지 않을 가능성이 있습니다. 결국 렌더링에 시간이 걸리기 때문에. devtools 가... Vue.js자바스크립트성능 VSCode에서 파일을 저장할 때 Prettier를 실행하는 방법 macOS를 새로 사서 VsCode를 다시 설치했을 때 파일을 저장할 때 Prettier를 실행하는 설정 방법을 잊어버려 반나절 이상 녹았다. 구그라고 보았지만 체계적으로 정리된 정보가 없어 좀처럼 시간을 녹였기 때문에 처음으로라도, 이 기사를 보면 「VSCode 유저라면 누구라도 파일 보존시에 Prettier를 달릴 수 있다」 처럼 언제부터 정중하게 기사를 썼다. VSCode 사용자 파일을... 자바스크립트prettierVSCodeMicrosoft Jest에서 new Date()를 모형화하기 Date 와 같은 메소드를 모형화하는 것은 매우 간단하고, 단순히 Date.now 로 옮겨놓으면 됩니다. 그러나 jest.fn() 는 런타임에 따라 값이 바뀌어 버리기 때문에, 조금 테스트에서는 그대로 사용하기 어렵고, 가능하면 Date 우선 테스트 대상 파일의 코드입니다. datetime.js 간단하게 Date 객체의 인스턴스를 생성해, Date 메소드를 실행해 메소드 실행시의 밀리 세컨드... Jest테스트자바스크립트datetime모의 가상화폐의 시가총액과 Qiita 관련 기사수의 상관관계를 조사해 보았다! 첫 투고가 됩니다! "있으면 좋겠다!"나 "신경이 쓰인다!"를 형태로 가려고 생각합니다. 프로그래밍 경험이 없는 초보자입니다만, 아웃풋 중시로 발신을 해 나가려고 생각하므로, 아무쪼록 잘 부탁드립니다! 코로나 화가 되어, 외출도 별로 하지 않게 된 오늘 요즘 여러분은 어떠세요? 나는 뭔가 새로운 취미를 생각하고 몇 년 전에했던 가상 통화를 재개했습니다. cryptocurrency가 가진 변동... 가상 통화QiitaAPI자바스크립트초보자crypto kintone 앱에 qiita 기사 정보 표시 kintone 앱에 설치한 버튼을 눌러 등록한 Qiita의 개인 액세스 토큰에 연결하는 기사 정보를 취득하고, 기사의 title·view count·LMGT count·url을 테이블에 표시할 수 있었습니다. 이런 느낌. Qiita에 블로그를 올렸습니다만, 현재의 view와 LMGT의 수가 신경이 쓰이네요. 그러나 Qiita의 내 페이지에는 LMGT 만 표시됩니다. 그래서 버튼 하나로 얻을 ... QiitaAPI자바스크립트금과 총 행이 포함된 HTML 테이블 정렬 ・이전, JavaScript로, DB에 하고 있는 자신의 Qiita의 데이터(QiitaAPI로 취득)를 「2축 그래프」와 「테이블」에 표시해 본다고 하는 것을 실시했습니다. (Qiita: ) ・기사나 데이터도 쌓여 왔으므로, 거기서 작성하고 있던 테이블을 정렬할 수 있는 기능을 붙이고 싶었습니다. 'Views'로 정렬한 화면 ①Sorttable의 사용법 기본은, 이하의 사이트를 참고로 했습니... QiitaAPI자바스크립트sortable.js 초보자가 지금은 기술을 조사해 보았습니다. 이번에 Node.js를 사용하여 QiitaAPI를 사용해 여러가지 해보자는 것으로, 지금 초보자용으로는 무엇이 유행하고 있는지를 조사해 보았습니다. QiitaAPI를 사용하여 '초보자'라는 단어가 포함된 기사를 검색했습니다. 프로그램 실행 시점(2020년 9월 27일 11시 30분 시점)에서 투고 시간이 새로운 것부터 상위 100건을 대상으로 하고 있습니다. 2020년 9월 27일 11시 3... QiitaAPI자바스크립트Node.js 이전 기사 보기