Web Dev (109) 썸네일형 리스트형 사용자 브라우저 액션 반응 형 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 의 Module 모듈 이란? Nest JS 모듈이란 ? 모듈은 @Module () 데코레이터로 주석이 달린 클래스입니다.@Module () 데코레이 터는 Nest가 애플리케이션 구조를 구성하는 데 사용하는 메타 데이터를 제공합니다.각 응용 프로그램에는 하나 이상의 모듈 (루트 모듈)이 있습니다. 루트 모듈은 Nest가 사용하는 시작점입니다모듈은 다음과 같은 속성을 가질 수 있습니다:providers: 모듈에서 사용할 수 있는 서비스, 리포지토리, 팩토리, 헬퍼 등의 제공자를 정의합니다. 이러한 제공자는 종속성 주입(Dependency Injection)을 통해 모듈 내의 다른 구성 요소에 주입될 수 있습니다.controllers: 모듈에서 사용할 컨트롤러를 정의합니다. 컨트롤러는 들어오는 HTTP 요청을 처리하고 적절한 응답을 반환.. 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를 검색해보자 공짜 버전으로 회원가입을 진행해.. React 웹페이지에서 네이버 지도 API 사용하는 방법 https://zeakd.github.io/react-naver-maps/guides/quickstart/ https://navermaps.github.io/maps.js.ncp/docs/index.html React Naver Maps Quickstart Application 루트에 NaverMaps Provider를 제공해야합니다. 사용하시는 프레임워크에 맞춰 를 감싸주세요. import { NaverMapsProvider } from 'react-naver-maps'; function App() { return ( ) } import { Container as MapDiv, N zeakd.github.io 해당 부분을 많이 참고하면 react 에 쉽게 적용 가능하십니다 우선 저는 Header 에 링.. 이전 1 2 3 4 ··· 14 다음
