const sessionMiddleware = session({
    resave: false,
    saveUninitialized: false,
    secret: process.env.COOKIE_SECRET,
    cookie: {
        httpOnly: true,
        secure: false
    }
});
app.use(sessionMiddleware);

io.js

const {Server} = require('socket.io');

module.exports = (server, app, sessionMiddleware) => {
    const io = new Server(server, {
        path: '/socket.io',
        cors: {
            origin: '*',
            credentials: true
        }
    });
    const namespace = io.of('/namespace');
    app.set('io', io);

    io.use((socket, next) => {
        sessionMiddleware(socket.request, socket.request.res || {}, next);
    });

    namespace.on('connect', (socket) => {
        console.log('user connected');

        socket.join(room);

        socket.on('event-name', (data) => {
            namespace.to(room).emit('event-name', { data });
        });

        socket.on('disconnect', () => console.log('user disconnected'));
    });

    return io;
}

router.js

const express = require('express');
const router = express.Router();

router.get('/', (req, res, next) => {
        req.app.get('io').of('/namespace').to(room).emit('event-name', {});
});

module.exports = router;

function checkFinalConsonant(txt: string) {
    // 입력받은 문자를 유니코드로 변경
    const uni = txt.charCodeAt(txt.length-1) - 44032;

    // 입력받은 문자가가 없을 때 빈 문자열 반환
    if (txt.length == 0) {
        return '';
    }

    // 한글이 아닐때 입력받은 문자를 반환
    if (uni < 0 || uni > 11171) {
        return txt;
    }

    // 받침이 없을 경우 false, 있을 경우 true를
    return (uni % 28 === 0);
}

function searchWord(target: string, str: number | string) {
    let searchArr: string[] = [];
    const newStr = str.toString();
    let index = 0;
    let result: string;
    let sliceIndex: number;

    if (target.length < newStr.length) {
        return "Failed";
    }

    for (let letter of target) {
        const regex = new RegExp(/[^0-9a-zA-Z가-힣]/g);
        if (letter === newStr[index]) {
            searchArr.push(letter);
            index++;
        } else if (searchArr.length !== 0 && regex.test(letter)) {
            searchArr.push(letter);
        } else {
            index = 0;
            searchArr = [];
        }

        if (index === newStr.length) {
            break;
        }
    }

    result = searchArr.join('');
    sliceIndex = target.indexOf(result);

    return (
         target.slice(0, sliceIndex) +
        `<span>` +
        target.slice(sliceIndex, sliceIndex + result.length) +
        `</span>` +
        target.slice(sliceIndex + result.length, target.length)
    );
}

const list = [
    "TEST 테%스%트 아이^스아메리#카)노 3,500원@@@",
    "TEST 테%스%트 아@이^스아메리#카노 3,500원@@@",
    "TEST 테%스%트 아이^스아메$리#카(노 3,500원@@@",
    "TEST 테%스%트 아이^스아^메리#카노 3,500원@@@",
    "TEST 테%스%트 아이^스#아메#리카*노 3,500원@@@"
];
const searchResult = [];

for (let item of list) {
    searchResult.push(searchWord(item, 아이스아메리카노));
}

console.log(searchResult);

function getConstantVowel(letter: string) {
    const consonantArr = ['ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ', 'ㄹ', 'ㅁ',
               'ㅂ', 'ㅃ', 'ㅅ', 'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ',
               'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];

    const vowelArr = ['ㅏ', 'ㅐ', 'ㅑ', 'ㅒ', 'ㅓ', 'ㅔ', 'ㅕ',
            'ㅖ', 'ㅗ', 'ㅘ', 'ㅙ', 'ㅚ', 'ㅛ', 'ㅜ',
            'ㅝ', 'ㅞ', 'ㅟ', 'ㅠ', 'ㅡ', 'ㅢ', 'ㅣ'];

    const finalConsonantArr = ['', 'ㄱ', 'ㄲ', 'ㄳ', 'ㄴ', 'ㄵ', 'ㄶ',
            'ㄷ', 'ㄹ', 'ㄺ', 'ㄻ', 'ㄼ', 'ㄽ', 'ㄾ',
            'ㄿ', 'ㅀ', 'ㅁ', 'ㅂ', 'ㅄ', 'ㅅ', 'ㅆ',
            'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];

    const firstLetter = 44032;
    let uni = letter.charCodeAt(0);

    uni = uni - firstLetter;

    let consonantUni = parseInt((uni / 588).toString());
    let vowelUni = parseInt(((uni - (consonantUni * 588)) / 28).toString());
    let finalConsonantUni = parseInt((uni % 28).toString());

    return {
        consonant: consonantArr[consonantUni],
        vowel: vowelArr[vowelUni],
        finalConsonant: finalConsonantArr[finalConsonantUni]
    };
}

    constructor(
      private translate: TranslateService
    ) {}

    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      console.log(event.lang);
    });

