typescript TypeScript 팁: 조건부 유형을 사용하여 오버로드를 리팩터링합니다. 며칠 전에 코드를 리팩토링하다가 다음과 같은 것을 발견했습니다. 함수mapRawToUserObject는 오버로드를 사용하여 다음을 표현합니다. IRawUser[]의 배열로 호출하면 User[]의 배열을 반환하고, 단일IRawUser로 호출하면 단일User을 반환합니다. 너무 복잡하지는 않지만 메서드 정의를 리팩토링할 수 있는 좋은 기회인 것 같습니다. 메서드가 받는 입력 유형을 결정해야 합니... typescriptjavascriptwebdev Typescript 팁: 브랜드 유형을 사용하면 더 안전한 기능을 사용할 수 있습니다. 다음과 같은 함수가 있다고 상상해 보십시오. 페이지 번호는 음수가 될 수 없기 때문에 분명히 잘못된 것입니다. 간단한 해결책은 다음과 같은 줄을 추가하는 것입니다. 그러나 음수로 함수를 호출하려고 할 때 유형 오류가 발생하면 좋지 않을까요? 여기서 문제는 유형number이 우리 기능에 너무 일반적이라는 것입니다. number는 임의의 숫자가 될 수 있으며 양수만 예상합니다. 이에 대한 유형 ... javascripttypescriptwebdev VSCode에서 JavaScript 및 TypeScript 파일 디버깅 JS 파일을 디버깅하는 일반적인 방법은 JavaScript 디버그 터미널을 사용하는 것입니다. 이러한 터미널은 메뉴를 통해 열 수 있습니다. node <file>를 실행하여 직접 또는 npm run <script>를 실행하여 패키지 스크립트를 통해 JS 파일에 중단점을 설정하고 터미널에서 디버그하려는 파일을 실행하기만 하면 됩니다. 디버그 터미널은 시작 Node.js 프로세스에 자동으로 연결... typescripttestingjavascriptvscode TypeScript 및 GraphQL을 최대한 활용하기: 공용체 유형 이 짧은 블로그 게시물에서는 마지막 프로젝트 경험을 공유하고 TypeScript 및 GraphQL을 사용하여 더 강력한 유형을 만드는 가장 강력한 방법 중 하나를 공유하고자 합니다. TypeScript 통합 연산자는 정수 또는 숫자, 문자, 문자열, 부동 등 여러 데이터 유형을 보유할 수 있는 변수를 정의하는 데 사용할 수 있습니다. TypeScript는 인터페이스와 같은 복잡한 유형을 결합... codegengraphqltypescript Javascript 배열 필터 방법 Javascript의 filter 메서드는 배열의 얕은 복사본을 만들어 여러 조건에 따라 필터링합니다. filter 생성하는 배열은 일반적으로 원래 배열의 축소된 버전입니다. 보시다시피 filter 메서드는 해당 요소가 true 를 반환해야 하는 새로운 필터링된 배열에 요소가 있도록 허용합니다. 화살표 함수는 한 줄에 암시적으로 true를 반환하므로 다음과 같이 작성된 이 코드의 축소된 버전... javascriptbeginnerstypescriptwebdev NestJS에서 Consul-KV 사용 Consul 키/값 저장소로 쉽게 작업 - 키/값(KV) 저장소 - 콘솔. env 파일을 consul-kv로/에서 업로드/다운로드하는 유틸리티 - Consul-KV와 실시간 작업을 위한 NestJS 모듈 - 이 게시물의 코드가 포함된 프로젝트 a) @nestjs/cli를 사용하여 새로운 NestJS 애플리케이션 생성 b) 종속성 설치 c) devDependencies 설치 a) docker-... typescriptnestjsnodeconsul Nextjs에서 Chakra UI를 통합하는 방법 🧑🎨 사용자 중간 단계를 만드는 것은 결코 간단한 작업이 아니지만 은 미학을 유지하면서 Next.js 응용 프로그램을 빠르게 시작하고 실행할 수 있는 훌륭한 UI 라이브러리입니다. 이 가이드에서는 Chakra UI로 간단한 Next.js 앱을 설정하는 방법을 배웁니다. 다음을 실행하여 빈 Next.js 프로젝트를 만들 수 있습니다. Typescript를 사용하여 NextJs 프로젝트 만들기 아래와... nextjstypescriptchakrajavascript ts-dynamodb-attributes-transformer: DynamoDB 속성에 대한 TypeScript 객체의 코드 변환기 저는 TypsScript 객체를 Amazon DynamoDB 속성으로 변환하는 "ts-dynamodb-attributes-transformer"를 게시했습니다(정확히 이 속성 유형은 에 정의된 Record<string, AttributeValue>입니다). 그리고 이것은 npm에서도 사용할 수 있습니다. ts-dynamodb-attributes-transformer는 을 사용하는 코드 변환기... dynamodbtypescript Javascript 배열 슬라이스 방법 배열의 slice 메서드는 배열 일부의 단순 복사본을 반환합니다. slice 메소드에는 start 및 end 의 두 가지 선택적 매개변수가 있습니다. 예를 들어 2 로 설정하면 slice는 인덱스 2에서 새 배열 복사를 시작합니다. end가 포함할 마지막 항목을 나타낼 것으로 예상할 수 있지만 대신 제외할 첫 번째 항목입니다. 이 인수를 생략하면 slice 메서드는 다음 예제와 같이 단순히 ... javascriptbeginnerstypescriptwebdev 처음부터 TypeScript 프로젝트 설정 1단계: 프로젝트를 위한 빈 폴더 생성mkdir typescript-project 2단계: 폴더로 이동cd typescript-porject 3단계: package.json 명령을 사용하여 npm init -y를 초기화합니다. 4단계: 다음 명령을 사용하여 src 폴더에 index.ts 파일 생성: mkdir typescript-project && touch typescript-project... programmingtutorialtypescriptwebdev 그리드 항목에 대한 사용자 정의 키보드 탐색 생성 인터넷 검색을 할 때 정확한 해결책을 찾지 못했기 때문에 여기에 내가 배운 것을 설명하는 기사가 있습니다. 우리가 만들고 있는 것을 볼 수 있습니다. 저장소를 복제하거나 전체 파일을 다운로드할 수 있습니다. 항목에 필요한 모든 데이터는 파일items.json에 있습니다. 그것들을 App로 가져와 각각을 반복할 수 있습니다. 현재 우리는 각 항목에 대해 동일한 텍스트만 표시합니다. 이미지와 확... a11yreacttypescript Typescript, Vite 및 Vitest를 사용하여 최신 Preact 애플리케이션 설정 Wiring up a TypeScript environment with Preact, Vite and Vitest and vitest-dom 나는 Vite와 Vitest에 대해 좋은 소식을 들었습니다. 테스트 드라이브를 제공했을 때 전체 제품군을 실행하는 데 약간의 성가심이 생겼습니다. 내가 취한 단계를 기록하고 있습니다. 아마 도움이 될 것입니다. 이 기사는 기본적으로 내 필요에 맞게 조정... preactvitesttypescriptvite Routinejs, An Express는 놀랍도록 빠른 Nodejs 라우터에 영감을 주었습니다. ✅ Express보다 4배 빠릅니다(벤치마크 코드도 레포 내에서 사용 가능) ✅ Typescript 지원이 내장되어 있습니다. ✅ 정규식을 URL 경로로 지원 ✅ 글로벌 동기화/비동기 오류 핸들러 ✅ 미들웨어 및 중첩 경로 지원 ✅ 거의 모든 기존 Expressjs 플러그인/미들웨어 지원 ✅ 내장 바디 파서 ✅ 기본 JSON.stringify보다 빠르고 순환 객체도 감지하는 fast-safe... typescriptjavascriptnode Javascript에서 DOM이 준비되기를 기다리는 중 Javascript로 작업할 때 매우 일반적인 문제에 부딪혔을 가능성이 큽니다. Javascript가 HTML 앞에 나타나면 HTML에 이벤트를 첨부하는 것과 같은 작업을 시도할 수 없습니다. 예를 들어 다음 코드를 고려하십시오. ID가 #button인 버튼이 있어도 이 코드는 실제로 오류를 발생시킵니다. 그 이유는 Javascript가 DOM보다 먼저 로드되기 때문입니다. 따라서 #butt... javascriptbeginnerstypescriptwebdev Javascript로 개체 키 값 업데이트 은 키 값 쌍으로 구성되며 Javascript에서 가장 일반적인 데이터 구조 중 하나입니다. 개체의 모든 값을 업데이트하는 가장 쉬운 방법은 다음과 같습니다. Object.keys를 사용하여 개체의 모든 키를 가져옵니다. 논리를 적용하여 업데이트해야 하는 값을 결정합니다. forEach 또는 for 와 같은 루프를 사용하여 각각의 값을 업데이트합니다. 예를 들어: 논리를 적용할 필요는 없지만... javascriptbeginnerstypescriptwebdev Javascript에서 배열의 마지막 요소를 얻는 방법 따라서 Javascript 배열이 있고 마지막 요소를 가져오려고 합니다. 예를 들면 다음과 같습니다. 이 배열에는 4개의 항목이 있습니다. 아시다시피 그 안에 있는 요소를 가져오려면 대괄호 표기법[]을 사용할 수 있습니다. 예를 들어 조명 볼트를 얻으려면 myArray[1]를 사용할 수 있습니다. 배열은 0 의 인덱스에서 시작하므로 첫 번째 요소는 실제로 myArray[0] 등입니다. 따라서... javascriptbeginnerstypescriptwebdev React가 더욱 훌륭해졌습니다. 이전에 react 또는 next.js 애플리케이션에 대해 작업한 적이 있다면 일반적으로 특히 비동기를 처리하는 방법과 관련하여 매우 독단적이라는 것을 알아차렸을 것입니다. 그러나 이제 우리는 모든 것을 비동기화하고 특히 데이터 가져오기를 훨씬 쉽게 만들어주는 흥미로운 새로운 반응 기능을 얻고 있습니다. 본질적으로 우리는 마침내 React에서 비동기 기능을 처리하는 기본 방법을 얻게 되었습니다... javascriptreacttypescriptwebdev Double Depping: 가져오기 맵과 deps.ts를 함께 사용 가져오기 맵은 가져오기 별칭 역할을 하며 다음에 대한 매니페스트일 필요는 없습니다. 종속성. 가져오기 맵 키는 바로 가기, 별칭, 미러/리디렉션 URL, 클라이언트 측 사용, 범위, 파일 시스템 경로 등 섹스 어필을 추가하는 것입니다. deps.ts를 사용하는 방법은 논리를 추가하기 위한 것입니다. 목적은 외부에서 모듈과 유형을 함께 내보내는 것입니다. 종속성 및 로컬 라이브러리. 모던exp... denobeginnerstypescriptwebdev Next.js API 경로 - 전역 오류 처리 및 깨끗한 코드 관행 React.js에 대한 학습 곡선이 거의 없고 즉시 사용할 수 있는 뛰어난 SEO를 제공한다는 사실 때문에 많은 개발자들에게 인기 있는 선택이 되었습니다. 파일 시스템 기반 라우팅을 사용하고 API 경로를 생성하는 유연한 방법도 제공합니다. API 오류를 처리하기 위한 규칙이 없습니다. 일관된 방식으로 오류를 처리하고(프런트엔드에서 오류를 포착할 수 있도록) 예기치 않은 오류를 기록하는 방법... nextjsserverlesstypescriptjavascript React Typescript 스니펫 새로운 구성 요소를 생성할 때 동일한 코드를 입력하는 데 지쳤다면 VS Code가 제공하는 멋진 솔루션인 코드 스니펫 🔥이 있습니다. 다음은 Typescript로 React 구성 요소를 만들기 위한 두 가지 스니펫입니다. 흐름 분석 이 경우 접두사를 입력합니다(이 경우 rfc 또는 rfcd ). (원하는대로 부를 수 있습니다 🙂). 인터페이스 소품을 작성합니다. 기능으로 이동하려면 탭을 누르... reacttypescriptproductivityvscode 웹 플랫폼을 활용하여 이메일 유효성 검사 javascript의 이메일 유효성 검사는 웹 개발 세계에서 매우 일반적인 주제입니다. 첫 번째 본능은 Regex 에 대해 문자열을 일치시키는 것이지만 Regex 는 전자 메일 주소에 대한 전체 표준 사양을 수용하려고 시도하므로 매우 빠르게 복잡해질 수 있습니다. stackoverflow에 대한 응답 을 살펴보십시오. 작동하지만 아무도 이유를 모릅니다! 브라우저에는 다양한 유형의 입력을 위한... javascripttypescriptwebdev 노드 가져오기와 함께 인증된 프록시를 사용하는 방법 이제 node18에서 가져오기 API를 사용할 수 있습니다. 그러나 프록시를 사용하는 방법을 파악하는 데 문제가 있었습니다. 마지막으로 다음 코드를 사용하여 프록시를 통해 가져오기를 사용할 수 있었습니다. 제가 영어를 잘 못해서 성공한 코드만 남깁니다.... fetchtypescriptnode Aws Cognito, Passport 및 NestJs를 사용한 인증(파트 III) 인증을 위해 JWT 전략을 사용할 것입니다. 먼저 PassportModule를 가져오고 JWT 전략을 기본값으로 지정해 보겠습니다. auth.module.ts 이제 jwt.strategy.ts와 같은 디렉토리에 auth.controller.ts라는 파일을 만듭니다. 우리는 또한 AWS_COGNITO_AUTHORITY이어야 하는 새로운 환경 변수https://cognito-idp.YOUR_PO... awstutorialtypescriptwebdev 확장 가능한 일반 Nestjs 컨트롤러 빌드 — 1부 Django 휴식 프레임워크로 작업할 때 ModelViewSet이라는 클래스가 있었습니다. 이 클래스를 상속하고 데이터베이스 모델 이름을 지정하면 모든 CRUD 엔드포인트가 자동으로 생성됩니다. 저는 이 아이디어가 정말 마음에 들었습니다. API에 대한 일관성을 제공하고, 작성해야 하는 코드가 줄어들고, 마침내 비즈니스 로직에 더 집중할 수 있게 해 주기 때문입니다. 이 문서에서는 확장 시 ... djangotypescriptnestjswebdev 태그가 지정된 조합 유형 공통 태그가 있는 공용체 유형. 그리고 이 태그의 특별한 점은 조합 유형을 만들기 위해 결합되는 유형을 구별하는 데 도움이 된다는 것입니다. 예를 들어 원, 직사각형, 삼각형의 세 가지 모양을 만들 수 있습니다. 이제 그것으로 유니온 유형을 만들 수 있습니다 모든 인터페이스와 구별되는 속성을 갖는 이점은 사용하는 동안 유형을 좁히는 데 도움이 된다는 것입니다. 실제로 전달된 모양의 영역을 반... beginnersprogrammingtypescriptwebdev RxJS 전역 속도 제한 RxJS 전역 속도 제한 직장에서 우리는 분당 200개의 요청 속도 제한이 있는 타사 API에 대한 통합을 구축하고 있습니다. API는 페이지가 매겨졌고 응답에 모든 데이터가 포함되지 않았으므로 각 항목에 대한 요청이 필요했습니다. 다음 코드는 rxjs를 사용하여 이 문제를 해결할 수 있는 방법을 보여줍니다. 시작하자! 둘 다 동일한 제한을 수신해야 하는 관찰 가능한 여러 스트림이 있는 경우... rxjstypescriptfetch Aws Cognito, Passport 및 NestJs를 사용한 인증(2부) Cognito 서비스와 통신할 수 있도록, 요청을 인증하기 위한 인증 미들웨어 역할을 하는 여권 여권 JWT 유형 또한 nestjs에서 환경 파일을 관리하려면 npm i @nestjs/config를 통해 nest 구성 모듈을 설치해야 합니다. 앱 모듈.ts: 그런 다음 루트 디렉토리로 이동하여 nest g module pokemon로 모듈을 부팅하고 nest g controller pokem... awstutorialtypescriptwebdev nvm으로 기본 Node.JS 버전 설정 Node.JS에서 프로젝트 및 제품을 개발할 때 컴퓨터에서 사용 중인 Node.JS 버전을 설정하는 것이 필수적입니다. nvm는 Node.JS 버전을 즉시 변경할 수 있는 정말 유용한 도구입니다. nvm 또한 계속 변경할 필요가 없도록 Node.JS의 기본 버전을 설정할 수 있습니다. 그렇게 하려면 다음과 같이 nvm 명령을 사용할 수 있습니다. 그러나 그렇게 하기 전에 사용하려는 버전이 설... javascripttypescriptwebdev 🤯 Javascript와 Typescript에 대해 알아두면 좋은 3가지 이상한 점, 1부 현재 저는 친구들과 이 놀라운 도구에 대해 이야기를 나누다가 Javascript와 그의 비밀 🥷을 조금 더 잘 이해하는 데 도움이 될 수 있는 많은 것을 우리가 알지 못한다는 것을 알게 되었습니다. 왜 이런 일이 발생합니까? 아니요, 당신은 아닐 수도 있고 아닐 수도 있지만 이것이 요점이 아닙니다. 이런 일이 발생하는 이유는 데이터의 구조가 목록 또는 배열이지만 모든 논리와 메서드를 보유하는... javascriptfunfactsprogrammingtypescript 이전 기사 보기
TypeScript 팁: 조건부 유형을 사용하여 오버로드를 리팩터링합니다. 며칠 전에 코드를 리팩토링하다가 다음과 같은 것을 발견했습니다. 함수mapRawToUserObject는 오버로드를 사용하여 다음을 표현합니다. IRawUser[]의 배열로 호출하면 User[]의 배열을 반환하고, 단일IRawUser로 호출하면 단일User을 반환합니다. 너무 복잡하지는 않지만 메서드 정의를 리팩토링할 수 있는 좋은 기회인 것 같습니다. 메서드가 받는 입력 유형을 결정해야 합니... typescriptjavascriptwebdev Typescript 팁: 브랜드 유형을 사용하면 더 안전한 기능을 사용할 수 있습니다. 다음과 같은 함수가 있다고 상상해 보십시오. 페이지 번호는 음수가 될 수 없기 때문에 분명히 잘못된 것입니다. 간단한 해결책은 다음과 같은 줄을 추가하는 것입니다. 그러나 음수로 함수를 호출하려고 할 때 유형 오류가 발생하면 좋지 않을까요? 여기서 문제는 유형number이 우리 기능에 너무 일반적이라는 것입니다. number는 임의의 숫자가 될 수 있으며 양수만 예상합니다. 이에 대한 유형 ... javascripttypescriptwebdev VSCode에서 JavaScript 및 TypeScript 파일 디버깅 JS 파일을 디버깅하는 일반적인 방법은 JavaScript 디버그 터미널을 사용하는 것입니다. 이러한 터미널은 메뉴를 통해 열 수 있습니다. node <file>를 실행하여 직접 또는 npm run <script>를 실행하여 패키지 스크립트를 통해 JS 파일에 중단점을 설정하고 터미널에서 디버그하려는 파일을 실행하기만 하면 됩니다. 디버그 터미널은 시작 Node.js 프로세스에 자동으로 연결... typescripttestingjavascriptvscode TypeScript 및 GraphQL을 최대한 활용하기: 공용체 유형 이 짧은 블로그 게시물에서는 마지막 프로젝트 경험을 공유하고 TypeScript 및 GraphQL을 사용하여 더 강력한 유형을 만드는 가장 강력한 방법 중 하나를 공유하고자 합니다. TypeScript 통합 연산자는 정수 또는 숫자, 문자, 문자열, 부동 등 여러 데이터 유형을 보유할 수 있는 변수를 정의하는 데 사용할 수 있습니다. TypeScript는 인터페이스와 같은 복잡한 유형을 결합... codegengraphqltypescript Javascript 배열 필터 방법 Javascript의 filter 메서드는 배열의 얕은 복사본을 만들어 여러 조건에 따라 필터링합니다. filter 생성하는 배열은 일반적으로 원래 배열의 축소된 버전입니다. 보시다시피 filter 메서드는 해당 요소가 true 를 반환해야 하는 새로운 필터링된 배열에 요소가 있도록 허용합니다. 화살표 함수는 한 줄에 암시적으로 true를 반환하므로 다음과 같이 작성된 이 코드의 축소된 버전... javascriptbeginnerstypescriptwebdev NestJS에서 Consul-KV 사용 Consul 키/값 저장소로 쉽게 작업 - 키/값(KV) 저장소 - 콘솔. env 파일을 consul-kv로/에서 업로드/다운로드하는 유틸리티 - Consul-KV와 실시간 작업을 위한 NestJS 모듈 - 이 게시물의 코드가 포함된 프로젝트 a) @nestjs/cli를 사용하여 새로운 NestJS 애플리케이션 생성 b) 종속성 설치 c) devDependencies 설치 a) docker-... typescriptnestjsnodeconsul Nextjs에서 Chakra UI를 통합하는 방법 🧑🎨 사용자 중간 단계를 만드는 것은 결코 간단한 작업이 아니지만 은 미학을 유지하면서 Next.js 응용 프로그램을 빠르게 시작하고 실행할 수 있는 훌륭한 UI 라이브러리입니다. 이 가이드에서는 Chakra UI로 간단한 Next.js 앱을 설정하는 방법을 배웁니다. 다음을 실행하여 빈 Next.js 프로젝트를 만들 수 있습니다. Typescript를 사용하여 NextJs 프로젝트 만들기 아래와... nextjstypescriptchakrajavascript ts-dynamodb-attributes-transformer: DynamoDB 속성에 대한 TypeScript 객체의 코드 변환기 저는 TypsScript 객체를 Amazon DynamoDB 속성으로 변환하는 "ts-dynamodb-attributes-transformer"를 게시했습니다(정확히 이 속성 유형은 에 정의된 Record<string, AttributeValue>입니다). 그리고 이것은 npm에서도 사용할 수 있습니다. ts-dynamodb-attributes-transformer는 을 사용하는 코드 변환기... dynamodbtypescript Javascript 배열 슬라이스 방법 배열의 slice 메서드는 배열 일부의 단순 복사본을 반환합니다. slice 메소드에는 start 및 end 의 두 가지 선택적 매개변수가 있습니다. 예를 들어 2 로 설정하면 slice는 인덱스 2에서 새 배열 복사를 시작합니다. end가 포함할 마지막 항목을 나타낼 것으로 예상할 수 있지만 대신 제외할 첫 번째 항목입니다. 이 인수를 생략하면 slice 메서드는 다음 예제와 같이 단순히 ... javascriptbeginnerstypescriptwebdev 처음부터 TypeScript 프로젝트 설정 1단계: 프로젝트를 위한 빈 폴더 생성mkdir typescript-project 2단계: 폴더로 이동cd typescript-porject 3단계: package.json 명령을 사용하여 npm init -y를 초기화합니다. 4단계: 다음 명령을 사용하여 src 폴더에 index.ts 파일 생성: mkdir typescript-project && touch typescript-project... programmingtutorialtypescriptwebdev 그리드 항목에 대한 사용자 정의 키보드 탐색 생성 인터넷 검색을 할 때 정확한 해결책을 찾지 못했기 때문에 여기에 내가 배운 것을 설명하는 기사가 있습니다. 우리가 만들고 있는 것을 볼 수 있습니다. 저장소를 복제하거나 전체 파일을 다운로드할 수 있습니다. 항목에 필요한 모든 데이터는 파일items.json에 있습니다. 그것들을 App로 가져와 각각을 반복할 수 있습니다. 현재 우리는 각 항목에 대해 동일한 텍스트만 표시합니다. 이미지와 확... a11yreacttypescript Typescript, Vite 및 Vitest를 사용하여 최신 Preact 애플리케이션 설정 Wiring up a TypeScript environment with Preact, Vite and Vitest and vitest-dom 나는 Vite와 Vitest에 대해 좋은 소식을 들었습니다. 테스트 드라이브를 제공했을 때 전체 제품군을 실행하는 데 약간의 성가심이 생겼습니다. 내가 취한 단계를 기록하고 있습니다. 아마 도움이 될 것입니다. 이 기사는 기본적으로 내 필요에 맞게 조정... preactvitesttypescriptvite Routinejs, An Express는 놀랍도록 빠른 Nodejs 라우터에 영감을 주었습니다. ✅ Express보다 4배 빠릅니다(벤치마크 코드도 레포 내에서 사용 가능) ✅ Typescript 지원이 내장되어 있습니다. ✅ 정규식을 URL 경로로 지원 ✅ 글로벌 동기화/비동기 오류 핸들러 ✅ 미들웨어 및 중첩 경로 지원 ✅ 거의 모든 기존 Expressjs 플러그인/미들웨어 지원 ✅ 내장 바디 파서 ✅ 기본 JSON.stringify보다 빠르고 순환 객체도 감지하는 fast-safe... typescriptjavascriptnode Javascript에서 DOM이 준비되기를 기다리는 중 Javascript로 작업할 때 매우 일반적인 문제에 부딪혔을 가능성이 큽니다. Javascript가 HTML 앞에 나타나면 HTML에 이벤트를 첨부하는 것과 같은 작업을 시도할 수 없습니다. 예를 들어 다음 코드를 고려하십시오. ID가 #button인 버튼이 있어도 이 코드는 실제로 오류를 발생시킵니다. 그 이유는 Javascript가 DOM보다 먼저 로드되기 때문입니다. 따라서 #butt... javascriptbeginnerstypescriptwebdev Javascript로 개체 키 값 업데이트 은 키 값 쌍으로 구성되며 Javascript에서 가장 일반적인 데이터 구조 중 하나입니다. 개체의 모든 값을 업데이트하는 가장 쉬운 방법은 다음과 같습니다. Object.keys를 사용하여 개체의 모든 키를 가져옵니다. 논리를 적용하여 업데이트해야 하는 값을 결정합니다. forEach 또는 for 와 같은 루프를 사용하여 각각의 값을 업데이트합니다. 예를 들어: 논리를 적용할 필요는 없지만... javascriptbeginnerstypescriptwebdev Javascript에서 배열의 마지막 요소를 얻는 방법 따라서 Javascript 배열이 있고 마지막 요소를 가져오려고 합니다. 예를 들면 다음과 같습니다. 이 배열에는 4개의 항목이 있습니다. 아시다시피 그 안에 있는 요소를 가져오려면 대괄호 표기법[]을 사용할 수 있습니다. 예를 들어 조명 볼트를 얻으려면 myArray[1]를 사용할 수 있습니다. 배열은 0 의 인덱스에서 시작하므로 첫 번째 요소는 실제로 myArray[0] 등입니다. 따라서... javascriptbeginnerstypescriptwebdev React가 더욱 훌륭해졌습니다. 이전에 react 또는 next.js 애플리케이션에 대해 작업한 적이 있다면 일반적으로 특히 비동기를 처리하는 방법과 관련하여 매우 독단적이라는 것을 알아차렸을 것입니다. 그러나 이제 우리는 모든 것을 비동기화하고 특히 데이터 가져오기를 훨씬 쉽게 만들어주는 흥미로운 새로운 반응 기능을 얻고 있습니다. 본질적으로 우리는 마침내 React에서 비동기 기능을 처리하는 기본 방법을 얻게 되었습니다... javascriptreacttypescriptwebdev Double Depping: 가져오기 맵과 deps.ts를 함께 사용 가져오기 맵은 가져오기 별칭 역할을 하며 다음에 대한 매니페스트일 필요는 없습니다. 종속성. 가져오기 맵 키는 바로 가기, 별칭, 미러/리디렉션 URL, 클라이언트 측 사용, 범위, 파일 시스템 경로 등 섹스 어필을 추가하는 것입니다. deps.ts를 사용하는 방법은 논리를 추가하기 위한 것입니다. 목적은 외부에서 모듈과 유형을 함께 내보내는 것입니다. 종속성 및 로컬 라이브러리. 모던exp... denobeginnerstypescriptwebdev Next.js API 경로 - 전역 오류 처리 및 깨끗한 코드 관행 React.js에 대한 학습 곡선이 거의 없고 즉시 사용할 수 있는 뛰어난 SEO를 제공한다는 사실 때문에 많은 개발자들에게 인기 있는 선택이 되었습니다. 파일 시스템 기반 라우팅을 사용하고 API 경로를 생성하는 유연한 방법도 제공합니다. API 오류를 처리하기 위한 규칙이 없습니다. 일관된 방식으로 오류를 처리하고(프런트엔드에서 오류를 포착할 수 있도록) 예기치 않은 오류를 기록하는 방법... nextjsserverlesstypescriptjavascript React Typescript 스니펫 새로운 구성 요소를 생성할 때 동일한 코드를 입력하는 데 지쳤다면 VS Code가 제공하는 멋진 솔루션인 코드 스니펫 🔥이 있습니다. 다음은 Typescript로 React 구성 요소를 만들기 위한 두 가지 스니펫입니다. 흐름 분석 이 경우 접두사를 입력합니다(이 경우 rfc 또는 rfcd ). (원하는대로 부를 수 있습니다 🙂). 인터페이스 소품을 작성합니다. 기능으로 이동하려면 탭을 누르... reacttypescriptproductivityvscode 웹 플랫폼을 활용하여 이메일 유효성 검사 javascript의 이메일 유효성 검사는 웹 개발 세계에서 매우 일반적인 주제입니다. 첫 번째 본능은 Regex 에 대해 문자열을 일치시키는 것이지만 Regex 는 전자 메일 주소에 대한 전체 표준 사양을 수용하려고 시도하므로 매우 빠르게 복잡해질 수 있습니다. stackoverflow에 대한 응답 을 살펴보십시오. 작동하지만 아무도 이유를 모릅니다! 브라우저에는 다양한 유형의 입력을 위한... javascripttypescriptwebdev 노드 가져오기와 함께 인증된 프록시를 사용하는 방법 이제 node18에서 가져오기 API를 사용할 수 있습니다. 그러나 프록시를 사용하는 방법을 파악하는 데 문제가 있었습니다. 마지막으로 다음 코드를 사용하여 프록시를 통해 가져오기를 사용할 수 있었습니다. 제가 영어를 잘 못해서 성공한 코드만 남깁니다.... fetchtypescriptnode Aws Cognito, Passport 및 NestJs를 사용한 인증(파트 III) 인증을 위해 JWT 전략을 사용할 것입니다. 먼저 PassportModule를 가져오고 JWT 전략을 기본값으로 지정해 보겠습니다. auth.module.ts 이제 jwt.strategy.ts와 같은 디렉토리에 auth.controller.ts라는 파일을 만듭니다. 우리는 또한 AWS_COGNITO_AUTHORITY이어야 하는 새로운 환경 변수https://cognito-idp.YOUR_PO... awstutorialtypescriptwebdev 확장 가능한 일반 Nestjs 컨트롤러 빌드 — 1부 Django 휴식 프레임워크로 작업할 때 ModelViewSet이라는 클래스가 있었습니다. 이 클래스를 상속하고 데이터베이스 모델 이름을 지정하면 모든 CRUD 엔드포인트가 자동으로 생성됩니다. 저는 이 아이디어가 정말 마음에 들었습니다. API에 대한 일관성을 제공하고, 작성해야 하는 코드가 줄어들고, 마침내 비즈니스 로직에 더 집중할 수 있게 해 주기 때문입니다. 이 문서에서는 확장 시 ... djangotypescriptnestjswebdev 태그가 지정된 조합 유형 공통 태그가 있는 공용체 유형. 그리고 이 태그의 특별한 점은 조합 유형을 만들기 위해 결합되는 유형을 구별하는 데 도움이 된다는 것입니다. 예를 들어 원, 직사각형, 삼각형의 세 가지 모양을 만들 수 있습니다. 이제 그것으로 유니온 유형을 만들 수 있습니다 모든 인터페이스와 구별되는 속성을 갖는 이점은 사용하는 동안 유형을 좁히는 데 도움이 된다는 것입니다. 실제로 전달된 모양의 영역을 반... beginnersprogrammingtypescriptwebdev RxJS 전역 속도 제한 RxJS 전역 속도 제한 직장에서 우리는 분당 200개의 요청 속도 제한이 있는 타사 API에 대한 통합을 구축하고 있습니다. API는 페이지가 매겨졌고 응답에 모든 데이터가 포함되지 않았으므로 각 항목에 대한 요청이 필요했습니다. 다음 코드는 rxjs를 사용하여 이 문제를 해결할 수 있는 방법을 보여줍니다. 시작하자! 둘 다 동일한 제한을 수신해야 하는 관찰 가능한 여러 스트림이 있는 경우... rxjstypescriptfetch Aws Cognito, Passport 및 NestJs를 사용한 인증(2부) Cognito 서비스와 통신할 수 있도록, 요청을 인증하기 위한 인증 미들웨어 역할을 하는 여권 여권 JWT 유형 또한 nestjs에서 환경 파일을 관리하려면 npm i @nestjs/config를 통해 nest 구성 모듈을 설치해야 합니다. 앱 모듈.ts: 그런 다음 루트 디렉토리로 이동하여 nest g module pokemon로 모듈을 부팅하고 nest g controller pokem... awstutorialtypescriptwebdev nvm으로 기본 Node.JS 버전 설정 Node.JS에서 프로젝트 및 제품을 개발할 때 컴퓨터에서 사용 중인 Node.JS 버전을 설정하는 것이 필수적입니다. nvm는 Node.JS 버전을 즉시 변경할 수 있는 정말 유용한 도구입니다. nvm 또한 계속 변경할 필요가 없도록 Node.JS의 기본 버전을 설정할 수 있습니다. 그렇게 하려면 다음과 같이 nvm 명령을 사용할 수 있습니다. 그러나 그렇게 하기 전에 사용하려는 버전이 설... javascripttypescriptwebdev 🤯 Javascript와 Typescript에 대해 알아두면 좋은 3가지 이상한 점, 1부 현재 저는 친구들과 이 놀라운 도구에 대해 이야기를 나누다가 Javascript와 그의 비밀 🥷을 조금 더 잘 이해하는 데 도움이 될 수 있는 많은 것을 우리가 알지 못한다는 것을 알게 되었습니다. 왜 이런 일이 발생합니까? 아니요, 당신은 아닐 수도 있고 아닐 수도 있지만 이것이 요점이 아닙니다. 이런 일이 발생하는 이유는 데이터의 구조가 목록 또는 배열이지만 모든 논리와 메서드를 보유하는... javascriptfunfactsprogrammingtypescript 이전 기사 보기