개인코딩개발공장

데이터 검증하기 dto

부엉이사장 — Sat, 14 Jun 2025 05:20:47 +0900

Introduction

express 사용할때는 각 함수마다 받아오는 데이터를 직접 검증했음.
예를들어 로그인하려는데 아이디 길이나 비밀번호 이런거 정규식 주로 사용함.
nestJs에서는 dto라는게 있어서 매우 편한거같음. 이걸 소개할까함

# 먼저 설치

npm install class-validator class-transformer

# main.ts 수정

  app.useGlobalPipes(new ValidationPipe({
    transform: true,            // DTO 타입 자동 변환
    whitelist: true,            // DTO에 정의되지 않은 속성 제거
    forbidNonWhitelisted: true, // 정의되지 않은 속성이 있으면 400 에러
  }));

# 디렉토리 구조

이런식으로 dto 디렉토리에 원하는 검증 dto듣을 넣어주샘

# 검증값 / test.dto

import {
  IsDefined,
  IsString,
  MinLength,
  MaxLength,
  Matches,
  IsNotEmpty,
} from 'class-validator';

export class BaboDto {
  @IsDefined({ message: '이름을 입력해주세요.' })
  @IsString()
  @MaxLength(4, { message: '이름은 5자 미만이어야 합니다.' })
  @Matches(/^[가-힣a-zA-Z0-9]+$/, {
    message: '이름에는 특수문자를 포함할 수 없습니다.',
  })
  name: string;
  @IsDefined({ message: '메시지를 안 받았어요.' }) // 이게 꼭 있어야 함
  @IsString({ message: 'message must be a string' })
  @IsNotEmpty({ message: '메시지를 안 받았어요.' })
  @MinLength(10, { message: '메시지는 10자 이상이어야 합니다.' })
  message: string;
}

test.dto꺼

해당 프로퍼티들을 어떻게 검증할건지 체크해주는거임.

1. IsDefined 얘는 이 값이 있어야하는거. 없으면 message 응답

2. isString 얘는 문자열타입이어야 하는거

3. MaxLength 는 최대길이. 안맞으면 메세지 응답

4. Matches는 정규식으로 검사까지

이런식으로 여러가지 dto를 만들고 재사용할 수 있음

타입을 따로 정해뒀으면 타입을 임포트해서 class에 implements로 할수도 있을듯

# 컨트롤러에서 설정

  @Post('babo')
  PostBabo(@Body() dto: BaboDto) {
    //여기부터는 dto검사 끝난 상태임
    return {
      message: '데이터 잘 받았어요!',
      data: dto,
    };
  }

babo라는 post요청을 받았을때,

body를 BaboDto로 검증한다는 거임

# 테스트

정상요청시

비정상 요청시

1. 프로퍼티 하나 더 추가

2. 프로퍼티 하나 뺴기

3. 아이디 규격위반

뭐 이런식으로 400번대 에러 던져줌. 매우매우 편리할것같다

예전에 하드코딩할떄는 아예 규격 미들웨어 다 정해서 힘들었는데

nestJs로 하면 데이터 받아오는걸 컨트롤러단에서 검증하고 끊어줄 수 있음.

LF CRLF문제

부엉이사장 — Sat, 14 Jun 2025 04:19:29 +0900

파일마다 vs코드에서 설정해주는게 여간 귀찮은게 아님.

setting이랑 뭐 깃 다 설정해봣는데 안됐음.

걍 프로젝트마다 eslintrc.js파일을 이렇게 수정하자.

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    "prettier/prettier": ["error", { "endOfLine": "auto" }], //여기 추가
  },
};

https://gengminy.tistory.com/12

[NestJs] 따라하면서 배우는 NestJs - 2 (기본적인 CRUD 수행)

✅ 서비스 의존성 주입 및 전체 READ ./boards/boards.service.ts import { Injectable } from '@nestjs/common'; @Injectable() export class BoardsService { //일단 로컬 메모리에 저장하는 방식으로 private boards = []; getAllBoards(

gengminy.tistory.com

Team Project - Remember Me

부엉이사장 — Sun, 26 Jan 2025 10:33:16 +0900

Introduction

안녕하세요? Nurd Worker입니다! 반갑습니다.
이번에 소개해드릴 프로젝트는 RememberMe 프로젝트입니다!

저는 다른 언어 공부를 할때 따로 A4용지같은데 적어서 공부를 하는데요. 단어를 정리해서 적어놓는것도 시간이 많이 걸리고 가끔은 잃어버리는 경우도 있어서 단어장 어플리케이션을 만들어봐야겠다 생각하고 시작하게 된 프로젝트입니다ㅎㅎ

완료된지 얼마안된 프로젝트라 아직 어학공부보다 포트폴리오준비에 전념하고있는데요.
조만간 취직 후, 틈틈히 사용할 예정입니다^^

Remember Me 프로젝트는 제가 취직할때 정말 많은 점을 어필 할 수 있는 프로젝트라고 생각합니다.
포트폴리오 프로젝트 중 메인 프로젝트라고 보시면 되겠네요 ㅎㅎ

미리 간단히 말씀드리자면,

- React + Typescript 첫 경험
- 서버리스(Lambda) 서비스
- 성능 & 비용 최적화
- 유지보수 최적화
- 팀프로젝트 진행(팀장)

이런 점들을 주목하셔서 포스팅을 읽어주시면 감사드리겠습니다^^

참고로 RememberMe 프로젝트는 현재 배포가 되어있는 상태입니다~
궁금하시면 링크를 들어오셔서 확인 가능하세요 ^^
그럼 시작하겠습니다~

시작하기 전에

remember me 프로젝트는 팀프로젝트로 분류해놨지만, 두 가지 버전으로 나뉩니다!

demo버전은 팀프로젝트로 진행을 했구요~ 이게 초기버전입니다. 인프라팀원분들 두 분, 개발팀원(nurd worker) 이렇게 만든 프로젝트입니다.

그 이후에 nurd worker가 따로 좀더 손본 버전이 advanced버전입니다.

advanced버전은 test기능을 추가했고 타입설정이라든지 이런것들을 더 추가한 버전입니다.

Remember Me 링크

Remember Me introduction video : https://www.youtube.com/watch?v=MEIIWAcPjt0

Remember Me published web site link : https://rememberme.nurd.work/

Remember Me

A vocabulary memorization app to help you efficiently learn and retain words.

rememberme.nurd.work

Remember Me github Link

Remember Me advanced github Link :

frontend : https://github.com/nurdworker/rememberme-advanced-front

GitHub - nurdworker/rememberme-advanced-front

Contribute to nurdworker/rememberme-advanced-front development by creating an account on GitHub.

github.com

backend : https://github.com/nurdworker/rememberme-advanced-back

GitHub - nurdworker/rememberme-advanced-back

Contribute to nurdworker/rememberme-advanced-back development by creating an account on GitHub.

github.com

Remember Me demo github organization Link : https://github.com/vocaAppServerless

Remember Me

Remember Me has 5 repositories available. Follow their code on GitHub.

github.com

Remember Me Project Development Tech Stacks

remember me 프로젝트에서 nurd worker가 개발쪽을 100퍼센트 담당을 하였는데요.

람다로 서버리스 서비스를 구성했습니다. 사실 람다가 이 프로젝트의 가장 어려운 부분이었어요.

aws sam cli이라고 있는데 아이콘이 생소하시죠? 다람쥐가 도토리를 들고있는 아이콘입니다.

한국에서는 많이들 안써보신 툴일겁니다. 포스팅에 자세히 설명드리겠지만, 로컬환경에서 lambda환경을 구성하기위해 사용한 aws툴입니다.

프론트앤드는 react + type script, 백엔드는 node js, 데이터베이스는 mongo db를 사용헀습니다.

react와 typescript는 처음으로 사용해봤습니다 ㅎㅎㅎ

기타 aws 리소스로는 api gateway와, cloud watch, SNS, secret manager를 사용했네요~

참고로 현재 테크스택들은 개발담당이었던 제가 사용했던 스택들입니다.

팀프로젝트에서 팀원분들이 사용하신 스택들은 따로 있습니다. 테라폼, cicd, kibana등 어마무시한것들이 많아요 ㅎㅎㅎ

Frontend : React
Backend: : Node.js, AWS SAM CLI
Database : MongoDB
CI/CD : GitHub Actions
Cloud(AWS) : Lambda, API Gateway, S3, CloudFront, Route53, WAF, Parameter Store, Secrets Manager, Budgets, Chatbot
IaC : Terraform(HCP Terraform)
Logging : CloudWatch, Logstash, Elasticsearch, Kibana
ETC : Git/GitHub, Slack, Notion

팀프로젝트 스택 내용은 demo버전 github organization의 readMe 파일에 에 정리되어있습니다^^

Lambda에서 개발환경 & 배포환경 구분

제가 보통 사용하는 백엔드 개발 환경만 그림으로 간단하게 그려봤는데요.

node index.js

자바스크립트로 코드를 런타임으로 돌리려면 이런식으로 node명령어로 파일을 실행시킵니다.

저는 저장만 하면 새로 코드를 다시 실행시켜주는 nodemon을 주로 사용합니다.

express 프레임워크로 개발한 백엔드 서버의 경우는 스크립트를 nodemon으로 실행하면 로컬에 포트로 서버가 띄워지죠.

리액트같은경우는 npm start로 로컬에 프로세스를 띄우고 개발을 하곤하죠?

완전 개발을 처음 접하시는분들도 익숙한 개념입니다.

하지만 Lambda로 백엔드 서비스를 구성해야하는 remember me 서비스는 어떻게 개발환경과 배포환경을 구분해야할까요?

쉽게 상상이 안됩니다.

이 때 사용한 툴이 aws sam cli입니다.

aws sam cli는 정말 생소한 툴인데요. 서버리스 서비스를 로컬에서 돌아가게 만들어주는 aws에서 배포한 툴입니다.

일반적으로 lambda로 serverless 백엔드 서비스를 람다로 구축하시기위해선 api gateway랑 연결한 lambda로 저런 아키텍쳐로 운영을 하게되는데요.

SAM CLI로 로컬에서 api gateway, lambda 백엔드 서비스가 구축이 됩니다!!

신기하죠?

람다는 컨테이너 단위입니다. 때문에 aws sam cli로 로컬환경에서 백엔드 서비스를 만드려면 도커를 설치하셔야해요.

sam build --no-cached
sam local start-api --env-vars ./env.json --port 포트번호

react나 vue, nest js 를 사용하신분들은 build가 익숙하실텐데, sam cli도 사용하시려면 빌드를 먼저해야합니다.

이후 에 start-api명령어로 api gateway+lambda환경을 실행 할 수 있습니다.

build가 되었네요~

start api명령어를 치면 단일진입점(api gateway endpoint)이 로컬에 생깁니다~

명령어 구분

위와같이 코드를 수정을 할때마다 build와 start api명령어로 계속 컨테이너를 띄워줘야 했는데요.

때문에 개발할때 명령어도 따로 나눠야했어요.

//node 명령어
node -e "require('./src/handlers/test').handler(require('./event.json'), null).then(console.log)"

간단하게 코드만 테스트하기위해서는 node명령어를 사용헀구요.

//event.json
{
  "queryStringParameters": {
    "request": "connectDb"
  }
}

더해서 람다에 전달할 event를 json으로 만들어야하구요.

sam build --no-cached
sam local invoke TestFunction --env-vars ./env.json --event ./event.json

실제 람다 컨테이너하나만 호출하려면 invoke명령어로 해야합니다. (event.json설정해야함)

sam build --no-cached
sam local start-api --env-vars ./env.json --port 포트번호

이건 전체 람다를 띄우는 커맨드입니다.

또한 환경변수도 나눠야했어요.

.env가 있고, env.json이 있습니다.

.env는 node명령어에선 됐는데 build후 람다컨테이너를 띄우면 못가져가더라구요.. 그래서 env.json으로 했습니다.

또한 중요한건 template.yaml로 띄울 람다 정의와 이것저것 설정을 해야하는데요

backend/template.yaml at main · vocaAppServerless/backend

Contribute to vocaAppServerless/backend development by creating an account on GitHub.

github.com

이 template.yaml형식대로 정리를 해야해요.

이 template.yaml을 기준으로 sam이 build를 한답니다.

참고로 cicd팀원분도 이 template.yaml을 기준으로 cicd코드를 코딩하셨어요.

sam cli를 추천하시나요?

sam은 일단 코드 수정후에 저장한다고 바로 환경에 적용이 안됩니다. ㅡㅡ

코드를 한 글자만 수정을 하더라도 적용시키려면 build+start api를 다시 해줘야하는데 이 과정이 5분씩 잡아먹어요

그리고 제 노트북은 5년된 간신히 숨만 붙어있는 산송장 노트북이라 리소스를 엄청 잡아먹는 sam을 돌릴때마다 팬이 아주 미친듯이 돌아갔답니다...

개발환경과 배포환경을 완벽히 분리했지만 너무 힘들었어요.

때문에 위에 명령어들 줄줄히 적어놓은게 어떻게든 sam cli를 활용해서 개발을 하려고 발버둥쳤던 흔적입니다..

환경변수도 node명령어 실행때, sam으로 컨테이너 띄웠을때, 실제 배포했을때 전부 다르게 설정해야했습니다.

지금까지 개발할때마다 control + S를 누르면 바로바로 코드가 프로세스에 적용하게 해줬던 nodemon과 live server등 개발도구들의 소중함을 너무나도 절실히 깨달은 경험이었습니다.. 진짜 여러분들 이거 진짜 체감못하실거에요.. 저 이거하고 탈모왔어요

근데 사실 sam말고 어떻게 람다환경에서의 개발 배포환경을 구분해야할지는 다른 좋은방법이 생각이 안납니다.

실제 컨테이너 이미지를 만들어서 해야할까요? 아니면 aws에 private네트워크를 만들고 거기서 lambda, api gw를 띄워야할까요? 시도는 안해봤지만 많이 어려울것 같다고 생각드네요.

암튼 너무 어렵다기보단 짜증이났던 경험이었습니다.. 구글링해도 sam cli에 대한 자료가 거의 없구 gpt도 수집할 자료가없어서인지 엄청 틀리더라구요. 하나하나 조금씩 수정하며 테스트해봐야했는데 테스트할때마다 5분씩 걸리니...하.. 암튼 결국 완성은 했지만요.

람다에 대해서

일단 이번 포스팅에서 제가 전해드리고 싶은 내용을 말씀드리기위해 개념부터 정리하는 식으로 차근차근 포스팅하겠습니다.

위에서도 말씀드렸지만 람다를 보통 함수? 라고 생각하시는데요. 람다는 정확히는 컨테이너입니다.

aws에서도 람다함수가 하나 호출되면 해당 람다함수의 컨테이너가 띄워지고 이벤트를 받고 처리후에 응답을 주는 구조랍니다.

지금부터 lambda의 특성중 제가 주목한 특성 세 가지를 먼저 소개해드릴게요.

매우 중요한 부분입니다. 성능최적화에 관련이 있는 내용입니다.

1. Lambda는 세가지 state가 있습니다. - clod start & warm state & idle state

cold start : 람다가 막 시작해서 초기화부터 이뤄져야할 상태에요. 한동안 람다에 이벤트가 없어서 컨테이너가 없는 상태라 다시 만들어야하는 상태입니다.

warm state : 이미 cold start가 이뤄진 컨테이너라 다음 이벤트를 받을때 컨테이너 초기화가 필요없는 상태에요

idle state : 한동안 람다에 요청이 없어서 삭제대기중인 상태입니다. 람다는 삭제될수 있다는걸 알려드리고 싶어서 추가했어요. 별로 중요하진않아서 그냥 이런상태가 있다~정도만 생각하시면되요.

예시를 들어드릴게요

먼저 무찌가 보낸 이벤트는 람다가 cold start상태라서 초기화가 필요해요. 컨테이너가 생성되야하죠. 그래서 이벤트가 10초나 걸려서 처리가 됐죠.

근데 이후에 도리가 이 람다에 또다시 요청을 합니다. 이때는 무찌가 이미 람다를 따뜻하게 해놨으므로 warm state상태입니다.

이벤트 처리가 5초밖에 안걸렸네요. warm state인 람다는 이벤트를 더욱 빠르게 처리해줘요. 이미 cold start때 썼던 메모리룰 기억하고있어서 재사용하면 되거든요~

중요한건 람다는 처음 요청을 받으면 cold start상태로 시작되고 초기화가 필요하기때문에 이벤트에대한 응답을 비교적 늦게줍니다는 점이에요. 이후로 오는 이벤트는 이미 한번 사용된 람다 컨테이너를 재사용할수 있으니까 warm state상태라서 더욱 빠른 응답을 주는거죠. 이 부분을 기억해주세요. 밑에 설명할 캐싱기능을 이 람다의 특성들을 고려해서 만들었거든요.

또한 람다는 여러 상태가 있는데 람다컨테이너가 사라지는 타이밍은 저희가 가늠할수 없습니다. aws만의 규칙이 있겠죠? 이 점도 중요합니다.

2. 람다의 이벤트 처리방식

그림처럼 상황을 가정해봅시다.

거의 동시에 두 이벤트를 클라이언트한테 받았다고 하면요.

람다는 먼저 들어온 이벤트를 처리하고 있겠죠? 근데 또다른 이벤트가 무찌람다에 요청을 하게되니까 람다는 이걸 동기처리하든, 비동기처리하든 해야한답니다.

결론적으로 람다는 한번에 한 이벤트만 처리합니다!! 매우 중요합니다.

만약 먼저온 이벤트를 처리중인데 다른이벤트가 오면 받질 않아요.

3. 그럼 람다에 여러 이벤트가 오면 무한히 기다려야하나요? - 람다의 오토스케일링

상황을 가정해볼게요.

한 클라이언트가 람다를 호출했어요. 그럼 람다가 클라이언트의 이벤트를 처리중이겠죠?

이벤트를 처리중에 두 클라이언트가 갑자기 이벤트를 보냈어요. 그런데 람다는 클라이언트의 이벤트를 처리중이니 이 이벤트들을 받지 못할겁니다.

이때 람다는 요청을 처리하기위해 자동으로 오토스케일링이 됩니다!! 똑같은 람다 컨테이너를 여러개 더 만드는거죠.

이렇게 람다가 여러 이벤트를 컨테이너 하나당 한 이벤트 라는 규칙을 가지고도 동시에 처리가 가능합니다. js의 비동기처럼요.

멀티프로세싱같은거라고 보시면 되요.

참고로 새로 생긴 람다는 새로 만들어지니 초기화가 이뤄져야하니 cold start일겁니다.

이 람다의 오토스케일링 특성도 매우 중요합니다.

지금 이 세가지 람다의 특징을 꼭 기억해주세요!! 밑에 설명할 캐싱기능과 매우 밀접한 관계가 있습니다.

람다의 특징을 고려한 캐싱

nurd worker는 두가지 요소에 대해서 캐싱기능을 고려했습니다.

시크릿과 디비 커넥션을 캐싱했어요. 하나씩 나눠서 설명드릴게요

Secret부터~~

위에서 말씀드렸듯이 sam cli를 사용했어서 이번 remember me 프로젝트는 환경변수를 세가지로 나눴는데요.

환경변수가 뭐 중요한값이니 시크릿이라고 보면됩니다.

개발환경에선 .env와 env.json을 읽어와서 사용하니 딱히 캐싱까지 할필요없어요. 그냥 그때그때 필요할때마다 읽어와서 갖다쓰면 되니까요.

중요한건 배포환경일때 aws secret manger에서 비밀값을 가져온다는 점이었습니다.

< secret manger의 과금방식 >

aws 시크릿매니저는 여러가지 과금요소가 있는데요. aws서비스는 다들 api로 이뤄집니다.

secret manager에서 시크릿값을 가져오는것 또한 api요청으로 받게되는데요

과금요소중 하나가 이 api요청의 횟수에 있습니다!!

그림처럼 secret값을 필요로하는 이벤트가 매번 발생할때마다 secret manager에 api접근을 한다면 과금이 엄청 되겟죠?

때문에 캐싱을 구현한겁니다.

< 어떤 식으로 캐싱을 구현했냐면요.. >

//전역에 이렇게 시크릿 빈객체를 선언해둠.
let cachedSecrets = {};



// main handler에서 secret 값을 가져오는 함수호출
exports.handler = async (event) => {
  // caching
  cachedSecrets = (await checkCachedSecrets(cachedSecrets)).secrets;

  // response by request
  switch (requestType) {
    case "type1":
      return data;
    default:
      console.log("Invalid request type on lambda:", requestType);
      return respond(400, { message: "Invalid request from lists get lambda" });
  }
};

일단 코드를 최대한 짧게 보여드릴게요.

이렇게 전역에 cachedSecrets이라는 빈객체를 만들어놓구요.

메인핸들러(람다가 호출되었을때 실행되는 코드)에서 해당 객체에 secret을 체크하는 함수를 호출해서 시크릿값을 가져옵니다.

인수로 현재 cachedSecret객체를 넣어줬죠?

그럼 저 checkCachedSecrets함수는 어떻게생겼냐면

const checkCachedSecrets = async (cachedSecrets) => {
  try {
    if (cachedSecrets.dbSecrets && cachedSecrets.oauthSecrets) {
      return { message: "there is cached secrets", secrets: cachedSecrets };
    } else {
      const nonCheckedSecrets = await getSecrets();
      if (!nonCheckedSecrets.dbSecrets || !nonCheckedSecrets.oauthSecrets) {
        throw new Error("There are some empty secrets from aws");
      } else {
        const secrets = nonCheckedSecrets;
        return {
          message: "there is cached secrets",
          secrets: secrets,
        };
      }
    }
  } catch (err) {
    throw new Error("Failed to retrieve or cache secrets: " + err.message);
  }
};

만약 인수로 받은 secret들이 이미 존재하고 있다면 그대로 리턴을 해주고요.

만약 빈객체다? 이러면 getSecrets함수를 호출해서 secret매니저에 api요청을 보내는겁니다.

자 그럼 아까 말씀드렸던 람다의 cold start와 warm start를 살펴봅시다.

< secret 캐싱의 플로우는~ >

그림처럼

cold start시에 전역에 선언한 secret객체가 비어있는걸 확인후에 secret manager에 api요청을 보내서 시크릿값들을 가져옵니다.

이후에 또 다른 이벤트가 발생하면 아까 cold start시에 사용해놨던 secret값이 남아있으므로 이 값을 재사용하는거죠.

람다가 언제 사라질지는 aws맘대로라고 말씀드렸잖아요? 이렇게 코드를 설계하면 한 람다 컨테이너는 이벤트가 매번 오더라도 살아있는 동안 딱 한번만 secret manager에 api요청을 보내면 되니까 비용이 매우 절약되겠죠?

전역변수로 사용한 cachedSecrets 객체는 warm start시에는 데이터가 남아있답니다. 이 특성을 활용하여 캐싱을 구현하였어요.

데이터베이스 커넥션 캐싱 !

//전역에 null이 할당된 cachedDb
let cachedDb = null;

// main handler
exports.handler = async (event) => {
  cachedSecrets = (await checkCachedSecrets(cachedSecrets)).secrets;
  cachedDb = (await getDb(cachedDb, cachedSecrets)).db;
};

데이터베이스 커넥션 캐싱도 마찬가지로 코드가 이렇게 되어있어요. 필요없는건 다 짤랐는데 위에 구조랑 비슷하죠?

같은 원리입니다.

데이터베이스 커넥션은 객체형태입니다~ 그래서 아까 cold start시에 사용했던 커넥션 객체가 메모리에 남아있다면 이 커넥션을 계속 사용해서 그대로 데이터베이스 접근이 가능한거죠~

데이터베이스 커넥션은 비용적인 측면에선 제 무찌 클러스터에서 존재하니까 비용걱정은 없지만 매번 데이터베이스에 접근할때마다 커넥션을 새로 생성한다면 성능저하가 일어난답니다.

때문에 커넥션을 캐싱해서 사용했어요.

< 왜 pool안썼어요? 바보세요? >

일단 커넥션풀의 목적을 알아봅시다.

커넥션풀을 백엔드서버에서 보통 사용하시는데요(ORM말고..)

첫번째로 커넥션의 재사용입니다.

db요청을 할때마다 커넥션을 만들고 끊고 하는건 낭비입니다. 위에 설명드렸듯이요.

그래서 풀에 커넥션을 따놓고 db요청이 있을때마다 재사용을 할 수 있죠.

두번째로는 동시에 여러 요청이 왔을때 비동기적으로 코드가 돌아갈때(웹 api처리같은거요) db요청을 비동기적으로하기 위함입니다. 비동기적으로 처리하려면 여분의 커넥션이 여러개 필요하겠죠?

때문에 커넥션풀에 데이터베이스에 여러 커넥션을 따와놓죠. 그림에선 다섯개를 따왔네요.

그림처럼 여러 클라이언트가 짧은간격으로 db요청을 한다면 여러 api요청을 처리할텐데요. 커넥션 하나를 여러 실행컨텍스트에서 나눠쓸수 없으니 아까 미리 쟁여왔던 커넥션을 하나씩 갖다 쓰게 해주는거죠.

이게 커넥션 풀 개념인데요.

이 커넥션 풀을 만약 람다에 적용하면 어떻게될까요?

람다 컨테이너가 커넥션 다섯개를 미리 따왔다고 가정해볼게요

근데 혹시 기억하시나요? 람다 컨테이너 하나는 이벤트를 동시에 하나밖에 처리못합니다

바로 이 이유입니다. 람다는 이벤트를 동시에 하나밖에 처리못해요. 그래서 커넥션 다섯개를 따왔어도 어차피 한개만 쓸수밖에없다는거에요.

저는

커넥션 풀의 커넥션을 재사용한다는 점은 람다에 적용하고싶어서 커넥션 객체를 캐싱하는 방식으로 코드를 구현했구,

커넥션을 여러개 안정적으로 확보해둔다는 풀의 특징은 쓰기 싫어서 풀을 사용하지 않았습니다.

만약에 람다가 오토스케일링을 한다면 한 람다 컨테이너마다 커넥션을 다섯개씩 따올테니 그만큼 커넥션 낭비는 심해질겁니다.

백엔드 람다코드 템플릿화

백엔드에서 중요한점만 정리하는데도 많네요 ㅠㅠ 읽느라 고생하십니다

이번엔 백엔드 람다코드의 템플릿화를 말씀드릴건데요

// import necessary functions
const {
  checkCachedSecrets,
  getDb,
  auth: { getOauthMiddleWareResult },
  apiResource: { respond },
} = require("./rbm-helper");

// declare cached data
let cachedSecrets = {};
let cachedDb = null;

// handlers
const handlerFuncs1 = async (event, authResult, email) => {
  try {
	핸들러 코드 실행~
  } catch (error) {
	에러처리
  }
};

const handlerFuncs2 = async (event, authResult, email) => {
  try {
	핸들러 코드 실행~
  } catch (error) {
	에러처리
  }
};

// main handler
exports.handler = async (event) => {
  //get params request and email
  const requestType = event.queryStringParameters?.request;
  const email = decodeURIComponent(event.queryStringParameters?.email);

  // caching
  cachedSecrets = (await checkCachedSecrets(cachedSecrets)).secrets;
  cachedDb = (await getDb(cachedDb, cachedSecrets)).db;

  //auth middle ware
  const authResult = await getOauthMiddleWareResult(
    event,
    email,
    cachedSecrets,
    cachedDb
  );
  if ([400, 401, 419, 500].includes(authResult.code)) {
    return respond(authResult.code, {
      authResponse: authResult.authResponse,
    });
  }

  // response by request
  switch (requestType) {
    case "요청타입1":
      return handlerFuncs1(event, authResult, email);
    case "요청타입2":
      return handlerFuncs2(event, authResult, email);
    default:
      console.log("Invalid request type on this lambda:", requestType);
      return respond(400, { message: "Invalid request from this lambda" });
  }
};

최대한 짧게 요약했는데도 이러네요..

remember me 프로젝트의 모든 람다코드는 이렇게 템플릿화를 해놨어요.

그림으로 보여드리자면 이렇습니다. 모든 람다코드가 이렇게 템플릿으로 규격화 되어있어요.

나중에 유지보수를 할때 추가기능이 있다면 추가적인 핸들러만 추가하면되고, 버그난 플로우는 해당부분만 찾아서 손보면 되겠죠?

또한 유저 인증기능을 아직은 설명안드렸는데요~ 유저인증이 필요한 기능이있으면 저렇게 미들웨어 코드를 거치게됩니다.

remember me 프로젝트는 개인단어장 어플이다보니회원가입뺴고 거의 다 인증요청이에요.

유저인증관련한건 밑에서 더 설명드릴예정입니다.

frontend

자 이제 좀 머리좀 식히고 갈게요.

저는 이번 프로젝트에서 타입스크립트와 리액트를 처음 사용해봤습니다.

처음 쓰는거라 많이 서투르지만 제가 가장 중요하게 생각했던건 전역데이터 설정이었어요.

1. auth.ts

인증관련 함수와 인터셉터가 있어요. 정적으로 return해줍니다.

2. staticData.ts

정적인 데이터나 함수, 큐만드는 생성자 클래스가 있습니다.

3. queueContext.tsx

큐 데이터를 전역에서 참조하기 위한 큐를 useContext로 전역에 뿌렸어요. queue는 useState훅으로 만들어서 상태로 사용했습니다.

4. fucs.ts

전역에서 쓰는 함수지만 얘네들은 redux스토어 값에 접근 및 수정이 필요한 함수들입니다. 때문에 커스텀훅으로 만들었습니다.

5. store.ts

리덕스 상태값들이 저장되어있어요.

저도 처음 리액트를 사용해보는지라 미숙하지만 이렇게 데이터와 상태들을 전역에서 참조가능하게 사용했어요.

프론트엔드의 성능 및 비용 최적화 - batch queue

일단 들어가기 앞서서 람다의 과금요소부터 생각해볼게요

람다는 과금요소가 여러가지 있지만 호출횟수에 따라서도 과금이 됩니다.

물론 평생 free tier로 운영되는 서비스지만 제한호출횟수를 넘길지 혹시 모르잖아요?

제가 걱정스러웠던 경우는 단어나 단어장에 대한 업데이트 기능이었어요. 그림과같이 단어 뜻을 여러번 바꾸거나 할일이 많을텐데요.

단어장 특성상, 단어를 수정하거나 오답노트에 추가한다거나, 삭제한다거나 여러번 수정기능이 있거니까요.

이럴때마다 람다를 호출하면 비용이 꽤 많이나오겠죠?

그래서 데이터를 쌓아서 한번에 보내는 방식이 필요했습니다.

그럼 데이터가 더 커지잖아? 생각하실수도 있는데 우리가 평소 보내는 api요청 객체에 비해서는 새발의 피입니다.

api 요청 객체가 생각보다 커요

새발의 피만큼 용량적은 axios 객체를 열번보내는것보다 새발의피 열방울 들어있는 axios객체 하나보내는게 훨씬 용량이 적거든요.

단어 수정 정보를 큐에 쌓자~

이렇게 단어를 수정할때마다 큐에 정보를 쌓았습니다.

word queue는 트리거로 람다함수 호출을 등록했고 큐 트리거 발동조건을 queue데이터 10개로 설정했습니다.

이제 이전에는 10번 보내야할 람다 호출이 한번으로 줄어들었네요~

추가적인 queue 최적화

그림처럼 무찌를 바보라고 등록했다가

생각이 바뀌어서 똥개로 바꿨다가

마지막으로 멍청이 라고 수정을 했다고 하면 이전에 수정했던 두 데이터는 필요가 없겠죠? 가장 마지막 결과만 있으니까요.

때문에 큐데이터를 추가할때마다, 같은 단어의 수정기록이 있다면 삭제해주게 프로그래밍 해놨어요.

그럼 효율이 batch queue를 도입함으로써 열배 좋아졌었는데, 이렇게 중복수정도 처리한다면 열배이상으로 더 좋아지겠죠?

트리거 발동조건 (큰 실수..)

예를들어 사용자가 탭을 닫거나 꺼버릴때 이 큐가 트리거가 발동되기 전이라면 데이터베이스에는 이 수정 기록이 안남을겁니다.

그래서 전

  window.addEventListener("beforeunload", (event) => {
    if (
      window.location.href.includes(
        "https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount"
      )
    ) {
      return;
    }
    saveListsQueueDataAtDb();
    saveWordsQueueDataAtDb()
      .then(() => {
        event.preventDefault();
      })
      .catch((error) => {
        console.error("Error saving data:", error);
        event.preventDefault();
      });
  });

이렇게 beforeunload라고 윈도우 전역객체에서 이벤트리스너를 만들었는데요.

이게 모바일에서 할때는 적용이안되더라구요 ㅠㅠ

브라우저 호환성을 고려안한 제 잘못이죠..

아직까지 마땅한 트리거가 생각이안나서 임시방편으로 라우터 이동시에 큐를 람다에 보내는 코드를 추가해놓긴 했습니다.

  useEffect(() => {
    console.log("라우터가 변경되었습니다!", location.pathname);
    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
      saveListsQueueDataAtDb();
      saveWordsQueueDataAtDb();
    }
  }, [location, saveListsQueueDataAtDb, saveWordsQueueDataAtDb]);

