티스토리

깜놀하는 해므찌로

검색하기

블로그 홈

깜놀하는 해므찌로

agnusdei1207.tistory.com/m

agnusdei1207 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Angular Change Detection Strategy / 앵귤러 변경 감지 전략 Angular에서 변경 감지 전략(Change Detection Strategy)은 컴포넌트의 변경을 감지하고 뷰를 업데이트하는 방식을 제어하는 메커니즘입니다. 변경 감지는 컴포넌트의 프로퍼티 또는 이벤트를 통해 발생하는 데이터 변경을 추적하고, 변경이 감지되면 뷰를 업데이트합니다. Angular에서는 기본적으로 `Default` 전략을 사용하며, `OnPush` 전략을 선택적으로 사용할 수 있습니다. 1. Default 변경 감지 전략: - 기본적으로 Angular에서 사용하는 변경 감지 전략입니다. - Angular는 모든 컴포넌트의 변경을 추적하고, 각 변경마다 관련된 뷰를 업데이트합니다. - 변경 감지 주기는 컴포넌트 이벤트, 타이머, HTTP 요청 등과 같은 여러 이벤트에 의해 트리거됩니다. i.. 공감수 0 댓글수 0 2023. 9. 10.
ICMP / Ping / TraceRoute / Tracert 설명 및 활용 예시 ICMP (Internet Control Message Protocol)는 네트워크 장비 간에 제어 및 오류 메시지를 교환하기 위해 사용되는 프로토콜입니다. ICMP는 IP 프로토콜의 일부로 작동하며, IP 패킷을 통해 오류 및 제어 메시지를 전송합니다. ICMP 메시지는 네트워크 상태 모니터링, 네트워크 문제 진단 및 오류 보고 등 다양한 용도로 사용됩니다. ICMP는 여러 가지 메시지 유형을 정의하고 있으며, 각각의 메시지는 특정한 목적을 가지고 있습니다. 가장 널리 사용되는 ICMP 메시지 유형 중 일부는 다음과 같습니다. 1. 에코 요청 및 응답 (Echo Request and Reply): ICMP Echo 요청은 호스트나 네트워크 장비로부터 응답 메시지를 받기 위해 전송되는 메시지입니다. 일반.. 공감수 0 댓글수 0 2023. 9. 10.
Angular Naver Map Api 컴포넌트 예시 / 앵귤러 네이버 지도 import { CommonModule } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import { LatLng } from '@common/interface'; import { SearchService } from '../../services/search.service'; declare let naver: any; // Naver 지도 API를 사용하기 위해 선언된 변수 @Component({ selector: 'app-naver-map', .. 공감수 0 댓글수 0 2023. 9. 9.
vi 명령어 feat.dockerfile 도커파일 예시 mkdir asd cd asd vi app.js vi dockerfile FROM node:12 COPY app.js / CMD ["node","/app.js"] 1. `mkdir asd`: `mkdir`은 디렉토리를 생성하는 명령어입니다. 여기서는 `asd`라는 이름의 디렉토리를 생성하고 있습니다. 2. `cd asd`: `cd`는 디렉토리를 변경하는 명령어입니다. `asd` 디렉토리로 이동하고 있습니다. 이제 현재 작업 디렉토리는 `asd`가 됩니다. 3. `vi app.js`: `vi`는 텍스트 편집기로서, `app.js`라는 파일을 편집하는 명령어입니다. `vi` 편집기가 열리며, 파일이 존재하지 않으면 새로 생성됩니다. 파일 이름은 `app.js`로 지정되었습니다. 4. `vi dockerfil.. 공감수 0 댓글수 1 2023. 9. 8.
nginX.conf NginX 설정 커스텀 예시 # 예시 nginx.conf 파일 # worker 프로세스 수 설정 worker_processes auto; # 이벤트 모듈 설정 events { worker_connections 1024; } # HTTP 모듈 설정 http { # MIME 타입 설정 include mime.types; default_type application/octet-stream; # 로그 포맷 설정 log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; # 업스트림 서버 설정 upstream ba.. 공감수 0 댓글수 0 2023. 9. 7.
Docker run options / 도커 실행 명령어 및 자주 사용되는 옵션 docker run -p -d --name web 80:80 nginx - `docker run`: 도커 컨테이너를 실행하는 명령어입니다. - `-p`: 호스트와 컨테이너 간의 포트 매핑을 지정하는 옵션입니다. 여기서는 호스트의 80번 포트와 컨테이너의 80번 포트를 매핑하고 있습니다. - `-d`: 컨테이너를 백그라운드에서 실행하는 옵션입니다. 이 옵션을 사용하면 컨테이너가 백그라운드에서 실행되며, 실행 결과가 콘솔에 표시되지 않습니다. - `--name web`: 생성된 컨테이너의 이름을 "web"으로 지정합니다. 이 이름은 컨테이너를 식별하는데 사용됩니다. - `80:80`: 호스트의 80번 포트를 컨테이너의 80번 포트와 매핑합니다. 이렇게 함으로써 호스트에서의 요청이 컨테이너의 Nginx 서버로.. 공감수 0 댓글수 0 2023. 9. 6.
Video Tag 비디오 태그 활용 예시 - `#videos`: 이 부분은 주석으로 보이며 실제로는 영향을 주지 않습니다. 주석은 코드의 의도를 설명하거나 기타 참고 사항을 제공하는 데 사용됩니다. - `class="object-cover video"`: 이 부분은 `class` 속성을 사용하여 요소에 CSS 클래스를 할당하는 것을 나타냅니다. `object-cover`와 `video` 클래스는 CSS 스타일링을 위해 사용될 수 있습니다. - `autoplay`: 이 속성은 비디오가 자동으로 재생되도록 지정합니다. 페이지가 로드되면 비디오가 자동으로 시작됩니다. - `[muted]="true"`: 이 부분은 Angular의 바인딩 구문으로, 비디오를 음소거하는 속성입니다. `true` 값으로 설정되어 있으므로 비디오는 음소거됩니다. - `loo.. 공감수 0 댓글수 0 2023. 9. 5.
scrollbar sidemenu stop 사이드 메뉴 멈추게 하기 예시 / scroll side 1. 부모요소의 크기에 맞게만 사이드를 내려오도록 설정하기 2. ngClass 를 활용하여 fixed, absolute 로 조절 @ViewChild('headerDiv', { read: ElementRef }) headerDiv: ElementRef; reportMenuPosition = 0; onScroll() { this.scrollTop = this.section.nativeElement.scrollTop; this.reportMenuPosition = this.scrollTop + this.reportDiv.nativeElement.clientHeight; } 3. bottom 을 기준으로 멈춰야 하므로 스크롤 탑 + div 요소를 더해서 bottom 을 구하기 4. 전역 변수에 할당 후 해당 변.. 공감수 0 댓글수 0 2023. 9. 4.
Scroll 스크롤 감지 예시 ... 공감수 0 댓글수 0 2023. 9. 3.
Angular resize Service 예시 / response width import { Injectable, computed, signal } from '@angular/core'; import { BehaviorSubject, Observable, Subject, fromEvent } from 'rxjs'; export enum Platform { MOBILE, TABLET, DESKTOP, } @Injectable({ providedIn: 'root', }) export class PlatformService { private resizeEvent$: Observable; // 초기값 : DESKTOP 설정 public platform$ = new BehaviorSubject(Platform.DESKTOP); private width = signal(window.inne.. 공감수 0 댓글수 0 2023. 9. 2.
Angular ScrollService 구현 예시 / scroll import { ElementRef, Injectable, QueryList } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class ScrollService { subject$ = new Subject(); // 스크롤 이벤트를 전달하기 위한 Subject 객체 select(index: number) { this.subject$.next(index); // 주어진 인덱스를 Subject에 전달하여 구독자들에게 알림 } scrollTo(found: ElementRef) { if (found) { const layout = document.querySelector('#layo.. 공감수 0 댓글수 0 2023. 9. 1.
Angular nestjs Mysql connect 예시 / external DB connect import { Injectable, Logger, OnModuleInit } from '@nestjs/common'; import mysql from 'mysql'; @Injectable() export class WareHouseService implements OnModuleInit { private logger = new Logger(WareHouseService.name); private connection: mysql.Connection; constructor() { this.connection = mysql.createConnection({ host: process.env['WAREHOUSE_DATABASE_URL'], port: parseInt(process.env['WAREHOUSE_DA.. 공감수 0 댓글수 0 2023. 8. 31.
Angular navigation routing instanceof 활용 예시 router.events.pipe(filter((ev) => ev instanceof NavigationEnd)).subscribe({ next: () => { this.layout = route.snapshot.data['layout']; this.path = router.url; if ( router.url === '/page' || router.url === '/fq' || router.url === '/inqu' ) { this.items = [ { name: '내 정보', path: '/page' }, { name: '1:1 문의', path: '/inqu' }, { name: 'FAQ', path: '/fq' }, ]; } else { this.items = undefined; } if (th.. 공감수 0 댓글수 0 2023. 8. 30.
Typescript Angular Row / pageNo / pageNumber / pagination 함수 예시 {{setIndex(pageInfo, i)}} setIndex(pageInfo: PageInfo, index: number) { return ( pageInfo?.totalItems - (index + 1 + pageInfo.itemsPerPage * (pageInfo.currentPage - 1)) + 1 ); } 공감수 0 댓글수 0 2023. 8. 29.
Prisma in / TypeScript Set 중복 제거 예시 const uniqueEntities = Array.from( new Set(entities.map((entity) => entity.user.id)) ); const uniqueUsers = await this.prismaService.user.findMany({ where: { id: { in: uniqueEntities, }, }, }); 공감수 0 댓글수 0 2023. 8. 29.
Prisma Craete Log service search query / 쌓는 방식 로그 async search(option: PaginationInfluencerRequestOptionDTO): Promise { // Define the 'where' condition for filtering const where: Prisma.InfluencerRequestWhereInput = { content: { contains: option.query }, deletedAt: null || undefined, }; // Define the 'orderBy' conditi.. 공감수 0 댓글수 0 2023. 8. 29.
Prisma Log Tx Transaction control 프리즈마 로그 트랜잭션 핸들링 예시 async applyRequest(id: string, admin: AdminDTO): Promise { // Tx: 하나의 작업 단위로 묶기 return this.prismaService.$transaction(async (tx) => { // create 가 실패한 경우 중괄호 내부 요소 전부 rollback const created = await tx.influencerRequest.update({ data: { status: InfluencerRequestStatus.COMPLETED, adminId: admin.id, }, where: { id }, }); // 위 입력이 성공할 경우 로그 입력 await tx.log.create({ data: { content: '승인 처리', influenc.. 공감수 0 댓글수 0 2023. 8. 28.
Prisma include 작성자 사용자 정보 함께 조회 0. 마우스를 가져다 대면 유저 테이블을 조회한다는 사실을 알 수 있습니다. const entities = await this.prismaService.influencerRequest.findMany({ where, orderBy, take: option.pageSize, skip: (option.pageNo - 1) * option.pageSize, include: { // 사용자 정보를 포함하여 조회 user: { select: { nickname: true, username: true }, }, }, }); 1. include 를 활용하여 user 테이블을 조회합니다. 2. 사용할 컬럼만 지목해서 가져옵니다. (닉네임, 성명) 3. true 를 명시하면 해당 컬럼 데이터도 가져오겠다는 뜻입니다. 공감수 0 댓글수 0 2023. 8. 25.
Angular tailwind CSS button disable example / button disabled 등록 1. 앵귤러 제공 ngClass 디렉티브를 활용하여 조건에 따라 등록 버튼을 막을 수 있습니다. 공감수 0 댓글수 0 2023. 8. 24.
법정동 스키마 구조 예시 Prisma 시도/시군구 model Category { id String @id @default(uuid()) region Region name String bjdongs Bjdong[] createdAt DateTime @default(now()) deletedAt DateTime? admin Admin @relation(fields: [adminId], references: [id]) adminId String } model Sido { id String @id @default(uuid()) name String code String sigungus Sigungu[] bjdongs Bjdong[] } model Sigungu { id String @id @default(uuid()) name String code String.. 공감수 0 댓글수 0 2023. 8. 22.
bash deploy 배포 방법 예시 0. 프로젝트 최상단 라인에 배포를 실행할 sh 및 pem 확장자 파일 생성 #!/bin/bash HOST=123.123.123.7 echo "🚀 페이지 배포를 시작합니다." echo "🛠️ 프로젝트를 빌드합니다." nx build landing if [ $? -eq 0 ] then echo "✅ 프로젝트 빌드를 성공했습니다." else echo "🚫 프로젝트 빌드를 실패했습니다. 배포를 종료합니다." exit 1 fi echo "📁 빌드된 파일을 서버에 전송합니다." ssh -i scripts/private_key.pem -o StrictHostKeyChecking=no ubuntu@$HOST "rm -rf /home/ubuntu/landing/*" ssh -i scripts/private_key.pe.. 공감수 0 댓글수 0 2023. 8. 21.
Angular routerLinkActive menu handle / 앵귤러 라우터 메뉴 핸들 예시 {{ i.title }} 1. 상단 routerLinkActive :현재 라우트 링크와 일치할 경우 명시한 내용을 class name 으로 설정 2. 일반적으로 router.url === menu.path 라는 조건을 활용해서 현재 메뉴와 라우터 url을 비교하기 마련인데, 이 방식을 쓰면 코드도 줄고 더욱 직관적이라 좋습니다. 공감수 0 댓글수 0 2023. 8. 20.
Apexchart toggle custom 아펙스차트 토글 커스텀 예시 1. chart 컴포넌트 템플릿 import { Component, HostBinding, Input, OnInit, ViewChild, } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ApexAxisChartSeries, ApexChart, ApexDataLabels, ApexLegend, ApexResponsive, ApexStroke, ApexTitleSubtitle, ApexXAxis, ApexYAxis, NgApexchartsModule, ChartComponent as ApexChartComponent, // as 를 활용해서 자신 컴포넌트 이름 변경 } from 'ng-apexcharts'; ex.. 공감수 0 댓글수 0 2023. 8. 19.
Prisma foreign key 배열 조회하여 등록하기 예시 / prisma connect // 지역 테이블 model District { id String @id @default(uuid()) region Region name String bjdongs Bjdong[] createdAt DateTime @default(now()) deletedAt DateTime? admin Admin @relation(fields: [adminId], references: [id]) adminId String } // 법정동 테이블 model Bjdong { id String @id @default(uuid()) name String code String sigungu Sigungu @relation(fields: [sigunguId], references: [id]) sigunguId String sid.. 공감수 0 댓글수 0 2023. 8. 18.
Ionic Anular nestjs video Upload example / 앵귤러 nestjs 동영상 파일 업로드 예시 feat.AWS S3 {{ label }} * 동영상 파일을 드래그 할 수 있습니다. 또는 클릭해서 선택이 가능합니다. {{ items.length }} / {{ maxlength }} {{ item.name }} {{ item.size | fileSize }} 1. 템플릿 예시 (자세한 설명은 주석을 참조하세요.) import { CommonModule } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { Component, Input, OnInit, Optional, Self } from '@angular/core'; import { NgControl } from '@angular/forms'; import { IonicM.. 공감수 0 댓글수 0 2023. 8. 17.
nestjs search 검색 controller service 기본 구조 예시 feat.Prisma export type PageInfo = { itemsCount: number; totalItems: number; itemsPerPage: number; totalPages: number; currentPage: number; }; export class PaginationDTO implements IPaginationDTO { items: T[]; pageInfo: PageInfo; } export class PaginationOptionDTO implements IPaginationOptionDTO { @ApiProperty() @IsNotEmpty() @Type(() => Number) pageNo: number; @ApiProperty() @IsNotEmpty() @Type(() => Numbe.. 공감수 0 댓글수 0 2023. 8. 16.
Angular 컴포넌트 cli 생성 시 앞에 이름 / prefix 수정하기 1. project.jon 파일 prefix 수정하기 2. 일반적으로 app 으로 설정합니다. 공감수 0 댓글수 0 2023. 8. 15.
CSS tag 예시 / tailwind 태그 줄바꿈 {{tag}} 1. 태그들의 부모 HTML 태그에 flex, flex-warp 2. 자식 태그에는 min-w-max 를 사용하여 글씨의 길이에 따라 줄바꿈 및 크기 조절이 되도록 설정 공감수 0 댓글수 0 2023. 8. 14.
Nestjs 비밀번호 / 비밀번호 확인과 같이 클래스 내 다른 property와 일치한 지 검증하고 싶을 때 import {registerDecorator, ValidationArguments, ValidationOptions} from 'class-validator'; export function IsEqual(property: string, validationOptions: ValidationOptions) { return function (object: object, propertyName: string) { registerDecorator({ name: 'isEqual', target: object.constructor, propertyName, constraints: [property], options: validationOptions, validator: { validate(value: any, ar.. 공감수 0 댓글수 0 2023. 8. 13.
Nx nest Angular Guard 활용 예시 JWT Bearer npx nx generate @nx/nest:guard admin-role --project=server --directory=guards --language=ts --no-interactive 1. 가드 생성 2. 일반적인 가드와 데코레이터 폴더 경로 Server Side import { CanActivate, ExecutionContext, HttpException, Injectable, UnauthorizedException, Logger, } from '@nestjs/common'; import { PrismaService } from '../../../prisma/prisma.service'; import { AuthUtil } from '../auth-util.service'; import {.. 공감수 0 댓글수 0 2023. 8. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.