본문 바로가기

javascript126

Vuetify에서 호버 구성 요소를 사용하는 방법 codingbeautydev.com에서 이 기사의 최신 버전을 읽어보십시오. CSS :hover pseudo-class를 사용하여 마우스 포인터의 요소 스타일을 사용자 지정할 수 있지만 Vuetify는 v-hover 구성 요소를 통해 깔끔한 방법을 제공합니다. 어떻게 사용할 수 있는지 이 글에서 알아보겠습니다. v-hover 사용 Hover over me! v-hover 기본 슬롯은 호버 구성 요소 하위의 현재 호버 상태에 따라 값이 변경되는 호버 요소를 제공합니다. 마우스가 호버 위에 있지 않으면 호버 기본 슬롯은 거짓으로 유지됩니다. 우리의 경우, 그러면 카드의 고도가 2로 설정됩니다. 그리고 우리가 그 위를 맴돌면, 호버(hover)가 참이 되고 카드 상승이 12가 됩니다. 열기 지연을 가리킵니다... 2022. 1. 27.
JavaScript의 이벤트 루프 자바스크립트로 시작할 때, 이벤트 루프는 우리가 집중해야 할 주요 개념 중 하나이다. 자바스크립트는 단일 스레드 언어이기 때문에 이벤트 루프와 관련하여 다양한 혼동이 발생한다. 차근차근 다뤄보도록 하겠습니다. 자바스크립트는 단일 스레드 언어이다. 즉, 한 번에 하나의 작업만 실행할 수 있습니다. 즉, 자바스크립트 코드는 한 번에 한 줄씩 실행되는 방식으로 실행된다. 자, 상상해 봅시다: API에서 데이터를 가져오는 작업은 30초가 필요하므로 다른 작업이 발생하기 전에 30초를 기다리는 것은 이상적인 상황이 아닙니다. 그래서, 이벤트 루프의 개념이 여기 사진에 나타납니다. 그래서 우리는 작은 개념으로 시작해서 결국 이벤트 루프의 실제 정의로 넘어갈 것입니다. 실행 스택/호 스택 일반적인 말로 실행 스택은 .. 2022. 1. 27.
TypeScript, SCSS 및 Pug를 사용하여 5분 이내에 웹사이트를 설정하는 방법 이 기사에서는 웹팩 없이 SCSS, Pug, TypeScript를 사용하여 웹 사이트를 5분 이내에 설정하는 방법을 보여드리고자 합니다. 정보 당신이 폴더, 패키지를 만들어야 한다는 것을 알려주지 않을게요.json 파일, Node.js가 컴퓨터에 설치되어 있어야 합니다. 왜냐하면 제가 이 문서를 아는 사람들을 위해 작성했기 때문입니다. 웹 팩은 어떨까요? 저는 웹팩을 정말 좋아하지만 가끔은 작은 웹 사이트를 만들고 싶을 때 0부터 구성해야 합니다. 파일 생성, 많은 종속성 설치. 이 시간은 SCSS 변수와 같은 다른 것에 사용될 수 있다. 가끔 오류가 날 수 있는데 어떻게 풀어야 할지 모르면 인터넷으로 해결책을 검색하거나 스스로 풀어야 한다. 내 생각에 그것은 시간 낭비다. 웹팩이 아니라면요, 그래서요?.. 2022. 1. 27.
캐시 옵션을 사용하여 특정 뷰포트에 대한 서버 측 렌더링 과거에는 대부분의 고객들이 엄격한 규칙을 가지고 있고, 그들 중 일부는 실제로 쉽게 구부릴 수 없거나(예: SEO 요건) 제 과제를 납득할 시간이 더 필요하기 때문에 저는 모든 것을 수행하는 하나의 프레임워크를 좋아하지 않았습니다. 여러분 중 일부는 알겠지만, 저는 모든 애플리케이션이 단일 모노레포에 NextJS와 핫 리로드되고 앱/구성 요소/서비스/타입/글씨체/페이지/등용 패키지가 있는 전자 상거래 다중 테넌트 웹 사이트를 마칩니다. 분리된 패키지가 완전히 입력되었습니다. 이번에는 고객이 NextJS를 원했고(과거에는 빠른 설정을 위해 POC에서 주로 사용했음) 매우 적은 수의 팀이 있었기 때문에 매우 쉬웠습니다. 그들이 그것을 하지 않는 방법을 알았기 때문에 또한 쉬웠다 :). 멀티 테넌시(Multi.. 2022. 1. 27.
나는 결코 충분히 알지 못한다… 나는 그것을 맛 볼 수 있다. 거의 다 왔어. 성공적인 웹 개발자가 되기 위해 알아야 할 것의 10% 정도밖에 모른다는 사실을 상기시키기 전까지는 재택 근무 가능성이 점점 더 현실화되고 있습니다. 하지만, 제가 가진 작은 경험으로, 저는 필요한 특성들이 여러분이 성공적인 웹 개발자가 되기 위해 필요한 지식과 거의 같다는 것을 알게 되었습니다. 2021년 3월 이후로, 저는 일주일에 15~20시간씩 꾸준히 코드를 받아왔습니다. 저는 9월 중순 DevSlopes에 가입했을 때 멘토쉽과 목표에 대한 직접적인 경로로 인해 더욱 고무되었습니다. 저는 9월부터 약 14개의 솔로 프로젝트를 진행했는데, 매번 더 어려워지고 있습니다. 지난 4개월 동안 저는 HTML, CSS, 자바스크립트, 리액트Js, 그리고 타입스크.. 2022. 1. 19.
React + RESTful API로 이메일 인증 구현 안녕하세요! 이 튜토리얼에서는 전자 메일 + 암호에 의존하는 인증 시스템을 설정하는 방법에 대해 알아보겠습니다. 프런트엔 리액트, 백엔드엔 Node.js를 사용할 예정입니다. 지원되는 워크플로우는 다음과 같습니다. 가입: 사용자가 로그인에 사용할 자격 증명을 제출합니다. 사용자가 전자 메일을 확인합니다. 이제 로그인할 수 있습니다. 로그인: 사용자가 전자 메일/암호 제출 사용자가 존재하는 경우 세션이 작성되고 기본 정보가 표시된 페이지로 이동합니다. 사용자가 페이지를 새로 고칠 수 있으며 여전히 로그인되어 있습니다. 로그아웃: 사용자가 세션을 취소하여 로그아웃을 요청할 수 있습니다. 우리의 디렉토리를 설정하자. 다음을 실행합니다. mkdir email_auth_tutorial && cd email_aut.. 2022. 1. 19.
만약 우리가 처리해야 할 약속이 여러 개 있다면요? JavaScript에서 여러 약속 처리: Promise는 특별한 자바스크립트 객체라는 것을 이미 알고 있습니다. 비동기(일명 비동기) 작업이 성공적으로 완료된 후 또는 시간 초과, 네트워크 오류 등으로 인해 성공적으로 완료되지 않은 경우 오류가 발생합니다. 프로미스(Promise)는 실행자 함수를 사용하여 작업을 완료합니다(대부분 비동기). 소비자 함수(프로밋의 결과를 사용하는)는 실행 함수가 해결(성공) 또는 거부(오류)로 완료될 때 알림을 받아야 한다. 핸들러 메소드인 .then(), .catch() 및 .finally()는 실행자와 소비자 함수 사이의 링크를 만드는 것을 도와서 약속이 해결되거나 거부될 때 동기화될 수 있다. 처리기 메서드(.then, .catch, .finally)를 제외하고 Pr.. 2022. 1. 19.
Puppeteer는 쿠키를 저장하고 쿠키를 로드/읽습니다. #Puppetier로 페이지 로그인을 저장하는 방법. 이 글은 세션 저장 및 로드 주제를 다루고 있습니다. 또는 로그인 후 쿠키를 저장하고 Puppeteer 세션이 종료된 후 쿠키를 다시 로드하는 것이 좋습니다. 이는 해당 문서에 다음 단계가 포함되어 있음을 의미합니다. 스크립트 알파: 페이지를 열고 웹 사이트에 로그인합니다. 쿠키를 json 파일에 저장하고 닫습니다. 스크립트 베타: 새 페이지를 엽니다. 이전 세션의 쿠키를 로드합니다. 로그인 후 원하는 페이지로 리디렉션합니다. 이 단계를 수행하려면 다음 스크립트를 따릅니다. 스크립트 알파의 코드: const puppeteer = require(‘puppeteer’); let browser = await puppeteer.launch({ headless: this.head, args: [ ‘ — no-sa.. 2022. 1. 19.
자바스크립트 튜토리얼 2부 이 블로그에서는 스크립트가 무엇인지, 메인 파일(.html)에 외부 스크립트를 추가하는 방법, 자바스크립트에서 키워드를 가져오고 내보내는 방법, 엄격한 모드, 리터럴, 변수, 원시 및 비기본 데이터 유형이 무엇인지 설명했습니다. 참고: 이 블로그를 읽기 전에 이전 블로그 의 JavaScript 기본 사항을 읽어보시는 것이 좋습니다. 외부 스크립트 포함: 스크립트는 요소이며, 스크립트의 도움으로 우리는 자바스크립트 코드를 HTML 코드로 작성할 수 있습니다. 나는 이것을 예를 들어 설명하려고 합니다. 파일 스크립트가 있습니다.js 이 스냅샷은 script.js 파일입니다. 이제 이 파일을 index.html에 추가하려고 합니다. 파일을 추가하려면 스크립트 요소를 사용해야 합니다. 따라서 스크립트 요소의 도.. 2022. 1. 19.
대규모 프런트 엔드 코드베이스에서 모든 i18n 키를 다시 쓰는 중 저와 제 팀은 흥미로운 도전을 받았습니다. 우리는 모든 i18n 변환에 대한 진실 출처를 하드 코딩된 JSON 파일에서 인기 있는 제3자 국제화 서비스인 구에서 가져온 자동 생성 JSON 파일로 변경하는 과정에 있었다. 도전은 다음과 같습니다. 또한 이번 기회에 코드베이스의 번역 키를 보다 깨끗하고 쉽게 추론할 수 있도록 완전히 다시 작성하기로 결정했습니다. 이 업무는 상당한 팀워크가 필요했고, 제 동료 개발자들 중 몇 명은 이 업무의 다른 면을 맡았습니다. 이 기사에서는 주로 이 작업에 대한 제 작업과 그 작업에 투입된 몇 가지 영리한 자동화에 대해 말씀드리겠습니다. 하지만 먼저 내 손에 떨어지기 전에 무슨 일이 있었는지부터 살펴보죠 저희 팀의 개발자 중 두 명은 500개 미만의 기존 번역 키를 통해 .. 2022. 1. 19.
내 식료품 목록 및 식사 아이디어 앱: LISTLESS 이 앱을 만든 저의 목표는 제가 일상에서 겪는 두 가지 문제를 해결하는 것이었습니다: 저녁 식사를 위해 무엇을 만들어야 할지 고민하는 것과 물건을 잊어버려서 코너로 돌아갈 필요가 없도록 제 식료품 쇼핑 목록을 정리하는 것이었습니다. HTML 파일이 한 개 있는 앱을 만드는 일이었지만, 저는 리스트 기능과 식사 아이디어 생성기가 다른 페이지에 분리되기를 원했습니다. 이를 위해 앱의 "홈 페이지" 역할을 하는 메인 디브 하나를 만든 다음 홈 페이지, 목록 기능 및 식사 아이디어 생성기의 "링크" 역할을 하는 세 개의 링크를 탐색 모음에 만들었습니다. 목록 기능이나 음식 아이디어의 이벤트 수신기가 클릭으로 트리거되면 메인 div의 내부 HTML이 빈 문자열로 설정된 다음 새 코드가 DOM에 렌더링됩니다. 이렇.. 2022. 1. 19.
완전히 낯선 사람: 잘 알려지지 않은 코딩 언어 5개…. 그리고 이러한 언어를 배워야 하는 이유 왜 다른 언어들 중에서 당신을 돋보이게 할 수 있는 몇 가지 덜한 프로그래밍 언어를 사용하는가! 위 사진에 나와 있는 언어는 개발자 커뮤니티에서 가장 사랑받는 언어 중 하나라고 확신합니다. 좋아요, 아마 가장 높이 평가되는 것은 아닐 거예요! 하지만 그것은 확실히 가장 많이 사용된 목록에 속해요! PHP 외에도 자바스크립트, C++, 파이썬을 인용할 수 있습니다. 알다시피, 소프트웨어 개발과 다른 종류의 목적을 목적으로 하는 코딩 언어들이 아주 많이 있습니다. 하지만 프로그래머 커뮤니티 내부에도 잘 알려지지 않은 여러 언어가 있습니다. 이 이야기에서는, 우리는 그들 중 일부를 깊게 할 것입니다. 어떻게 하면 눈에 띄게 할 수 있는지 알아내야죠 포니: 겉보기에 재미있는 이름 때문에 산만해지지 마. 포니는 .. 2022. 1. 19.
Protractor 제어 흐름 사용 안 함 처리 selenium webdriver 맥락 사용자가 protractor에 대해 작성하는 JS 코드는 비동기적으로 실행됩니다(순서는 아님). 이전 명령이 실행될 때까지 대기하면서 특정 흐름을 따를 수 있는 사양이 필요하기 때문에 자동화 용도로는 사용할 수 없습니다. 이 작업은 protractor ControlFlow에서 처리합니다. ControlFlow ControlFlow는 Selenium Promise Manager를 기반으로 합니다. 백그라운드에서 getText(), findElement(), sendKeys(), click() 등과 같이 브라우저와 상호 작용하는 각 호출이 예약되어 ControlFlow 대기열에 푸시됩니다. 그러한 모든 통화는 약속으로 취급된다. 이렇게 하면 약속 체인을 위해 .then.. 2022. 1. 19.
웹 기록 중Puppetier를 사용하는 유령 참가자가 있는 RTC TLDR: 웹용 비디오 및 오디오 녹화를 설정하려면 Puppeteer-stream을 확인하십시오.RTC 영상 채팅. 최근에 웹을 기록하는 다양한 방법을 연구하고 있습니다.RTC 그룹 화상 채팅 응용 프로그램입니다. 연구를 하는 동안 저는 몇 가지 다른 방법들을 발견했습니다. 기본적으로 미팅을 클라이언트 또는 서버에 기록할 수 있습니다. 제가 시도한 클라이언트 메소드는 1) 캔버스 요소를 사용하여 canvas.captureStream(frameRate) 방법을 사용하여 레코드 같은 라이브러리를 사용하여 개별 스트림을 혼합한 것입니다.RTC.js 3) getDisplayMedia를 사용하여 이 멋진 오픈 소스 프로젝트 mirotalk가 사용하는 화면을 녹화합니다. 솔직히 이 방법들은 고객에게 이상적이지 않고.. 2022. 1. 19.
Faker.js y Aaron Swartz(2da parte) Breve 튜토리얼 파라 generar datos falso in JavaScript con falso (ya no faker.js) 시 에스타스 레이엔도 에세 아르티쿨로 개연성 레이스테 라 파트 도입도리아, 시 노 레코미엔도 다르클릭 아키. 나는 hacer el tutorial con faker.js cuando me encontré con falso (como en la imagen de arriba의 전망대를 토하다) vamos a ver este chico malo, crea un directorio in tu local, algo como falsoejemplo, una vesaré VS code), crea un archivo 인덱스. 아스미엔도 케야 티에네스 노들스 인스탈라도, 터미널 옆에,.. 2022. 1. 19.

티스토리툴바