라우터 변경시 람다호출하는 코드를 임시방편으로 추가해놨어요 ㅠㅠ(코드에선 아이폰만해놨지만 지금은 모바일로바꿨어요)

제 실수죠 뭐.

유저인증 플로우

먼저 회원가입, 유저인증, 인증처리 등의 유저인증에 관한 기능은 google oauth를 사용하여 jwt방식으로 구현했습니다~

이전에 아빠 또갈까 프로젝트도 cognito와 google oauth로 jwt를 사용했지만, access token만 사용했거든요. 코그니토는 refresh토큰을 적용하기 복잡합니다.

하지만 이번에 remember me 프로젝트는 refresh 토큰 또한 사용했습니다~

'security' 카테고리의 글 목록

지극히 이기적인 개발 블로그입니다.

jacobowl.tistory.com

jwt방식에 대한건 security카테코리의 포스팅을 참고해주시면 됩니다.

어떤점이 특별하냐면요

jwt방식으로 유저인증을 구현하시는 방법은 개발자분들마다 다르더라구요.

nurd worker는 최대한 사용자의 편의성을 최고로 중요시하거든요~

만약 이런 상황이 있다고 한다면 어떻게 될까요?

무찌가 어제까지 remember me 프로젝트로 단어공부를 헀답니다

그리고 자고 일어나서 다시 공부를 하려고해요

그럼 이렇게 access token이 만료가 되어있는 상태일겁니다.

화면이 그대로입니다. remember me는 개인단어장용 어플리케이션이므로 인증된 요청이어야만 보이는 화면이죠.

새로고침을 안한채로 다음날 다시 보니까 인증이 필요한 화면이 그대로 남아있습니다. 하지만 access token은 만료된 상태일겁니다.

이런 상황에서 무찌가 만약 인증이 필요한 버튼 을 클릭하면 어떻게될까요?

remember me 프로젝트에서는 refresh 토큰 갱신과 함께 기존 요청에 대한 응답도 해주게됩니다!!

어떻게 했냐면..

rememberme-advanced-front/front/src/auth.ts at main · nurdworker/rememberme-advanced-front

Contribute to nurdworker/rememberme-advanced-front development by creating an account on GitHub.

github.com

응답인터셉터를 보시면 이렇습니다.

코드를 가져오면 너무 지저분해질것같아 설명만 드릴게요.

응답을 받았을때 419응답을 받으면 기존에 보냈던 axios요청을 통째로 다시보냅니다.

다만 헤더값에 refresh토큰을 추가해서 다시보내죠

rememberme-advanced-back/backend/src/handlers/rbm-helper.js at main · nurdworker/rememberme-advanced-back

Contribute to nurdworker/rememberme-advanced-back development by creating an account on GitHub.

github.com

그럼 백엔드 인증 미들웨어에서 해당요청을 검증하고 처리한후, authResult에 새로운 access token을 담아서 보냄과 동시에

answer프로퍼티에 기존 했던 요청에 대한 데이터도 응답해주게 됩니다.

몇몇 서비스들은 로그아웃을 하게 한다거나 버벅거림이 있겠지만 nurd worker는 사용자 편의성을 중요시하므로 이렇게 사용자가 access token이 만료된걸 전혀 느끼지 못하게 인증기능을 구현을 하였습니다.

때문에 코드를 보시면 아시겠지만 따로 refresh갱신을 위한 api자체가 없습니다. 걍 미들웨어에서 다 처리해요.

토큰 로그 db 저장

람다쪽 미들웨어 코드를 보시면 아시겠지만 토큰로그를 저장해요.

보안이 더욱 좋아졌습니다.

사실 구현할생각은 없었는데 google oauth api가 access token을 검증하는 api를 보낼때

access token이 만료된거든 위조된거든 똑같은 invalid token이라는 응답을 줍니다 ㅡㅡ

제 jwt포스팅 시리즈에서도 보셨듯이 전 두가지 조건을 동시에 만족해야 새로운 acess token을 발급해줬거든요

1. refresh 토큰이 유효해야한다

2. access token이 만료되었어야한다

이 두가지 조건을 and조건으로 만족해야 준다고했는데

google oauth가 2번 조건을 명확하게 해주질 못했어요

때문에 db에 token로그라는 collection을 따로 만들어서 토큰을 기록해두고 이 기록에따라서 만료조건을 체크했습니다.

팀프로젝트 - 첫 팀장으로써 진행

휴.. 지금까지 읽어주셔서 감사합니다.

이제부터는 팀프로젝트에 대해서 짧게 설명드릴게요

저희는 노션을 사용을 주로 하였어요.

프로젝트가 급하게 시작이 되어서 노션제작을 후딱 한다음 회의하면서 사용방법을 알려드렸어요

사진에 보이는것보다 더욱 많은데, 자세한 내용은 직접 독자분과 만날 기회가 있다면 알려드리겠습니다 ^^

이렇게 캘린터로 팀원분들의 진행상황을 확인했습니다.

이 방식은 이전에 아빠 또갈까 프로젝트에서 task 방식으로 협업하는걸 보고 저도 적용했습니다 ㅎㅎ(저는 고라파덕입니다..ㅋㅋ)

이런식으로 개인마다 task를 정리해서 기록했어요.

저 혼자 작성한 task만 저 사진에 보이는 task의 다섯배정도 됩니다 ㅋㅋㅋㅋ

실제로 nurd worker가 취준할떄 면접관이셔서 증명을 원하시거나 혹은 친해지시면 자세히 노션을 보여드릴 수 있습니다~

저기에 서로 사용했던 중요데이터나 이런정보도 있어서 노션을 배포해서 블로그에 공개를 하기는 어렵네요

시연영상 촬영

제가 특별하게 요청드렸던것은 본인이 개발한 분야에대한 시연영상을 제작해달라고 말씀드렸습니다.

왜이랬냐면, 사실 저희가 프로젝트를 만들고나서는 보통 대게는 서비스를 중지하게됩니다.

깃허브에 코드만 달랑 남겨두거나 하게되죠. 실제로 demo버전은 프로젝트 종료후 바로 배포중지가 되었어요~

만약 나중에 프로젝트로 사용하려면 까먹기도하고 사용했던 툴들이 갖가지 버전문제로 에러를 일으킬수도 있어요. 실제 로컬에라도 배포가 되어야 증명이 될텐데.. 난감해지죠.

예를들어 무무티비프로젝트도 VM이 다섯개에 컨테이너만 열개이상 띄워져있는데 1년전에 프로젝트를 다시 띄우고 하려면 기억도안나고 에러도 많이 날겁니다. 그래서 nurd worker도 무무티비 포스팅에 사용된 영상 소스들을 모두 당시에 프로젝트 종료후 바로 촬영해놨던겁니다.

영상으로 기록을 남기는건 중요하다고 봅니다. 가장 좋은 방법은 실제 배포해놓는것이지만 현실적으로 어렵거든요.

취직을 목표로 하는 경우 면접관분들이 진짜 개발했다는걸 믿지 않을확률이 크거든요. (사실 저도 잘 안믿습니다 ㅋㅋ)

그래서 nurd worker 또한 프로젝트마다 영상작업을 하고있고 구현영상남기는걸 굉장히 중요하게 생각해요.

나중에 이 프로젝트를 다시 사용하실때 필요하실거라고 판단되서 오더를 드렸었습니다.

저한테 증명해서 뭐가중요한가요 전 테라폼같은 고급 스킬 볼줄도 모르는데요ㅠㅠ

팀원분들이 좀 독특한 팀장을 만나 고생을 좀 하시긴 한것같기도 하네요 ㅎㅎㅎ

프로젝트 피드백

nurd worker가 팀원분들에게 받은 피드백입니다~

이러한 평가를 받았습니다.

스터디는 많이 진행해봤었으나,

엔지니어로써 팀을 이끌기는 처음이라 많이 미숙했던점도 많았고 반성할점도 많았던것 같습니다 ^^

아키텍쳐

demo 버전 아키텍쳐

인프라 팀원분들이 그려주신 demo버전 아키텍쳐입니다. 역시 인프라팀분들 실력이 어마어마합니다 ㄷㄷ

demo 버전은 프론트서버를 s3버킷에서 정적호스팅 하였구요.

그리고 백엔드는 api gateway와 람다 구조로 이용하였구요.

데이터베이스는 몽고디비를 사용하였습니다.

기타 등등 여러가지 있답니다 ㅎㅎ 저도 잘 모르는것들이 많네요~

advanced 아키텍쳐

현재 배포된 remember me 프로젝트 advanced버전의 아키텍쳐입니다.

프론트 웹서버는 무찌 클러스터에서 운영이 되어있구요.

