본문 바로가기

JavaScript97

Google Analytics와 연결하여 실제 브라우저 지원을 표시하는 방법 내가 사용하는 웹캔은 오늘날 모든 웹 개발자에게 없어서는 안 될 부분입니다. 데스크탑 및 모바일 웹 브라우저에서 프런트 엔드 웹 기술을 지원하기 위한 최신 브라우저 지원 표를 사용할 수 있습니까? 개별 기술에 대한 브라우저 지원은 컬러로 강조 표시됩니다(기능을 지원하는 브라우저는 녹색, 이를 지원하지 않는 브라우저는 빨간색, 일부 또는 폴리필을 지원하는 브라우저는 진흙 녹색으로 표시됩니다). 오른쪽 상단에서 해당 기술을 지원하는 브라우저의 비율도 확인할 수 있습니다. 어떤 브라우저가 어떤 기능을 지원하는지 알 수 있고, 동시에 얼마나 많은 브라우저가 사용되는지 알 수 있을까요? 이를 바탕으로 애플리케이션은 새로운 기능을 사용할 수 있는 사용자의 비율을 계산할 수 있습니다. 그러나 이 수치는 근사치일 뿐이.. 2022. 3. 10.
코드의 시간적 결합 이해 구심 결합: A 구성 요소의 작업은 B, C, D의 구현에 의존해야 합니다. 도메인 이벤트별 타이밍 분리 이벤트 손실 처리 방법 기껏해야 한 번 이상 정확히 한 번 방출 손실 처리 방법 결론 이벤트 손실 여부와 상관없이 가장 간단한 아키텍처인 EventEmitter를 사용하면 됩니다. 이 방식이 가장 단순하고 80%의 경우 문제가 없을 수 있지만 문제가 생기면 어떻게 해야 할까요? 최대한 신뢰할 수 있도록 시도하고 있으므로 문제가 없을 것을 99% 확신하는 메시지 큐를 도입하십시오. 하지만 여전히 1%의 위험이 감내할 수 있을까? 이벤트 소싱을 구현하려면 복잡성이 증가하고 성능에 영향을 미칠 수 있습니다. 이게 받아들여질까요? 2022. 2. 15.
2022년에 꼭 사용해야 할 11가지 놀라운 프런트엔드 개발 툴 1. 대응력 2. 차트.css 3. 그림 그리기 4. 공용 API 5. 유리형태성 CSS 생성기 6. UiGradients 7. 기티뇨르.이오 8. iHateRegex 9. 극장 10. 머리 없는 UI 11. 더 예쁜 결론 2022. 2. 15.
무료 뉴스레터 구독 2022. 2. 15.
JavaScript Bundler를 사용하는 이유 JS 파일 수 감소 코드베이스를 잘 정의된 여러 파일로 분할하여 유지할 수 있습니다. 배포할 수 있도록 코드를 큰 파일로 번들로 제공합니다. node_modules에서 쉽게 가져오기 운영 서버에 node_messages를 배포하고, 가져올 파일의 상대 경로를 사용합니다. var _ = require('../node_modules/lodash/lodash.js'); var _ = require('../../node_modules/lodash/lodash.js'); 다른 파일 형식 가져오기 import './core.js'; import './style.css'; const template = require('./view.html'); 전치부호 코드 축소 변수에 의미 있는 이름 지정 코드 들여쓰기 다른 개발.. 2022. 2. 15.
7. 점 연결 - Big O 및 해시 테이블 데이터 구조 충돌 처리: 출력: 기타 관련 기사: 점 연결 - Big O 및 어레이 데이터 구조 점 연결 - Big O 및 Linked List 데이터 구조 점 연결 - Big O 및 트리 데이터 구조 점 연결 - Big O 및 스택 데이터 구조 점 연결 - Big O 및 큐 데이터 구조 점 연결 - 빅 O 및 그래프 데이터 구조 이 기사: 점 연결 - Big O 및 해시 테이블 데이터 구조 참조: 2022. 2. 15.
JavaScript를 배우기 위한 최고의 YouTube 채널 2022. 2. 15.
많은 프로그래머도 모르는 재미있는 프로그래밍 사실 8가지 1. Java, Python, JavaScript 및 기타 10개 언어가 전부가 아닙니다. 2. 첫 번째 컴퓨터 바이러스는 그리 오래되거나 새롭지도 않다. 3. 프로그래밍 언어에도 악플러가 있다. 4. 첫 번째 컴퓨터 게임은 얻는 것이 없다. 5. 컴퓨터 프로그래밍은 2차 세계대전을 끝내는 데 도움을 주기도 했다. 6. 첫 번째 버그는 실제 버그였다. 7. 미친 시인의 딸이 최초의 프로그래머가 되었다. 8. 첫 번째 컴퓨터는 전기를 전혀 사용하지 않았어. 2022. 2. 15.
JavaScript 함수: 매개변수 대 인수 매개 변수 function multiplyByTwo(whatever) { return whatever * 2; }; 논쟁들 multiplyByTwo(6); //=> 12 이제 '아무거나'라는 단어로 조금 놀아봅시다. let whatever = 10; whatever; //=> 10 multiplyByTwo(whatever); //=> 20 whatever = 15; multiplyByTwo(whatever); //=> 30 multiplyByTwo(8); //=> 16 또 다른 기능을 소개합니다. function addTwoNumbers(a, b) { return a + b; } addTwoNumbers(1, 2); //=> 3 multiplyByTwo(addTwoNumbers(1, 2)); //=> 6.. 2022. 2. 15.
JavaScript를 사용하여 브라우저에서 오디오 캡처 네비게이터란? 오디오 캡처를 위한 응용 프로그램 상태 이니셜: 응용 프로그램의 시작입니다. 여기에서는 시작 메시지와 녹화를 시작할 수 있는 버튼이 표시됩니다. 녹음: 여기서는 오디오를 녹음하고 녹음을 중지할 수 있는 버튼이 있습니다. 다운로드: 녹음된 오디오를 재생하거나, 오디오를 다운로드하거나, 다시 녹음할 수 있는 상태입니다. 오류: 응용 프로그램은 클라이언트 브라우저가 mediaDevices API를 지원하지 않는 경우에만 이 상태가 됩니다. 2022. 2. 15.
JavaScript로 고유 값 통합 [0, 1, 3, 2, 8, 1], [5, 2, 9, 1, 4, 7, 4], [2, 1, 6, 10, 6] [0, 1, 3, 2, 8, 5, 9, 4, 7, 6, 10] 솔루션 1: 루프에 중첩됨 for (let i = 0; i < arguments.length; i++) { let arrayArguments = arguments[i]; for (let j = 0; j < arrayArguments.length; j++) { let indexValue = arrayArguments[j] ``` ```js if (result.indexOf(indexValue) < 0) { result.push(indexValue); ``` ```js console.log(uniteUnique1([0, 1, 3, 2, 8,.. 2022. 2. 15.
Shell 대신 zx.js 사용 zx.js를 사용하는 이유 설치하다 // Global installation. // Also you can also install it separately in your project. npm i zx -g zx.js의 원리 사용. 파이프라인 문자를 사용하여 스크립트를 빠르게 테스트하는 것이 바로 가기입니다. 또 다른 방법은 우리가 자주 하는 것처럼 프로젝트에서 스크립트를 개발하는 것이다. 명령줄 도구 첫 번째 단계는 Responent 구성 요소인 첫 번째 Template 파일을 생성하고 기본적으로 Props 타입을 내보낸 후 최종적으로 디렉토리와 파일의 내용을 생성해야 합니다. 2022. 2. 15.
JavaScript의 이벤트 루프 자바스크립트로 시작할 때, 이벤트 루프는 우리가 집중해야 할 주요 개념 중 하나이다. 자바스크립트는 단일 스레드 언어이기 때문에 이벤트 루프와 관련하여 다양한 혼동이 발생한다. 차근차근 다뤄보도록 하겠습니다. 자바스크립트는 단일 스레드 언어이다. 즉, 한 번에 하나의 작업만 실행할 수 있습니다. 즉, 자바스크립트 코드는 한 번에 한 줄씩 실행되는 방식으로 실행된다. 자, 상상해 봅시다: API에서 데이터를 가져오는 작업은 30초가 필요하므로 다른 작업이 발생하기 전에 30초를 기다리는 것은 이상적인 상황이 아닙니다. 그래서, 이벤트 루프의 개념이 여기 사진에 나타납니다. 그래서 우리는 작은 개념으로 시작해서 결국 이벤트 루프의 실제 정의로 넘어갈 것입니다. 실행 스택/호 스택 일반적인 말로 실행 스택은 .. 2022. 1. 27.
캐시 옵션을 사용하여 특정 뷰포트에 대한 서버 측 렌더링 과거에는 대부분의 고객들이 엄격한 규칙을 가지고 있고, 그들 중 일부는 실제로 쉽게 구부릴 수 없거나(예: SEO 요건) 제 과제를 납득할 시간이 더 필요하기 때문에 저는 모든 것을 수행하는 하나의 프레임워크를 좋아하지 않았습니다. 여러분 중 일부는 알겠지만, 저는 모든 애플리케이션이 단일 모노레포에 NextJS와 핫 리로드되고 앱/구성 요소/서비스/타입/글씨체/페이지/등용 패키지가 있는 전자 상거래 다중 테넌트 웹 사이트를 마칩니다. 분리된 패키지가 완전히 입력되었습니다. 이번에는 고객이 NextJS를 원했고(과거에는 빠른 설정을 위해 POC에서 주로 사용했음) 매우 적은 수의 팀이 있었기 때문에 매우 쉬웠습니다. 그들이 그것을 하지 않는 방법을 알았기 때문에 또한 쉬웠다 :). 멀티 테넌시(Multi.. 2022. 1. 27.
React + RESTful API로 이메일 인증 구현 안녕하세요! 이 튜토리얼에서는 전자 메일 + 암호에 의존하는 인증 시스템을 설정하는 방법에 대해 알아보겠습니다. 프런트엔 리액트, 백엔드엔 Node.js를 사용할 예정입니다. 지원되는 워크플로우는 다음과 같습니다. 가입: 사용자가 로그인에 사용할 자격 증명을 제출합니다. 사용자가 전자 메일을 확인합니다. 이제 로그인할 수 있습니다. 로그인: 사용자가 전자 메일/암호 제출 사용자가 존재하는 경우 세션이 작성되고 기본 정보가 표시된 페이지로 이동합니다. 사용자가 페이지를 새로 고칠 수 있으며 여전히 로그인되어 있습니다. 로그아웃: 사용자가 세션을 취소하여 로그아웃을 요청할 수 있습니다. 우리의 디렉토리를 설정하자. 다음을 실행합니다. mkdir email_auth_tutorial && cd email_aut.. 2022. 1. 19.

티스토리툴바