본문 바로가기

JavaScript97

만약 우리가 처리해야 할 약속이 여러 개 있다면요? 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.
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.
기호 및 프록시를 사용하여 JavaScript 오브젝트 서명 ECMAScript 6에는 Proxy()와 같은 강력한 새로운 API와 그 유용한 동료 Reflect가 포함되어 있습니다. 여기서는 프록시와 기호를 조합하여 객체에 대한 "비밀" 혼합물을 생성하는 방법에 대해 알아보려고 합니다. 아직 기호를 활용하지 않으셨다면 MDN 문서에서 기호를 읽어보시는 것이 좋습니다. 간단히 말해서: 기호는 원시 요소이다. 그것들은 문자열과 같은 물체의 열쇠로 사용될 수 있다. 기호는 해당 기호가 생성된 참조를 통해서만 사용할 수 있습니다. 즉, 기호는 그 자체와 동일합니다. 이전 버전 때문에 JSON에 직렬화하거나 JSON에서 부활할 수 없습니다. 범위에 있는 기호에 액세스할 수 없으면 읽을 수 없습니다! 기호를 사용하여 기존 개체를 확장하고 개체의 기존 속성과 충돌하지 않는 .. 2022. 1. 19.
Javascript 이벤트 키코드 소개 나는 최근에 우리 애플리케이션에 계층 트리 드롭다운을 활용하는 폼을 만드는 작업을 했습니다. 계층 트리를 만드는 것은 단일 목록 다중 선택 드롭다운을 구현하는 것보다 훨씬 더 어려웠으며 문서 자체를 구성한다. 그러나 이 문서에서는 Javascript 이벤트 키코드를 소개합니다. PM이 사용자/클라이언트가 백스페이스 키를 사용하여 이미 선택한 항목을 제거하도록 요청했을 때 이 개념을 알게 되었습니다. 양식 기능을 사용할 수 있는 기존 라이브러리가 있습니다. 어플리케이션에서 우리는 다중 선택 양식을 위한 섹션이 있는 코드 기반의 스토리북을 사용했습니다. 우리의 UI는 대부분 스토리북을 사용하여 필요할 때 가져옵니다. 그러나 드롭다운 목록을 구현할 때 비즈니스에서 조금 더 많은 커스터마이징이 필요합니다. 우리.. 2022. 1. 19.
응답의 useContext() hook Makers Academy의 최종 프로젝트인 소프트웨어 개발의 16주 선택적 BootCamp에서는 MERN 스택(MongoDB, Express, React 및 Node.js)을 사용하여 간단한 클릭 게임을 제작하기로 결정했습니다. 호스트된 최종 프로젝트는 https://버너드 수명입니다.herokuapp.com/ 우리가 고민했던 것 중 하나는 "useContext()" 훅을 작동시키는 방법을 찾는 것이었습니다. 저는 애플리케이션 구성 요소 계층 전반에 걸쳐 수동으로 소품을 전달해야 하는 것을 방지하는 것이 유용할 수 있다고 생각했습니다. 2주간의 엔지니어링 프로젝트 기간 동안 이를 달성할 수 없었지만(구성 요소를 통해 스파게티 소품이 흘러내리는 결과를 초래했다), 그 이후 저는 이 소품을 효과적으로 사용.. 2022. 1. 13.
그거 디버그해. 미래의 나를 위한 디버깅 체크리스트/도구 상자 인정할게, 난 세계 최고의 테스터가 아니야. 나는 충분히 테스트하지 않는다. 그럼 누가 그러죠? 미래의 저와 미래의 제정신을 위해 코드에서 잠재적인 버그를 탐지하는 데 사용할 수 있는 기술의 간단한 요약을 소개합니다. 같거나 다른 환경에서 버그를 재현합니다. 당신은 그 문제를 재현할 수 있습니까? 그것은 약간 다른 상황에서 발생하나요? 다른 환경에서는 어떤 일이 일어날까요? 오류 메시지를 읽습니다. 있으면. 항상 시작하기에 좋은 장소입니다. 천만에요. 콘솔을 사용합니다. 네, 콘솔이요. 필요하다면 한 줄 한 줄 작은 부분만 테스트해보세요. 어레이에서 액세스해야 할 항목에 액세스하고 있습니까? 넌 안다고 생각하겠지만, 정말로, 넌 몰라. 그 질문에 대한 답은 .. 2022. 1. 13.
JavaScript 개체 깊이 안녕하세요 여러분, 우리는 오늘 자바스크립트 오브젝트에 대한 모든 것을 다룰 것입니다. JavaScript로 프로그램을 작성하는 동안 객체를 더 잘 사용합니다. 개체의 구문 및 다양한 개체 조작 방법을 이해합니다. 그러니까 끝까지 계속 읽어보시고 여러분이 그것으로부터 무언가를 배우길 바랍니다. 물건들 이 개체는 연관된 키/값 쌍의 모음인 JavaScript에서 가장 유용한 데이터 구조 중 하나입니다. 객체 작성 새 빈 객체는 두 가지 방법으로 만들 수 있습니다. 문자 표기법 객체() 생성자 함수 const myObject = {}; // Using literal notation const myObject = new Object(); // Using the Object() constructor functi.. 2022. 1. 13.
내 배열 메서드 치트 시트 생략 아래의 배열 방법 표를 몇 번이나 참조해야 했는지 말씀드릴 수 없습니다. 저는 LeetCode에서 알고리즘 연습을 하는 동안 몇 번 이상 사용했습니다. 이제 그만! 나는 치트시트가 필요 없고 이 방법들을 더 잘 알고 싶어. 그럼 블로그에 풀어보죠 파괴적인 방법과 비파괴적인 방법? 여기 당신이 알아야 할 것이 있습니다. 소멸 배열 메서드는 메서드가 호출되는 원래 배열이 변이됩니다. let runningShoes = ['Altras', 'Innov-8s', 'Bedrocks'] runningShoes.unshift('Luna Sandals') // destructive method console.log(runningShoes) // => ['Luna Sandals', 'Altras', 'Innov-8s', .. 2022. 1. 12.
React: 더 나은 코딩 방법 플랫아이언 스쿨 오랫동안 웹 애플리케이션을 코딩하는 방법은 손으로 모든 DOM 요소를 만드는 방법밖에 없었습니다. 저는 최근에 리액트라는 프레임워크를 사용하는 좀 더 선언적인 프로그래밍 방법을 알게 되었습니다. 또한 React는 코드를 디버그하는 것을 더 쉽게 만들 뿐만 아니라 코드를 더 짧고 읽기 쉬우며 코드에 대한 고통을 줄여줍니다! 리액트에는 몇 가지 놀라운 기능이 있지만, 그 부분을 다루기에 앞서 리액트로 코딩하는 것은 당신의 바닐라 자바스크립트로 코딩하는 것과는 매우 다를 것이라고 말해야 합니다. 리액트는 자바스크립트의 확장판인 JSX를 사용하기 때문이다. 특징들 이미 작업한 React의 두 가지 주요 기능은 다음과 같습니다. 선언적 구성요소 기반 선언적 명령형 프로그래밍과 선언형 프로그래밍이라.. 2022. 1. 12.
JSON 어레이를 통해 반복하여 변환 파일(i18N)의 구성요소를 렌더링합니다. 197 소개 제가 리액트로 웹사이트를 만들 때, 제가 설명하려고 하는 번역에 문제가 생겼습니다. 이 때 "이런, JSON(경로)을 가져와 데이터에 액세스할 수 있다는 것을 알고 계십니까?"라고 말할 수 있습니다. 네, 그게 쉬운 방법이지만, 이 배열은 웹사이트에 보여질 모든 정보를 포함하고 있고 제가 번역하기를 원했기 때문에 저는 JSON 파일이 두 개 있어서 안 될 것 같습니다. (하단의 링크). 구현 저는 리액트 앱을 만드는 방법 및/또는 설정하는 방법에 대해 설명하지 않겠습니다. i18N 라이브러리와 JSON 어레이 반복 설정 방법에만 집중하겠습니다. 루트 폴더에 i18n.js라는 파일을 생성하고 다음을 작성합니다. 다음과 같은 i18N 라이브러리를 사용했습니다. 백엔드: (i18-next-http.. 2022. 1. 12.

티스토리툴바