본문 바로가기

전체 글145

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.
아니요. 매개 변수와 인수는 함수에 대해 서로 다른 두 가지 사항입니다. 매개 변수는 함수 정의에 기록한 내용일 뿐입니다. 인수는 함수의 매개 변수로 전달하는 데이터입니다. 프로그래밍 실행 중에는 파라미터가 변경되지 않습니다. 기본 인수가 아닌 경우 함수가 호출될 때마다 인수가 달라져야 합니다. 매개 변수와 자리 표시자는 모두 문자 p로 시작합니다. 인수와 실제 값은 모두 문자 a로 시작합니다. 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.
예니 게르체클레슈티르디이미즈 공용 사티쉬미자 비르 바크시 2021sonunda olduksa hirika ve inanillmaz hizllmaz bir anázl bir bir yashandi. 29 Aralkta sadece iki saatinde ichinde Agoric, CoinListti 50 millyon dolaryndi satdi sa satşzeki sa satşrdi, blyne sa satşze satşrdi satşrdi. 부, 토키미즈 올란 BLD 할카 아크 사트시 올두 말뚝. 사티쉰 부덴리 이즐 타맘란마스, 엘베트 비르카치 이을리크 인 살르쉬마넨 소누쿠두르. 아슬란다, 데네임리 뮌헨디스 에키비미즈, 툼 에키빈 데스테이, 우준 바델리 데스텍칠레리민 귀베니, 아즈미즈다키, 타클라를라 이쉬비릴리엔 베 부크마두만 올메다즈 올메다즈 올메다즈 .. 2022. 1. 28.
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.

티스토리툴바