백엔드는 AWS의 api gateway + lambda구조로 운영되고있습니다.

또한 추가적으로 cloud watch와 SNS를 사용한 알람을 구현해놨습니다^^ (과금 무섭..)

데이터베이스는 무찌 클러스터의 mongo db를 사용하고 있답니다

Conclusion

사실 remember me 프로젝트는 acsap프로젝트의 약간 상위버전? 으로 간단하게
react와 type script를 사용한 어플리케이션으로 간단하게 준비하려고 한 개인 프로젝트였습니다.

근데 마침 너드림덱 프로젝트가 막 끝났을때 이전 네트워크 국비과정을 함께하셨던 분들이 연락이 오셨어요.
프로젝트를 같이 하자고 하시길래 얼떨결에 팀프로젝트로 변해버린 프로젝트입니다. ㅋㅋ
온라인으로 진행한 프로젝트였고 팀원한분은 프로젝트 시작하자마자 취업합격통보를 받으셨는데 책임감있게 해주셔서 감사드리네요.

암튼 하다보니 막 욕심도 나고 해서 여러가지 고려사항을 많이 녹여낸 프로젝트가 되었고
취업할때 굉장히 많은 포인트들을 어필할 수 있는 프로젝트라고 생각이 드네요. (때문에 포스팅도 토나오게 많이적었네요....)

긴 글 읽어주셔서 감사합니다 ^^

개발단 db 마이그레이션

부엉이사장 — Sat, 25 Jan 2025 09:04:52 +0900

Introduction

예전에 기존에 사용하던 클라우드의 데이터베이스를 다른 인스턴스로 마이그레이션 할 일이 있었다..
너무 비쌈 ㅡㅡ
그래서 코드로 반복문과 setinterval을 사용하여 직접 데이터를 옮겼었는데 포스팅해봄.

시연영상

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

환경셋팅

데이터베이스 마이그레이션을 위해 샘플 mysql인스턴스를 생성하겠다.

하나는 bf-db, 다른 하나는 af-db라고 이름지었다.

bf-db라는 인스턴스의 데이터베이스의 데이터들을 af-db로 옮길것이다.

각 EC2인스턴스에 mysql설치

# mysql설치하기
sudo apt update
sudo apt install mysql-server

# mysql에 루트유저로 접속
mysql -u root -p
비밀번호 입력

# 데이터베이스를 만들고 유저 생성
SHOW GRANTS FOR 'muzzi'@'%';
GRANT CREATE ON *.* TO 'muzzi'@'%';
FLUSH PRIVILEGES;

muzzi라는 유저만들고 유저권한주샘
참고로 mysql외부접속도 열어줘야함

mysql 워크벤치 접속

워크 벤치 접속해서 각각 mydatabase라는 데이터베이스 커넥션을 연결해줬다.

각 db접속 정보 정리

BF_HOST="123.123.123.123"
BF_USER="muzzi"
BF_PASSWORD="babo"
BF_DATABASE="mydatabase"
BF_PORT="3306"

AF_HOST="456.456.456.456"
AF_USER="muzzi"
AF_PASSWORD="babo"
AF_DATABASE="mydatabase"
AF_PORT="3306"

코드단에서 이렇게 환경변수 지정해주고 연결할 준비를 마쳤음.

코드단

GitHub - nurdworker/dev-migration-mysql

Contribute to nurdworker/dev-migration-mysql development by creating an account on GitHub.

github.com

깃허브 코드이다.

1. 데이터 베이스 연결

환경변수쓸꺼고 mysql2모듈 쓸거임

const dotenv = require("dotenv");
const mysql = require("mysql2");

dotenv.config();

풀만들기

const bf_pool = mysql.createPool({
  connectionLimit: 10, // 최대 연결 수
  host: process.env.BF_HOST,
  user: process.env.BF_USER,
  password: process.env.BF_PASSWORD,
  database: process.env.BF_DATABASE,
  port: process.env.BF_PORT,
});

const af_pool = mysql.createPool({
  connectionLimit: 10, // 최대 연결 수
  host: process.env.AF_HOST,
  user: process.env.AF_USER,
  password: process.env.AF_PASSWORD,
  database: process.env.AF_DATABASE,
  port: process.env.AF_PORT,
});

아까 저장해둔 환경변수로 풀 만드는 코드.

풀 안만들어도 되겠지만 연결 한두번하다가 커넥션리밋 넘을거라 써줌

데이터베이스 연결확인

const checkDatabaseConnection = (pool) => {
  return new Promise((resolve, reject) => {
    pool.getConnection((err, connection) => {
      if (err) {
        reject(err);
      } else {
        connection.release();
        resolve();
      }
    });
  });
};

const checkAllDatabaseConnections = async () => {
  try {
    await Promise.all([
      checkDatabaseConnection(bf_pool),
      checkDatabaseConnection(af_pool),
    ]);
    console.log(
      "\\x1b[48;2;128;0;128m Start \\x1b[0m 모든 데이터베이스가 마이그레이션할 준비가 되었습니다!"
    );
    return true;
  } catch (error) {
    // console.error("데이터 베이스가 연결되지 않았습니다.", error);
    console.error("데이터 베이스가 연결되지 않았습니다.");
    return false;
  }
};

checkAllDatabaseConnections();

데이터 베이스 연결됐는지 확인하고 연결안됐으면 멈추게 프로미스 반환하는 비동기함수로 썼음.

2. 샘플데이터 넣기

const dotenv = require("dotenv");
const mysql = require("mysql2");

dotenv.config();

// MySQL Pool 생성
const bf_pool = mysql.createPool({
  connectionLimit: 10,
  host: process.env.BF_HOST,
  user: process.env.BF_USER,
  password: process.env.BF_PASSWORD,
  database: process.env.BF_DATABASE,
  port: process.env.BF_PORT,
});

// 랜덤한 숫자를 생성하는 함수
const getRandomNumber = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

// 샘플 데이터 생성 함수
const generateSampleData = () => {
  const sampleData = [];
  for (let i = 1; i <= 60; i++) {
    const id = `user${i}`;
    const detail = `Sample detail ${i}`;
    sampleData.push({ id, detail });
  }
  return sampleData;
};

// MySQL에 샘플 데이터 삽입 함수
const insertSampleDataToDatabase = async (sampleData) => {
  const connection = await bf_pool.promise().getConnection();
  try {
    await connection.query(
      "CREATE TABLE IF NOT EXISTS users (user_idx INT AUTO_INCREMENT PRIMARY KEY, id VARCHAR(255) UNIQUE, detail TEXT)"
    );

    // 삽입할 데이터를 배열로 변환
    const values = sampleData.map(({ id, detail }) => [id, detail]);

    // INSERT 쿼리 실행
    await connection.query("INSERT INTO users (id, detail) VALUES ?", [values]);
    console.log("Sample data inserted successfully.");
  } catch (error) {
    console.error("Error inserting sample data:", error);
  } finally {
    connection.release();
  }
};

// 샘플 데이터 생성
const sampleData = generateSampleData();

// 샘플 데이터를 MySQL에 삽입
insertSampleDataToDatabase(sampleData);

// 샘플 데이터 생성 함수
const generateSamplePostData = () => {
  const samplePostData = [];
  for (let i = 1; i <= 110; i++) {
    const title = `Post ${i} Title`;
    const content = `Post ${i} Content`;
    samplePostData.push({ title, content });
  }
  return samplePostData;
};

// MySQL에 샘플 데이터 삽입 함수
const insertSamplePostDataToDatabase = async (samplePostData) => {
  const connection = await bf_pool.promise().getConnection();
  try {
    await connection.query(
      "CREATE TABLE IF NOT EXISTS posts (post_id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(255), content TEXT)"
    );

    // 삽입할 데이터를 배열로 변환
    const values = samplePostData.map(({ title, content }) => [title, content]);

    // INSERT 쿼리 실행
    await connection.query("INSERT INTO posts (title, content) VALUES ?", [
      values,
    ]);
    console.log("Sample post data inserted successfully.");
  } catch (error) {
    console.error("Error inserting sample post data:", error);
  } finally {
    connection.release();
  }
};

// 샘플 데이터 생성
const samplePostData = generateSamplePostData();

// 샘플 데이터를 MySQL에 삽입
insertSamplePostDataToDatabase(samplePostData);

bf디비에 일단 데이터가 있어야하니까 코드로 랜덤하게 데이터 넣는 함수 썼음.

테이블은 우리서비스 메인인 users랑 posts테이블 두개로 했음.

3. bf디비에 테이블 설정 그대로 af테이블에 만들기

// 테이블 그대로 만들기

const getTableDefinitions = async (pool) => {
  return new Promise((resolve, reject) => {
    pool.query("SHOW TABLES", (error, results) => {
      if (error) {
        reject(error);
      } else {
        const tables = results.map((row) => Object.values(row)[0]);
        const tableDefinitions = [];
        const promises = tables.map((table) => {
          return new Promise((resolve, reject) => {
            pool.query(`SHOW CREATE TABLE ${table}`, (error, results) => {
              if (error) {
                reject(error);
              } else {
                const createTableStatement = results[0]["Create Table"];
                tableDefinitions.push(createTableStatement);
                resolve();
              }
            });
          });
        });
        Promise.all(promises)
          .then(() => resolve(tableDefinitions))
          .catch(reject);
      }
    });
  });
};

const getTableCreationQueries = async () => {
  try {
    const tableDefinitions = await getTableDefinitions(bf_pool);
    return tableDefinitions;
  } catch (error) {
    // console.error("테이블 생성 쿼리가 실패했습니다.", error);
    console.error("테이블 생성 쿼리가 실패했습니다.");
    return [];
  }
};

const createTableQuery = async () => {
  return await getTableCreationQueries();
};
const makeConditionQuery = async () => {
  const queries = await createTableQuery();
  const modifiedQueries = queries.map((query) => {
    // CREATE TABLE 문에 IF NOT EXISTS 조건 추가
    return query.replace("CREATE TABLE", "CREATE TABLE IF NOT EXISTS");
  });
  return modifiedQueries;
};

