Web Dev/Javascript (26) 썸네일형 리스트형 사용자 브라우저 액션 반응 형 JavaScript code : 설문조사 완료 후 버튼 활성 function openSurvey() { // ... (생략) ... if (now >= targetDate) { window.open('www.naver.com', '_blank'); setTimeout(checkSurveyCompletion, 10000); } // ... (생략) ...}임시로 해당 url 창이 띄워지고 10초 뒤에 checkSurveyCompletion 해당 함수가 실행 되게 함으로서 사용자가 설문조사 작업에 집중할 수 있도록 했다 위의 코드를 좀 더 효율 적인 방식으로 바꾸고자 했다 function openSurvey() { window.open('www.naver.com', '_blank'); document.addEventL.. Nest.js 백엔드 Pipe 사용법에 대해 Nest.js에서 Pipe는 요청(request)의 입력 데이터를 변환하거나 검증하는 데 사용되는 클래스입니다. Pipe는 @Injectable() 데코레이터로 주석이 달린 클래스로 정의되며, PipeTransform 인터페이스를 구현합니다. Pipe의 주요 목적은 다음과 같습니다: 변환 (Transformation): 입력 데이터를 원하는 형식으로 변환합니다. 예를 들어, 문자열을 숫자로 변환하거나 객체의 형태를 변경할 수 있습니다. 검증 (Validation): 입력 데이터가 유효한지 확인합니다. 데이터의 유효성을 검사하고, 유효하지 않은 경우 예외를 throw하여 요청을 중단시킬 수 있습니다. sanitization: 입력 데이터에서 잠재적으로 위험한 문자를 제거하거나 이스케이프 처리하여 보안을 강.. Nest.js 데코레이션으로 DTO (Data Transfer Object) 유효성 구성하는 방법 DTO 가 필요한 이유 ? DTO(Data Transfer Object)는 계층 간 데이터 전송을 위한 객체로 사용되는 디자인 패턴입니다. DTO는 주로 애플리케이션의 서로 다른 계층 간에 데이터를 전달하는 데 사용됩니다. DTO를 사용하는 주된 이유는 다음과 같습니다: 1. 데이터 캡슐화: DTO는 한 계층에서 다른 계층으로 전달되는 데이터를 캡슐화합니다. 이를 통해 불필요한 데이터 노출을 방지하고 계층 간의 결합도를 낮출 수 있습니다. 2. 데이터 유효성 검사: DTO는 전달되는 데이터의 유효성을 검사하는 데 사용될 수 있습니다. 유효성 검사 규칙을 DTO에 정의하여 잘못된 데이터가 전달되는 것을 방지할 수 있습니다. 3. 네트워크 전송 최적화: DTO는 네트워크를 통해 전송되는 데이터의 크기를 최적.. @nestjs/mapped-types 사용 방법 npm install @nestjs/mapped-types CreateUserDto export class CreateUserDto { name: string; email: string; password: string;} PartialType() 함수를 사용하여 새로운 타입을 생성 import { PartialType } from '@nestjs/mapped-types';export class UpdateUserDto extends PartialType(CreateUserDto) {}위 코드에서 UpdateUserDto는 CreateUserDto를 기반으로 생성되며, 모든 속성이 선택적으로 변경됩니다. 즉, UpdateUserDto는 다음과 같이 정의된 것과 동일합니다.export class U.. Nest.js의 내장된 코드 테스트 기능 ! Jest 로 하는 유닛테스트 , e2e 테스트 https://jestjs.io/ JestBy ensuring your tests have unique global state, Jest can reliably run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on how long test files take.jestjs.ioJESTJEST는 자바스크립트 코드, 특히 React 애플리케이션을 테스트하기 위한 테스팅 프레임워크입니다. Facebook에서 개발하였으며, 주요 특징은 아래와 같습니다.단순성 (Simplicity) : 별도의 설정없이 바로 테스트 코드 작성이 가능합니다... Nest.js 는 Node.js 의 프레임워크 오케이 ? RestAPI 만들어 보자 https://nestjs.com/ NestJS - A progressive Node.js framework NestJS is a framework for building efficient, scalable Node.js web applications. It uses modern JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Progr nestjs.com 우선 설치 할 것들이 여러가지가 있는데 구글 검색 창에 insomnia rest를 검색해보자 공짜 버전으로 회원가입을 진행해.. [Javascript] 자바스크립트에서 Textarea 값 읽어오기 쉽지만 까먹죠 ! 는 HTML에서 여러 줄의 텍스트를 입력 또는 표시하는 데 사용되는 태그입니다. 다음은 요소의 사용법에 대한 간단한 설명입니다: 요소 생성: id: 요소에 고유 식별자를 제공합니다. JavaScript에서 요소에 접근할 때 사용될 수 있습니다. rows: 표시할 텍스트 영역의 행 수를 지정합니다. cols: 표시할 텍스트 영역의 열 수를 지정합니다. 기본 텍스트 설정: 기본 텍스트 태그 내에 기본 텍스트를 포함시킬 수 있습니다. JavaScript를 사용하여 내용 동적 설정: document.getElementById("myTextarea").value = "동적으로 설정된 내용"; JavaScript를 사용하여 의 내용을 동적으로 설정할 수 있습니다. value 속성을 사용하여 내용을 변경할 수 있습니.. jQuery로 특정 <dive> 태그 위치 이동 하기 prependTo 함수 사용법 //내용 //내용 //내용 //내용 //내용 위의 HTML을 보면 div 태그 별 각 다른 className을 가지고 있습니다. div 태그가 나열 되어있는데 특정 div 태그의 위치를 변경하고 싶었습니다. 저는 기존에 특정 값이 존재하면 특정 div에 active 속성 값을 주는 코드를 가지고 있었습니다. if ($(".count_dcdemo").text() !== "0") { // 해당 태그에 active 클래스 추가 $(".charger_dcdemo").addClass("active"); $(".dcDemo").addClass("active"); } div 태그 위치 이동을 위해 코드를 추가해 보겠습니다. 우선 prependTo 함수와 parent 함수는 jQuery에서 제공되는 DOM 조작을 위한.. 이전 1 2 3 4 다음