// html
<div>
  <div>
    <form #authForm="ngForm" (ngSubmit)="onSubmit(authForm)">
      <div>
        <label for="email">E-mail</label>
        <input type="email" id="email" ngModel name="email" required email>
      </div>
      <div>
        <label for="password"></label>
        <input type="password" id="password" ngModel name="password" required minlength="6">
      </div>
      <div>
        <button type="submit" [disabled]="!authForm.valid">Submit</button>
      </div>
    </form>
  </div>
</div>


// ts
onSubmit(form: NgForm): void {
  console.log(form.value);    // {email: '', password: ''}
  form.reset();
}

1. resolve 서비스 생성

   // resolve.service.ts
   

@Injectable({ providedIn: 'root' })

export class ResolveService implements Resolve { constructor( private service: AppService ) { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any { return this.service.getData().pipe( mergeMap((res: HttpResponse) => { if (res.body) { return of(res.body); } else { return EMPTY; } }) ); } }

2. 라우터 모듈에 추가

// app.module.ts

@NgModule({ ... imports: [ ... RouterModule.forRoot([ { path: '', component: ChildComponent, resolve: { resolveData: ResolveService } } ]) ], ... })

3. resolve로 미리 로드한 데이터 사용

// component.ts

this.activatedRoute.data.subscribe(res => { console.log(res); }); ```

1. http interceptor 서비스 생성

// auth-interceptor.service.ts

export class AuthInterceptorService implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    ...
    // 인증 확인 후 http 헤더 수정
    ...
   return next.handle(req).pipe(tap(event => {
      if (event instanceof HttpResponse) {
        ...
        // 응답이 포함된 요청일 경우 인증 갱신
        ...
      }
    }));
  }
}

2. 모듈에 추가

   // app.module.ts
   

@NgModule({ ... providers: [ { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorService, multi: true // 여러개의 인터셉터 사용 여부 } ], }) ```

사용 예시만 남겨놓는다.

const params = new URLSearchParams(location.search); const paramsA = params.get('A');

Angular에서 제공하는 CanDeactivate를 사용해 보았다.

CanDeactivate는 현재 컴포넌트에서 다른 컴포넌트로 라우팅을 요청할 때, 임의의 조건에 따라 라우팅을 승인하거나 차단할 수 있게 해주는 기능이다.

1. can-deactivate-guard.service.ts 생성

can-deactivate-guard.service.ts 파일을 생성한다.

import {Observable} from "rxjs";
import {ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot} from "@angular/router";

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ) : Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate();
  }
}

2. module 수정

module.ts의 providers에 canDeactivate를 추가한다.

  providers: [
    ...
    CanDeactivateGuard
  ]

3. route 수정

    {
      path: '',
      ...
      canDeactivate: [CanDeactivateGuard]
    },

4. component.ts에 canDeactivate 함수 생성

canDeactivate에서 리턴되는 결과에 따라 라우팅 요청이 성공하거나 취소된다.

  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    if (this.infoChange) {
      return confirm('Message');
    } else {
      return true;
    }
  }

5. custom dialog 사용

아래 코드에서는 Material dialog를 사용했다. dialog close 이벤트에 boolean 값을 리턴한다.

  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    if (this.infoChange) {
      const dialogRef = this.dialog.open(ConfirmRouteComponent);
      return dialogRef.afterClosed();
    } else {
      return true;
    }
  }

프로젝트 생성 후, index.html 파일의 base href를 "./"로 수정한다.

1. Electron 설치

npm install electron --save-dev

2. main.js 파일 생성

const {app, BrowserWindow} = require('electron');

let win;