// af 디비에 테이블 만들기
const createTablesInAfDatabase = async (queries) => {
  const connection = await af_pool.promise().getConnection();
  try {
    for (const query of queries) {
      await connection.query(query);
      const tableName = query.match(/`([^`]*)`/)[1];
      console.log(
        `\\x1b[48;2;255;255;0m Info \\x1b[0m 테이블 ${tableName}가 생성되었습니다.`
      );
    }
    console.log(
      "\\x1b[48;2;0;0;255m In Progress \\x1b[0m 마이그레이션 후 테이블이 정상적으로 생성되었습니다!"
    );
  } catch (error) {
    console.error("이전할 데이터베이스의 테이블 생성이 실패했습니다.");
  } finally {
    connection.release();
  }
};
const makeTablesToAF = async () => {
  await createTablesInAfDatabase(await makeConditionQuery());
};

테이블 데피니션 함수로 완전 똑같은 테이블 정보 가져오는 함수를 썼음.
테이블 생성 쿼리 생성함수를 만들었음
테이블 생성하는 쿼리함수에 if not exist조건이 안붙길래 이 조건 붙여주는 함수를 썼음.
테이블 갯수에 따라서 어레이에다가 그만큼 테이블 생성쿼리를 만들어줌.
마지막 테이블 생성 함수를 만들었음. 여기서 저 어레이 담긴거 순회하면서 테이블 만들거임

4. 데이터 순회하기

const moveTableDataFromBFtoAF = async (bfTableName, afTableName) => {
  let success = false; // 초기값은 실패로 설정

  const bfConnection = await bf_pool.promise().getConnection();
  const afConnection = await af_pool.promise().getConnection();

  try {
    let offset = 0;
    const batchSize = 50;
    let bfData = [];

    // BF 데이터베이스에서 데이터를 검색
    while (true) {
      const [rows] = await bfConnection.query(
        `SELECT * FROM ${bfTableName} LIMIT ${offset}, ${batchSize}`
      );
      if (rows.length === 0) break; // 더 이상 데이터가 없으면 종료
      bfData = rows;

      // AF 데이터베이스에 데이터 삽입
      const values = bfData.map((row) => Object.values(row));
      await afConnection.query(`INSERT INTO ${afTableName} VALUES ?`, [values]);

      // 2초 대기
      await new Promise((resolve) => setTimeout(resolve, 1000));

      // 오프셋 증가
      offset += batchSize;
      console.log(
        `\\x1b[48;2;0;0;255m In Progress \\x1b[0m${bfTableName}테이블의 ${offset}rows까지의 데이터가 이전되었습니다.`
      );
    }

    console.log(`${bfTableName}테이블의 데이터 이동이 완료되었습니다.`);
    success = true; // 성공 시 true로 설정
  } catch (error) {
    // console.error(`데이터 이동 중 오류 발생:`, error);
    console.error(`\\x1b[48;2;255;0;0m Fail \\x1b[0m 데이터 이동 중 오류 발생`);
    console.log(
      `\\x1b[48;2;255;255;0m Info \\x1b[0m 에러 발생으로 인해 ${afTableName} 테이블의 모든 데이터를 삭제합니다.`
    );
    await afConnection.query(`DELETE FROM ${afTableName}`);
  } finally {
    bfConnection.release();
    afConnection.release();
    return success; // 성공 또는 실패 여부 반환
  }
};

db과부하를 막기위해 테이블들 이름 들어있는 어레이를 따로 빼고 이걸 순회하는 식으로 했음.
또한 한번에 너무 많은 데이터가 들어가는걸 막기위해 한번에 50row씩만 조회하고 넣는 코드를 짰음.

5. 마이그레이션 하기

const migration = async () => {
  try {
    await checkAllDatabaseConnections();
    await showTableList();
    await makeTablesToAF();
    const tableLists = await getTableList(bf_pool);

    for (const table of tableLists) {
      const success = await moveTableDataFromBFtoAF(table, table);
      if (!success) {
        console.log(
          `\\x1b[48;2;255;0;0m Fail \\x1b[0m 테이블 ${table}의 데이터 마이그레이션 실패`
        );
        await clearAllTablesData(); // 모든 테이블의 데이터를 삭제
        return;
      }
    }

    console.log(
      "\\x1b[48;2;0;255;0m Success \\x1b[0m 모든 테이블의 데이터 마이그레이션이 완료되었습니다."
    );
  } catch (error) {
    console.error(
      "\\x1b[48;2;255;0;0m Fail \\x1b[0m 마이그레이션 중 오류 발생:",
      error
    );
  }
};

const clearAllTablesData = async () => {
  const tableLists = await getTableList(af_pool);
  for (const table of tableLists) {
    await af_pool.promise().query(`DELETE FROM ${table}`);
    console.log(
      `\\x1b[48;2;255;0;0m Fail \\x1b[0m ${table} 테이블의 데이터가 모두 삭제되었습니다.`
    );
  }
};

migration();

최종적인 마이그레이션함수임
위에서 만든 함수에서 주요기능들은 전역에서 호출한게 없음. 애초에 이전단계가 완료안되면 걍 에러터지게 설계해버림
clearAllTablesData함수는 테이블 리스트를 순회하면서 각각 데이터를 넣는데, 예를들어 users테이블은 마이그레이션이 완료됐는데 posts테이블은 중간에 에러터져서 데이터 다 지우면 하나는 됐고 하나는 안되는 귀찮은 일이 생겨서 걍 하나 에러터지면 이전 성공한 테이블도 데이터 다 지워주는 함수 만들었음

Trouble

database라는 데이터를 만드니까 예약어에 포함되서 에러가 팡팡떳다. 만들고나서 안되는게 짜증나는데 만들떄 그냥 만들어주지말지 왜 만들어지게해놓고 db접근에서 오류나게 해놨는지 모르겄음
mysql모듈을 썼는데 구닥다리라 유저권한 암호화방식 오류가 계속나서 mysql2를 썼음
bf디비에 있는 테이블들을 조회하고 어레이에 담아서 af디비에 똑같이 만들게 하는 코드를 썻는데 foreign key가 설정된 테이블을 먼저 만들면 안된다. 이건 코드단에서 더 신경써야하는거임

추가적으로 생각해봐야 할 것

만약 완전 자동화를 한다면 인프라단의 테라폼, 쉘스크립트등이 필요할듯. 인스턴스만들고 뭐 안에다가 디비 설치하고 이런거 하려면 개발단만으로는 안되니까.
이 주제에서는 연습은 mysql to mysql이다. 만약 다른 데이터베이스 같은경우는 모듈을 추가적으로 받아와야하고 쿼리문 문법도 조금씩 써야하니 ORM을 같이써야할듯
네트워크는 완전 퍼블릭으로 열어놓은 상태인데 민감한 데이터베이스 마이그레이션이니 현업에서는 프라이빗 네트워크끼리 해야할듯.
DMS에서 어려웠던 온프레미스 to 클라우드 마이그레이션도 이걸로는 가능하다. 두 인스턴스 사이에 내 로컬컴퓨터가 껴있는 상태에서 한거니까.
DMS에서 안됐던 AUTO INCREMENT 조건도 저기 테이블 쿼리 자동생성 함수에서 가져와준다.
데이터가 조금씩 형식이 바뀌는 경우도 있을것같은데 예를들어 쇼핑몰 도메인 컬럼이 있는데 새로운 쇼핑몰 도메인으로 내용을 바꿔야 한다면 이 데이터들만 수정하는 마이그레이션 해야한다면 코드단에서 조절하면 될거임.

Team Project - 아빠또갈까?

부엉이사장 — Fri, 24 Jan 2025 10:56:18 +0900

Introduction

안녕하세요? Nurd Worker입니다! 반갑습니다.
이번에 소개해드릴 프로젝트는 아빠또갈까? 프로젝트 입니다!

네트워크 국비과정의 파이널 프로젝트로 만들게 된 제 개발 인생에서의 첫 팀프로젝트입니다^^
가족 여행 어플리케이션을 만들어서 aws에 배포하는 구조로 제작한 프로젝트에요.

저희는 총 다섯명의 팀원분과 프로젝트를 진행했습니다 ㅎㅎ
처음으로 하는 팀프로젝트였는데 운이좋게도 팀원분들이 전부 좋은 분들이셔서 알차게 프로젝트를 마쳤었네요.
지금도 연락을 하고 계시고 작년 겨울에도 만났네요ㅎㅎㅎ

네트워크 교육과정이었기 때문에 개발자가 굉장히 귀했답니다.
nurd worker또한 개발자로써 팀에 들어가서 팀원으로 프로젝트를 진행하였어요.
개발자가 귀했기 때문에 개발팀이 두명 밖에 안됐어서 개발쪽에서의 프로젝트 완성도는 지금와서 다시보면 많이 모자른것같아요 ㅎㅎ

말씀드렸듯이 개발팀과 인프라팀, 현업자들이 일하는 방식을 모방하기위해 완전히 분업을 하였기 때문에 이 포스팅에선 제가 맡은 파트에대해서만 자세히 설명드릴 예정이고 이외의 팀프로젝트에 대한 포스팅을 하겠습니다.

그럼 재밋게 읽어주세요 ^^

아빠또갈까 링크

아빠 또갈까 introduction video : https://www.youtube.com/watch?v=TGAjqTpG0Xc&ab_channel=workernurd

아빠 또갈까 github organization link : https://github.com/DGA-PROJECT

DGA-PROJECT

DGA-PROJECT has 8 repositories available. Follow their code on GitHub.

github.com

팀 구성은 어떻게 되었나요?

저희팀은 총 다섯명이서 프로젝트를 진행했습니다!
소갯글에서도 적어놨듯이 저희팀은 인프라팀, 개발팀으로 완전한 분업을 하였습니다 ㅎㅎ
nurd worker는 개발팀에서 개발을 담당하였어요.

개발스택

저는 역시나 vue js 와 nodejs로 풀스택 개발을 하였습니다 ㅎㅎ
저랑 같이 개발을 담당하셨던 팀원분은 java를 사용하셨고 JPA를 사용하신걸로 알고있습니다. 저는 java에 대해선 잘몰라요 ㅋㅋ
데이터베이스는 aws RDS데이터베이스를 사용하였는데, postgre sql로 선택했습니다.
또한 깃허브는 organization을 사용해서 협업하였고 각자 담당한 레포지토리를 구성했어요~

위에 스택을 보시면 뭔가 특이하지않나요?
저는 프론트앤드 백엔드 두개를 나누어 작업하였는데, 팀원인 개발자분은 프론트앤드 백엔드를 JAVA랑 JPA프레임웤을 사용하셨죠? 저희는 MSA가 주제인 프로젝트라 서로 다른 언어로 개발을 했어도 한 서비스를 같이 개발할 수 있었어요.
렌더링방식도 CSR과 SSR방식으로 달랐는데 한 서비스내에서 동작을하게됐습니다. next js가 필요가 없겠네요 ㅎㅎ
또한 레포지토리또한 전혀 겹치는게 없었어요.

처음 하는 프로젝트인데 한 레포지토리를 함께 만지는 협업을 못해서 많이 아쉽긴 헀습니다.
하지만 서로 다른 언어를 가지고 한 서비스를 같이 개발할 수 있다는게 바로 MSA의 장점중 하나랍니다.

개발 협업경험이 없게되어 아쉬웠거든요
그래서 따로 깃허브 협업하기 혼자놀기 포스팅을 따로 작성을 했습니다ㅋㅋㅋ 참고하세요~
https://jacobowl.tistory.com/349
https://jacobowl.tistory.com/350

프론트앤드 파일 전송 구조

저희 팀 서비스 도메인은 daddygo.vacations입니다.
루트 경로(www.daddygo.vacations)로 들어가면 nurd worker가 vue js로 코딩한 SPA방식 프론트데이터를 S3버킷에서 응답받게됩니다. 그림에서 보이시죠?
그리고 또 다른 팀원분은 board 게시판기능을 위주로 개발하셨는데요. 팀원분이 개발하신 프론트는 SSR방식으로 동작하는데요~ 클라이언트는 이 프론트 데이터를 EKS pod에서 직접 받게됩니다.

이런구조로 희안하게 두 렌더링 방식을 모두 활용하는 서비스를 완성할 수 있었습니다.

위설명을 조금더 정리한 그림이에요 ㅎㅎ

Nurd Worker는 어떤걸 개발하였나요? #1 - member

저는 회원가입과 유저 로그인앤아웃을 개발하였습니다.

JWT로그인방식과 AWS cognito를 사용하여 개발하였습니다~
cognito는 JWT방식으로 로그인을 구현해주는 AWS서비스중 하나인데요. 많이들 생소하신 서비스일겁니다 ㅎㅎ
그리고 전 유저 편의성을 최우선으로 생각하므로 google oauth를 연동하여 로그인을 구현했습니다.

단순히 cognito만으로는 그렇게 좋다할 장점은 없는것 같지만 다른 AWS서비스와 연동이 된다는 점이 좋더라구요.
저희는 백엔드 통신을 api gateway를 사용하였는데요. cognito랑 이 api gateway와 연동했습니다!!
이러면 was단, 즉 백엔드에서 아예 토큰 검증하는 로직 자체를 만들필요가 없어요!! ㅋㅋ

그냥 api gateway에서 헤더값을 검사후에 인증이 필요한 api요청에대해서는 코그니토로 먼저 토큰 검사를 한후, 토큰이 정상이면 제기능을 수행하구, 토큰이 이상하면 api gateway단에서 걍 끊어버립니다 ㅋㅋ
엄청 간단하죠? (사실 코그니토 처음 만드는게 더 어렵긴..했음 ㅋㅋㅋ)

참고로 코그니토로 간편 로그인을 구현하니 refresh token은 안되는것 같더라구요. 구현하려면 따로 백단에 SDK로 코그니토 서버와 통신하여야 합니다. 때문에 access token만 설정했습니다.
하지만 토큰 만료시간을 설정할수있어서 10시간유효하게 만들었어요 ㅋㅋㅋ
remember me 프로젝트는 google oauth로 로그인을 구현하였는데, google oauth만으로는 access token 유효시간을 길게 늘릴수가 없더라구요.

국비과정에서 저희팀만 유일하게 google oauth와 cognito를 연동하여 로그인을 구현했습니다(나름 뿌듯 ㅋㅋ)

jwt / introduction & access token

IntroductionJWT를 아주 예전에 접한적이 있다. 지금도 코찔이지만 그때 난 코찔찔찔이였기때문에 이해가 어려웠는데.. 훈련소에서 cognito와 google oauth로 직접 로그인을 구현해보면서 자세히 알게됐

blog.nurd.work

jwt / refresh token

Introductionjson web token 보안방법에서 refresh token에 대해서 차근차근 포스팅하겠다. 처음부터 와라라락 써버리면 읽는 사람들은 머리가 터질것이기 때문.공부 목적이길래 코드가 매우 더러울것이다

blog.nurd.work

jwt / interceptor, module, middleware를 활용한 jwt플로우

Introduction이전 jwt포스팅 시리즈중 access토큰까지는 그래도 코드를 봐줄만했으나 refresh토큰이 추가된 순간 아주 코드가 더럽고 불결해졌다. 이걸 깔끔하게 하기위해서 jwt토큰로직을 interceptor, modu

blog.nurd.work

jwt에 대한 포스팅은 이 포스팅들을 보시면 됩니다~

Nurd Worker는 어떤걸 개발하였나요? #2 - LeaderBoard

리더보드입니다.
저희 어플리케이션에 들어오시면 처음 마주치시는 화면이에요.

게시글들의 필터링 조건마다(좋아요수, 식당랭킹, 지역랭킹 등) 순서대로 보여주는 화면입니다.
nurd worker는 어플리케이션의 첫 화면이라 이미지작업과 디자인에 치중했습니다.

딱히 기술적으론 설명드릴게 없네요..ㅋㅋ

Nurd Worker는 어떤걸 개발하였나요? #3 - Search

저렇게 원하는 게시글의 필터링을 정해서 게시글 데이터를 가져오는 기능입니다~
이 기능을 구현하기위해 저는 db쿼리문을 조건적으로 바꾸는 코딩을 했습니다.
예시코드를 보여드리자면~

    const selectArea = (area) => {
      if (!Array.isArray(selected.area)) {
        selected.area = [];
      }

      if (!selected.area.includes(area)) {
        if (selected.area.includes("all") && area !== "all") {
          // "all"이 이미 있는 경우 다른 값을 추가하지 않음
          selected.area = [area];
        } else if (area == "all") {
          selected.area = ["all"];
        } else {
          // "all"이 없는 경우 새로운 지역을 추가
          selected.area.push(area);
        }
      }
    };

코드를 짧게 보여드리자면, 지역부분 선택을 이렇게 선택한 filter를 정해서 백단에 보냈습니다.

const areaString = (selected) => {
  if (selected.area[0] == "all") {
    return "";
  } else {
    return ` AND area IN ${createAreaTuple(selected.area)}`;
  }
};

const travelTypeString = (selected) => {
  if (selected.travelType == "all") {
    return "";
  } else {
    return ` AND travel_type = '${selected.travelType}'`;
  }
};

const destiTypeString = (selected) => {
  if (selected.destiType == "all") {
    return "";
  } else {
    return ` AND desti_type = '${selected.destiType}'`;
  }
};

백단코드 전부는 너무 길어서 짧게만 보여드리자면, 저는 db에 데이터를 요청할때 쿼리문을 쓰거든요.
저렇게 쿼리문 스트링을 조건부로 return하는 함수들을 만들어서 스트링을 템플릿 리터럴로 쿼리문을 만들어서 db요청을 보냈어요

dga-search/server.js at main · DGA-PROJECT/dga-search

아빠, 또 갈까 ? - 검색 CI/CD (Github Action). Contribute to DGA-PROJECT/dga-search development by creating an account on GitHub.

github.com

search의 백단 코드입니다ㅎㅎ

sql인젝션 공격에 위험할수도 있는 방법이긴 합니다 ㅠㅠ

++협업을 위한 test버튼들

인프라팀과의 협업이기때문에 저렇게 테스트 버튼을 만들어드렸어요.
(오래전 프로젝트라 이미지가 사라져서 remember me test zone 버튼 사진으로 대체합니다~)
저희는 아직 현업자가 아니고 모두 배우는 사람들이었기에 개발팀이나 인프라팀이나 시행착오가 많았습니다
때문에 개발단에서 저렇게 api통신을 체크하거나 db통신을 체크하는 버튼들을 만들어드리면
인프라팀원분들이 배포하면서 제대로 연결이되었는지, 환경변수가 제대로 읽혀졌는지 등을 테스트 하실 수 있었고 실제로 활용하셨습니다~

개발단 마이그레이션

GitHub - nurdworker/dev-migration-mysql

Contribute to nurdworker/dev-migration-mysql development by creating an account on GitHub.

github.com

github 코드를 보시면, bf_db와 af_db로 각각 데이터베이스 연결하는 환경변수만 설정해두면 테이블과 컬럼등을 자동으로 체크하여 sql데이터베이스가 마이그레이션이 됩니다. 물론 서로 같은 종류의 db라는 설정이구(로컬 mysql과 aws RDS mysql처럼요.) 부하체크해서 컨트롤하는 기능없이 setInterval로 분산을 처리한 단순한 코드이지만 동작은 잘 합니다.

저 역시도 당시에 데이터베이스를 따로 사용하고 있었는데 비용이 많이나와서 해당 코드를 활용하여 약 10000row 정도 되는 데이터를 옮겼습니다.

저희팀은 결성이 된게, 제가 같이 프로젝트를 진행하고 싶은 팀장님을 찾아가서 두 명이서 먼저 결성이 된 팀이었습니다 ㅎㅎ
당시에 팀장님은 마이그레이션을 주제로 하고싶다고 하셨는데요, 결국 팀이 결성되고 MSA가 주제가 되어 마이그레이션을 조금밖에 다루지 못했답니다.
때문에 프로젝트 막바지에 제가 개발단 마이그레이션을 따로 혼자 준비해서 전해드렸어요.(발표에는 추가 안하셨지만 ㅠㅠ)

발표 목차

저희팀 발표 목차인데요~ 저는 인천 dev with MSA, 강릉 dev with Cloud쪽 발표내용을 맡았었네요 ㅎㅎ
(이미지도 직접그렸어요 ㅋㅋㅋ)

task 방식 협업

팀장님이 노션을 만드시고 저렇게 task를 만들어서 계속 업로드하라고하셨는데요
너무 좋은 방법인것같아서 remember me 프로젝트에서 제가 팀장으로 진행할때도 이 task방식으로 팀원분들과 협업하였습니다 ㅎㅎ

인프라 아키텍쳐

저희 인프라 팀원분들이 만드신 최종 아키텍쳐인데요~ 멋지죠?

Conclusion

솔직히 제가 한 개발내용은 많이 복잡한게 없고 딱히 돋보이는 기능들이 없네요..ㅋㅋ 지금와서 구현동영상을 편집하다보니 잔실수들도 좀 보입니다 ㅋㅋㅋ

지금와서 회고해보면..

저희팀이 처음 기획단계때 보여지는게 중요하다고 의견이 많이 나와서 제가 일러스트레이터를 다루니 디자인쪽에 신경을 많이 써달라 오퍼를 받았거든요.
하루종일 프로젝트 작업을 했지만 거의 50퍼센트 이상이 그림 작업인 일러스트레이터 디자인작업이었습니다 ㅠㅠ
어플리케이션에서 사용하는 이미지들, 영상작업, ppt에 필요한 이미지제작등, 이런 작업들을 제가 했어요.
(nurd worker는 디자이너분들을 이해할수 있는 개발자입니다 ㅋㅋㅋ)

당시 제 생각은 이랬습니다.

솔직히 제 개인적인 입장으로 봤을때는 그다지 득이 되는 방향은 아니었죠. 저는 개발자가 되고싶은거지 디자이너 지망생이 아니니까요.
더 나아가선 아무리 개발자라도 aws 300만크레딧이 프로젝트 기간동안만 한정적으로 주어지는데 EKS같은 비싼 리소스들을 다루는 인프라팀에 들어가서 프로젝트를 하고싶은 생각도 있었답니다.

하지만 팀이라는게 모두가 이득을 취하는 방향으로만 가려고한다면 그 팀은 제대로 진행될 수 없을거라고 생각을 합니다.
실제로 다른팀은 개발쪽 담당을 정하느라 분쟁이 있기도 했었구요 ㄷㄷ

때문에 내색없이 팀원으로써 최선을 다했고 완성도가 높게 결말지어진 프로젝트였다고 생각합니다.
긴 글 읽어주셔서 감사합니다~!

이미지 소스 출처

GREEN

출처: Hand -drawn spring landscape (Freepik)

ZOO

출처: Zoo or petting zoo cartoon design (작가: Vectorpouch, Freepik)
출처: Flat world animal day background (Freepik)

엄마

출처: Motherhood concept illustration (Image by Storyset, Freepik)

Personal Project - MuzziCluster

부엉이사장 — Fri, 24 Jan 2025 08:31:47 +0900

Introduction

안녕하세요? Nurd Worker입니다! 반갑습니다.
이번에 소개해드릴 프로젝트는 Muzzi Cluster 프로젝트 입니다!

무찌 클러스터 프로젝트는 온프레미스 클러스터를 직접 구현한 프로젝트입니다.
당연히 네트워크와 쿠버네티스, 인프라가 주제입니다ㅎㅎㅎ

예전에 사용했던 오래된 노트북으로 직접 클러스터를 만들었습니다~(c타입 포트도 없는 오래된 ㅎㅎㅎ)
부모님 드린다고 했는데 안가지신다고하셔서 묵혀뒀다가 이번 기회에 활용해봤네요~
나름 관리는 열심히했어서 부품도 업그레이드해서 서버용으로는 문제없이 돌아갑니다ㅋㅋ

현재 세 가지 어플리케이션이 배포되어있는데요~
포트폴리오와 acsap, rememberme프로젝트가 모두 무찌클러스터에서 배포한거랍니다~
참고로 무찌클러스터는 영상이나 깃허브 자료가없어요~ 직접 배포한 어플리케이션에 접속하시면 돌아가는게 확인가능하시니까요.

그럼 재밋게 읽어주세요~

왜 무찌클러스터인가요?

제 동생이 하나 있는데요. 무찌라는 강아지입니다.
저는 쿠버네티스를 공부할때마다 클러스터는 구름?같은 이미지로 생각을 하게되요.

'k8s' 카테고리의 글 목록

지극히 이기적인 개발 블로그입니다.

jacobowl.tistory.com

현재 이 블로그의 쿠버네티스 관련 포스팅들을 보면 구름이 가끔 그려져 있답니다 ㅎㅎ
근데 구름? 하면 무찌 얼굴을 닮았죠? 그래서 무찌클러스터 프로젝트라고 이름짓게 되었습니다~

기술스택

무찌클러스터는 당연히 쿠버네티스로 구축했습니다~ 그리고 많은 어플리케이션 리소스를 쿠버네티스 전용 iac 도구인 헬름으로 배포했어요.

모니터링을 하기위해서 grafana, prometheus를 구축했고, 로그 모니터링을 위해 loki도 겸했습니다.

이미지 스토리지도 따로 구축하였습니다. harbor를 사용했구요

데이터베이스는 몽고디비와 sql(비밀)디비를 설치해놨습니다. rememberme 프로젝트의 데이터베이스가 현재 무찌클러스터에서 데이터를 보관하구있어요.

또한 슬랙알람을 활용하여 클러스터의 알람을 연결했답니다 ^^

쿠버네티스 설치

VMware ubuntu 환경에서 k8s환경 구축하기.(2024 11월 기준 가능)

# 바뀌어서 설치가 안되는부분만 최상단에 적음!! 시간이없어서 정리는 못하나, 바뀐부분만 적용하면 k8s클러스터 설치가능합니다. 2024년 9월 포스팅인데 현재 2024/11월 기준 9월에 포스팅한 방법

blog.nurd.work

쿠버네티스 설치는 이전에 포스팅을 해놨는데요.
최근에 쿠버네티스 설치방법이 바뀌어서 많은 혼란이 있었습니다.. 마침 무찌클러스터 프로젝트 시작하려던 참이었거든요.
구글링해도 최근방법은 잘 안나올거에요. 저또한 k8s클러스터를 수없이 많이 구축해봤지만(컴퓨터가 들었다놓으면 전원이 나가요ㅋㅋ) 최근업데이트때문에 많은 고생을 했습니다 ㅠ
위 포스팅은 해당 업데이트된 내용을 찾아서 추가했던 포스팅입니다 ㅠㅠ 정말 이렇게 설치가 어려울줄은.. 몰랐어요

참고로 쿠버네티스는 많은 분들이 어렵다고 생각하시는데, 개인적으로 가장 큰이유가 설치때문이라고 생각하는 코찔이입니다..

앱들은 어떻게 배포가되나요?

일단 그림처럼 무찌클러스터에는 앱서비스 전용 인그레스를 진입점으로 잡아놨어요.
그리고 트래픽이 오면 각각의 네임스페이스에 바인딩된 external name서비스에 연결을 설정해놨습니다.
때문에 제 배포된 프로젝트들의 링크에 접속하면 인그레스가 트래픽을 구분하여 해당 리소스 네임스페이스에 전달해줍니다~

각각 앱서비스들의 리소스는 어떻게 생겼나요?

물론 앱마다 서로 조금씩 리소스 차이가 있지만 앱서비스들의 리소스는 대략적으로 저렇게 생겼답니다.
서비스가 일단 트래픽을 받구요. 이 서비스는 아까 각 external name 서비스들이랑 바인딩이 되었으니까 트래픽을 받게되죠.
그리고 컨트롤러가 서비스 역할을 하는 pod들을 관리해줍니다.
또한 오토스케일링을 설정해둬서 pod가 트래픽이 많으면 자동으로 오토스케일링되게 설정해놨습니다.
그리고 해당 앱 네임스페이스마다 network policy를 설정해둬서 보안을 신경썼어요.

그럼 위에 ingress 트래픽과 각 앱 서비스는 이렇게 되겠죠?

각 앱서비스에 맞는 네임스페이스에 인그레스 트래픽이 전달이되어 세가지 앱을 운영할 수 있게 된거랍니다 ㅎㅎ

기타 인프라

저는 모니터링과 이미지 스토리지, 그리고 데이터베이스를 모두 헬름으로 깔았어요~

모니터링
grafana, prometheus, loki

저는 모니터링 도구로 grafana, prometheus, loki를 활용했는데요~

grafana 대시보드

예를들어 node쪽 리소스를 보여드리자면, 저렇게 리소스를 한눈에 볼 수 있게 대시보드를 만들었습니다.
쿼리짜는게 생각보다 너무 어렵더라구요 ㅠㅠ 아직도 잘못짜겠네요..

이렇게 pod별 리소스 사용량도 모니터링중인데 현재 가장 많이 잡아먹고 있는 리소스는 프로메테우스입니다. 하긴 계속 클러스터를 감시해야하니 바쁠수밖에 없죠.
리소스들을 모두 보여드리고싶지만 보안적으로 위험할것같아서 전부 올려드리지는 못하겠네요 ㅠ
저랑 친하신분들은 저희집에 초대해서 직접 보여드릴게요~(무찌가 엄청 짖을텐데 무서워마세요..)

loki

그라파나는 원래 리소스 모니터링 전용 도구입니다. 전 로그모니터링을 하고싶었어요.

이전 rememberme 프로젝트 팀원분은 인프라로 취직하셨는데 kibana를 쓰시더라구요.
전 그라파나에 loki를 연동하여서 로그 모니터링을 구성했습니다.
예시로 사진처럼 로그가 찍히는데요. 저렇게 나쁜 요청들도 많이 온답니다..

참고로 로키는 한국에서는 많이들 사용을 안하셔서 영문으로 구글링해서 정보를 얻느라 좀 애먹었습니다 ㅠㅠ

slack

또한 프로메테우스랑 슬랙을 연결하여 클러스터에 이상이 있을시 알람설정을 해놨습니다.

사실 설정하는게 너무어렵기도하고 전 슬랙을 별로 안좋아해요.
항상 알람이 늦게오더라구요.. 제가 잘 못만져서 그런걸수도 있지만요.

이미지 스토리지 - harbor

하버는 이미지 스토리지입니다. 레지스트리라고도 합니다.
이미지 저장용으로 사용하고있는데요~
도커허브가 유료로 되었다는 소식을 들었어서 한번 해볼까? 하고 따로 만들었습니다.
하버가 보안을 많이 신경써야하니, 이것저것 설정할게 많더라구요..

사진은 일부분만 보여드렸습니다 ㅠㅠㅠ 보안상 위험할것같아서요.
이미지 저장이 주 목적이지만 전 헬름차트를 보관용으로 쓰고있습니다.
나중에 또다시 클러스터를 구축한다면 구축해놓은 하버를 사설레지스트리로 사용할 수 있겠죠~

데이터베이스들~

데이터베이스 또한 무찌클러스터에 배포했습니다.
데이터베이스를 클라우드에서 사용해보신 분들은 다들 아시겠지만, 매우매우 가격이 비쌉니다 ㅠㅠ
물론 데이터를 안전하게 보관해주니 장점이 크지만 저같은 코찔이들은 포트폴리오로 쓰려고 데이터베이스를 하나 이용하려해도 최소 월 5만원이상이나 하니 배보다 배꼽이 크죠 ㄷㄷ

그래서 전 따로 무찌클러스터에 데이터베이스를 만들었어요.
어떤 데이터베이스들인지는 하나하나 자세히 설명 못드리지만, 공개한 몽고디비는 현재 rememberme 서비스에서 데이터베이스로 사용하고 있습니다~

그라파나에서 이렇게 체크를 하고있습니다 ㅎㅎ

앱과 기타 인프라 아키텍쳐

이제 그래도 좀 인프라 같죠?ㅋㅋ
글자가 작아서 잘 안보이시곘네요ㅠㅠ
암튼 공개가능한 인프라들에 대해서 이렇게 아키텍쳐가 그려진답니다~

참고로 모든 인프라들이 저장공간도 사용하기떄문에 우측상단에 persistent volume도 그려놨습니다~

Security Bot

클러스터에서 보안역할을 하는 봇을 만들어뒀습니다.

모든 기능을 말씀드리기는 어렵지만, 한가지만 예시를 드려드리자면,

Time: 2025. 1. 23. 오후 5:42:59
IP: 142.93.32.68
User-Agent: Mozilla/5.0 Keydrop
Host: 123.456.123.456
Path: /.env
Status: 400

Time: 2025. 1. 23. 오후 7:49:47
IP: 147.185.133.122
User-Agent: -
Host: _
Path: -
Status: 400

Time: 2025. 1. 23. 오후 8:23:25
IP: 20.118.69.178
User-Agent: Mozilla/5.0 zgrab/0.x
Host: 123.456.123.456
Path: /manager/html
Status: 400

Time: 2025. 1. 24. 오전 1:12:40
IP: 162.158.170.136
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Host: nurd.work
Path: /wordpress/wp-admin/setup-config.php
Status: 200

이러한 메세지가 제 휴대폰으로 실시간으로 옵니다.
딱봐도 .env파일을 탈취하려고 하거나, 관리자권한을 탈취하기위한 해킹요청이죠..ㅠㅠ
진짜 엄청 많이옵니다.. 혹시 직접 배포하시는분들 조심하셔야합니다 하루에도 수십개가 옵니다 ㄷㄷ

security bot이 하는 역할이 여러가지 있지만 한가지로 이런 역할을 해주고있어요.
직접 코딩을 해서 만들었습니다.

최종 아키텍쳐

지금까지 설명드린 그림들을 전부 합쳐봤는데요~
이렇게 클러스터를 운영하고 있답니다ㅎㅎㅎ

글자가 안보일까봐 클러스터 배경을 검은계열로 했는데 무찌가 먹구름이 되었네요ㅋㅋㅋ

Conclusion

온프레미스로 직접 서버를 구축하는걸 평소 항상 해보고싶었어서 재밋게 구축했네요.

현재 실제로 운영되는 클러스터이고 제 포트폴리오의 애플리케이션 대부분 무찌클러스터에서 운영되고 있습니다.
이러한 이유로 자세하게 어떤식으로 구성을 했고 보안설정을 어떻게 하였는지는 공개가 어렵네요 ㅠㅠ
아직까지도 혹시 여러 공격을 받아서 무찌 클러스터가 취직전에 터질까 조마조마합니다 ㅠㅠㅠ

사실 네트워크 국비교육과정을 들은 이유도 온프레미스로 직접 서버를 만들어보고 싶어서 들어갔던건데요.
파이널프로젝트때 솔직히 온프레미스로 만들어보고 싶었는데 aws수업이다보니 aws로 아빠또갈까 프로젝트를 만들었답니다 ㅎㅎ 이번기회에 직접 온프레미스 서버를 구축할수 있어서 좋은 경험이었어요.

그리고 추가적으로 쿠버네티스로 서버를 운영하면 보안적으로도 좋고 유지보수로써도 매우 좋습니다. 설치가 어려울뿐 저같은 코찔이도 이렇게 활용할 수 있는 기술이니 모르시는 분들은 배우시는걸 추천드립니다~!

이상 무찌클러스터 프로젝트였습니다 ^^

Personal Project - NurdreamDek

부엉이사장 — Tue, 21 Jan 2025 19:05:23 +0900

Introduction

안녕하세요? Nurd Worker입니다! 반갑습니다.
이번에 소개해드릴 프로젝트는 NurdreamDek 프로젝트 입니다!

너드림덱은 간단하게 요약하면 원격 메크로 프로그램입니다 ㅎㅎ
스트림덱과 같은 기능을 코드로 구현한 프로그램이라고 보시면 됩니다.

이 프로젝트는 백엔드 기능을 위주로 어필할 수 있는 프로젝트라고 생각해요~

다만!! 죄송하지만 프로그램이 상당히 보안적으로 민감한 기능들이 있답니다.
또한 현재 Nurd Worker가 작업을할때 계속 사용중입니다.
때문에 깃허브 코드는 공개하지 않으며, 개발 스택과 아키텍쳐, 보안설정 또한 자세히 공개하지 않습니다.
포스팅에서는 기술적인 구현방식과 플로우를 위주로 설명드릴거에요.
전체공개가 되는 공간이니만큼 조심스러울수밖에 없는 점 양해부탁드립니다^^

너드림덱 기능은 introduction 비디오를 먼저 시청하시고 포스팅을 읽어보시면 이해가 쉬우실겁니다.
목차마다 짧은 동영상을 첨부해놓긴했지만 핸드폰으로 사용한다는 점을 모르시면 이게뭐야 하실거에요 ㅎㅎ

그럼 재밋게 읽어주세요~

NurdreamDek 링크

nurdreamdek introduction video : https://youtu.be/7xdWBNWA4y0?si=EtJkvDq-7fHQ9ota

간단한 프로그램 소개

모바일에서 데스크탑을 조작하는 프로그램입니다.

컴퓨터를 조작하는 리모컨? 같은 느낌이라고 보시면됩니다 ㅎㅎㅎ

화면 구성

카테고리 화면

일러스트레이터 카테고리의 기능 화면

너드림덱의 화면구성은 아주 단순합니다.

처음에 원하는 기능 카테고리를 선택하여 들어갈 수 있습니다. 포스팅에선 일러스트레이터 기능을 설명드릴 예정입니다 ㅎㅎ

카테고리 화면에서 일러스트레이터 버튼을 누르면, 두번째 기능 화면으로 넘어가는데요~

각각의 기능은 어떤건지, 어떻게 기능 구현을 하였는지 포스팅할 예정입니다.

기능소개 - Align
difficulty :

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

먼저 첫번째줄에 있는 align기능인데요~

여러 이미지나 오브젝트들을 정렬을 해주는 기능입니다.

키보드메크로를 구현하여 단축키를 눌러 해당 버튼 이벤트를 받으면 키보드 키가 눌러지게 하여 기능 구현하였습니다.

기능소개 - Drop Shadow
difficulty :

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

첫번째 줄에서 마지막에 있는 drop shadow아이콘입니다. 메이플스토리에서 쉐도우파트너 아이콘으로 만들었어요 ㅋㅋ

선택한 오브젝트에 그림자 효과를 주는 기능입니다.

역시나 이또한 키보드 메크로와 단축키 조합으로 쉽게 만들었어요 ㅎㅎ

기능소개 - Double Align
difficulty :

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

ROW, COL이란 글자가 있는 기능은 세개이상의 오브젝트가 있을때, 가운데정렬과 동시에 간격조절도 해줍니다.

가운데정렬은 키보드메크로, 간격조절하는 기능은 이미지인식 기반 마우스메크로로 구현했어요

자세히보시면 마우스가 빠르게 움직였다가 제자리로 돌아오는걸 확인가능하십니다 ㅎㅎ

왜 distribute기능은 키보드메크로로 안했냐면, 일러스트레이터는 아주아주 기능이 많습니다.

때문에 원하는 기능들의 단축키설정을 따로 해줘야하는데, 아주 많은 기능들이 단축키 설정조차 불가능한 경우가 많습니다.

간격을 조절하는 distribute또한 단축키설정을 못하더라구요.

그래서 키보드와 마우스, 두 가지 방법을 조합해서 구현했습니다.

기능이 서로 동기적으로 처리가 되야겠죠?

기능소개 - artboard align
difficulty :

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

아트보드 가운데정렬 기능입니다

동영상을 보시면 하얀색 바탕이 일러스트레이터에서 artboard라는건데요~ 그림으로 치면 도화지같은거라고 생각하시면 됩니다.

이 도화지를 기준으로 오브젝트가 가운데로 정렬되게 하는 기능입니다.

마우스 메크로와 이미지 인식을 기반으로 프로그래밍했습니다.

이 영상도 매의 눈으로 자세히 보시면 아주 빠르게 마우스가 상단에 버튼을 두번 빠르게 클릭하고 제자리로 돌아오는걸 확인이 가능합니다 ㅎㅎ

artboard align기능또한 단축키 설정에서 단축키를 설정을 할수가 없었죠.

기능 소개 - font
difficulty :

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

font기능입니다.

영상을 보시면 못생긴 궁서체들이 각자 설정한 폰트로 변하는걸 확인 가능하십니다 ㅎㅎ

텍스트 오브젝트들을 원하는 글꼴로 바로 바꿔주는 기능입니다. 제가 자주쓰는 폰트들을 너드림덱 기능으로 만들어놨습니다.

일러스트레이터를 사용하시면 많이들 불편해하시는게 매번 글자체를 따로 찾아서 설정하고 하기가 굉장히 불편합니다 ㅠㅠ

물론 즐겨찾기 기능도있고 하시지만 그것조차 불편하기에 그냥 아예 파일하나에 글자체들을 저장해놓고 쓰시곤 합니다.

이 기능구현부터는 난이도가 확올라갔는데요

영상으로 보시면 딱히 어려울것없지만 이 기능은 JSX파일로 일러스트레이터 프로그램을 조작한겁니다.

일러스트레이터는 스크립트로 동작합니다!!(완전완전 중요!!)

예시로 잘난체 font기능 스크립트파일을 보여드리자면

var newFontName = "JalnanOTF";

function changeFontInSelectedText(fontName) {
  var doc = app.activeDocument;

  if (doc.selection.length === 0 || !(doc.selection[0] instanceof TextFrame)) {
    return;
  }

  var selectedTextFrame = doc.selection[0];

  try {
    selectedTextFrame.textRange.characterAttributes.textFont =
      app.textFonts.getByName(fontName);
  } catch (e) {
    alert("can not find font: " + fontName);
  }
}

changeFontInSelectedText(newFontName);

이렇게 자바스크립트로 되어있어요. 해당 스크립트를 일러스트에서 실행하면 기능이 동작합니다.

사실 원래는 font기능을 마우스메크로와 이미지인식으로 구현하려 하였으나, 밑에 더 설명할 드롭오브젝트 기능을 구현하다가 JSX파일로 구현이 가능한걸 발견하였고 font기능을 싹다 바꿨어요.

이미지 인식기능은 사실 효율이 아주 안좋습니다ㅠㅠ

암튼 정말정말 고생해서 찾은 방법입니다 ..

기능소개 - Drawing
difficulty :

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

drawing기능입니다~

버튼은 하나지만 상당히 어려운 기능이었습니다.. 너드림덱에서 백엔드의 꽃이라고 생각하는 기능이었어요.

참고로 안쓰는 핸드폰으로 너드림덱으로 쓰려고 만든건데, 마침 제가 안쓰는 핸드폰이 갤럭시 노트 핸드폰이었습니다!

때문에 갤럭시 노트 기종에는 스마트펜이 들어있어서 만들어보자~ 하고 구현하기로 결심했습니다 ㅋㅋ

drawing기능은 많은분들이 궁금해하실것 같아서 자세히 설명 드릴게요~

# 선이란 개념부터!! -> 좌표

그림처럼 점이 세개가 연속적으로 모이면 선이 됩니다.

왼쪽에서 오른쪽으로 드로잉을 할경우 점이 연속적으로 찍힐겁니다. 그래서 좌표데이터를 총 세개 (오른쪽 그림에서 객체)를 기록해야합니다.

각 점은 location_x, location_y라는 오른쪽 자료에서 객체형식으로 좌푯값을 가지고 있습니다.

그리고 저 세개의 점의 좌표객체를 배열에 순서대로 넣었습니다. 이렇게 기록되서 짧은 선이 되었는데요

이 선은 오른쪽 자료에서 배열이 됩니다.

드로잉기능에서 모든 선(획)은 이런식으로 배열안에 객체 구조로 데이터를 입력받아요.

# 그럼 좌표데이터를 어떻게 나눠야할까?

예시를 들어볼게요.

'가'라는 글자를 쓸때 총 세 획으로 끊어서 작성을 합니다.

각 획마다 점(좌표 객체)이 엄청 많겠죠? 이 객체들이 들어있는 어레이가 한 획이 되도록 위에 설명과 같이 설계를 했어요.

총 세 획이니까 아까 설명드린 어레이가 총 세개 나오겠죠?

# 좌표데이터를 생성하고 나누는 로직은 어떻게 구현해야하나?

방식에서 주목해야할 주제는 두 가지에요.

1. 한 어레이 안에서 좌표의 순서는 순서대로 나열되어야함.

2. 각 획을 구분하는 기준을 정해야함.

1번 한 어레이 안에서 좌표의 순서는 순서대로 나열되어야한다는 점 부터 살펴보죠.

클라이언트가 드로잉 동작을 할떄, 펜의 좌표가 기록이 되어야합니다.

조건은 좌표가 이전 좌표와 비교해서 변했다는 조건입니다. 짧은시간동안 지속적으로 좌표를 체크하고, 좌표가 계속 변하면 좌표객체를 리턴하는 함수를 호출했어요. 그리고 이 좌표함수의 리턴값을 어레이에 지속적으로 push했습니다.

아주 아주 중요한건 2번, 각 획을 구분하는 기준 인데, 이 어레이를 획당 구분하려면 어떻게 하냐는점이죠.

연속적으로 좌표데이터가 들어오긴 하는데.. 한획을 마치고 다른 획을 쓰더라도 좌표가 변한건 맞잖아요? 이걸 구분하는 트리거를 잡아야합니다.

만약 다른획을 쓸떄 두 좌표의 거리가 멀면을 조건을 담아야할까요? 이렇게 하면 아주 빠르게 드로잉한경우에 획이 끊길거에요. (물론 프론트에서 좌표데이터를 수집하는 로직에 달려있지만요..)

따라서 저는 시간에 주목했습니다. 타이머 변수를 만들어서 타이머를 쟀어요. 지금까지 어레이에 담긴 좌표데이터 마지막에 들어간 시간에서 새로 들어오는 좌표데이터가 입력되는 시간이 차이가 50ms이상이면 어레이를 나눈거죠.

이렇게해서 획당 좌표데이터 묶음(어레이)을 완벽하게 구분할 수 있습니다.

데스크탑에서 좌표묶음 데이터의 처리는 어떻게 처리할까? - IO 시각이 규칙적이지 않다.. => 태스크큐!!

모바일에서 drawing을 해서 좌표데이터를 데스크탑에 순서대로 보냈다고 한다면, 이 좌표데이터가 보내지는 시각은 일단 불규칙적입니다.

그림처럼 첫번째 획을 입력한 후, 0.1초후에 두번쨰 획을 보낸다면, 데스크탑의 drawing함수가 아직 첫번쨰 획 작업을 안끝내놨을수도 있어요.

또 세번째 획 데이터를 보낼때는 두번째획의 작업을 보낸지 100년후에 보냈으니 이미 두번째 획은 처리를 끝낸지 한참 지난 후죠.

사람이 그리는거니까 불규칙할수밖에 없으니 당연한겁니다.

그럼 이걸 어떻게 처리를 해야할까요?

저는 태스크큐 자료형을 활용했습니다.

일단 데스크탑에서는 모바일에서 들어오는 좌표어레이를 바로 drawing함수에 넣어 호출하는게 아니라, 일단 큐에 넣습니다.

그럼 drawing함수는 이 큐에 데이터를 기반으로 현재 있는 큐에 들어있는 맨 앞에있는 첫번쨰 데이터부터 동기적으로 처리해야합니다.

아까 가정했던 첫번째획이 들어오고 0.1초후에 두번째 획이 들어오고 백년후에 세번째획이 들어오는 상황을 가정해봅시다.

이 경우에는 위 그림처럼 플로우가 동작합니다.

큐의 핵심은 선입 선출이라는겁니다 ㅎㅎ 편의점알바를 많이해봐서 익숙한 개념이었어요.

또한 큐도 여러종류가 있는데 drawing기능에서는 task queue라고 과제?같은 느낌으로 일단 먼저들어온걸 처리하고 다음 데이터를 처리하는데 이런 과제큐들이 지속적으로 쌓인다는 느낌입니다. 자바스크립트도 스택과 큐 방식으로 비슷하게 돌아갑니다.

참고로 큐자료형을 remember me 단어장 프로젝트에서도 활용하였는데 batch queue형식으로 사용했어요.(remember me 프로젝트 포스팅에서 확인하세요~)

보통 큐라고 하면 array를 생각하기 쉬우나, 어레이는 인덱싱이 있어서 효율이 안좋답니다. 그래서 전 class로 구현했습니다.

사실 이 플로우를 설계 및 테스트하면서 엄청 큰 트러블이 생겼었는데 ㅠㅠ 관심있으시면 문의주세요~

# 데스크탑에서와 모바일에서의 드로잉 시작점 차이

모바일에서 좌표어레이를 하나 보냈다면, 데스크탑에서는 현재 마우스 포인터 위치에서 드로잉이 시작되게 하고싶었어요.

방법은 이랬습니다.

모바일에서 저렇게 획당 좌표데이터 묶음인 어레이를 데스크탑에 보냅니다.

그럼 이제 데스크탑에서 이 좌표의 첫번째 좌표객체와, 현재 마우스 포인터의 좌표위치를 객체로 만든 좌푯값과 계산을하여 차잇값(그림에서 delta)을 가지고 나머지 좌표데이터 객체들에도 전부 연산을 해줍니다!

그럼 데스크탑의 현재 마우스 위치 기준으로 해당 획이 그려집니다 ㅎㅎㅎ

# 어라? 왜이렇게 그려질까?

모바일에서 저렇게 '가'라는 글씨를 썼는데, 데스크탑에선 저런식으로 이상하게 드로잉이 됐습니다 ㅠㅠ

이유가 뭘까요?

한 획의 좌표묶음 어레이는 데스크탑에서 함수에 인수로 들어가서 드로잉이 됩니다.

근데 문제는 바로! 아까 위에서 편의성을 위해 만든 delta값이 문제였어요. delta를 한 함수마다 매번 계산을 하는데, 이러다 보니 다음으로 들어오는 좌표어레이에 매번 델타값을 연산하다보니 실제 마우스가 움직이는 드로잉기능에서 마우스 시작점 위치가 한 함수마다 끝점으로 도달하니 저런 문제가 생긴것이었어요.

이렇게 처음 좌표어레이를 호출했을때 계산한 delta값을 전역으로 빼놓습니다.

그리고 두번째 좌표어레이를 인수로 넣어 호출된 함수는 이 delta값이 존재하는지 체크한 후, 있다면 초기 delta값을 계산하는 코드를 실행하지 않고 전역에있는 delta값을 재사용해서 본인 어레이에 좌표계산을 하면 됩니다 ㅎㅎ

이런 방식은 뭐 다들 사용하시면서 자주 설계하시는데, 전 플래그라고 보통 합니다.

플래그를 지정해서 코드실행을 제어하는거죠.

그림에서는 함수라고 획당 하나의 실행컨텍스트를 생성하는 식으로 그렸는데 사실은 획 하나당 프로세스 하나라서 멀티프로세스에서 플래그를 참조했었습니다.

drawing기능 성능개선

영상을 보시더라도 실제 모바일에서 그리는것과 데스크탑에서 그려지는것과 딜레이가 존재합니다.

이걸 최대한 줄여봤지만 여전히 존재하더라구요.

전 수학적으로 줄여봤는데요

for (let i = 1; i < data.length - 1; i++) {
    const point = data[i];
    const adjusted_x = point.x + delta_x;
    const adjusted_y = point.y + delta_y;
    const dx = adjusted_x - last_x;
    const dy = adjusted_y - last_y;
    const distance = Math.sqrt(dx ** 2 + dy ** 2);
    
    if (distance > min_distance) {
        adjusted_data.push({ x: adjusted_x, y: adjusted_y });
        last_x = adjusted_x;
        last_y = adjusted_y;
    }
}

위의 함수를 보시면 이전의 xy좌표값과 현재 xy좌표값의 차이가 너무 짧을경우 해당 좌표를 뺐습니다.

저는 5px이하일경우 해당 좌표객체를 제거하는 로직으로해서 drawing 함수가 계산해야하는 좌표수를 최대한 줄였습니다.

피타고라스의 원리 생각하시면되요

때문에 실제로 영상을 보시면 ㅇ을 그릴때 실제보다 조금더 비율이 작게 그려진답니다 ㅎㅎ

커브가 심할수록 뭉개지더라구요 ㅎㅎ

그래도 못알아볼정도는 아니니 이대로 진행했습니다~

기능소개 - Drop object
difficulty :

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

드랍오브젝트는 아주 심플하죠 ㅎㅎ 그냥 그림을 바로 가져와주는 기능입니다. 단순하죠?

근데 정말 구현하기 힘들었습니다 ㅠㅠ 왜냐면 이미지가 아니라 오브젝트를 가져와야 했기 때문입니다!

# 이미지와 오브젝트 차이?

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

영상을 보시면 차이가 뭔지 아실거에요.

디자이너분들은 익숙한 개념이지만 엔지니어분들은 뭔 차이인지 모르시기 때문에.. 영상으로 첨부했습니다.

이미지는 단순하게 그림을 가져오는겁니다.

하지만 일러스트에서 오브젝트는 각각의 포인터가 살아있어서 수정이 가능합니다.

이미지를 가져와서 오브젝트처럼 만드는 기능이 있지만(이미지 트레이서) 이미지가 거의 90%는 망가지고 오브젝트들끼리의 설정들도 다 깨지게됩니다.

html css로 예를들면, 단순하게 웹사이트 이미지를 해석해서 ai가 간격을 죄다 픽셀단위로 css코드를 짜주는것과 같구(피그마 ㅋㅋ)

오브젝트는 플렉스박스로 정렬기능을 구현한건과 같습니다.

이 기능을 보시면 디자이너분들이 맘에들어하실 기능같아요~

제가 자주 우려먹는 이 타이틀 이미지도 너드림덱 drop object에 등록된 오브젝트인데요~

글자를 입력하면 자동으로 박스가 커집니다.

이걸 이미지로 가져와서 붙였다면 글자를 입력할수도, 글자를 입력해도 배경이 안늘어나겠죠?

오브젝트라는게 아주아주 중요합니다!

오브젝트 즐겨찾기 기능 같은거 없어? - 심볼

저도 일러스트레이터를 잘 다루는 편은 아니라 분명 있음직할 기능인데 찾을 수가 없었어요.. 아시는 디자이너분들은 알려주세요 ㅠ

그래서 찾아보니 심볼이라는 기능이 있었습니다.

이 기능은 아마 디자이너분들도 생소한 기능일겁니다. 저도 몰랐어요.

어떤 기능이냐면 오브젝트들을 심볼로 등록하고 이 오브젝트를 한번에 수정하면 다른 오브젝트들도 똑같이 변하는 기능입니다.

nurd worker는 이 심볼기능에서 '오브젝트를 가져와 쓰는기능' 만 사용하고 싶었습니다.

심볼끼리 링크를 끊자! - break link기능

소개영상에서도 뭔지 모를것같은 이런 버튼이 너드림덱에 있는데 이게 심볼 링크를 끊는 기능입니다.

저는 drop object로 오브젝트를 가져오더라도 여전히 심볼입니다!

때문에 오브젝트를 수정하더라도 다른 object도 똑같이 변경이 되어버리죠.

drop object는 이미지를 가져오는 기능만 사용해야하니 링크를 끊어줄 필요성이 있었습니다.

그래서 링크를 끊는 버튼을 따로 만들었습니다. 이미지 기반 마우스 메크로로 만들었습니다 ^^

원래는 따로 버튼을 안만들고 drop object에 전부 넣어놨거든요?

근데 이미지기반 메크로는 말씀드렸다시피 자주 실수를 합니다. 그래서 따로 그냥 뺴놨어요.

일러스트레이터는 스크립트로 동작합니다! - JSX

위에서 font기능에서 JSX파일로 동작하게 한걸 설명드렸습니다.

사실은 drop object기능을 구현하다가 발견한 방법이에요. 그 후에 font도 jsx파일로 스크립트로 전부 변경했죠.

생각해봅시다. 만약 drop object를 사용하려 심볼까지 만들어놨다 하더라도, 심볼패널에서 해당 오브젝트를 가져와야하죠?

이 심볼패널에서 원하는 오브젝트를 클릭후 화면에 드래그래서 가져와야합니다.

그렇다면 이미지기반 클릭 앤 드래그를 설정해야하는데요

말씀드렸다시피 이미지기반 메크로는 인식율이 많이 안좋을 뿐더러,

만약 오브젝트를 이미 하나 불러왔는데 또 drop object를 사용하면 어떻게될까요?

컴퓨터가 이미지를 인식하는데 현재 화면에 있는 object(방금 끌어온것)가 있고, 심볼 패널에 있는 object중 어떤걸 선택할까요?

그림처럼 왼쪽에 이미지, 오른쪽 심볼패널에 있는 이미지(짝은거) 중에서 고민하다가 아무거나 클릭해버리겠죠.

그리고 사이징 문제도 이미지기반 인식에 크게 문제가됩니다.

같은 이미지더라도 사이즈가 달라져버리면 이미지를 잘 못찾습니다.

이러한 복잡한걸 억지로 해결하기 너무 어렵습니다. 때문에 다른 방법을 모색중에 JSX파일로 스크립트로 동작하게하였습니다.

정말정말 어렵게 찾은 방법입니다 ㅠㅠ

사실 이번 포스팅에 있는 기능중, 드랍오브젝트가 가장 가장 어려웠습니다 ㅠㅠ

프로그래밍적으로 어렵다기보다는 원하는 기능을 실제로 구현하기위해 방법들을 스스로 찾아야했고 찾는중 정말 많은 실패를 했었어요.. 중간에 그냥 하지말까도 생각해봤습니다 ㅠㅠ

드로잉기능도 만만치않게 복잡하고 어려웠지만 개인적으로는 드랍오브젝트 기능이 드로잉보다 어려웠다고 느꼈어요.

Conclusion

nurd worker는 돈이 없답니다 ㅠ
그러나 엔지니어의 피가 흐르고 있었기 때문에ㅋㅋㅋ 장비욕심은 항상 있어요. 그래서 생일날이나 이런 좋은날에 가끔 스스로에게 장비를 사줘요.(작년에는 2만원짜리 키보드사줌 ㅋㅋ)

전 스트림덱을 너무 갖고 싶었습니다. 그러나 인터넷에 보시면 버튼 여덟개 꼴랑있는 최소사양모델이 10만원중반대부터 시작을 합니다. 또한 구매후에 필요한 어플리케이션에 필요한 플러그인같은것도 따로 사야한다고 하더라구요ㄷㄷ
돈없으면 죽어야지.. 가 아니라 돈없으니 만들어보자! 하고 시작한 프로젝트입니다 ㅋㅋ
이게 좀웃기지만 너드림덱 프로젝트의 찐 동기입니다 ㅋㅋㅋ

하지만 만들고보니 선이 연결되어야하는 단점이있는 스트림덱보다 원격으로 작동할수 있다는 장점이 있었고,
스트림덱 디바이스에서는 불가능한 drawing기능도 구현이 됐습니다(갤럭시노트님 ㄳㄳ)
또한 휴대폰에서 쓸 수 있으니 디바이스도 딱히 필요없는? 장점이 있는것 같네요

가장 큰 장점은 원하는 기능을 직접 만들어서 커스텀 할 수 있다는 점 이라고 생각합니다 ㅋㅋ

아무튼 읽어주셔서 감사합니다~

트러블슈팅 기록한거.. 이런거 거의 다섯배이상 튀어나왔슴..

아 네.. 아무일도 없었습니다..

Personal Project - ACSAP

부엉이사장 — Mon, 20 Jan 2025 03:03:33 +0900

Introduction

안녕하세요? Nurd Worker입니다! 반갑습니다.
이번에 소개해드릴 프로젝트는 acsap프로젝트입니다!
프로젝트 계기는 국비교육과정을 들으면서 스터디를 만들게 되었는데요. 이때 팀원분들과 저 또한 자격증 공부를 더욱 효율성 있게 하기위해서 제작했던 프로젝트입니다ㅎㅎ
스터디를 진행하면서 최대한의 퍼포먼스를 내기위해 만들었고 스터디원분들 전원 자격증 취득하신 보람찼던 경험이었어요.

acsap 어플리케이션은 현재 배포가 되어있는 상태입니다. 직접 방문 가능하세요.

약 1년전에 개발한 프로그램이라 기억이 가물가물하지만 소개 시작해보겠습니다~

acsap 링크

acsap intruduction video : https://youtu.be/gWS7EZV8OXM

acsap github repository : https://github.com/nurdworker/acsap

GitHub - nurdworker/acsap

Contribute to nurdworker/acsap development by creating an account on GitHub.

github.com

acsap published web site link : https://acsap.nurd.work

acsap

acsap.nurd.work

개발스택

프론트엔드는 제가 주로 사용하던 vue.js를 사용하여 제작을 하였습니다. 사실 이 프로젝트가 거의 프론트엔드로만 구성되었다고 보셔도 됩니다 ㅎㅎ

백엔드는 역시 주로 사용하였던 nodejs의 express 프레임워크로 개발하였구요.

데이터베이스는 mysql을 사용하였습니다.

실제 배포한 인프라는 aws lightsail을 사용하였습니다.

인프라에 대해서 더 소개해드리자면요~ 돈이 없는 취준생이라 aws 월 5달러짜리 lightsail인스턴스로 배포를 하였고 역시나 돈이없기때문에 ㅋㅋ 인스턴스 하나에 web, was, db를 싹다 쑤셔박았습니다 ㅎㅎ 그래서 원티어 구조입니다.

프론트엔드로 거의 동작하는 프로그램이기때문에 백엔드와 db는 보조로써 역할만 했어요.

실제로 현재 체험용으로 배포된 acsap웹은 프론트엔드로만 배포된 정적사이트입니다.

어떤 목적으로 만들었나요?

처음 스터디를 모집하였을때, 저희는 자격증 시험에 대한 정보가 전혀 없던 상태였습니다ㅠㅠ

때문에 시험정보를 모아서 공부를 차근차근 하던중에 문제풀이앱이 있으면 굉장히 효율적이라는 생각이 들더라구요?

그래서 급하게 최대한 빨리 해당 어플리케이션을 만드려고 했습니다.

일단 제가 주목하였던 요소들은 이렇습니다.

국비교육과정을 병행하며 자격증 시험을 준비하여야 하기에, 시간이 굉장히 모자르다고 판단하였습니다. 때문에 훈련기관까지 출퇴근하는 시간에 지하철, 버스 등에서 공부할 수 있도록 모든 기기에서 접속이 가능한 어플리케이션이어야 했습니다. → web기반 웹 어플리케이션으로 제작
문제량이 상당히 많았습니다.(약 400개) 때문에 자주 틀리는 문제등을 따로 저장하여 공부할수 있는 기능이 필요했습니다 → 오답노트 기능
실제 본인의 공부를 테스트할수 있는 기능이 필요했어요 → semi test기능
너무 바쁘므로 최대한 빨리 프로그램을 완성해야했습니다 → 유저인증, 백엔드 로직 등은 최대한 간소화하고 프론트엔드 기반으로 돌아가게 설계, 익숙한 언어 및 프레임워크 활용

vce프로그램과 상당히 유사한데?

vce 프로그램

객관식 문제 자격증을 준비하신 분들은 많이들 아시는 vce프로그램이있습니다.

저희는 정보가 상당히 부족한 상태로 스터디를 모집했기에 초기에 vce프로그램의 존재조차 몰랐어요 ㅋㅋ

때문에 처음에는 a4용지로 문제들을 인쇄하여 같이 공부하는 식으로 시작을 하다가 acsap프로젝트를 만들어서 공유해드렸습니다. 그러다보니 vce프로그램이 있다는것을 알게되었습니다ㅎㅎㅎ 사람들 생각하는건 다 비슷한가봐요.

암튼 중요한건 막상 만들고 보니, vce프로그램보다 acsap어플리케이션이 더욱 좋았습니다.

vce는 exe프로그램입니다. 컴퓨터환경에서 동작하죠. 하지만 acsap는 웹기반 어플리케이션이라 모든 기기에서 공부가 가능했습니다. 저희는 국비과정을 병행하기에 제가 여러번 스터디원분들께 학원에서는 수업에 집중하고 자격증공부는 출퇴근시간에 acsap로 공부하라고 수차례 강조드렸습니다. 저역시도 자격증 공부의 90퍼센트는 출퇴근시간에 공부하였습니다.
vce는 틀린문제만 다시 확인하게 해주는 기능이 있긴 하지만, 자주 틀리는 문제를 따로 담을 수 있는 오답노트 기능이 없었습니다. acsap는 초기설계부터 오답노트기능을 만들었어요.
스터디를 하다보니 문제에 대한 키워드를 정하는 방식이 굉장히 효과적이었습니다. 근데 저희 스터디에는 어플리케이션의 운영자가 팀원이잖아요? 그래서 바로 개발해드렸습니다. 문제량이 400개가 넘었어서 공부할수록 정말 혼란스러운데, 키워드기능을 정말 좋아하셨습니다. vce프로그램은 키워드 기능이 없습니다.
1번에서 말씀드렸듯이 모바일이나 태블릿으로 출퇴근 시간에 공부를 해야한다고 수차례 강조를 드렸습니다. vce는 휴대폰으로는 작동이 안되는걸로 아는데, 안드로이드버전은 있다고 하더라구요. 하지만 acsap는 아이폰 ios기기에서도 웹기반이기떄문에 브라우저만 동작하면 문제없이 동작을 합니다.

이러한 장점들로 뒤늦게 vce프로그램이 있다는 사실을 알게되었으나, 제가만든 acsap프로그램이 더욱 장점이 많았습니다 ㅎㅎㅎ

훈련기간이 끝나고 취직을 하신 몇 팀원분들도 추가 자격증 취득을 준비하신다고 재배포해달라고 요청하셨던 프로그램입니다.

어떤 구조로 동작합니까?

자잘한 프레임워크의 코드나 함수는 일일히 설명을 안드리겠습니다.

acsap 웹어플리케이션의 동작방식은 단순해요.

대부분의 데이터들을 브라우저 스토리지인 local storage에 저장하고 이 데이터를 자바스크립트가 가져와서 동적 렌더링을 해줍니다. 실제로 데스크탑 브라우저로 개발자도구를 키시면 확인가능하세요.

setting에서 json파일을 넣어주면 local strorage에 question_data와 answer_data를 json strinigify로 스트링으로 변환하여 넣어준다음 이걸 자바스크립트로 parsing해서 사용을 한답니다.

때문에 브라우저를 닫았다 켜도 도메인에 대한 영구적인 데이터가 남아있는 localStorage특성상 매번 따로 데이터를 설정해줄 필요가 없는거죠. 스터디 팀원분들에게도 문제데이터를 처음 입력만 해주고 이후로는 따로 설정해드린게 없었습니다.

또한 오류가생기면 setting에서 delete 데이터 버튼으로 어느정도 해결이 가능한겁니다. (모바일은 개발자도구를 못키기때문에 만들었어요)

소개 영상에는 안나온 기능들

테스트를 보던중에 브라우저를 닫거나, 다른 메뉴에 다녀와도 테스트 데이터가 남아있습니다. 지속적으로 계속 테스트를 보실 수 있어요.
키워드기능은 전역데이터로 저장되므로, 소개영상에서 나온 general questions뿐 아니라 semi test, 오답노트 등에서도 해당 문제에 저장한 키워드를 확인 가능해요.
현재 배포된 acsap는 한 기기에서의 한 브라우저단위로 데이터가 저장되어 다른 기기로 공부를 병행할경우 keyword데이터를 매번 새로 설정해줘야합니다. 실제로 사용하였던 acsap어플은 setting에서 bring put keyword data 버튼으로 키워드 데이터를 db에 저장 후, 다른 기기에서 import해서 데이터를 가져오는 방식으로 사용했습니다. (백엔드 db구축 필요)
question.json데이터 양식을 보시면 img url프로퍼티도 있으나 실제 코드에선 안썼습니다. 초반에 사용하게했는데 굳이 필요없을것같아서 걍 뺐어요. 필요하신분들은 github코드를 클론하셔서 이미지를 따로 외부스토리지같은곳에 저장하시고 url로 임포트하는 이미지 태그를 작성하셔서 사용하시면됩니다.
답변보기 버튼을 누르면 다음 문제로 넘어가도 답이 보이지만, 키워드는 다음 문제로 넘어갈때 자동으로 꺼집니다. 잘모르는 문제에대한 힌트같은 기능이라 꺼지게 만들었어요~
semi test를 보실경우 설정한 문제범위의 문제들이 랜덤으로 섞입니다.

현재 배포된 acsap프로젝트는 어떻게 사용하나요?

문제 데이터 넣기

acsap를 사용하시기 위해선 먼저 question.json데이터와 answer json데이터를 setting에서 넣어주어야합니다.

양식은 이렇습니다.

// question.json
[
  {
    "question_number": 1,
    "correct_answer_index": "A",
    "question_ko": "무찌는 처음 데려왔을 때 몸무게는 몇 kg이었습니까?",
    "question_en": "What was Muzzi's weight when he was first adopted?",
    "reference_link": null,
    "img_src": null,
    "etc": null
  },
  {
    "question_number": 2,
    "correct_answer_index": "A",
    "question_ko": "무찌의 가장 좋아하는 과일은 무엇입니까?",
    "question_en": "What is Muzzi's favorite fruit?",
    "reference_link": null,
    "img_src": null,
    "etc": null
  }
]

// answer.json
[
  {
    "content_ko": "3kg",
    "content_en": "3kg",
    "index_answer": "A",
    "etc": null,
    "question_number": 1
  },
  {
    "content_ko": "6kg",
    "content_en": "6kg",
    "index_answer": "B",
    "etc": null,
    "question_number": 1
  },
  {
    "content_ko": "9kg",
    "content_en": "9kg",
    "index_answer": "C",
    "etc": null,
    "question_number": 1
  },
  {
    "content_ko": "귤",
    "content_en": "tangerines",
    "index_answer": "A",
    "etc": null,
    "question_number": 2
  },
  {
    "content_ko": "사과",
    "content_en": "apple",
    "index_answer": "B",
    "etc": null,
    "question_number": 2
  },
  {
    "content_ko": "배",
    "content_en": "pear",
    "index_answer": "C",
    "etc": null,
    "question_number": 2
  }
 ]

이렇게 question.json파일과 answer.json파일을 제작하셔서 넣어주시면 됩니다.

저희 스터디는 처음 문제데이터가 pdf파일로 준비되어있어서 제가 python으로 급하게 코드를 짜서 json데이터를 만들었습니다.

question은 문제고, answer는 객관식 문제 보기입니다.

적절하게 문제데이터를 json파일로 만든 후, setting에서 업로드하셔서 사용하시면 됩니다.

초기 한번만 셋팅해놓으면 계속 사용가능하세요~

현재 배포된 acsap어플리케이션은 기본 데이터가 muzzi에 대한 퀴즈로 저장되어있는데요.

본인이 원하는 문제와 답변 json데이터를 setting에서 한번 입력해주시면 로컬스토리지에 저장되어 우선적으로 사용되기에 무찌문제는 안보이실거에요. 커스텀하실 수 있습니다.

유저 인증기능을 사용하고싶어요

현재 배포된 acsap에서는 유저가 기본 tester으로 설정하게 되어있는데요. 이 방식에서도 문제없이 사용가능하시나, 소개영상에서의 유저인증 기능을 원하시면 acsap의 깃허브 코드를 클론하셔서 배포하신 후 사용하시면 됩니다. 다만 백단과 데이터베이스를 필요로 하므로, 데이터베이스구축과 .env 시크릿은 알맞게 하셔야 합니다.

다른기기도 병행해서 사용하고싶어요. 키워드가 공유가 안되서 불편합니다!

키워드기능을 다른기기와 병행해서 쓰시고싶으시면 백엔드와 db가 있어야합니다. 때문에 따로 배포를 하시거나 로컬로 배포후 사설네트워크내에서 사용하시면 됩니다.

구축이 되셨으면 setting에서 두가지 버튼을 누르시면 현재기기의 키워드데이터를 db에 덮어쓰기하고 불러오기 가능합니다. 사실 더욱더 정교하게 하고싶었으나 당시에 교육과정과 자격증 준비를 병행하는중 만든 어플이라 제가 시간이 너무없었습니다 ㅠ

여러가지 기능들은 알아서 추가 삭제하시고 사용하시면 됩니다 ㅎㅎ

이렇게 하기 불편하시면, 그냥 로컬스토리지 키워드 데이터 스트링을 복사하신후 원하시는 기기의 로컬스토리지 값을 추가하시면 됩니다 ^^

어떤 trouble이 있었고 어떻게 해결하셨나요?

저비용으로 만든 프로그램이다보니 생긴 트러블인데요. 처음에는 백엔드단에서 바로 question data와, answer데이터를 api로 응답해주는 방식으로 설계했습니다. 하지만 월 5달러짜리 인스턴스이기에 400문항의 데이터를 스트링으로 한번에 넘겨주는데 인스턴스가 계속 폭파되었습니다 ㅠ 그래서 프론트엔드에서 데이터를 등록하는 방식으로 바꿨습니다. 때문에 setting이라는 메뉴가 따로 생긴겁니다.
프론트엔드에서 데이터를 입력하는 방식으로 바꿨으나, 초기에는 스트링을 복붙해서 입력하는 형식이었는데요. 말씀드렸듯이 데이터가 워낙 크다보니 붙여넣기 하는데에도 몇십초씩 기다리고 먹통이되어 question, answer데이터로 따로 나눠서 입력하게 바꿨습니다.
이렇게해도 데이터가 워낙 커서 복붙방식으로는 렉이 많이 걸리더라구요. 그래서 json파일자체를 임포트하는 현재 방식으로 최종적으로 바뀌었습니다.

Conclusion

매우 급하게 만든 프로젝트라 모달같은거도 따로 안만들고 alert나 prompt등 브라우저 기본기능을 사용하였어요(진짜 싫어함 ㅋㅋ)
코드도 정리가 잘 안되어있어서 부끄럽네요. 유저인증기능은 나 해킹해줘~정도로 단순합니다 ㅋㅋㅋ

하지만 acsap는 제가 처음으로 스터디를 하면서 개발을 접목시킨 프로젝트라 의미가 큽니다ㅎㅎㅎ
스터디원 분들도 전부 활용을 잘 해주셨어요. 때문에 고민없이 프로젝트로 등록을 하게 되었습니다.

또한 스터디를 진행하면서 팀장으로써 어떤 자세로 팀을 이끌어가야하는지 많이 배운 경험이기도 했었습니다.

긴 포스팅 읽어주셔서 감사합니다~

공부하는데 내가 가진 철학? 같은거

부엉이사장 — Wed, 8 Jan 2025 23:15:47 +0900

Introduction

예전에는 난 뭐 프로그래밍에 프 자도 몰랐던 시절에 적었던 글인데, 자료를 뒤지다보니까 떠서 포스팅해봄ㅋㅋ
옛날부터 공부는 안하고 철학? 이런게 관심이 많았음.
그래서 보헤미안에 대해서 알게되었었따.

보헤미안과 브루주아 두가지 사상에 대해서 책을 읽었었는데, 뭐 당연히 타이틀만 봐도 서양철학이다. 이 글은 동양철학중 하나인 장자와 보헤미안을 짬뽕해서 쓴 글이었음.
한 10년전에 적은 글같은데 기억이 정확히는 안난다 ㅋㅋ

사실 지금까지 코딩을 하는데 진짜 그지같이 지냈다. 누가보기엔 실패한 인생이라고 할거다.. 혼자서 공부하니까 애초에 사람을 안만나기도 했는데, 뭐 그냥 팩트는 사람들은 남의 인생에 관심이없다 ㅋㅋ
암튼 주말 편의점알바를 하면서 한달벌어서 생활비로 쓰고 이런 하루살이? 같은 패턴으로 살았었따.
뭐 보통사람들은 주변사람들을 많이 의식하니까.. 이런게 불행한 삶이라고 생각하겠지만 난 이런 철학에 관심있던 어린시절덕분에 약간 멘탈이 우울하지 않았던것같다. 물론 무찌랑 지내면서 너무 행복하기도 했었음. 코딩도 솔찍히 시간가는줄 모르게 재밋음 ㅋㅋ

암튼 최근에 인터넷글을 보고 알게됐는데 일론머스크가 사업을 시작할때 썰이라고 봤는데
아버지가 사업을 엄청 반대했단다. 그래서 일론머스크 스스로 딱 몇개월동안 사업하면서 최소한으로 돈을 써보자! 하고 하루 1달러로 지내보는걸 테스트해봤단다. 이렇게 지내는게 도저히 못버티겠으면 사업접자 하고 시작했단다. 하루 1달러니까 오렌지랑 빵 대용량사서 처묵처묵하면서 진행해봤는데 나름 살만해서 사업을 시작했다고 한다. 뭐 구라도 좀 있겠지만 약간 이런 가난하더라도 행복할 수 있는? 그런 개념이 보헤미아이다.

나도 사실 하루 1달러보다는 훨씬 더 쓰지만 계속 사업하고 코딩하고 집안에 처박혀 지내면서 이 보헤미안 철학이 나름 도움이 된거같음.
그리고 생각보다 인간의 생명력은 질기고 대한민국이 복지가 좋아서 이렇게 존버타는게 나름 할만하다.(사회적으론 개암이긴할테지만.) 근데 사람들이 못버티고 도전도차 하지 않는건 하도 우리 어릴때부터 성공한인생, 패배한인생 ㅈ된인생 이런개념들을 주변에서 귀에 너무 때려박아서 인거같음..

암튼 나처럼 그지같이 바퀴벌레처럼(취업타이틀을 바퀴벌레 개발자도 생각해봤음 ㅋㅋ) 살면서 도전하는 사람들에게 이런 철학이 있으면 도움이 될것같아서 포스팅해본다.
그리고 내 다른 포스팅들은 전부 초딩이 쓴것같은데 ㅋㅋ 나도 맘먹으면 이런 글 쓸 수 있다는 나름 반전? 같은거 보여주고 싶기도 함 ㅋㅋㅋ

시작하면서.

약 230년 전, 애덤스미스(경제학의 대가)는 '보이지 않는 손'(1) 의 용어를 통해 현대사회의 시장구조를 제시했다. 생산자가 소비자의 수요를 만족시키기 위해 움직이도록 하는 이 경제론은 자유민주주의 국가에서 개인의 경제활동의 자유를 보장한다는 기본적인 사상이 담겨있음과 동시에 이러한 국가에서 시장구조가 유지될 수 있는 방향성을 제시한다.
이 이론은 이름에서부터 알 수 있듯이 보이지 않는 손, 즉 인간의 욕심이 인간 스스로에게 간접적인 압력을 가한다. 하지만 인간의 욕심의 무한함과 그에 따른 불만족의 구조는 이 개념에서 다루지 못하였고, 사회성을 갖는 동물인 인간에게 이러한 보이지 않는 손에 강요받는 '욕심'과 그 욕심의 실패에 따른 '좌절'은 현대사회에서의 크고 작은 문제로써 대두되었다. 이러한 현대사회의 가시적 성과(문명발달)에 감춰진 현대인들의 심적 불안의 이면은 장자철학이 요즘 들어 주목받는 이유이다.
장자는 개인 본인의 수양을 통해 세상사에서 상처받지 않을 수 있음을 제시한다. 필자는 개인적인 견해로써 무기 무용 무공을 '윤리적인 가치관'으로써 사회가 우리에게 강요한다고 생각했다. 하지만 장자는 이러한 개념을 도덕적으로 강요받는 것이 아닌 인간의 '방어체계'로써 세상을 더욱더 현명하게 보고, 다른 측면으론 '자기합리화'의 방향을 찾을 수 있도록 도와준다. 물론 나는 자기합리화가 부정적인 측면만 갖는다고 생각하지 않는다. '정의의 어머니는 자기합리화가 아니라 누가 말할 수 있는가?'(2) 라는 말도 있듯이 말이다. 심재를 통한 수양, 그로인한 좌망의 경지, 조철, 견독은 비로소 장자철학의 목표이다.

보헤미아

장자철학을 접하며 총괄적으로 얻을 수 있는 답변은 '욕심을 버려라'였다. 욕심은 단순한 물질에 대한 욕심뿐만 아니라 무지, 무공, 무기, 무고금 등 공과 지식, 심지어 자기 자신과 시간까지 잊으라고 말하고 있다. (물론 더욱더 자세하게 보면 우리에게 욕심이란 개념과 이 개념들은 다소 차이가 있을 수 있다. 하지만 본인은 己, 시간 등 또한 인간이 흔히 자신이 가지고 있는 '재산'으로써 세속적인 성격을 띠고 있다고 판단을 하였기 때문에 언급한다.) 장자는 욕심을 버림과 동시에 독자의 인생도 더 이상 불안함과 답답함에서 벗어날 수 있다고 말한다.
필자는 장자철학을 접하면서 과거에 읽었던 알랭드 보통의 '불안'(3) 이라는 책이 기억났다. 이 책은 본인이 심적으로 불안했던 20살 시절에 자주 가는 대형서점에서 당시의 불안한 마음과 일치했던 책 제목에 홀리듯이 구매 했던 책이다. 이 책에서는 서양철학의 분석적이고 진단하려는 성격을 드러내며 불안에대해 설명하였는데 불안의 원인을 사랑의 결핍, 물질주의, 능력주의, 불확실성 등으로 규정짓고 이에 따른 역사적인 해결방법으로 종교, 예술, 보헤미아 철학 등을 예로 들었다. 이중 본인인 가장 주목했던 부분은 '보헤미아'(4)이다.

보헤미아는 세속적인 것들에 개의치 않고 자유분방하게 사는 사람들을 칭한다. 이들은 가장 최소한으로 필요로 하는 욕구만 충당시킬 뿐, 그 이상의 인간의 저장본능(초과한 욕심)을 철저히 거부한다. 이들은 브루주아(5)의 개념과 반대성향을 띈다. (브루주아는 현대사회에서 가장 모범적인 모델이 되는 보헤미아와 상반되는 개념이다. )
이는 장자철학의 '외물','무용'과 상당히 유사한 개념을 갖는다. 이 책에서는 '약 30달러로 집짓기'(6) 등 다소 현실적으로 허무맹랑한 내용들을 소개하였는데 이러한 부분은 우리 인간의 삶의 최소욕구가 사실 너무 과장되어 있다는 것을 설명하고 싶었던 것 같다. 물론 이 글에 다 적지는 못하지만 극단적 보헤미안들의 사례들이 많았다.
필자는 상당한 불안함에 묻혀 허우적거릴 때 쯤, 이 책을 접했다. 물론 이 책에서 언급한 불안의 원인 부분이 내 불안에 담겨 있었겠지만 보헤미아 철학은 이 모든 것들을 아울렀고 본인은 부분적 보헤미안으로써 삶을 살고 있다.
장자철학 또한 이러한 보헤미아 철학과 유사하다. 보헤미안들은 단순히 물질적인 욕망을 무시하는 것뿐만 아니라 숲에서 술과 유희, 유락을 즐긴다. 책에서는 보헤미안들이 나체로 자유롭게 포도주를 마시는 그림(7)이 삽화되어있다. 그들은 가난하게 지내며 다양한 창작활동을 겸한다. 그들에게 대비해야할 미래는 너무나 가까이 있는 미래뿐이다.
이러한 특성들은 장자의 삶이 가난했지만 자유롭게 글을 쓰던 모습과 자연스럽게 일치했다. 장자철학과 보헤미아는 모두 그들이 게으르다는 것을 의미하지 않는다. 누군가는 이러한 철학을 가지며 사는 사람들을 게으르고 발전 없는 사람으로 따가운 시선을 보낼지 모르겠으나, 게으름과 이러한 철학들은 차이가 있다. 장자는 대붕의 우화처럼 끊임없이 시련을 극복하는 모델을 이상적으로 삼았고, 보헤미아 또한 그들은 마냥 노는 것이 아닌 창작활동을 겸하는 경우가 많다. 그들은 세속적인 욕심을 이상점을 향하는 길에서의 원료로 사용하지 않는다.
또한 욕심을 버린다는 것은 단순히 자기반성적인 성격을 띠지 않는다. 글의 초반에서도 언급했듯이 이 욕심은 사회에서 나에게 가지도록 강요한 욕심이기 때문이다. 본인이 장자철학을 접하며 느낀 것은 장자는 이러한 세속적인 사회를 비웃는 듯이 우화를 써내려갔지만 그는 이러한 욕심을 갖는 시발점을 비웃지는 않는다. 때문에 그는 끝없이 심재하며, 좌망의 경지로 다가갈 수 있도록 수양하는 것을 가르쳐왔다. 어떻게 보면 이것은 장자, 그 또한 이러한 세속적인 욕심을 가졌던 시발점을 가졌었기 때문이 아닐까?

(6) Alain De Botton, 정영목 옮김 『Status Anxiety』, 「BOHEMIA」, 은행나무, 2011, p275 28.12달러로 집짓기.

(7) Picnic:Nusch and Paul Eluard,Lee Miller, Man Ray, and Ady Fidelin Île Sainte-Marguerite,Cannes,France,1937. photo by Roland Penrose [see also:] via Поль Элюар -알랭드 보통 『Status Anxiet y』,에 삽화된 사진이다

천균

중학교 1학년 당시, 본인은 [설득하는 글쓰기]라는 국어 수업을 학교에서 받은 경험이 있다. 이 당시에 어떤 토론주제에 대해서 개인의 생각을 주장, 설득하는 글을 쓰는 것이었는데, 대게는 이 주제에 대해서 찬성과 반대파가 나뉘었었다. 하지만 본인은 이 글 쓰기 당시 찬성과 반대하는 의견들을 서로 중용하여 중간점을 찾으려고 노력했었다. 그리고 이 완성후 글을 제출한 나는 낮은 점수를 받았었다. 궁금한 마음에 선생님께 왜 점수가 이렇게 낮은지에 대하여 이의를 제기했었는데 선생님의 대답은 “찬성과 반대중 하나를 골라야지 양측 의견을 반반씩 수용하면 설득력이 떨어진다.”였다. 본인은 그래도 이것은 해결책이 될 수 있고 양측이 서로 양보하면 가능한 방법이 아니냐고 반박하였으나 선생님은 끝내 내 이의제기를 받아들이지 않으셨다.
이러한 경우는 크고 작은 사회에서 빈번히 발생하는 경우이다. 본인의 위치에서 반대파에게 조금이라도 양보하여 중용책을 제시하면 손해를 보게 된다. 때문에 사람들은 본인의 주장에서 절대 작은 부분 또한 양보하지 않으며 대립구도를 결성하는 것이 보통의 사회현상이다.
장자는 "천예에 의해 조화시키고 만연에 맡기라." 라고 하였다. 그는 완벽한 옳고 그름은 없다고 말한다. 또한 장자는 원숭이 이야기(조삼모사)와 황희와 머슴의 이야기에서 얘기하듯이 '천균', 즉 양가적 입장을 설명한다. 이는 이분법적 사고를 타파하여 상대도 옳고 나도 옳다는 장자철학의 개념인데 현대인들의 이분법적인 흑백논리에 빠진 상황에 대한 방향을 제시한다.
예시로써 법원의 국민참여재판(8)의 경우 제 3자의 객관적인 판단을 최종판결에 참고로써 사용한다. 피의자와 피해자, 죄의 유무와 경중을 최종판단하는 법원의 역할이 최대한 객관적이기 위해 도입한 제도가 아닌가?
배심원들과 판사는 최대한 객관적으로 '도추'의 자리에 서야한다. 때문에 배심원들은 무작위선정으로써 사회각기분야의 사람들을 초빙하는데 이는 그들에게 편견, 즉 성심의 영향을 최소화하기 위함이며 다수결의 원칙을 따르는 것 또한 혹시 모르는 편견의 역할을 최소화하기 위함이다. 도추의 자리에 서있는 자에게 흑백논리주장을 강요해서는 안 된다. 자신의 주장만 강요함으로써 해결책 없이 토론만 지속되거나, 누군가 더욱더 자극적으로 토론했느냐가 다수결 판단의 지시등이 되어 상대방의 의견을 묵살해버리는 것이 과연 옳은 것일까?

죽음에 대한 태도

장자의 죽음에 대한 태도는 초연하다. 보통의 죽음에 초연한 사람들에게 드러나는 종교적 성격도 띄지 않았다. 철학의 무게가 그를 초연하게 만든 것일까? 장자는 죽음을 단순히 기가 흩어지고 모이는 현상으로써 설명하고, 왜 누구도 경험하지 못 한 죽음을 우리는 두려워 하고 슬퍼하는가 의문을 던진다.
죽음은 인간에게 필사적으로(필사적이라는 말을 쓰는 것도 우습다.), 또는 본능적으로 피하려고 하는 대상이다. 하지만 죽음은 우리가 언젠가 마주칠 대상이며 인간의 노력으로써 변화시키는 것은 죽음과 만남의 시각밖에 없을 뿐이다. 장자의 '명'에 따른 안명론의 측면으로 보면 이것 또한 모순이다.

죽음에 대한 글을 쓰기에 앞서 필자는 죽음후의 세계를 두려워하는 사람들에게 앞으로 설명할 이 가설을 설명하고 싶다. 본인은 죽음에 대한 생각을 해 본적이 있다. 사실 이 가설의 시발점은 죽음과 관련이 없는 것이었고, 물리학도로써 시간에 대한 개념을 중요시 여기는 성격 때문에 수면과 시간을 연관 지어 생각해 본 적이 있다. 다소 철학적인 부분이 될 수도 있지만 본인은 최대한 현실적으로 가능한 개념을 도입했었다.
누구나 수면을 했을 때 아주 긴 시간을 경험했지만 현실은 짧은 시간이 흘러갔었고, 반대로 아주 짧은 시간을 꿈속에서 흘러 보냈는데 현실의 시간은 배로 흘러간 경험들이 있을 것이다. 이러한 꿈을 통한 시간의 조정은 ‘나의 눈‘(9)의 개념과 관련 있다. 만약 인간이 수동적으로 꿈의 시간을 수동적으로 조절할 수 있다면, 현실의 시간을 절약할 수 있을 것이고 이것은 제 n차 과학혁명일 것이다.
본인은 역으로 이러한 생각에서, 혹시 우리의 현실 세계가 꿈이 아닐까 하는 생각을 한 적이 있다. 우리는 모두 꿈을 꾸고 있는 것이며, 그 꿈의 세계를 공유하고 있다. 이는 장자의 호접몽과도 비슷한 개념을 갖는다. 또한 시간조절의 개념은 포함되지 않지만 이와 비슷한 개념은 영화 매트릭스의 '매트릭스 세계'(10)이다.
이러한 긍정적인 상상으로 미루어 암아 죽음은 결코 두려워 할 필요가 없다. 본인은 죽음이후의 인식이 비과학적인 이론으로써밖에 설명될 수밖에 없다는 인식을 지적한다. 죽음이후 상황의 모든 이론들이 누군가에겐 비현실적인 이론으로써 설명될 수밖에 없으며, 과학적인 죽음은 과학적으로 無가 됨을 주장하는 이론에 반론을 들고 싶었다. 따라서 우리는 현실적으로나 비현실적으로나 죽음이후의 세계를 알 수 없다.

열심히 설명한 것과는 무색하게 장자철학에서 죽음 후 사후세계가 어떠한 모습인지는 중요하지 않다. 장자에게 죽음은 우리에게 있어 흘러가는 사건일 뿐이다. 죽음과 그 후의 사후세계를 본능적인 두려움으로써 겁낼 필요는 없을 것이다. 장자가 죽음을 두려워하지 않는 가치관은 불확실성이 꼭 두려움과 비극, 슬픔과 연결되지는 않는다는 것을 설명한다. 필자 또한 죽음이 어떤 모습으로 본인 앞에 나타날지 모르고 아직 죽음과의 만남은 먼 훗날의 상황이라 생각하기 때문에 두렵지 않은 것일 수도 있으나, 현재로썬 죽음에 대해 장자철학에서 설명하는 태도와 유사한 태도를 갖고 있다.
죽음과 마주칠 때, 무한한 두려움과 공포에 빠질 것인가, 파블로 피카소(Pablo Picasso)(11)처럼 환영할 것인가가 중요한 것이 아니라, 우리에게 '죽음' 그 자체가 지나간다는 것이 중요하지 않을까?

"역사에 if는 없다."

장자는 공자와 맹자의 천명이라는 개념과 다르게 '명'의 개념을 사용하였다. 자신의 힘으로 바꿀 수 없는 세상의 흐름에 자신을 맡기고 편안히 머무른다는 '안명론'이다. 이는 숙명적인, 즉 운명이 정해져있다는 개념과는 다소 차이가 있다. 장자는 피할 수 없는 '명'에 의해 고통 받지 말고 받아들이는 자세를 권유한다. 또한 이는 단지 현재의 상황에 대한 장자철학으로 비춰질 수 있으나 이는 과거와 미래, 즉 삶의 전체에서 상통하는 개념이다.
부제목 "역사에 if는 없다."(12)는 역사학자 ＥＨ카의 발언이다. 이 발언은 역사는 이미 지난 것이며, 그것은 우리의 힘으로 바꿀 수 없으며 이미 지난 역사에 가정을 더해 현실에 좌절할 필요가 없다는 의미이다. 이는 지난 역사에서 배울 점을 찾지 말라는 뜻은 아니다. 단지 지난 과거에 대해 여러 가정을 개입시켜 한탄하는 역사학자들을 비꼬기 위한 발언이었다.
더하여 개인의 경험으로 봤을 때, 필자 또한 이러한 경우를 많이 겪었다. 중요한 시험을 앞두고 아프게 되어서 정말 열심히 준비한 시험을 망친 일, 힘들게 모았던 돈이 하루아침 실수로 사라진 일등, 여러 좌절을 부르는 사건사고를 겪은 적이 많았고 앞으로도 겪을 것이다. 하지만 이러한 사건들에 대해, 나의 힘으로 어쩔 수 없는, 없었던 일들에 대해 지속적인 고민을 하면 무슨 소용이 있을까? 나의 부모님의 문제, 나의 건강문제, 나의 우연히 마주쳤던 수많은 불행들 등, 많은 현재의 사건에 영향을 주는 피할 수 없던 일들. 이러한 문제들은 나를 낙담시킨 적도 많았으나 이러한 낙담에 파묻혀 지냈다면 현재의 나는 있을 수가 없었을 것이다.
현재 대한민국의 시국 또한 그렇다. 현재의 정세에 슬퍼하며, 과거에 가정을 삽입하며 아쉬워하는 국민들이 상당히 많다. 하지만 이미 지난 일은 역사가 되었고 이러한 사건을 과거로 돌아가서 슬퍼할 필요는 없는 것이다. 이 지나간 비극은 (신이 있다면)신을 제외한 누군가도 바꿀 수 없다.
이미 버스는 지나갔다. 지나간 버스를 향해 욕을 하든, 발길질을 하든 무슨 소용이 있겠는가.

풀밭 위의 점심 식사 [Le Déjeuner sur l'herbe]- 오르세 미술관 직접 촬영 사진 / 화면 전경에 옷을 입지 않은 상태로 그려진 여성은 신화에 등장하는 여신이나 님프가 아니라 동시대 여성인 빅토린 뫼랑(Victorine Louise Meurent, 1844-1927)이라는 것을 당시 관람자들은 불편해했고, 이 여성이 옷을 잘 갖춰 입은 부르주아 남성들-이들 역시 실존 인물들을 모델로 했다-과 함께 있는 것으로 묘사된 것에서는 부르주아의 위선을 지적당하는 것 같은 당혹감을 느꼈다. -네이버 지식백과

참고문헌 외 자료

Adam Smith 지음, 『An Inquiry into the Nature and Causes of the Wealth of Nations』,1776
Tr Try 지음, 『정의』, 2008
Alain De Botton 지음, 정영목 옮김 『Status Anxiety』, 은행나무, 2011
Tr Try 지음, 『Energy direction』, 2008
Keanu Reeves 감독, 『The Matrix』, 1999
Edward Hallett Carr, 역사학자, 『역사란 무엇인가』
보헤미아, 부르주아, 국민참여재판 -네이버 지식백과

git 활용 step 3rd-#2 / collaborator로 협업하기

부엉이사장 — Wed, 8 Jan 2025 00:01:55 +0900

Introduction

이번에는 collaborator로 협업하기 포스팅을 해보겠다.
협업하기 포스팅 fork에서는 각자의 깃허브 계정에 레포지토리를 fork로 복제해와서 pull request를 날리는 방식으로 협업을 했지만, collaborator는 한 레포지토리를 가지고 여러 팀원이 협업하는 방식이다.

때문에 fork보다 더욱더 직관적이고 이해하기는 더 쉬울듯?
암튼 할말 없어서 바로 시작해봄

이전 fork로 협업하기 포스팅처럼 이렇게 환경구성을 헀다.

모두 각자의 컴퓨터에서 협업을 하는 그림이기 때문에 무찌와 도리 모두 컴퓨터가 존재하다는 상황을 만들기위해 우분투 이미지로 VM을 팠고 각자의 github의 계정으로 로컬상에 로그인을 해둔 상태임

collaborator로 협업하기는 어떤 구조야?

보통은 팀장이 레포지토리를 하나 만든다.

그리고 각 멤버들은 해당 코드를 가지고 코딩을 한 후, push를 할 수 있다.

public레포지토리라도 본인 계정이 아니면 push권한은 없기때문에 push를 못하지만, collaborator로 멤버들을 초대하면, 멤버들은 해당 권한을 얻게된다.

이전 fork로 협업하기에서 private레포지토리를 fork해가기위해 강아지 개발자들을 collaborator로 초대한것도 같은맥락임..

해보자

나 팀장이다

프로젝트를 할 레포지토리를 colla-puppy-project라는 이름으로 만들었다.

이제 강아지 개발자들을 협력자로 초대하자.

setting탭을 누르고 collaborators라는 탭을 누른다. 그후 add people클릭

muzziworker를 검색해서 초대하자

무찌에게 초대장을 보냈다. 현제 초대가 pending상태라고 떠있음.

이제 무찌의 시점이다.

깃허브에 가니까 메세지가 와있다. 그럼 초대장이 와있는걸 확인가능하다.

팀장님이 초대를 줬다. 수락하자.

# 테스트를 해볼까?

무찌 컴퓨터에서 팀장님 레포지토리를 clone했다.

잘 받아온걸 확인함.

근데 clone은 퍼블릭 레포지토리면 누구나 가능하기때문에 이건 중요한게 아니다.

무찌는 직접 app.js파일을 수정했다. bowwow라는 코드를 추가하고 remote에 추가된 팀장님 레포지토리주소에 commit후 push했다.

push가 무사히 이뤄진걸 확인함.

실제로 팀장님의 레포지토리에 main브랜치로 직접적으로 push가 되었고 무찌가 커밋한 내용이 그대로 업데이트가 되었음.

원래 collaborator로 무찌가 초대가 안되었다면 상상도 못할일이다.

이렇게 한 레포지토리에 각 개발자가 접근권한이 생기고 코드를 업데이트할 수 있는게 바로 collaborator협업방식이다.

현재 코드 최신상태 업데이트하기

다시 팀장 nurd worker의 시점이다.

무찌가 이미 push를 한 상태이지만 팀장의 컴퓨터에서 해당 프로젝트 디렉토리는 무찌가 commit한 코드가 업데이트가 안된상태.

이럴때 업데이트를 하기 위해선 pull을 하면 된다

git pull <레포지토리주소> <브랜치>

이렇게 pull을 해오면 해당 레포지토리의 해당 브랜치상태가 업데이트 된다.

브랜치 자체가 전체적으로 공유되니까 사실 설명할게 별로 없는거같음.

무찌가 왜 main브랜치로 push하는데!

무찌는 아주 건방지기 때문에 팀장만이 다뤄야하는 main브랜치에 계속 push를 하고 있다. 이렇때 어떻게 제제를 할까?

레포지토리 admin을 제외한 나머지 collaborators들은 push를 할 수 없는 branch룰을 만들면 된다.

팀장은 해당 레포지토리의 setting을 들어가서 branches에서 add branch ruleset버튼을 클릭한다.

먼저 룰 이름을 정하자. 무찌를 막기위해 muzzi-stop이라는 이름으로 만들었다.

그리고 enforcement status를 active로 활성화해주자.

다음으로 add bypass버튼을 눌러서 repository admin을 선택한다. 그럼 role이 추가가 될거다.

아마 이 룰을 제한하지 않는 사용자? 방법같은 조건을 설정하는것같음.

repository admin을 선택한건 이 룰이 admin에게는 적용이 안된다는것이다.

main브랜치에 push할 수 있는건 이 레포지토리 주인인 nurd worker뿐이라는 뜻임.

스크롤을 내려서 target branch를 선택하자.

무찌가 main브랜치로 계속 push하므로 main브랜치에 이 룰을 적용한다는것.

include by pattern버튼을 클릭

main브랜치를 적어주고 add inclusion pattern버튼을 클릭.

참고로 패턴으로 했어서 조건식같이 적을수있다. 사진에 example이 나와있는데,

예를들어 dori라는 글자가 들어간 모든 브랜치에 push를 못하게 하려면 *dori*라는 패턴식을 입력해주면됨

그다음 룰을 정해주는데 push하지말라는거니까 update를 못하게 금지하면된다.

암튼 저거 하고 젤 아래 create 버튼 클릭하샘

# 테스트해보자

먼저 팀장이 test rule이라는 코드를 작성 한후, push를 했다.

잘 push 된걸 확인

그럼 무찌컴퓨터에서 push를 해보면?

무찌는 main브랜치로 push하는게 금지가 되어버렸다.

확인을 위해 muzzi-dev라는 브랜치를 만들어서 push를 해봤는데 이건 잘 되는걸 확인

이렇게 팀장은 제한을 할 수 있는거다.

pull request사용하기

난 fork로 협업할때만 pull request를 사용하는줄 알았는데 collaborator로 협업할때도 pull request를 사용할수 있더라?

해볼까?

위 상황에서 현재 muzzi-dev라는 브랜치에서 무찌가 코드를 업데이트 후, push를 해놨다.

브랜치룰을 또만들어보자~

팀장이 새로운 룰셋을 만들자. 이름은 걍 한글로 풀리퀘스트룰이라고 만들음

참고로 muzzi stop룰은 삭제해줬음.

타겟도 아까 룰이랑 똑같이하샘

룰은 저 require a pull request before merging을 체크하고

승인자수는 1, 코드 오너의 리뷰가 필요하다고 설정하자.

그리고 저장~

++ 추가해서 위에 무찌가 main브랜치로 push를 하는걸 금지하는 restrict update룰은 체크안하고 현재 pull request룰만 살려줘도 무찌는 main 브랜치에 push할 수 없다. 그냥 main브랜치가 변하려면 pull request가 있어야한다는 조건이라고 생각하면 댐

나도 몰랐던거라 테스트해봤는데 pull request로만 merge하는 브랜치라고 push자체가 안됐음.

두 조건 다 만들려면 지금 이 룰셋대로만 하면됨. restrict update도 같이하면 충돌나니까 걍 풀리퀘스트룰만 만드샘.

테스트 해보자~

일단 테스트를 위해서 걍 first commit으로 리셋했음.

무찌시점이다.

무찌가 muzzi-dev에 수정한 코드를 commit후, muzzi-dev 브랜치에 push 하였다.

muzzi-dev브랜치에 해당 커밋이 잘 올라왔다.

이제 무찌가 깃허브에서 pull request를 생성하자.

무찌는 main브랜치에 직접 push할 수 없으니 자기가 짠 코드가 있는 muzzi-dev브랜치 코드를 main에 merge해달라고 pull request를 보내는거다.

검토후 pull request ㄱㄱ

대충 적고 풀리퀘스트를 생성해주자

거부가 되었다. 리뷰어의 승인이 필요하다고 한다.

이제 팀장 시점이다. 해당 pull request를 확인해보자.

브랜치를 로컬에 가져와서 테스트는 해봤다고 가정하고.. 일단 코드가 맘에든다.

review를 추가해보자.

리뷰 내용을 적어주고 승인(approve)을 해주자

팀장님의 칭찬과함께 초록색체크표시가 빰빰하게 떴다.

팀장은 저 아래 merge pull request버튼을 눌러 최종적으로

이렇게 merge를 하자

무찌의 시점에서 무찌계정에 메세지가 와있었고 팀장님이 승인했다고 잘 떴다가

팀장님이 merge를 confirm하는순간

이렇게 된다.

암튼 이렇게 pull request로도 작업이 가능하다.

++ 추가해서 pr보내세요~ 막 이러는게 pull request라는걸 방금 코딩하다보니 알게되었다.. 소름 ㄷㄷ

collaborator에서 중요한건 뭘까?

fork에서 작업할때는 내가 내맘대로 설정한 협업방식에선 각각 개발자들이 본인 레포지토리 main브랜치를 기준으로 코딩을 하고 팀장 레포의 특정브랜치로 pull requet를 보낼 수 있었다.

때문에 초기 설정이 좀 복잡하고 코드 최신상태를 가져오는게 좀 짜쳤지만서도..

대신에 본인 레포에서 브랜치관리는 비교적 자유로운 느낌이었다.

하지만 collaborator로 협업할때는 한 레포지토리를 여러 개발자가 접근하니까 브랜치 작명, 및 운영이 굉장히 중요할것 같다는 느낌이 든다..

때문에 브랜치 네이밍 규칙 등을 만들어서 puppy world프로젝트를 진행해볼까?

시작하기에 앞서, 브랜치 종류 소개

main : 가장 중심이 되는 브랜치로 배포버전을 여기에 push merge함
develop : 개발할때 중심이 되는 브랜치
feature : 특정 기능을 개발할떄 만드는 브랜치
release : develop브랜치를 최종적으로 테스트하고 main 브랜치에 push하는 브랜치
hotfix : 중간에 버그가생긴걸 고치려고 만드는 브랜치. 버그고치고 develop과 main브랜치에 merge

이렇게 브랜치들을 만들건데 이건 git flow전략에서 브랜치 종류를 정리한거다.

대충 내가 이해한대로 짧게 적었는데, 여기서 주저리주저리 안적고 아래에 직접 해보면서 차근차근 해보면서 이해해보자.

# 환경셋팅

팀장인 nurd worker는 새로운 레포지토리를 팠다. puppy-project

위에 방법대로 collaborator들로 muzzi, dori개발자분들을 초대했고, main브랜치에 pull request룰을 만들어놨다.

그리고 각 개발자들이 로컬 디렉토리에 해당 프로젝트를 가져왔다.

main브랜치와 develop브랜치

현재 팀장인 nurd worker는 main브랜치가 있는 상태에서 develop브랜치를 만들었다.

구성도는 이렇다. 팀장을 포함한 모든 개발자는 모두 개발을 한 코드들을 develop브랜치에 merge한다.

develop브랜치의 커밋이 잘 동작되는지 확인 후(이건 release 브랜치를 하는데, 좀따설명)

잘 동작된다면 팀장은 최종적으로 develop브랜치의 커밋이 main브랜치에 merge한다.

화살표 끝에 aws가 있는건, 인프라단에 cicd가 구성되어있으면 develop브랜치는 테스트용 인프라, main브랜치는 현재 배포된 인프라에 배포되는걸 표현하는거임. 브랜치에다가 각 인프라 cicd를 붙여주면됨

암튼 현재 app.js파일에 welcome코드가 있는 상태로 first commit이 복사되었다.

기능개발을 해볼까? feature브랜치

팀장님이 무찌에게 user기능을 만들라고 시켰다.

무찌는 user.js라는 파일을 만들고, 거기에 코드를 적어넣었다.

그리고 commit후에 push를 하였다.

레포지토리의 feature/user이라는 브랜치가 잘 push되었고, user.js라는 파일이 생겼다.

현재 이런 상태이다. 무찌가 feature/user이라는 브랜치를 만들었고, user.js라는 파일을 추가했다.

그리고 user feature finish라는 커밋을 헀다.

이제 팀장님이 이 기능을 로컬에서 테스트해보자

테스트를 해보니 맘에드셨다. 따라서 무찌의 feature/user 브랜치를 develop 브랜치에 merge하였다.

그리고 레포지토리의 develop브랜치에 push했다.

레포지토리를 확인하니 user.js파일이 제대로 올라왔다.

무찌의 user feature finish라는 커밋이 develop브랜치에 merge되었다.

때문에 현재 develop브랜치의 최종커밋은 user.js파일이 있는 상태이다.

도리가 코드를 더 수정하고싶대! feature

팀장님은 무찌의 user기능이 맘에들어서 develop브랜치에 merge했다. 근데 도리는 무찌의 코드가 맘에 안든다. 때문에 무찌가 개발한 feature/user브랜치를 부모브랜치로 새로운 브랜치를 생성한다.

도리가 최신 업데이트 내용을 fetch하고 feature/user브랜치로 switch했다.

다시 새로운 기능을 개발할것이므로 feature/user_strong이라는 브랜치를 새로만든다.

기존 user기능이 단순하게 hello dog user라고하니까 너무 약해보여서 도리는 느낌표 두개를 더 붙여서 격히 환영하는 느낌의 코드로 수정을 헀다.

그리고 finish strong feature라는 커밋으로 레포지토리에 해당 브랜치 내용을 push하였다.

레포지토리도 이렇게 잘 push된걸 확인 가능.

현재는 이런상태이다. 도리가 feature/user_strong이라는 브랜치를 만들고

기존 feature/user브랜치 코드를 수정하였다.

이제 팀장님의 선택이 남았다.

팀장님은 도리의 코드도 맘에 들어서 develop브랜치에 merge후에 push하였다.

팀장님이 develop branch에 도리의 코드를 merge했으므로 최종적으로 도리의 최종커밋인 finish strong feature 커밋상태가 develop브랜치의 최종커밋이 된다.

드디어 강아지 개발자들과의 puppy 프로젝트가 완성되었다! 배포ㄱㄱ release브랜치

최종 도리의 commit인 finish strong feature을 가지고 만들거다.

팀장은 develop브랜치를 부모 브랜치로 해서 release/1.0.0브랜치를 만들자.

팀장은 releqse/1.0.0 브랜치로 switch한 후, 버전을 주석으로 입력하고 커밋한다.

release version 1.0.0 confirm이라는 커밋을 하였다.

그리고 레포지토리에 push하였다.

현재 이런 상태이다. 팀장은 release/1.0.0브랜치에서 최종 커밋을 하였다.

# 이제 배포를 위해 main브랜치에 pull request를 보내자~

잘 들어왔다. 이제 pull request를 만들자

깃허브 페이지에서 release/1.0.0브랜치를 main브랜치에 pull request하는걸 만들자.

잘 확인후 create pull request

엑스 뜨는건 룰셋 만들어놔서그럼..

강아지 개발자 muzzi가 승인.. 원래 이러면 안되는데..? pull request를 만든 사람은 리뷰를 작성 못하나보다. 무찌한테 시킬걸..

처음암. 암튼 중요한게 아니니 일단 mergeㄱㄱ

잘 됐다!

최종적으로 이렇게 깃 flow전략으로 1.0.0버전이 잘 배포가 되었다.

배포가 된 1.0.0버전에서 버그가 발견? / hotfix브랜치

배포되서 잘 굴러가던 우리 puppy project가 갑자기 버그가 발견되었따.

그래서 이걸 급하게 고쳐봐야한다.

이렇게 main브랜치의 1.0.0버전기준으로 hotfix/1.0.1브랜치를 만든다.

//main브랜치에서  자식브랜치 hot fix생성
git branch hotfix/1.0.1
git switch hotfix/1.0.1

코드를 fix bug라는 주석을 추가하여 버그를 고쳤다 ㅋㅋㅋ

이제 fix bug / 1.0.1이라는 커밋을 해준다.

참고로 hot fix로 버그를 고치면 버전이 약간 상승된다.

hotfix브랜치 상태를 레포지토리에 push

잘 업데이트가 됐다.

현재 fix bug /1.0.1이라는 커밋을 만들어준상태임

# 이제 pull request를 날리자!

hotfix 브랜치에서 중요한건, main브랜치에서 hotfix브랜치를 만든다는 점과

버그수정 후, 단순히 main브랜치에 merge를 하는게 아니라, develop브랜치에도 merge해줘야 한다는게 중요하다!

이번엔 무찌계정으로 pull request를 해보자

먼저 main브랜치로 hotfix브랜치를 merge해달라는 pull request

그다음 develop브랜치로 merge해달라는 pull request

두개의 pull request를 만드는거

nurdworker시점으로 두개의 pull request가 와있다.

둘다 받아주자.

develop브랜치는 뭐 룰셋 안만든 브랜치라 처음부터 초록불

main브랜치는 룰셋 만든 브랜치라 빨간박스로 리뷰쓰라고 나옴

(사실 충돌났는데 당연히 한 파일에 주석추가해서 수정된거니..암튼 대충 해결하고 계속 진행 ㄱㄱ)

둘다 머지 잘해줬음

최종적으로 이렇게 급한불을 끄는 hotfix브랜치를 만들어서 버그를 수정할 수 있다.

최종 git flow 아키텍쳐

이런식으로 puppy project 1.0.1버전이 완성되었따..

Conclusion

깃 포스팅 시리즈는 참 설정할게 많았다..
뭔가 단순한거 같으면서도 협업이 필요하니까 막상 그림이 잘 안그려저서 직접 해보자고
vm파고.. 각자 계정 따로만들고.. 솔까 개고생이었음..
같은 전화번호로 계정 여러개만든다고 블럭먹기도 했음 ㅠㅠ
그림작업도 많아야하니까..참

암튼 fork와 collaborator로 협업하는 시나리오로 포스팅을 했는데,
딱 어떤 방법만 써야한다 이런게 아니라, 두가지 기능을 적제적소에 갖다넣어서 혼용하는게 중요할것같다.
팀장이 이런 협업설계를 하는것이 중요할것같음. 팀원이 알아먹는것보다도..

사실 뭐 내가 쓴 포스팅이 틀린점도 많을거다. 실제로 깃으로 제대로된 개발 협업을 해본경험이 없으니까말이다.
실제로 취업후에 직접 맞닥뜨리고 배우는게 가장 최선일것같음.
암튼 ㅅㄱ

개인코딩개발공장

데이터 검증하기 dto

LF CRLF문제

Team Project - Remember Me

Remember Me 링크

개발단 db 마이그레이션

1. 데이터 베이스 연결

2. 샘플데이터 넣기

3. bf디비에 테이블 설정 그대로 af테이블에 만들기

4. 데이터 순회하기

5. 마이그레이션 하기

Team Project - 아빠또갈까?

GREEN

ZOO

BLUE

애 얼굴

할아버지

아빠 + 아이들

엄마

Personal Project - MuzziCluster

Personal Project - NurdreamDek

NurdreamDek 링크

Personal Project - ACSAP

공부하는데 내가 가진 철학? 같은거

git 활용 step 3rd-#2 / collaborator로 협업하기