function createWindow() {
  win = new BrowserWindow({
    width: 600,
    height: 600,
    backgroundColor: '#fff'
  })

  win.loadURL(`file://${__dirname}/dist/electron-app/index.html`)

  win.webContents.openDevTools()

  win.on('closed', function () {
    win = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (win === null) createWindow()
})

Electron에서 제공하는 BrowserWindow API를 사용하여 GUI 윈도우를 만들고, loadURL() 메서드로 dist 폴더의 index.html 파일을 불러온다. dist 폴더는 프로젝트를 빌드하면 생성된다.

앱을 실행할 때 index.html의 경로를 확실하게 작성해야 화면이 정상적으로 출력된다.

3. package.json 파일 수정

package.json 파일에서 메인 엔트리 포인트를 수정한다. 쉽게 프로젝트를 빌드하고 실행할 수 있도록 스크립트를 추가한다.

{
  "name": "electron-app",
  "version": "0.0.0",
  "main": "electron-main.js",
  "scripts": {
      ...
    "start:electron": "ng build --prod && electron ."
  },
}

4. electron-packager 설치 및 스크립트 추가

데스크탑 앱을 배포하기 위해 electron-packager를 설치하고, package.json에 스크립트를 추가한다.

npm install electron-packager --save-dev

// package.json
"pack:electron-win": "electron-packager . --platform=win32",    // Window
"pack:electron-darwin": "electron-packager . --platform=darwin"    // Mac

5. Windows 앱 패키징

위에서 작성한 스크립트를 입력하면 .exe 파일이 생성된다. 윈도우에서 해당 파일을 실행하면 Electron 앱에서 Angular 프로젝트가 실행된다.

오늘이 어쩌고 내일이 저쩌고 포기했다. 그냥 살기로 결정했다.

오늘은

그래프와 이미지를 압축 파일로 다운로드하는 방법이다. 다운로드할 파일은 Apache ECharts와 PC에 있는 이미지를 사용했다. 압축에는 JSZip를 사용했다. 내가 보려고 메모하는 게 목적이라 코드에 대한 자세한 설명은 생략한다.

test.component.html

• 그래프 이미지 다운로드

  <button (click)="imageDownload('canvas')">Download</button>
  

• 일반 이미지 다운로드

  <button (click)="imageDownload('img')">Download</button>
  

test.component.ts

  chartOption: EChartsOption = {};
  container = new Map;

  @ViewChild('canvas') canvas! : ElementRef;
  @ViewChild('image') image!: ElementRef;

  constructor() {}

  ngOnInit(): void {
    this.createChart();
  }

  ngAfterViewInit(): void {
    this.container.set('canvas', this.canvas);
    this.container.set('img', this.image);
  }

  createChart(): void {...}

  imageDownload(type: string): void {
    const zip = new JSZip();
    const targetImages = this.container.get(type).nativeElement.getElementsByTagName(type);

    for (let i = 0; i < targetImages.length; i++) {
      let canvas = targetImages[i];
      let fileName = `image_${i+1}.jpg`;
      if (type === 'img') {
        fileName = `${canvas.alt}.jpg`;
        canvas = document.createElement('canvas');
        canvas.width = targetImages[i].width;
        canvas.height = targetImages[i].height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(targetImages[i], 0, 0);
      }
      const url = canvas.toDataURL('image/*');
      const base64 = url.replace(/^data:image\/[a-z]+;base64,/, "");
      zip.file(fileName, base64, {'base64': true});
    }

    zip.generateAsync({type: 'base64'}).then(
      file => {
        const link = document.createElement('a');
        link.setAttribute('href', 'data:application/octastream;base64, '+ file);
        link.setAttribute('download', 'example.zip');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    )
  }

두 번 쓰기 번거로워 한 번에 정리했다. 혹시나 개발에 참고한다면 잘 구분하고 수정해서 사용할 것을 권장한다.

    // canvas background color setting, 설정하지 않으면 배경이 투명하게 나오는 경우가 있음
    const ctx = canvas.getContext('2d');
    ctx.globalCompositeOperation = 'color-burn' || 'destination-atop' || 'destination-over';
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

나름대로 적당히 살기 2일차 내일이 3일차가 아닐 수도 있음

오늘은

앵귤러에서 파이프를 적용하는 방법이다.

앵귤러에 적응하고 있을 때 데이터를 변환하여 출력하기 위해 파이프를 사용해야 했던 적이 있었다. 가이드 문서에 충분히 설명되어 있지만, html 컴포넌트와 ts 컴포넌트를 분리해서 사용할 때 ts 컴포넌트에 파이프를 직접 적용하는 방법에 대해서는 설명이 충분하지 않았던 것으로 기억된다. 그냥 못 본 것일 수도 있다. 언젠가 또 쓸 일이 있지 않을까 싶어 정리한다.

1. 파이프를 생성한다.

파이프 만드는건 공식 문서에 친절하게 설명되어 있다.

2. 서비스와 같은 방법으로 사용한다.

아래 코드처럼 component.ts에 서비스를 주입하듯이 사용하면 된다. 한 가지 차이점이 있다면 컴포넌트 데코레이터에 providers를 추가해야 한다. 모듈에 한 번만 추가해서 썼던 것도 같은데 기억이 잘 안 난다. 나중에 확인해 봐야겠다.

@Component({
   ...
    providers: [Pipe]
})

constructor(
   private pipe: Pipe
) {}

v = this.pipe.transform(value, ...args);

```

-끝-

나름대로 적당히 살기 1일차 내일이 2일차가 아닐 수도 있음

오늘은

리팩토링이다. 아래 책을 참고했다. 책이 조금 어려울 수 있다. 그래서 쉬운 것만 정리했다. 나머지는 나 혼자 봤다. 궁금하면 찾아보는 것을 추천한다.

정의

&nbsp여러 가지 리팩토링 기법을 적용하여 코드를 이해하고 수정하기 쉽도록 내부 구조를 재구성한다. 이때, 리팩토링 전과 후의 프로그램 동작은 동일해야 한다.

&nbsp리팩토링 후, 프로그램의 성능이 반드시 좋아지는 것은 아니다. 오히려 나빠질 수 있으며, 성능이 좋아지는 것을 목표로 한다면 코드는 더 어렵게 바뀔 수 있다.

이유

&nbsp목표 달성만을 위한 코딩이 반복된다면 여러 곳에서 중복된 코드가 발생하거나 프로그램의 내부 구조가 복잡해질 수 있다. 이는 프로그램의 설계를 파악하거나 코드를 이해하는 데에 어려움을 줄 수 있다. 결과적으로 기존의 기능을 수정하거나 새로운 기능을 추가하는 데에 더 많은 시간이 소요되게 한다.

목적

1. 내부 구조를 명확하게 한다.
2. 코드의 의도를 명확하게 하고, 이해하기 쉽게 한다.

목표

&nbsp코드의 구조를 쉽게 파악할 수 있도록 하여, 새로운 기능을 추가하거나 기존의 기능을 수정하는 데에 소요되는 시간을 단축시킨다.

방법

1. 함수와 변수의 이름을 변경한다.

• 이름만 보고도 어떻게 사용되는지 명확하게 알 수 있어야 한다.

2. 중복된 코드를 정리한다.

• 중복된 코드를 하나로 통합하여 사용한다. 똑같은 구조나 기능을 가진 코드가 여러 곳에서 존재하고 있을 때, 해당 기능을 수정하면 비슷한 코드들을 전부 확인해야 하는 소요가 있을 수 있다.

3. 함수를 분리한다.

• 함수를 기능적으로 구분하여 분리하고, 간접 호출하여 사용한다. 함수 내에서 주석으로 구분해야 하는 영역이나 조건문, 반복문도 대상이 될 수 있다. 이때, 함수의 이름은 코드의 목적이 드러나도록 설정한다.
• 지나친 분리로 쓸데없는 간접 호출이 발생하는 경우를 주의한다.

4. 복잡한 표현식을 변수 또는 함수로 추출한다.

• 표현식이 복잡하여 이해하기 어려운 경우, 변수나 별도의 함수로 추출하여 사용할 수 있다. 이때, 변수나 함수의 이름은 코드의 의도가 명확하게 드러나도록 설정한다.

5. 반복문을 파이프 라인으로 변경한다.

• 반복문과 조건문으로 구성된 코드를 파이프 라인으로 수정하면 처리 과정을 쉽게 이해할 수 있다.

6. 사용하지 않는 코드를 제거한다.

• 사용하지 않는 변수나 호출되지 않는 함수를 제거한다.

나름대로 열심히 살기 1일차 내일이 2일차가 아닐 수도 있음

개발 인생 3줄 요약

1. 자바스크립트와 리액트를 맛만 보고 어찌저찌 취업에 성공했다.
2. 입사 후 앵귤러를 배워 만 1년하고도 3일째 프론트앤드 개발자로 일하고 있다.
3. 그나마 조금 알던 리액트를 다 까먹었고, 리액트가 차지하고 있던 뇌를 뷰로 다시 채우고 있다.

블로그를 시작하려는 거창한 이유

취업 후 대학원에 복학했고, 가끔은 알고리즘 공부도 한다. 뭐 재밋는거 없나 여기저기 기웃거리기도 하고, 어제부터는 뷰 공부도 시작했다. 뭔가 이것저것 하고 있는 것 같기는 한데 열심히 하고 있는지는 모르겠다. 사실 그냥 흘러가는 대로 살았다. 그래서 블로그에 글이라도 남겨 스스로 위안을 삼고자 한다. 무언가 했다고 증거를 남겨놓고 열심히 살았다 생각하기로 했다. 인생 결국 자기만족 아니던가.

내일은 토요일, 다음 주 월요일은 공휴일

아마 나름대로 열심히 살기 2일차는 다음 주 화요일이 되지 않을까 싶다. 물론 아닐 수도 있다. 주말은 적당히 살고 다음 주 화요일부터 열심히 살도록 노력해야겠다. 인생 결국 자기만족..