🚨 문제 상황

Flutter 앱에서 Firebase Authentication과 Firestore를 사용하고, 상태 관리로 Riverpod을 사용할 때 다음과 같은 문제가 발생했습니다.

로그아웃 후 동일한 계정으로 재로그인하면 "permission-denied" 오류가 발생하고, 앱을 완전히 종료했다가 다시 시작해야만 정상 작동함

[cloud_firestore/permission-denied] Missing or insufficient permissions.

🔍 원인 분석

1. Riverpod Provider의 캐싱 문제

Riverpod의 StreamProvider는 한 번 생성되면 내부적으로 Stream을 캐싱합니다. 로그아웃 시 Firebase Auth는 로그아웃 처리가 되지만, Provider가 구독하고 있던 이전 사용자의 Firestore Stream이 여전히 활성화되어 있습니다.

// ❌ 문제가 있는 코드
final childrenStreamProvider = StreamProvider<List<ChildData>>((ref) {
  final firestoreService = ref.watch(firestoreServiceProvider);
  return firestoreService.getChildren(); // 이전 사용자의 Stream이 캐싱됨
});

2. 타이밍 이슈

로그인 → 홈 화면 이동 과정에서:

1. Firebase Auth가 새 사용자로 로그인됨
2. 하지만 Provider는 아직 이전 상태를 유지
3. Firestore는 새 사용자 토큰으로 접근하려 하지만, 쿼리는 이전 사용자 기준
4. 권한 오류 발생!

✅ 해결 방법

핵심 아이디어: Provider가 Auth 상태 변화에 자동 반응하도록 만들기

authStateChangesProvider를 watch하면, 로그인/로그아웃 시 Provider가 자동으로 재생성됩니다.

Step 1: Auth State Provider 확인

먼저 authStateChangesProvider가 정의되어 있는지 확인합니다.

// lib/core/providers/auth_providers.dart

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

/// Firebase Auth 상태 변화를 감지하는 StreamProvider
final authStateChangesProvider = StreamProvider<User?>((ref) {
  return FirebaseAuth.instance.authStateChanges();
});

Step 2: Firestore StreamProvider가 Auth 상태를 Watch하도록 수정

// lib/core/providers/children_provider.dart

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'auth_providers.dart'; // authStateChangesProvider import

/// 아동 목록을 Firebase에서 실시간으로 가져오는 Stream Provider
/// ✅ auth 상태가 변경되면 자동으로 다시 구독함
final childrenStreamProvider = StreamProvider<List<ChildData>>((ref) {
  // 🔑 핵심: auth 상태를 watch하여 로그인/로그아웃 시 자동으로 provider 재생성
  final authState = ref.watch(authStateChangesProvider);

  return authState.when(
    data: (user) {
      if (user == null) {
        // 로그인하지 않은 경우 빈 리스트 반환
        return Stream.value(<ChildData>[]);
      }
      // 로그인한 경우 Firestore에서 데이터 가져오기
      final firestoreService = ref.watch(firestoreServiceProvider);
      return firestoreService.getChildren().map((childrenData) {
        return childrenData
            .map(ChildDataConverter.fromFirestore)
            .where((child) => !child.isDeleted)
            .toList();
      });
    },
    loading: () => Stream.value(<ChildData>[]),
    error: (_, __) => Stream.value(<ChildData>[]),
  );
});

Step 3: UI에서 StreamProvider 직접 사용

StateNotifierProvider를 거치지 않고 StreamProvider를 직접 watch하면 더 반응적으로 동작합니다.

// lib/views/home/pages/child_list_page.dart

@override
Widget build(BuildContext context) {
  // ✅ childrenStreamProvider를 직접 사용하여 auth 상태 변화에 자동 반응
  final childrenAsync = ref.watch(childrenStreamProvider);

  return childrenAsync.when(
    loading: () => const Center(child: CircularProgressIndicator()),
    error: (error, stack) => Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Icon(Icons.error_outline, size: 48, color: Colors.red),
          const SizedBox(height: 16),
          Text('데이터 로드 실패: $error'),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () => ref.invalidate(childrenStreamProvider),
            child: const Text('다시 시도'),
          ),
        ],
      ),
    ),
    data: (children) => _buildContent(context, children),
  );
}

Step 4: (선택) 로그아웃 시 Provider 명시적 무효화

추가적인 안전장치로 로그아웃 시 Provider를 명시적으로 무효화할 수 있습니다.

// lib/views/settings/settings_screen.dart

Future<void> _handleLogout(BuildContext context, WidgetRef ref) async {
  // ✅ 로그아웃 전에 Provider 무효화 (순서 중요!)
  ref.invalidate(firestoreServiceProvider);
  ref.invalidate(childrenStreamProvider);

  // 이제 로그아웃
  final authController = ref.read(authControllerProvider.notifier);
  await authController.signOut();

  if (context.mounted) {
    context.go('/login');
  }
}

🎯 핵심 포인트 정리

📊 Before vs After

❌ Before (문제 있는 구조)

로그아웃 → 로그인 → 홈 화면
              ↓
    Provider: 이전 사용자 Stream 유지
              ↓
    Firestore: "permission-denied" 💥

✅ After (해결된 구조)

로그아웃 → (Provider invalidate) → 로그인 → 홈 화면
                                      ↓
                          authStateChangesProvider 변화 감지
                                      ↓
                          childrenStreamProvider 자동 재생성
                                      ↓
                          새 사용자 기준 Firestore 쿼리 ✅

🔑 결론

Riverpod + Firebase 조합에서 인증 상태 변화에 반응하는 Provider를 만드는 것이 핵심입니다.

1. authStateChangesProvider를 watch하면 로그인/로그아웃 시 자동으로 Provider가 재생성됩니다.
2. StreamProvider를 직접 사용하면 더 반응적으로 동작합니다.
3. 로그아웃 시 ref.invalidate()를 로그아웃 전에 호출하면 더 안전합니다.

이 패턴을 적용하면 앱을 재시작하지 않아도 재로그인 시 정상적으로 데이터를 불러올 수 있습니다! 🎉

📚 참고 자료

• Riverpod 공식 문서 - Provider Lifecycle
• Firebase Auth - Auth State Changes
• Flutter Riverpod - Combining Providers

안녕하세요! 오늘은 Git 워크플로우의 품질과 보안을 한 단계 끌어올릴 수 있는 강력한 도구, husky에 대해 이야기해보려고 합니다. 코드 리뷰에서 반복적으로 지적되는 문제들을 사전에 방지하고, 팀의 코딩 규칙을 자동으로 강제할 수 있다면 얼마나 좋을까요? husky가 바로 그 해답입니다.

Husky란 무엇인가?

Husky는 Git hook을 쉽게 관리하고 공유할 수 있게 해주는 npm 패키지입니다. Git hook이란 Git의 특정 이벤트(커밋, 푸시 등)가 발생했을 때 자동으로 실행되는 스크립트를 의미합니다. 예를 들어 코드를 커밋하기 직전에 자동으로 린트 검사를 실행하거나, 푸시하기 전에 테스트를 돌려볼 수 있습니다.

기본적으로 Git hook은 .git/hooks 디렉토리에 저장되는데, 이 디렉토리는 Git 저장소에 포함되지 않습니다. 즉, 각 개발자가 로컬 환경에서 개별적으로 설정해야 한다는 뜻이죠. 여기서 husky의 진가가 드러납니다. husky는 Git의 core.hooksPath 설정을 활용하여 hook 설정을 프로젝트에 포함시켜 모든 팀원이 동일한 규칙을 적용받을 수 있게 만들어줍니다.

최신 버전인 husky v9는 설정이 더욱 간소화되었고, 성능도 크게 개선되었습니다. 단 2KB의 매우 가벼운 크기로 zero-dependency로 동작하며, 약 1ms 만에 실행됩니다. 이전 버전과 비교해 불필요한 래퍼 코드가 제거되어 설치와 사용이 훨씬 직관적입니다.

왜 Husky를 사용해야 할까?

실제 개발 현장에서 husky가 필요한 이유를 구체적으로 살펴보겠습니다.

첫째, 보안 문제를 사전에 차단할 수 있습니다. 개발하다 보면 실수로 API 키, 비밀번호, 인증 토큰 등 민감한 정보를 커밋할 위험이 있습니다. husky를 통해 pre-commit 단계에서 이러한 민감 정보를 자동으로 감지하고 차단할 수 있습니다. 한 번 원격 저장소에 푸시된 비밀 정보는 Git 히스토리에 영구적으로 남기 때문에, 이를 사전에 방지하는 것이 매우 중요합니다.

둘째, 코드 품질을 일관되게 유지할 수 있습니다. ESLint, Prettier 같은 도구를 수동으로 실행하는 것은 번거롭고, 깜빡하기 쉽습니다. husky를 사용하면 커밋할 때마다 자동으로 린트 검사와 포맷팅이 실행되어, 코드베이스의 일관성을 자연스럽게 유지할 수 있습니다.

셋째, CI/CD 파이프라인의 부담을 줄여줍니다. 로컬에서 기본적인 검증을 마치고 푸시하면, 원격 CI에서 실패하는 경우가 줄어듭니다. 이는 빌드 시간과 리소스를 절약하고, 개발 속도를 높이는 데 기여합니다.

넷째, 커밋 메시지의 품질을 강제할 수 있습니다. Conventional Commits 같은 규칙을 적용하여 커밋 히스토리를 읽기 쉽게 만들고, 자동화된 체인지로그 생성이나 시맨틱 버저닝을 가능하게 합니다.

Husky 세팅하기

최신 husky v9 버전을 기준으로 설정하는 방법을 단계별로 살펴보겠습니다. 이 과정은 프로젝트 관리자가 최초 1회만 수행하면 됩니다.

1단계: Husky 설치

먼저 프로젝트에 husky를 개발 의존성으로 설치합니다.

npm install --save-dev husky

프로젝트가 이미 Git 저장소로 초기화되어 있어야 합니다. 만약 Git이 초기화되지 않았다면 git init을 먼저 실행하세요.

2단계: Husky 초기화

husky를 초기화하면 필요한 디렉토리 구조와 기본 설정이 자동으로 생성됩니다.

npx husky init

이 명령어는 다음 작업들을 수행합니다:

• .husky 디렉토리를 생성합니다
• 기본 pre-commit hook 예제 파일을 생성합니다
• package.json의 scripts에 "prepare": "husky" 스크립트를 추가합니다
• Git의 core.hooksPath를 .husky로 설정합니다

prepare 스크립트는 다른 개발자가 npm install을 실행할 때 자동으로 husky를 설정하도록 보장합니다. 이것이 팀원 간 설정 공유의 핵심입니다.

3단계: 실용적인 Hook 설정

이제 실제로 유용한 hook들을 설정해보겠습니다. 보안과 코드 품질을 모두 고려한 실무 중심의 설정을 구성하겠습니다.

Pre-commit Hook 설정

npx husky init을 실행하면 .husky/pre-commit 파일이 생성됩니다. v9에서는 더 이상 shebang이나 husky.sh를 참조할 필요가 없습니다. 파일을 다음과 같이 수정하세요:

# 린트 검사 (v9에서는 npx 없이 직접 실행 가능 - 약 0.2초 더 빠름)
npm run lint

# 타입 체크 (TypeScript 프로젝트인 경우)
npm run type-check

# 변경된 파일만 검사하려면 lint-staged 사용
npx lint-staged

중요: Husky v9에서는 #!/usr/bin/env sh나 . "$(dirname -- "$0")/_/husky.sh" 같은 코드가 deprecated되었습니다. 이런 코드는 제거해야 합니다. 파일에 실행할 명령어만 직접 작성하면 됩니다.

Commit-msg Hook 설정

커밋 메시지의 형식을 검증하는 hook을 추가하려면 직접 파일을 생성하거나 echo 명령어를 사용합니다. v9에서는 npx husky add 명령어가 제거되었으므로 다음 방법을 사용하세요:

# 방법 1: echo 명령어 사용 (권장)
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

# 방법 2: 직접 파일 생성
# .husky/commit-msg 파일을 생성하고 다음 내용을 입력

.husky/commit-msg 파일 내용:

npx --no -- commitlint --edit $1

이를 위해 commitlint도 설치해야 합니다:

npm install --save-dev @commitlint/cli @commitlint/config-conventional

프로젝트 루트에 commitlint.config.js 파일을 생성합니다:

// commitlint.config.js
export default {
  extends: ['@commitlint/config-conventional'],
  rules: {
    // 커스텀 규칙 추가 가능
    'type-enum': [
      2,
      'always',
      [
        'feat',     // 새로운 기능
        'fix',      // 버그 수정
        'docs',     // 문서 변경
        'style',    // 코드 포맷팅
        'refactor', // 리팩토링
        'perf',     // 성능 개선
        'test',     // 테스트 추가/수정
        'chore',    // 빌드 프로세스, 도구 변경
        'security'  // 보안 관련 변경
      ]
    ],
    'subject-case': [2, 'never', ['upper-case']]
  }
};

Pre-push Hook 설정

푸시하기 전에 테스트를 실행하는 것도 좋은 습관입니다:

echo "npm test" > .husky/pre-push

4단계: lint-staged 설정

변경된 파일만 검사하여 속도를 높이려면 lint-staged를 사용합니다:

npm install --save-dev lint-staged

package.json에 설정을 추가합니다:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,yml,yaml}": [
      "prettier --write"
    ]
  }
}

5단계: 보안 강화 설정

민감 정보 유출 방지를 위해 추가적인 검사를 .husky/pre-commit에 추가합니다:

# 변경된 파일만 검사 (lint-staged 사용)
npx lint-staged

# 환경 변수 파일이 커밋되지 않도록 검사
if git diff --cached --name-only | grep -qE "^\.env$|^\.env\."; then
  echo "❌ Error: .env files should not be committed!"
  echo "Please remove .env files from staging area."
  exit 1
fi

# 민감한 정보 패턴 검사 (선택적)
if git diff --cached | grep -qE "(password|secret|api[_-]?key|private[_-]?key|token)\s*[:=]"; then
  echo "⚠️  Warning: Possible sensitive information detected!"
  echo "Please review your changes carefully."
  exit 1
fi

추가 보안 도구 (선택사항):

더 강력한 보안 검사를 원한다면 gitleaks를 사용할 수 있습니다:

npm install --save-dev @gitleaks/gitleaks

.husky/pre-commit에 추가:

npx gitleaks protect --staged --verbose

관리자 입장에서의 사용 방법

프로젝트 관리자로서 husky를 도입하고 관리할 때는 몇 가지 중요한 원칙을 따라야 합니다.

명확한 문서화

팀원들이 husky의 목적과 동작 방식을 이해할 수 있도록 README.md에 명확히 문서화하세요. 특히 hook이 실패했을 때 어떻게 대처해야 하는지, 정당한 이유로 hook을 우회해야 할 때는 어떻게 하는지 설명해야 합니다.

## Git Hooks (Husky v9)

이 프로젝트는 코드 품질과 보안을 위해 Git hook을 사용합니다.

### 설정된 Hook들

- **pre-commit**: 린트, 포맷팅, 타입 체크 실행 및 민감 정보 검사
- **commit-msg**: 커밋 메시지 형식 검증 (Conventional Commits)
- **pre-push**: 전체 테스트 스위트 실행

### Hook 우회하기 (긴급한 경우만)

정말 긴급한 상황에서만 다음 방법을 사용하세요:

```bash
# 단일 커밋에만 적용
git commit --no-verify -m "hotfix: critical security patch"

# 또는 환경 변수 사용
HUSKY=0 git commit -m "hotfix: critical security patch"

단, 이는 정말 필요한 경우에만 사용하고, 나중에 반드시 해당 커밋을 정리하세요.

**점진적 도입**

처음부터 너무 엄격한 규칙을 적용하면 팀원들의 반발을 살 수 있습니다. 먼저 경고만 표시하도록 설정하고, 팀이 익숙해지면 점진적으로 강제하는 방식을 권장합니다.

```bash
# 처음에는 경고만 표시
npm run lint || echo "⚠️  Lint warnings detected, but allowing commit for now"

# 익숙해지면 강제로 변경
npm run lint

CI/CD와의 통합

husky는 로컬 검증이지만, CI/CD 파이프라인에서도 동일한 검사를 수행해야 합니다. husky를 우회하고 푸시한 코드도 잡아낼 수 있도록 이중 안전장치를 마련하세요.

# .github/workflows/ci.yml
name: CI

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    env:
      HUSKY: 0  # CI에서는 husky 비활성화
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run lint
      - run: npm run type-check
      - run: npm test
      - run: npx gitleaks detect --no-git -v  # 보안 검사

모니터링과 개선

정기적으로 hook 실행 로그를 검토하고, 팀원들의 피드백을 받아 규칙을 조정하세요. 너무 많은 false positive가 발생하면 개발 속도가 저하되고, 팀원들이 hook을 우회하려는 유혹을 느낄 수 있습니다.

버전 관리 전략

package.json에서 husky의 버전을 고정하고, 업데이트할 때는 팀 전체에 공지하세요:

{
  "devDependencies": {
    "husky": "~9.1.0"  // 마이너 버전만 자동 업데이트
  }
}

Monorepo 환경 설정

Monorepo 구조에서는 루트가 아닌 하위 디렉토리에 husky를 설정해야 할 수 있습니다:

// 하위 프로젝트의 package.json
{
  "scripts": {
    "prepare": "cd .. && husky frontend/.husky"
  }
}

협업자 입장에서의 사용 방법

이제 일반 개발자가 husky가 설정된 프로젝트에서 작업할 때 알아야 할 내용을 살펴보겠습니다.

최초 설정

프로젝트를 클론한 후 의존성을 설치하면 husky가 자동으로 설정됩니다:

git clone <repository-url>
cd <project-directory>
npm install  # prepare 스크립트가 자동으로 husky를 설정합니다

만약 husky가 제대로 설정되지 않았다면 수동으로 실행할 수 있습니다:

npm run prepare

설정이 제대로 되었는지 확인하려면:

# Git hook 경로 확인
git config core.hooksPath
# 결과: .husky

# Hook 파일 확인
ls -la .husky/

일상적인 워크플로우

husky가 설정되면 평소처럼 Git을 사용하면 됩니다. 다만 커밋이나 푸시할 때 자동으로 검사가 실행된다는 점을 인지하세요:

# 파일 수정 후
git add .
git commit -m "feat: add user authentication"
# 이 시점에서 pre-commit hook이 실행되어 린트, 포맷팅 등을 검사합니다
# commit-msg hook이 커밋 메시지 형식을 검증합니다

git push
# 이 시점에서 pre-push hook이 실행되어 테스트를 실행합니다

Hook 실패 시 대응

Hook이 실패하면 커밋이나 푸시가 차단됩니다. 이때 당황하지 말고 다음 단계를 따르세요:

1. 에러 메시지를 주의 깊게 읽으세요. 무엇이 문제인지 명확히 알려줍니다.

2. 문제를 수정하세요. 린트 에러라면 코드를 수정하고, 커밋 메시지 에러라면 메시지를 수정합니다:

# 린트 에러 수정 후 다시 시도
git add .
git commit -m "feat: add user authentication"

# 커밋 메시지가 형식에 맞지 않으면
git commit --amend -m "feat: add user authentication module"

3. 자동 수정을 활용하세요. 많은 린트 도구는 자동 수정 기능을 제공합니다:

npm run lint -- --fix
# 또는
npx eslint . --fix

긴급 상황 대처

정말 긴급한 상황에서 hook을 우회해야 할 때가 있을 수 있습니다. 하지만 이는 최후의 수단이어야 합니다:

# Hook을 우회하고 커밋 (권장하지 않음)
git commit --no-verify -m "hotfix: critical security patch"

# 또는 환경 변수 사용 (일시적)
HUSKY=0 git commit -m "hotfix: critical security patch"

# 장기간 비활성화 (rebase/merge 중)
# ~/.config/husky/init.sh 파일에 다음 추가:
# export HUSKY=0

우회한 경우 반드시 나중에 해당 커밋을 정리하고, 팀에 알려야 합니다.

로컬 개발 환경 최적화

Hook 실행 시간이 너무 길면 개발 경험이 저하됩니다. 다음 방법으로 최적화할 수 있습니다:

# ESLint 캐시 활용
npm run lint -- --cache

# 변경된 파일만 검사 (lint-staged 사용)
# 이미 설정되어 있다면 자동으로 적용됩니다

# 특정 환경에서만 hook 실행
# ~/.config/husky/init.sh 파일에 조건부 로직 추가 가능

커밋 메시지 작성 팁

Conventional Commits 형식을 따르면 hook이 통과하기 쉽습니다:

<타입>(<범위>): <제목>

<본문>

<푸터>

예시:

feat(auth): add JWT token validation

- Implement token expiration check
- Add refresh token logic
- Update authentication middleware

Closes #123

타입 종류:

• feat: 새로운 기능
• fix: 버그 수정
• docs: 문서 변경
• style: 코드 스타일 변경 (포맷팅, 세미콜론 등)
• refactor: 리팩토링
• perf: 성능 개선
• test: 테스트 추가/수정
• chore: 빌드, 설정 파일 변경
• security: 보안 관련 변경

문제 해결

Hook이 예상대로 동작하지 않으면:

# Husky 설정 확인
ls -la .husky
git config core.hooksPath

# Hook 파일 권한 확인 (실행 권한 필요 없음 - v9부터)
# Windows에서 생성한 hook도 chmod 불필요

# Husky 재설정
rm -rf .husky
npm run prepare

# 디버그 모드로 실행
HUSKY=2 git commit -m "test"

v9 마이그레이션 체크리스트

기존 프로젝트를 v9로 업그레이드하는 경우:

1. 모든 hook 파일에서 #!/usr/bin/env sh 제거
2. 모든 hook 파일에서 . "$(dirname -- "$0")/_/husky.sh" 제거
3. ~/.huskyrc 파일이 있다면 ~/.config/husky/init.sh로 이동
4. hook 파일에서 불필요한 npx 제거 (선택사항, 성능 개선)
5. .husky/_ 디렉토리는 자동 생성되며 .gitignore에 포함됨

마치며

Husky v9는 이전 버전보다 훨씬 가볍고 빠르며, 사용법도 간단해졌습니다. 불필요한 래퍼 코드가 제거되어 hook 파일이 더 직관적이고 읽기 쉬워졌습니다. 단순한 도구를 넘어서 팀의 개발 문화를 개선하는 강력한 수단으로, 보안 문제를 사전에 차단하고, 코드 품질을 일관되게 유지하며, 불필요한 CI 실패를 줄여줍니다.

v9의 주요 개선사항을 요약하면:

• 2KB의 초경량 패키지 (MIT 라이선스 파일이 가장 큰 파일입니다!)
• 약 1ms의 빠른 실행 속도
• deprecated된 코드 제거로 더 깔끔한 hook 파일
• Windows 권한 문제 해결
• 더 나은 디버깅 지원 (HUSKY=2)

처음에는 추가적인 제약으로 느껴질 수 있지만, 익숙해지면 자연스러운 개발 워크플로우의 일부가 됩니다. 중요한 것은 husky를 도입하는 목적이 팀원을 통제하는 것이 아니라, 모두가 더 나은 코드를 작성하도록 돕는 것이라는 점입니다. 명확한 규칙, 적절한 피드백, 그리고 지속적인 개선을 통해 husky는 여러분의 프로젝트를 한 단계 성숙시켜줄 것입니다.

Happy coding! 🪝✨

기술 스택 선택 이유

• FastAPI: 빠르고 현대적인 Python 웹 프레임워크, 자동 문서화 지원
• AWS Lambda: 서버 관리 불필요, 사용한 만큼만 과금
• SAM: 서버리스 앱을 간단하게 정의하고 배포
• GitHub Actions: 코드 저장소에서 바로 사용 가능한 CI/CD

전체 흐름

GitHub Push → 자동 테스트 → 빌드 → AWS 배포 → 헬스체크

핵심 보안: OIDC 인증

기존에는 AWS Access Key를 GitHub에 저장했지만, 이제는 OIDC 방식을 사용합니다.

장점:

• Access Key 저장 불필요
• 키 유출 걱정 없음
• AWS 공식 권장 방식

설정 3단계:

1. AWS IAM에 GitHub을 Identity Provider로 등록
2. GitHub Actions용 IAM Role 생성 (특정 리포지토리만 접근 가능하도록)
3. 최소 권한만 부여 (Lambda, API Gateway, CloudFormation 등)

프로젝트 구조

project/
├── .github/workflows/deploy.yml    # GitHub Actions 설정
├── src/
│   ├── app.py                      # FastAPI 앱
│   └── requirements.txt
├── tests/test_app.py               # 테스트
├── template.yaml                   # SAM 인프라 정의
└── samconfig.toml                  # SAM 설정

FastAPI 앱 작성 (예시)

from fastapi import FastAPI
from mangum import Mangum

app = FastAPI()

@app.get("/health")
async def health():
    return {"status": "healthy"}

@app.post("/api/items")
async def create_item(item: dict):
    return {"id": "123", "item": item}

# Lambda용 핸들러
handler = Mangum(app, lifespan="off")

주요 포인트:

• Mangum: FastAPI를 Lambda에서 실행하게 해주는 어댑터
• 환경 변수로 설정 관리 (API 키, CORS 등)
• 입력 검증과 에러 핸들링 필수

SAM Template (인프라 정의)

Resources:
  FastAPIFunction:
    Type: AWS::Serverless::Function
    Properties:
      Runtime: python3.12
      Architectures: [arm64]  # 비용 절감
      Handler: app.handler
      Environment:
        Variables:
          ENVIRONMENT: dev
      Events:
        ApiEvent:
          Type: HttpApi
          Properties:
            Path: /{proxy+}
            Method: ANY

핵심 설정:

• Python 3.12 최신 버전
• ARM64 아키텍처 (20% 저렴)
• HTTP API 사용 (REST API보다 빠르고 저렴)
• 스로틀링으로 과도한 요청 방지

GitHub Actions 워크플로우

name: Deploy to AWS

on:
  push:
    branches: [main, develop]

permissions:
  id-token: write  # OIDC 토큰용
  contents: read

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      # 1. 코드 체크아웃
      - uses: actions/checkout@v4

      # 2. Python 설정
      - uses: actions/setup-python@v5
        with:
          python-version: '3.12'

      # 3. 테스트
      - run: |
          pip install -r src/requirements.txt pytest
          pytest tests/

      # 4. AWS 인증 (OIDC)
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: ${{ secrets.AWS_ROLE_ARN }}
          aws-region: ap-northeast-2

      # 5. SAM 빌드 & 배포
      - uses: aws-actions/setup-sam@v2
      - run: |
          sam build
          sam deploy --no-confirm-changeset

      # 6. 헬스체크
      - run: curl -f $API_ENDPOINT/health

워크플로우 흐름:

1. 코드 품질 검사 (린팅, 보안 스캔)
2. 테스트 실행
3. OIDC로 AWS 인증
4. SAM으로 빌드 & 배포
5. API 정상 작동 확인

보안 체크리스트

✅ 반드시 해야 할 것:

• OIDC 인증 사용 (Access Key 금지)
• 최소 권한 IAM 정책
• API 인증 추가 (API Key, JWT 등)
• CORS 특정 도메인만 허용
• 의존성 보안 스캔 (Bandit, Safety)
• 민감 정보는 GitHub Secrets 사용
• 환경별 분리 (dev, prod)

로컬 테스트

# SAM 로컬 실행
sam build
sam local start-api

# 테스트
curl http://localhost:3000/health

배포 과정

1. 코드 푸시: git push origin main
2. 자동 실행: GitHub Actions 트리거
3. 품질 검사: 린팅, 테스트, 보안 스캔
4. 빌드: SAM이 Lambda 패키지 생성
5. 배포: CloudFormation으로 AWS 리소스 생성
6. 검증: 헬스체크로 정상 작동 확인

완료되면 API 엔드포인트 URL을 받고, 바로 사용 가능합니다.✨

1. GitHub란?

GitHub는 Git 기반의 코드 호스팅 플랫폼입니다. 현재 1억 5천만 명 이상이 사용하며 4억 2천만 개 이상의 프로젝트가 호스팅되고 있습니다.

최신 주요 기능 (2024-2025)

GitHub Copilot 멀티모델 지원 Claude 3.5 Sonnet, Gemini 1.5 Pro, OpenAI o1 등 여러 AI 모델을 선택해서 사용할 수 있습니다. 작업에 따라 최적의 모델을 선택할 수 있어 효율적입니다.

자동 보안 수정 Copilot Autofix는 JavaScript, TypeScript, Java, Python에서 90% 이상의 보안 알림을 자동으로 수정합니다.

Push Protection 비밀 정보(API 키, 비밀번호 등)가 레포지토리에 푸시되기 전에 자동으로 차단합니다.

2. GitHub Desktop이란?

GitHub Desktop은 명령줄 대신 GUI로 Git을 쉽게 사용할 수 있게 해주는 무료 오픈소스 도구입니다.

2025년 신규 기능

멀티도메인 지원 여러 GitHub 계정(회사, 개인 등)에 동시에 로그인할 수 있습니다.

파일 필터링 변경된 파일이 많을 때 파일명으로 필터링하여 빠르게 찾을 수 있습니다.

3. GitHub Desktop 설치

macOS

brew install --cask github

Windows

winget install github-desktop

또는 공식 웹사이트에서 다운로드

4. 기본 사용법

4.1 레포지토리 생성

1. File > New Repository
2. 이름과 경로 입력
3. .gitignore 선택 (중요!)
4. Create Repository

⚠️ 보안 팁: .gitignore에 꼭 포함할 것

.env
.env.local
*.key
*.pem
config/secrets.yml
node_modules/

4.2 레포지토리 복제

1. File > Clone Repository
2. URL 입력 또는 목록에서 선택
3. 저장할 폴더 선택
4. Clone

4.3 변경사항 커밋

1. 파일 수정
2. GitHub Desktop에서 변경사항 확인
3. 커밋 메시지 작성
4. "Commit to main" 클릭
5. "Push origin" 클릭

4.4 브랜치 작업

1. Branch > New Branch
2. 브랜치 이름 입력 (예: feature/login)
3. 작업 후 커밋
4. Branch > Create Pull Request

5. 필수 보안 설정

5.1 2단계 인증 (2FA) 설정

2FA는 계정 보안을 크게 향상시킵니다. 비밀번호만으로는 피싱이나 재사용으로 손상될 수 있습니다.

권장 순서:

1. 하드웨어 보안 키 (YubiKey 등) - 가장 안전
2. Passkeys (Touch ID, Face ID)
3. 인증 앱 (Google Authenticator, Authy)
4. SMS (최후의 수단)

설정 방법:

GitHub.com > Settings > 
Password and authentication > 
Two-factor authentication > Enable

5.2 SSH 키 설정 (HTTPS보다 안전)

# 최신 알고리즘 사용
ssh-keygen -t ed25519 -C "your_email@example.com"

# 공개 키 복사
cat ~/.ssh/id_ed25519.pub

# GitHub에 등록: Settings > SSH and GPG keys

5.3 환경 변수 사용

절대 커밋하면 안 되는 것:

• API 키
• 데이터베이스 비밀번호
• JWT 시크릿
• 개인 키 파일

.env 파일 사용 (절대 커밋 금지!)

# .env
DATABASE_URL=postgresql://user:password@localhost/db
API_KEY=your-secret-key

코드에서 사용:

// Node.js
require('dotenv').config();
const apiKey = process.env.API_KEY;

# Python
import os
from dotenv import load_dotenv
load_dotenv()
api_key = os.getenv('API_KEY')

6. 실무 활용 팁

6.1 브랜치 전략

main (배포용)
  └── develop (개발용)
      ├── feature/new-feature (새 기능)
      ├── bugfix/fix-login (버그 수정)
      └── hotfix/security-patch (긴급 수정)

6.2 커밋 메시지 작성법

✅ 좋은 예:
feat: 사용자 로그인 기능 추가
fix: 비밀번호 유효성 검사 버그 수정
docs: README에 설치 가이드 추가

❌ 나쁜 예:
수정
test
ㅇㅇ

6.3 Pull Request 체크리스트

## 작업 내용
- [ ] 새로운 기능 구현 완료
- [ ] 테스트 코드 작성
- [ ] 문서 업데이트

## 보안 체크
- [ ] 민감한 정보 제거 확인
- [ ] 입력 검증 추가
- [ ] 의존성 취약점 없음

7. 자주 묻는 질문

Q: 실수로 비밀번호를 커밋했어요!

# 1. 즉시 해당 비밀번호 변경
# 2. GitHub Desktop에서 해당 커밋 되돌리기
# 3. 이미 푸시했다면 강제 푸시 (조심!)
git push --force

Q: 충돌이 발생했어요!

1. GitHub Desktop에서 충돌 파일 확인
2. "Open in [Editor]" 클릭
3. <<<< HEAD와 >>>> 사이 코드 수정
4. 저장 후 커밋

Q: 이전 버전으로 돌아가고 싶어요!

1. History 탭에서 원하는 커밋 찾기
2. 우클릭 > Revert this commit

8. 추천 도구

보안 스캔:

• GitGuardian - 비밀 정보 탐지
• Snyk - 의존성 취약점 검사

코드 품질:

• ESLint - JavaScript 린팅
• Prettier - 코드 포맷팅

9. 핵심 요약

✅ GitHub Desktop으로 GUI에서 쉽게 Git 사용 ✅ 2FA는 필수! 하드웨어 키 권장 ✅ 환경 변수로 비밀 정보 관리 ✅ .gitignore로 민감한 파일 제외 ✅ 브랜치 전략으로 체계적 개발 ✅ Pull Request로 코드 리뷰

보안은 귀찮은 것이 아니라 필수입니다. 처음부터 올바른 습관을 들이면 나중에 큰 문제를 예방할 수 있습니다! 🚀

참고 링크:

• GitHub Desktop 다운로드
• GitHub 공식 문서
• GitHub Skills (무료 학습)

생성형 AI(Generative AI)는 기존 데이터를 학습해 새로운 데이터를 생성하는 인공지능 기술입니다. 이 기술은 텍스트, 이미지, 음성, 영상 등 다양한 형태의 콘텐츠를 창의적으로 만들어낼 수 있습니다.

📍AI 발전 과정

SK 하이닉스 블로그(AI의 시작과 발전 과정, 미래 전망)

📍 LLM (Large Language Model) — 대규모 언어 모델

LLM은 대량의 텍스트 데이터를 학습하여 자연어(사람들이 일상적으로 사용하는 언어)를 이해하고 생성하는 딥러닝 모델입니다.

• 대표 모델: GPT 시리즈, PaLM, Claude, LLaMA, Mistral 등
• 기반 구조: Transformer (Vaswani et al., 2017)

🔧 작동 원리

1. 입력 텍스트를 받아들임
2. 다음에 올 단어의 확률을 예측
3. 문장/문단/코드/지식 등의 텍스트를 생성

   “오늘 날씨가” → LLM은 그 다음 단어로 “좋다”를 높은 확률로 생성할 수 있습니다.

🌟 특징

• 자연어 처리의 범용 엔진 (요약, 번역, 질의응답 등)
• 확률적 텍스트 생성기 (문장의 일관성과 문법 유지)
• 수십억~수조 개의 파라미터 보유 (GPT-3: 175B, GPT-4: 더 큼)

📍 GAN(Generative Adversarial Network) — 적대적 생성 신경망

GAN은 두 개의 신경망(생성자 G, 판별자 D)이 서로 경쟁하며 실제 같은 데이터를 생성하는 모델입니다.

• 처음 제안: Ian Goodfellow (2014) • 대표 적용: 이미지 생성 (얼굴, 예술, 스타일 전환 등)

🔧 작동 원리

1. 생성자(Generator): 노이즈를 받아 가짜 데이터를 생성
2. 판별자(Discriminator): 진짜인지 가짜인지 구분
3. 두 모델이 경쟁하면서 점점 더 정교한 데이터를 생성

🎯 목표: 생성자는 판별자를 속이고, 판별자는 생성자를 간파하려고 함 → 적대적 학습

🌟 특징

• 현실적인 이미지/영상/오디오 생성에 강함 • 고해상도 이미지, Deepfake, 스타일 전환 등에 사용 • 훈련이 어려움 (불안정한 수렴, 모드 붕괴 등 이슈 존재)

📍 VAE

Variational Autoencoder(VAE, 변분 오토인코더)는 단순한 함수 변화 추적보다는 확률 분포를 인코딩하고, 그 분포에서 샘플링해 재구성하는 확률 기반의 생성 모델입니다.

‼️핵심 개념

“잠재 공간(latent space)(ex. 벡터 z)“의 분포를 배우는 인코더

• 일반 오토인코더는 입력 → 벡터 z → 복원을 진행
• VAE는 입력 → 정해진 분포(보통 정규분포)에 대한 매개변수(μ, σ)를 구해 → 이 분포에서 샘플링하여 z를 얻고 → 복원합니다.

즉,단일 지점을 인코딩하는 것이 아니라, “입력 데이터를 잘 설명하는 분포”를 추정해서 그 분포를 인코딩하는 것입니다.

이 과정이 “변분 추정(Variational Inference)“입니다. 그래서 이름이 Variational Autoencoder입니다.

📍멀티 모달 AI

MMLM(Mulytimodal Large Language Model)

멀티모달 AI는 텍스트, 이미지, 음성, 영상 등 다양한 형태의 데이터를 동시에 이해하고 생성할 수 있는 인공지능 모델입니다.

크게 대표되는 예시로 제가 가장 많이 사용하는 멀티모달 AI로는 Chat GPT4o, Gemini, Claude가 있습니다.

전 이미 인공지능 없이는 살아가기 힘든 몸이 되었습니다...🥲

•    “모달(modal)” = 데이터의 형태(양식)(예: 텍스트, 이미지, 소리, 센서 데이터 등)
•    “멀티모달” = 다양한 모달리티를 함께 처리

🔧 작동 원리 (기본 구조)

멀티모달 모델은 여러 입력 양식을 하나의 공통된 표현(latent space)으로 인코딩하고, 그걸 바탕으로 다양한 출력 양식을 디코딩합니다.

예: 텍스트+이미지를 처리하는 구조

[이미지] → Vision Encoder ─┐
                           │ → 공동 임베딩 → 디코더 → [텍스트 생성]
[텍스트] → Text Encoder ──┘

최신 모델들은 이 과정을 Transformer 기반의 통합 모델로 수행합니다. 특히 LLM 기반으로 멀티모달을 통합하는 게 주류입니다 (예: GPT-4o, Gemini, Claude).

🌟 멀티모달의 특징

[참고 문헌]

• https://news.skhynix.co.kr/all-around-ai-1/

생성형 모델에서는 어떤 관측 데이터 x가 있다고 할 때, 그걸 만든 잠재 변수 z를 찾고 싶습니다.

우리가 하고 싶은 일 Posterior(사후확률)인 p(z | x) 를 구하는 것, 하지만 대부분의 경우 이 확률은 계산이 불가능하거나 너무 복잡합니다.

p(z | x)를 직접 계산할 수 없으니, 대신 계산 가능한 근사 분포 q(z|x) 를 만들고 이걸 학습하자!

즉,q(z | x) ≈ p(z | x) 가 되도록 q를 최적화(함수의 형태를 조정) 하는 방법이 변분 추론(variational inference) 입니다.

우리는 q(z|x)라는 근사 분포를 설계하고, 그게 진짜 분포 p(z|x)와 가깝도록 학습시키고 싶습니다.

1️⃣ 사전확률

사전 확률(pre-priori probability)은 특정 이벤트가 일어나기 전에, 그 이벤트가 일어날 확률을 말합니다. 이러한 확률은 과거의 데이터, 경험, 또는 전문가의 지식을 바탕으로 추정됩니다.( ex. 전체 메일중 20%가 스팸라면, 사전확률은 0.2이다)

2️⃣ 사후 확률

사후 확률(posterior probability)은 새로운 정보나 증거가 주어진 후에, 특정 이벤트가 일어날 확률을 업데이트한 것을 말합니다. 이 확률은 사전 확률에 새로운 증거를 통합하여 계산됩니다.

• P(A∣B) P(A∣B)는 B가 주어졌을 때 A가 일어날 조건부 확률, 즉 사후 확률입니다.
• P(B∣A) P(B∣A)는 A가 주어졌을 때 B가 일어날 조건부 확률,
• (A) P(A)는 A의 사전 확률, 그리고
• P(B) P(B)는 B의 확률입니다.

[참고문헌]

• https://www.mindscale.kr/docs/probability/prior-and-posterior-probability

AI에 관한 개념 잡기 및 공부에 도움이되었으면 좋겠군요,,🥹

1️⃣ AI(Artificial Intelligence)

Artificla(인공의) + Intelligence(지능) 사람의 지능을 모방하여 컴퓨터가 자동화를 대신해주는 기술

2️⃣ 머신러닝(Machine Learning)

규칙을 따로 알려주는것이 아닌 컴퓨터가 데이터를 보고 스스로 패턴을 학습하는 기술

3️⃣ 딥러닝(Depp Learning)

인공신경망 기반의 모델로, 비정형 데이터와 같은 복잡한 데이터에 대해 스스로 특성 추출 및 의사 결정까지 컴퓨터가 한번에 수행하는 기술

🧐인공 신경망? 비정형 데이터? 무슨 말이지?

📍인공신경망(ANN)

Aificial Neural Network => ANN

인간 뇌의 신경구조에서 영감을 받아 설치된 기계학습 모델입니다. 뇌의 뉴런처럼 동작하는 노드(뉴런) 들이 계층적으로 연결되어 정보를 전달하고, 입력 데이터를 처리하여 학습과 예측을 수행합니다. 인공신경망은 크게 입력층, 은닉층, 출력층으로 구성되며 각 노드는 입력 값에 가중치를 곱해 더한 뒤, 활성화 함수를 통해 출력을 결정합니다.

📍비정형 데이터

Unstructured Data

미리 정의된 구조나 스키마가 없는 데이터를 의미합니다. 즉, 데이터베이스의 표 형태(행과 열)에 맞춰 저장되지 않고 자유로운 형식으로 존재하는 데이터입니다. 대표적인 예로는 텍스트(문서, 이메일, 채팅), 이미지, 오디오, 비디오, 센서 데이터 등이 있습니다.

🤖 Strong AI / Weak AI

📍Strong AI

• 다양한 기능을 수행
• 새로운 문제를 해결하는 방법을 스스로에게 가르침

  📍Weak AI

• 한가지 유형의 작업을 수행
• 사용자가 입력한 데이터를 기반으로 같은 특정 작업을 수행하는데 집중

📋 AI의 학습

AI의 학습 단계는 크게 *지도학습 → 비지도 학습 → 강화 학습 *순으로 이루어집니다.

• 📍지도학습 : 해당 DATA(정보)에 대한 정답을 미리 알려준 후(지도) 해당 내용을 학습하게함, 이후 해당 학습에 대한 결과를 물어봄
• 📍비지도 학습 : 정답을 알려주지 않은 상태로 DATA(정보)만 전달해 특성을 파악하게함
• 📍강화 학습 : 시행착오를 경험하며 경험 기반으로 학습하게함

참고 문헌

• https://jwprogramming.tistory.com/47
• https://www.ibm.com/kr-ko/think/topics/strong-ai
• https://www.youtube.com/watch?v=LPqmPfhnR1o&list=PLuHgQVnccGMDy5oF7G5WYxLF3NCYhB9H9

✅ HTTP API

• 애플리케이션 간 데이터를 주고 받기 위한 인터페이스

• HTTP 프로토콜을 사용하여 데이터를 요청하고 응답함
• REST API가 HTTP API의 대표적 형태로, JSON 형식을 주로 사용함

✔️ HTTP API 요청 구조

• 요청 메서드: 각각의 메서드(하단)는 특정 작업을 수행함

  • GET | POST | PUT | DELETE 등

• URL: 요청 보낼 리소스의 주소
• 헤더(Header): 요청과 응답에 대한 추가 정보 포함( ex. 인증토큰, 콘텐츠 타입 )
• 본문(Body): 필요한 경우 데이터를 전달하며 주로 JSON 형식을 사용한다.

✅ JSON

JAVASCRIPT Object Notation | 자바스크립트 객체 표기법

• 데이터를 주고받기 위해 경량화된 데이터 형식

• Key(키)-value(값) 쌍 구조로 데이터를 표현하며 사람이 일기 쉽고 기계가 처리하기 쉬움

✔️ JSON 구조

• 데이터 타입: 문자열, 숫자, 불리언, 객체, 배열, null 사용가능.
• 배열(Array): 대괄호[] 로 묶으며, 여러 데이터를 리스트 형식으로 저장.
• 객체(Object): 중괄호{}로 묶이며, 키-값 쌍으로 데이터를 저장.

✅ HTTP 요청 메서드와 JSON 사용 예시

url = 'https://api.example.com/users'
data={"name":"yoonmin","age":500}
response = requests.post(url, json=data) #POST요청 예시
print(response.json()) #JSON 응답

✔️ GET

• 기능 : 서버에서 데이터 조회
• 본문(body) 없이 요청

  ✔️ POST

• 기능 : 서버에서 데이터 생성 요청
• 본문(body)에 JSON 데이터 포함하여 전송

  ✔️ PUT

• 기능 : 기존 데이터 업데이트
• 본문(body)에 JSON 데이터 포함하여 전송

  ✔️ DELETE

• 기능 : 특정 데이터 삭제 요청
• 본문(body) 없이 요청 가능

✅ 장점

• 경량성 JSN은 가볍고 데이터 표현이 간단해 네트워크 전송에 효율적입니다
• 가독성 사람이 일고 쓰기 쉬우며, JSON 포맷을 그대로 데이터베이스와 연결 가능합니다.
• 언어독립성 대부분의 언어에서 쉽게 파싱이 가능해서 서로 다른 시스템 간의 데이터 교환에 유리합니다.

오늘은 간단하게 HTTP JSON에 관해 알아보았습니다😉

• Axios는 Node.js, 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다.

• 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다.
• 이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할땐 axios를 쓰게됩니다.

✅ Axios 특징

• 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 생성
• Node.js를 위해 http 요청 생성
• Promise(ES6) API 지원(async,await)
• 요청과 응답 데이터의 변형, 인터셉트
• HTTP 요청 취소
• HTTP 요청과 응답을 JSON 형태로 자동 변경
• XSRF를 막기위한 클라이언트 사이드 지원

✔️Axios 설치

✨ npm axios 설치

npm install axios

✨ 설치 확인 후 하단 코드를 사용하여 Axios를 불러 올 수 있습니다.

import axios from 'axios';

✔️ 클라이언트(html)에서 axios 설치

✨ jsDeliver / unpkg CDN 둘중 하나를 선택해 넣으면된다.

<!--jsDeliver-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!--unpkg CDN-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

✅ Axios 문법 구성

axios({
  url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  method: 'get', // 통신할 방식
  data: { // 인자로 보낼 데이터
    foo: 'diary'
  }
});

Axios 사용 예제

✔️Promise .then() 사용

import axios from 'axios';

export const exampleAxios = () => {
  return axios.get('https://test.com/api/sample')
       //첫 번째 API 호출의 결과에서 userId를 추출.
    .then((response1) => {
      const data = response1.data;
      const userId = data.userId;

      return axios.get(`https://test2.com/api/v2/${userId}`);
    })
    //두 번째 API 호출의 결과를 처리하고 반환.
    .then((response2) => {
      console.log('response:', response2.data);
      return response2.data;
    })
    //error반환
    .catch((error) => {
      console.error('대시보드 통계 데이터 가져오기 실패:', error);
      return { user: [] };
    });
};
}

✔️ async/await 사용

import axios from 'axios';

export const exampleAxios = async () => {
  try {
    const response = await axios.get('https://test.com/api/sample');
    console.log('response:', response.data);
    return response.data;
  } catch (error) {
    console.error('대시보드 통계 데이터 가져오기 실패:', error);
    return { user: [] }; 
  }
};

상하단 코드 모두 동일하게 동작하며, 비동기 처리로 진행하게됩니다.

✅ Axios 단축 메소드

axios를 편리하게 사용하기 위해 모든 요청 메소드는 aliases가 제공됩니다. 위 처럼 객체 옵션을 이것저것 주면 가독성이 떨어지니, 함수형으로 재구성하여 나눠논 것으로 이해하면 됩니다. axios의 Request method에는 대표적으로 다음과 같은 것들이 있습니다.

• GET : axios.get(url[, config])
• POST : axios.post(url, data[, config])
• PUT : axios.put(url, data[, config])
• DELETE : axios.delete(url[, config])

axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
axios#getUri([config])

✅Axios 요청 예제

✔️ Get

Get 메서드에는 2가지 상황은 크게 존재합니다.

1. 단순 데이터(페이지 요청, 지정된 요청) 요청을 수행할 경우
2. 파라미터 데이터를 포함시키는 경우 (사용자 번호에 따른 조회)

const axios = require('axios'); // node.js쓸때 모듈 불러오기


// user에게 할당된 id 값과 함께 요청을 합니다.
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response); // 성공했을 때 반환
  })
  .catch(function (error) {
    console.log(error); // 에러가 났을 때 반환
  })
  .finally(function () {
    // 항상 실행되는 함수
  });


// 위와는 같지만, 옵션을 주고자 할 때는 이렇게 요청을 합니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () 
  });  

async/await 사용

// async/await 를 쓰고 싶다면 async 함수/메소드를 만듭니다. 
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

✔️ Post

post 메서드에는 일반적으로 데이터를 Message Body에 포함시켜 보냅니다. 위에서 봤던 get 메서드에서 params를 사용한 경우와 비슷하게 수행됩니다.

axios.post("url", {
        firstName: 'Fred',
        lastName: 'Flintstone'
    })
    .then(function (response) {
        // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })

✔️ Delete

delete 메서드에는 일반적으로 body가 비어있다. REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용합니다.

axios.delete('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })

하지만 query나 params가 많아져서 헤더에 많은 정보를 담을 수 없을 때는 다음과 같이 두 번째 인자에 data를 추가해줄 수 있습니다.

axios.delete('/user?ID=12345',{
    data: {
      post_id: 1,
      comment_id: 13,
      username: "foo"
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

✔️ Put

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신(수정)하는 목적으로 사용됩니다. put 메서드는 서버 내부적으로 get -> post 과정을 거치기 때문에 post 메서드와 비슷한 형태입니다.

axios.put("url", {
        username: "",
        password: ""
    })
    .then(function (response) {
         // 성공시 결과 값
    }).catch(function (error) {
        // error발생시 실행
    })

출처

Tstory blog | Inpa_dev Axios http blog

✅ Async / Await ,,, 누구,,,?

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. async와 await은 기존의 비동기 처리 방식인 callback 함수, Promise의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다.

➕ Syntatic Sugar(문법적 설탕)라고도 불립니다. Syntatic Sugar란 코드를 더 알기 쉽게 작성하고 이해할 수 있도록 도와주는 문법적인 표현방식입니다.

✅ async

async는 function 앞에 붙습니다.

async function f() {
  return 1;
}

function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 프라미스가 아닌 값을 반환하더라도 resolved promise로 값을 감싸 resolved promise가 반환되도록 합니다.

아래 예시의 함수를 호출하면 result가 1인 resolve promise가 반환됩니다.

async function f() {
  return 1;
}
f().then(alert); // 1

명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일합니다.

async function f() {
  return Promise.resolve(1);
}
f().then(alert); // 1

async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환합니다.

또 다른 키워드인 await는 async 함수 안에서만 동작합니다.

✅ await

자바스크립트는 await 키워드를 만나면 Promise가 처리될 때까지 기다리고 결과는 그 이후 반환됩니다.

(await는 '기다리다’라는 뜻을 가진 영단어입니다).

// await는 async 함수 안에서만 동작합니다.
let value = await promise;

Promise를 반환하는 함수 앞에 await를 붙이면, 해당 Promise의 상태가 바뀔 때까지 코드가 기다려요. Promise가 성공 상태 또는 실패 상태로 바뀌기 전까지는 다음 연산을 시작하지 않는 것이죠.

✔️ 예시(Toss payments)

예시를 보면 더 쉬운데요.

아래와 같이 결제를 요청하는 requestPayment() 메서드 앞에 await가 있습니다. 결제 요청이 잘 완료되어 paymentData(Promise 객체)의 상태가 바뀐 이후에만 console.log(paymentData)가 실행됩니다. 즉, 비동기 작업을 동기적으로 바꾸는 것이죠.

async function handleSubmit() {
  const paymentData = await paymentWidget.requestPayment({
    orderId: "KOISABLdLiIzeM-VGU_8Z", // 주문번호(직접 만들어주세요)
    orderName: "토스 티셔츠 외 2건" // 주문명(직접 만들어주세요)
  });
  console.log(paymentData);
  return paymentData //Promise 객체의 상태가 바뀌어야 conole.log 정상 출력
}

사실상 await는 then()과 같은 역할을 하는데, 콜백 함수를 등록할 필요가 없기 때문에 더 편리합니다. 체이닝으로 인해 코드가 복잡해질 일도 없죠.

✔️ 에러 처리법

근데 에러는 어떻게 처리할까요?

async/await로 코드를 동기적으로 바꾸는 것으로 생각할 수 있다고 했습니다. 그럼 이제 간단히 try/catch를 사용하면 됩니다. 아래 코드에서는 requestPayment()에서 실패 상태의 Promise를 반환하면, 바로 catch 블록이 실행됩니다

async function handleSubmit() {
    try {
        const paymentData = await paymentWidget.requestPayment({
        orderId: "KOISABLdLiIzeM-VGU_8Z", // 주문 ID(직접 만들어주세요)
        orderName: "토스 티셔츠 외 2건" // 주문명
        });
        console.log(paymentData);
        // 성공 처리
        return paymentData;
    } catch (error) {
        // 에러 처리
        console.log(error.message);
    }
}

이상 짧게 async await에 대해 알아보았습니다. 토스 개발팀에서 운영하는 블로그에서 해당 내용을 직접 API연결후 사용하는 방법도 잘 설명 해뒀으니 필요하신분들은 참조해주시면 좋을거같네요!

출처

토스 페이먼츠 블로그 JAVASCRIPT Info blog

'약속'입니다. 미래에 일어날 일을 약속하는 것으로 비동기 작업을 처리할 때 사용되는 객체입니다.

✅ 비동기? 동기? 어디서 많이 들어봤는데?

여럿 개발 과정에서 동기, 비동기라는 말을 많이 들어 보시지 않았나요?

✔️ 동기

동기는 직렬적으로 작동하는 방식입니다.

✔️ 비동기

비동기는 병렬적으로 작동하는 방식입니다.

여기서 보이는 동기와 비동기의 차이점이 있습니다. 비동기는 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것이죠.

한번 사진을 통해 비교해볼까요? [ 출처 | What every programmer should know about Synchronous vs. Asynchronous Code]

왼쪽 그래프는 '비동기'로 작동하는 방식입니다. 한번에 여러 Task(빨강, 민트, 옐로 막대그래프)가 동시에 병렬적으로 실행되는 모습을 보입니다.

반면, 오른쪽 차트는 '동기'적으로 작동하는 방식입니다. 하나의 Task가 끝날 때 까지 기다렸다가 다음 Task가 실행되는 모습을 볼 수 있죠.

색깔 순서대로 빨강이 실행되고 민트가 실행되고 노랑이 실행됩니다. 그렇기에 총 실행 시간으로 따지자면 '동기' 방식이 더 느리게 됩니다.

NVIDIA GPU와 CPU차이 해당 링크는 NVIDIA에서 CPU,GPU를 소개하는 영상입니다. 저는 해당 영상을 보면서 동기(CPU) 비동기(GPU)를 이해하는데 도움을 얻었습니다. 필요하신분은 시청해주시면 한번 봐주세요 :) (매우 짧습니다 😉)

자 그럼 다시 돌아가보죠

✅ '동기(synchronous)'란 무엇일까?

동기는 직렬적으로 Task를 수행하는 방식입니다.

즉, 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어집니다. 그렇다면 앞에 Task가 처리되어야 나머지 뒤에 Task들이 실행 할 수 있는 겁니다. 출처 | poiemaweb

✅ '동기(synchronous)'란 무엇일까?

비동기는 병렬적으로 Task를 수행하는 방식입니다. Task가 종료되지 않은 상태라 하더라도 대기하지 않고 즉시 다음 Task를 실행한다. 출처 | poiemaweb

1. 예를 들어 서버에서 데이터를 가져와서 화면에 표시하고자 할때 서버에 Task데이터를 요청하게됩니다.
2. 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 Task를 수행하게 됩니다.
3. 이후 서버로부터 데이터가 응답되면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 수행할 Task를 계속해 수행합니다.

자바스크립트의 대부분의 DOM 이벤트와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작합니다.

장점

자바스크립트에서 빈번하게 사용되는 비동기식 처리 모델은 요청을 병렬로 처리하여 다른 요청이 블로킹(blocking, 작업 중단)되지 않습니다.

단점

하지만 비동기 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 네스팅(nesting, 중첩)되어 복잡도가 높아지는 콜백 헬(Callback Hell)이 발생하는 단점이 있습니다. 콜백 헬은 가독성을 나쁘게 하며 실수를 유발하는 원인이 됩니다. 하단 코드는 콜백 헬이 발생하는 전형적인 사례입니다.

step1(function(value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        step5(value4, function(value5) {
            // value5를 사용하는 처리
        });
      });
    });
  });
});

✅ Promise

동기 비동기에 대한 지식을 채웠으니 해당 글의 중심인 Promise로 돌아와보자

비동기 작업을 처리할 때 사용되는 객체(Promise 객체)

✨ 특징

• Promise는 미래에 완료될 작업을 나타내는 객체입니다.
• 작업이 완료되면 결과를 반환(resolve)하거나, 작업이 실패하면 에러를 반환(reject)합니다.
• 주로 .then()과 .catch()구문을 사용해 성공 시와 실패 시의처리를 구분합니다.

✔️ 예제 코드

코드를 보며 무슨 말인지 보도록하죠 하단 코드는 Promise객체를 이용해 hello를 입력시 console에 정상적으로 성공, 실패 내용이 반환 되는지 확인하고자한 코드입니다.

//Promise는 객체이기 때문에 생성자(new)를 이용해 만들게됩니다.
const myPromise = new Promise((resolve, reject)=>{
      //Promise 객체 생성시 인자로 call back 함수를 넣을 수 있습니다.
      //이러한 call back 함수 안에서 비동기 작업을 처리합니다.
   //어떤 작업을 진행하고 결과를 알려줘~ 하고 약속한 것 이죠
    //myPromise를 통해 약속의 객체를 받습니다.
    setTimeout(()=>{
        const text = prompt(`"hello"를 입력하면 선물을 줄께`);
        if(text === "hello"){
            resolve( '💻'); //승인
        }else{
            reject('error message') //실패
        }
    }, 2000); //2초 후 결과값 반환
});

myPromise
    .then((result)=>{
        console.log('result',result);
    })
    .catch(()=>{
        console.log("err:", err);
    })
    .finally(()=>{
        console.log("finally");
    })

 #### 코드를 자세히 살펴봅시다.

Promise 객체 생성시(생성자 new) 인자로 call back 함수를 안에 넣을 수 있습니다.

//myPromise를 통해 약속의 객체를 받습니다.
const myPromise = new Promise(()=>{ 
      //해당 공간에는 callback(비동기) 함수를 집어 넣으면 됩니다.
    //그래서 상단 코드에서는 setTimeout(비동기)이 사용된것입니다.
    }

이러한 call back 함수 안에서 비동기 작업을 처리하게되는겁니다.

즉 "어떤 작업을 진행하고 결과를 알려줘~" 하고 약속(Promise)한 것 이죠

두번째 특징에서

• 작업이 완료되면 결과를 반환(resolve)
• 작업이 실패하면 에러를 반환(reject) 이렇게 소개드렸습니다.

  // Promise 객체의 생성
  const promise = new Promise((resolve, reject) => {// resolve, reject 사용시 선언
  // 비동기 작업을 수행한다.
      setTimeout(()=>{
        const text = prompt(`"hello"를 입력하면 선물을 줄께`);//prompt로 텍스트 전달해줘
        if(text === "hello"){
            resolve( '💻'); //승인시 출력
        }else{
            reject('error message') //실패시 출력
        }
    }, 2000); //2초 후 결과값 반환
  }
  });

  해당 코드를 보면 setTimeout으로 비동기 작업을 실행하게되고 prompt에 원하는 값을 입력합니다. hello를 입력시 💻정상적으로 출력이되는 모습을 볼 수 있습니다. 그렇다면 다른 값을 넣어보겠습니다. 이렇게 에러를 출력하는 모습을 볼 수 있습니다.

✔️ 비동기 처리 결과

이때 Promise는 비동기 처리가 성공(fulfilled)하였는지 또는 실패(rejected)하였는지 등의 상태(state) 정보를 가지게됩니다.

• pending: 비동기 처리가 아직 수행되지 않은 상태
• fulfilled: 비동기 처리가 수행된 상태 (성공)
• rejected: 비동기 처리가 수행된 상태 (실패)
• settled: 비동기 처리가 수행된 상태 (성공 또는 실패)

✔️ Promise 호출 과정

하단 부분은 비동기 함수가 정상적으로 작동했을때 .then() , .catch()이라는 메소드에 callback함수로 담아서 확인이 가능합니다.

then()

비동기 함수 내에서 Promise 객체를 생성하고 그 내부에서 비동기 처리를 구현합니다. 이때 비동기 처리에 성공하면 resolve 메소드를 호출합니다. 이때 resolve 메소드의 인자로 비동기 처리 결과를 전달 하는데, 이 처리 결과는 Promise 객체의 후속 처리 메소드로 전달됩니다..

catch()

만약 비동기 처리에 실패하면 reject 메소드를 호출합니다. 이때 reject 메소드의 인자로 에러 메시지를 전달합니다. 이 에러 메시지는 Promise 객체의 후속 처리 메소드로 전달되며 후속 처리 메소드에는 대표적으로 then(Promise 반환)과 catch(예외)가 있습니다.

myPromise
    .then((result)=>{
        console.log('result',result);
    })
    .catch(()=>{
        console.log("err:", err);
    })
    .finally(()=>{
        console.log("finally");
    })

✔️ Promise 체이닝

비동기 함수의 처리 결과를 가지고 다른 비동기 함수를 호출해야 하는 경우가있습니다. 이때 함수의 호출이 중첩(nesting)이 되어 복잡도가 높아지는 콜백 헬이 발생하게됩니다.

프로미스는 후속 처리 메소드인 then이나 catch로 메소드를 체이닝(chainning)하여 여러 개의 프로미스를 연결하여 사용할 수 있기 때문에 콜백 헬을 해결할 수있습니다.

따라서, then 메소드가 Promise 객체를 반환하도록 하면(then 메소드는 기본적으로 Promise를 반환한다.) 여러 개의 프로미스를 연결하여 사용할 수 있습니다.

출처

짐코딩 유튜브 velog_khy226 poiemaweb

해당 글은 설치, 접속 방법이 주가 아닌 postman 코드 연결, 요청 확인등을 위주로 작성하였습니다! :)

"API의 개발을 빠르고 쉽게, 개발된 API를 테스트할 수 있고,팀원들간의 공유를 할 수 있게 해주는 플랫폼입니다."

✅ API 넌 누구?🧐

API란 Application Programming Interface의 약자입니다.

• Application

API의 맥락에서 애플리케이션이라는 단어는 고유한 기능을 가진 모든 소프트웨어를 나타냅니다.

• Interface

인터페이스는 두 애플리케이션 간의 서비스 계약이라고 할 수 있습니다.

interface를 쉽게 설명해보면 풀어보면, 어떤 두 매개체가 상호작용하여 영향을 끼칠 수 있는 어떠한 요소들을 의미합니다.요소들의 예시로 사람과 사람, 기계와 기계, 사람과 기계의 관계등을 나타낼 수 있습니다.

예시로 우리가 컴퓨터의 글을 입력하고 싶을때, 키보드를 사용해 글을 입력하게 될 것 입니다. 이때 우리가 사용한 키보드가 사람과 컴퓨터 사이에 인터페이스가 되는 겁니다.

• API

이 계약은 요청과 응답을 사용하여 두 애플리케이션이 데이터를 주고받는 방법이란뜻을 정의합니다. 이때는 컴퓨터끼리 데이터를 주고받는것이기 때문에 어떠한 양식이 필요할것이고 API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있습니다.

✅ API 사용방법

여럿 공식사이트에 들어가면 각 회사의 API가 존재하는 곳이 있습니다. 해당 API에는 key가 존재 할 것이고, 그에따른 사용 방법이 적혀있으니 참고하면 될 것이다.

✅ API 예시를 통한 Postman 사용법

express.js를 통해 만든 간단한 API를 통해 Postman을 테스트 해보자 먼저 간단한 사용법을 순서대로 보여주면 사진에서 보이는 1번(new button)을 누른 후 2번(HTTP icon)을 선택해준다. API에 작성한 요청(Get,Post등)을 적어주고 올바른 주소 값(localhost:3000)을 넣어준 후 API명령에 따라 작성해주면된다.

⚡️ 실전 사용

시작 전 서버를 꼭 켜주세요

✔️ Setting

//해당 란은 설정 값을 보여주기위해 작성되었습니다.
const express = require('express');
const app = express();
const cors = require('cors');
app.use(cors()); // 쿠키 파싱 미들웨어
app.use(express.json()); // JSON 요청 본문 파싱
// sample DB
![](https://velog.velcdn.com/images/yoon_min/post/1609075f-4394-4f99-8139-29d50e5ae60f/image.png)

//Port | 포트는 예제로 3003을 임의로 잡음
const PORT = 3003;
app.listen(PORT, () => {
    console.log(`서버가 http://localhost:${PORT}에서 실행 중`);
});

✔️ Get

먼저 간단한 get 요청을 postman으로 확인해보자

// 공개 라우트
app.get('/', (req, res) => {
    res.send('모든 사용자가 접근 가능');
});

해당 코드를 작성 후 Postman에서 정상작동하는지 요청을 받아보면 이렇게 잘받아오는걸 확인 할 수 있다. 다른 예시도 해보자

✔️ Post

해당 코드는 간단한 로그인 API입니다.

코드 주석을 잘보며 따라가시길 추천드립니다!

// Login API
app.post('/login', (req, res) => { //login 경로 request, response요청
    const {username, password} = req.body; // 요청 body에 username, password가 있어야해
    if (sample_db.id === username && sample_db.password === password) { //샘플 DB와 username과 password가 동일하다면
        const token = jwt.sign({ userId: sample_db.id, role: sample_db.role }, SECRET_KEY, { expiresIn: '1h' });//JWT 토큰을 1시간동안 생성해줘
        res.send({ token }); // response에 토큰을 넣어줘
    }
    else {
        res.status(401).send('Invalid username or password'); //틀리면 401 상태와 해당 메시지를 전송해줘
    }
});

자! 코드 주석을 잘 따라가며 봤으면 이제부터 Postman에서 요청해 확인해보도록 하겠습니다.

순서대로 따라와주세요

• 왼쪽 상단 빨간 박스부터 Post요청이었으니 Post로 변경합니다.
• /login으로 경로를 요청했으니 알맞게 변경합니다.
• code에서 body에 username, password 요청했으니 Body 선택합니다.

  const {username, password} = req.body; // 요청 body에 username, password가 있어야해

• Body 안에 raw 선택 후 sample_db에있던 데이터 값을 동일하게 넣어주고 send버튼을 누르면
• 성공적으로 전송(200 OK)가 완료되고
• JWT 토큰도 정상적으로 발급된 모습을 확인 가능합니다.

프로젝트 상단에서 문서화도 쉽게 가능합니다. 문서에 들어가 Publish 진행시 테스트 진행된 API들이 정리되기에 사용자에게 링크만 전달하게되면 보다 쉬운 협업이 가능합니다. 이점이 Postman에 가장 큰 장점이라 생각합니다. 해당 사진은 문서화가된 예시 사진입니다.

✨ Postman 정리

HTTP 요청 보내기 : GET, POST, PUT, DELETE 등의 HTTP 요청을 보낼 수 있다. 요청 파라미터 설정 : HTTP 요청에 필요한 파라미터를 쉽게 설정할 수 있다. 응답 확인 : HTTP 요청에 대한 응답을 확인하고, JSON, XML 등의 다양한 형식으로 응답을 처리할 수 있다. 히스토리 관리 : 이전에 보낸 HTTP 요청과 응답을 저장하고, 다시 사용할 수 있다. 환경 변수 설정 : 서로 다른 환경에서 동일한 HTTP 요청을 보내야 하는 경우, 환경 변수를 설정해 간편하게 처리할 수 있다. API 문서화 : API 요청과 응답을 문서화하고, 다른 개발자와 공유할 수 있다. Postman은 무료로 사용할 수 있으며, 다양한 템플릿과 예제 코드를 제공해주어 사용자가 더욱 효과적으로 API를 테스트하고 개발할 수 있도록 도와준다.

출처 velog | seunmini.log velog | oka1313.log

bcrypt란 암호화 라이브러리이다. 🚨우리는 먼저 사전 지식을 알아보고 가보도록하자🚨

✨사전 지식[해시, 해시함수, 복호화, 암호화]

비밀 번호를 안전하게 해시(hash) 처리하여 데이터 베이스에 저장할때 사용된다. 해싱된 값은 복호화가 불가능하고, 비교를 통해 비밀번호를 검증해야한다.

✅ 해시 함수? 해싱? 복호화? 너는 누구?

해시 함수는 무엇인가요?

[출처 | 토스페이먼츠 개발자 센터]

📲 입력값

해시 함수의 입력 값은 '메시지' 라고 부릅니다. 입력값으로 다양한 길이와 형태의 데이터가 사용됩니다. 단일 문자, 음악파일, 메시지뿐만 아니라 복잡한 데이터 구조도 입력 가능합니다.

또한 해시 함수는 입력 데이터를 특정 알고리즘에 따라 고정된 길이의 해시값으로 변환하는데, 이 과정에서 데이터는 내부적으로 이진수로 처리가 처리됩니다.

//Hello ASCII code 변환 ASCII code 이진수로 변환
"H" -> ASCII: 72 -> Binary: 01001000
"e" -> ASCII: 101 -> Binary: 01100101
"l" -> ASCII: 108 -> Binary: 01101100
"o" -> ASCII: 111 -> Binary: 01101111

//Hello 이진수 도출 값
01001000 01100101 01101100 01101100 01101111

🔐 해시 함수

해시 함수는 입력값을 고정된 크기의 블록으로 나눈 다음에 수학적 연산을 적용해 최종 해시를 출력한다. [출처 | 업비트 투자자보호센터]

해시 함수는 주어진 입력에 대해 항상 동일한 해시를 생성하고

이미지와 상단과 같은 해시함수 입력시, 같은 출력 값 도출

입력 데이터가 조금이라도 바뀌어도 출력값은 크게 달라집니다.

이미지와 하단과 같이 해시함수 입력시 상단과 크게 다른 값 출력

좋은 해시 함수는 효율적이며 다른 입력이 동일한 해시를 생성하는 것을 거의 불가능하게 합니다. 이런 특성 때문에 해시를 데이터 비교 및 무결성에 안전하게 사용할 수 있습니다.

대표적으로 사용되는 해시 함수는 다음과 같습니다.

• 암호화 해시 함수(Cryptographic Hash Functions) 비밀번호 보관, 디지털 서명 등 보안 관련 용도로 사용되는 해시 함수입니다. 대표적으로는 SHA-256, SHA-3, MD5 함수가 있죠.
• 비암호화 해시 함수(Non-cryptographic Hash Functions) 데이터 인덱싱 또는 해시 테이블과 같이 보안보다 효율이 필요할 때 사용되는 해시 함수입니다. 대표적으로는 MurmurHash, CityHash 함수가 있죠.

📤 출력값

해시 함수의 출력값은 '해시' 또는 '다이제스트'라고도 합니다. 입력값에 고유한 출력값이 생성되기 때문에 지문과 비슷하다고 생각할 수 있습니다.

출력값의 길이는 해시 함수에 따라 달라지는데 예를 들어 SHA-256 해시 함수는 항상 265비트의 출력값을 생성합니다. [출처 | 업비트 투자자보호센터]

✅ 해싱

해싱은 암호화와 달리 출력값을 원본 입력값으로 복호화할 수 없습니다. 출력값은 항상 고정된 길이의 문자열을 출력하기 때문에 입력 데이터가 손실되고, 출력값과 해싱 함수를 안다고 해도 대응하는 입력값을 찾는 것은 매우 어려운 일입니다.

🧐 그럼 해싱은 언제 필요하죠? ✨ 해시 함수는 다양한 분야에서 중요한 역할을 하고 있어요.

• 데이터 무결성 해시 함수로 데이터가 조작되지 않았는지 검증할 수 있습니다. 예를 들어, 파일을 다운로드하면 파일과 함께 해시가 제공됩니다. 다운로드 파일을 해싱해서 나오는 출력값과 다운로드할 때 받은 해시와 비교하면 데이터 무결성을 확인할 수 있습니다.

• 디지털 서명 암호화 해시 함수로 메시지나 문서에 디지털 서명을 추가할 수 있습니다. 디지털 서명은 메시지 전송자의 신원을 증명하고 내용이 변조되지 않았음을 보증합니다. 전송자는 메시지의 해시를 암호화해서 디지털 서명을 생성하고, 수신자는 디지털 서명을 복호화한 다음에 수신한 메시지의 해시와 비교합니다.

• 비밀번호 저장 대부분의 서비스는 사용자의 실제 비밀번호를 서버에 저장하지 않습니다. 대신 비밀번호의 해시를 저장합니다. 서버가 해킹되어도 실제 비밀번호가 노출되지 않기 때문에 비밀번호가 안전하게 보호가 가능합니다. 사용자가 비밀번호를 입력하면 비밀번호를 해싱하고, 서버에 있는 해시랑 비교하며 사용자의 신원을 확인합니다.

• 해시 테이블 테이블의 인덱스로 해시를 사용하는 자료구조입니다. 검색이 빠르다는 장점이 있지만 충돌이 일어날 수 있다는 위험이 있습니다.

✅ 복호화(Decryption)

복호화는 암호화의 기본 요소입니다. [출처 | 신시웨이] 암호화 알고리즘을 사용하여 평문을 암호문으로 변환합니다.

이후 암호화된 데이터를 원래의 원본 데이터로 되돌리는 과정으로 암호문과 암호키를 사용하여 수행됩니다.

이과정을 복호화라하며 올바른 암호키를 사용하여 복호화를 수행하여야 암호문이 원본 데이터로 해독 할 수 있습니다.

이제 bcrypt를 알아보자 ⚡️

✅ bcrypt

• 암호화 라이브러리 • 비밀번호를 안전하게 해시(hash) 처리하여 데이터베이스에 저장할 때 사용 • 해싱된 값은 복호화 불가능하고, 비교를 통해 비밀번호를 검증

✅ 주요기능

✔️ 비밀번호 해싱

• 비밀 번호를 안전하게 암호화함 해당 코드와 같이 해쉬 가능

  // 내가 삽입한 password를 해쉬함 | 작업 계수 10 (2^10 = 1,024회 반복)
  bcrypt.hash(password, 10, (err, hash) => {
      if (err) {
        console.error('해싱 에러:', err);
        return res.status(500).send('Server error occurred while hashing.');
      }
      console.log('해싱된 비밀번호:', hash);

  • BCrypt는 '작업 계수(work factor)'라는 매개변수를 사용합니다.

• 이 작업 계수는 해시를 생성하는 데 필요한 계산 횟수를 결정합니다.
• 계수가 1 증가할 때마다 필요한 계산 시간은 2배로 증가합니다.

// 작업 계수 10 (2^10 = 1,024회 반복)
bcrypt.hashpw(password, bcrypt.gensalt(10))

// 작업 계수 12 (2^12 = 4,096회 반복)
bcrypt.hashpw(password, bcrypt.gensalt(12))

✔️ 해시 비교

• 입력된 비밀번호와 저장된 해시를 비교 해당 코드와 같이 비교 가능

  // password와 hashed password를 compare 함수를 통해 비교해 맞는지 비교 확인한다.
  bcrypt.compare(password, hashedPassword, (err, result) => {
        if (err) {
          console.error('비교 에러:', err);
          return res.status(500).send('Server error occurred while comparing passwords.');
        }
        console.log('비밀번호 일치 여부:', result);

• ✔️ 솔트(salt)*
• 동일한 비밀번호에 대해 서로 다른 해시 값을 생성하기 위해 랜덤 데이터를 추가한다. 솔트가 있기에 같은 비밀번호일지라도 다른 해시 값을 가지게된다. [출처 | velog_sangmin7648]

✅ bcrypt 해쉬 비밀번호 구조

[출처 | velog_sangmin7648] ✔️ Algorithm • 알고리즘 식별자. '$2a$$'는bcrypt를 의미 ✔️ Cost factor • 키 스트레칭한 횟수. 2^n으로 위의 경우 2^10=1024 ✔️ Salt • 128비트 솔트, 22자 base64로 인코딩 ✔️ Hash • salting과 키 스트레칭 후 해시 값 ✔️ bcrypt에서 검증 • 비밀번호가 동일한지 검증하기 위해 입력된 비밀번호에 salting, 키 스트레칭을 해서 저장된 bcrypt 문자열과 비교

✅ 장점

✔️ 복호화 불가능

• 해시된 비밀번호는 복호화할 수 없음
• ✔️ 솔트(salt)로 안전성 강화*
• 동일한 비밀번호에 대해 다른 해시 값을 생성함
• ✔️ 간단한 사용*
• 비밀번호 저장 및 비교를 간편하게 처리 가능

✅ 단점

✔️ CPU사용 량

• 솔트 라운드 수가 높을수록 처리 시간이 길어진다.
  • 상단 코드에서 보았던 해당 부분에서 10을 나타낸다.

    bcrypt.hash(password, 10, (err, hash) => {...

    ✅ 주의사항

• 비밀번호는 절대 평문으로 저장하면안된다.(반드시 해쉬 비밀번호로 저장)
• 솔트 라운드 값을 적절히 설정(10~12추천)
• bcrypt는 비밀번호 해싱 전용이며, 데이터 암호화에는 사용하지 않음

** 오늘은 bcryp에 대해 알아보았습니다. 감사합니다.**

출처

토스페이먼츠 개발자 센터, MDN, 업비트 투자자보호센터

메모 오류 해결 list

[2019.06.04] 오늘의 TIL- 암호화 bcrypt.compare가 무조건 false로 나던 문제

들어가며

개인 프로젝트 진행 간 백엔드, 프론트 통신 단계에서 JWT라는 단어를 접하게되었다. 인증/인가, 세션과 토큰이라는 단어와 같이 나오는 단어였고, 대부분 큰플젝이 아니면 JWT쓴다고한다. 일단 찾아보고 공부하다보니 인증,인가 /세션, 토큰, 쿠키에 관한 이야기도 다른 글에서 추가로 적어 보도록하겠다.

너는 누구냐, JWT 🤯

JWT(Json Web Token)은 Json 객체에 인증이 필요한 정보들을 담은 후 비밀키로 서명한 토큰이다. 공식적으로 인증(Authentication) & 권한허가(Authorization) 방식으로 사용되는 인터넷 표준 인증 방식이다. 그리고, 필요한 모든 정보를 한 객체에 담아서 전달하기 때문에 JWT 한 가지로 인증을 마칠 수 있습니다. ( 보안 강화를 위해 예시로 JWE와 같은 방어 기술들을 함께 사용 가능합니다 )
JWT는 웹 표준(HTTP)을 따르기 때문에 대부분의 언어를 지원하기에 큰 장점으로 볼 수 있습니다. 가장 많이 사용되는 '로그인' 과정 위주로 풀어 보겠습니다.

JWT의 구조💻

JWT는 위와 같은 구조를 가지고 있습니다. 헤더, 내용, 서명이 '.'으로 구분하여 1개의 토큰을 이루고 완성된 토큰은 이와 같은 형태를 보입니다.

하단 토큰은 공식문서에서 예시이며, 인코더와 디코더를 볼 수 있으며 해당 링크를 통해 JWT 만들기 및 변하는 과정을 볼 수 있습니다.

Encoded

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Decoded

• Header
• Payload
• Signature

Header

{
  "alg": "HS256",
  "typ": "JWT"
}

헤더에서는 해시 알고리즘과 토큰의 타입을 정의 할 수 있습니다.

• alg : Signature에서 사용하는 알고리즘
• typ : 토큰 타입

HS256은 signature에서 HMAC SHA256을 의미하며, 해시 알고리즘 중 하나입니다. 타입의 값이 JWT은 이 토큰을 JWT로 명시해줍니다.

_HS256에 대한 자세한 내용은 auth0 공식 문서를 통해 확인 가능합니다 _

Payload

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}

내가 전달하고자하는 데이터를 포함할 수 있습니다.

데이터 각각의 Key를 claim이라고 부릅니다.

claim은 사용자가 원하는 Key, Value를 구성할 수 있으며, registered, public, private 이렇게 3가지 종류가 있습니다.

• registered claim: 필수는 아니지만 권장되는 미리 정의된 클레임 세트로 일부는 다음과 같습니다.

• iss(발급자), exp(만료 시간), sub(주체), aud(대상)* 등. JWT는 압축되도록 되어 있으므로 클레임 이름은 3자 길이에 불과합니다.

• public claim: JWT를 사용하는 사람이 원하는 대로 정의할 수 있습니다. 그러나 충돌을 피하려면 IANA JSON 웹 토큰 레지스트리에서 정의하거나 충돌 방지 네임스페이스가 포함된 URI로 정의해야 합니다.

• private claim: 이는 사용에 동의한 당사자 간에 정보를 공유하기 위해 생성된 사용자 지정 클레임이며 등록 클레임이나 공개 클레임이 아닙니다.

Payload는 Base64Url로 인코딩되어 JSON 웹 토큰의 두 번째 부분을 형성합니다. 서명된 토큰의 경우 이 정보는 변조로부터 보호되지만 누구나 읽을 수 있습니다.

⚡️ 암호화되지 않은 경우 JWT의 Payload 혹은 Header 요소에 비밀 정보는 넣으면 안된다.

Signature

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

서명 파트는 Base64 인코딩된 Header "." Payload 그리고 secret이 필요합니다. secret은 유저가 지정하는 비밀 코드이며, 위와 같이 해싱하면 서명이 완성됩니다.

JWT의 장단점

📌 장점

1. Stateless (무상태): • JWT는 서버에서 세션을 저장할 필요가 없기에, 애플리케이션이 무상태(Stateless)로 작동할 수 있습니다.
2. 다양한 클레임 지원: • JWT는 사용자 정보, 권한, 만료 시간 등의 정보를 클레임으로 저장 가능해 유연하게 사용 가능합니다.
3. Self-contained (자체 포함): • JWT 자체에 필요한 정보(사용자 정보, 권한 등)가 포함되어 있어 추가적인 데이터베이스 조회가 필요 없는 경우도 있습니다.
4. 확장성과 분산 시스템에 적합: • Stateless 인증 방식이기 때문에 여러 서버가 JWT를 동일하게 검증 가능해, 분산 시스템에 유용합니다.
5. 웹 표준 지원: • JWT는 OIDC(OpenID Connect)와 OAuth 2.0 표준에서 인증 토큰으로 사용되며, 다양한 언어 및 프레임워크에서 지원됩니다.
6. 네트워크 부하가 적다. http헤더나 url 파라미터를 통해 간단하게 전송되기 때문에 네트워크 부하 현상을 적습니다.

📌 단점

1. 보안 취약점: • JWT는 정보(클레임)를 디코딩할 수 있어, 민감한 정보는 저장해서는 안 됩니다. 또한 토큰이 탈취되면 무단 사용이 가능합니다. • 토큰은 Base64 URL로 인코딩되어 누구나 디코딩할 수 있지만, 서명(Signature)은 검증을 위한 것이지 암호화 아니다.
2. 토큰 크기 문제: • JWT는 사용자 정보와 서명을 포함해 일반적인 세션 ID보다 크기가 크기에 네트워크 트래픽이 증가할 수 있다.
3. 갱신 및 만료 처리: • JWT는 Stateless 특성상 서버에서 토큰 강제 만료 어려워 토큰이 유효한 동안은 사용이 가능하다. • 이를 해결하기 위해 Refresh Token과 함께 사용하거나, 토큰 블랙리스트를 도입해야 할 수 있다.
4. 무결성 검증 실패 시 문제: • 토큰의 서명이 올바르지 않으면 전체 토큰이 무효화된다,토큰에 포함된 데이터에 의존하는 경우 애플리케이션에서 예외 처리가 필요하다.
5. 무거운 페이로드 문제: • 많은 클레임(Claim)을 담으면 페이로드가 커지고, 이는 성능 저하로 이어질 수 있기에 페이로드에는 최소한의 정보만 담는것을 권장한다.

정리

사용 목적 : JWT 토큰은 사용자 인증과 로그인 유지를 위해 쓰인다 토큰의 구조 : Header, Payload, Signature Header: 서명 알고리즘 (공개키/개인키 or 비밀키) Payload : 토큰 정보(대상, 발급시각, 만료시각) Signature : (Header+Payload) 서명 (인증용)

참고 링크

https://jwt.io/introduction https://velog.io/@c65621/Session%EA%B3%BC-JWT https://velog.io/@vamos_eon/JWT%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EA%B0%80-1 https://velog.io/@chuu1019/%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90-JWTJson-Web-Token

프로그래밍을 하다 보면 작업을 처리하는 방식에 따라 동기(Synchronous)와 비동기(Asynchronous)로 나뉘게 됩니다. 동기와 비동기을 하단과 같이 알아보도록하겠습니다.

• 개념
• 차이점
• 자바스크립트 처리 과정, 관련된 코드를 작성해보겠습니다.

동기(Synchronous) 프로그래밍

동기 프로그래밍은 코드가 작성된 순서대로 작업이 처리되는 방식입니다. 각 작업이 끝날 때까지 다음 작업이 대기합니다. ** 즉, 하나의 작업이 완료되기 전까지는 다른 작업이 실행되지 않습니다.** 그림 출처: 기술노트 유튜브

프로그램이 순차적으로 진행될때 func()함수를 만나 해당 안에 작업을 모두 완료하고 나오는 모습을 도식화한 이미지이다.

동기의 특징

• 순차적 처리
  • 작업이 차례대로 처리되며, 이전 작업이 미완료시 다음 작업은 시작되지 안됌
• 블로킹(Blocking)
  • 어떤 작업이 오래 걸리면 다른 작업들은 대기 상태 지속

동기 방식 예시(code)

function syncTask() {
    console.log("첫 번째 작업 시작");
    for (let i = 0; i < 1000000000; i++) {} // 시간 지연을 위한 작업
    console.log("첫 번째 작업 완료");

    console.log("두 번째 작업 시작");
    console.log("두 번째 작업 완료");
}

syncTask();

장점

• 코드가 이해하기 쉽고 디버깅이 간편함.
• 작업이 순차적으로 처리되므로 결과를 예측하기 쉬움.

단점

• 시간이 오래 걸리는 작업(예: 파일 읽기, 네트워크 요청)이 있을 경우 전체 애플리케이션이 느려질 수 있습니다.

비동기(Asynchronous) 프로그래밍

비동기 프로그래밍은 작업이 병렬로 처리될 수 있도록 합니다. 어떤 작업이 끝나기를 기다리지 않고, 다른 작업을 진행이 가능합니다. 자바스크립트에서 비동기는 주로 콜백 함수, Promise, 그리고 async/await 기능을 사용하여 구현됩니다. 그림 출처: 기술노트 유튜브

프로그램이 순차적으로 진행될때 func()함수를 만나도 순차적으로 진행되며 callback 함수가 func()에게 확인 요청 전송시 func()함수를 확인 가능하다.

비동기 함수 정리

1. 콜백(callback)
2. Promise
3. async/await

1. 콜백(callback) 함수 방식의 비동기 처리

콜백(callback) 함수는 작업이 완료된 후 호출되는 함수입니다. 이는 비동기적으로 실행될 작업을 정의하는 데 유용합니다.

function asyncTask(callback) {
    console.log("첫 번째 작업 시작");
    setTimeout(() => {
        console.log("첫 번째 작업 완료");
        callback();
    }, 2000);
}

function secondTask() {
    console.log("두 번째 작업 시작");
    consol![](https://velog.velcdn.com/images/yoon_min/post/4bbce093-1d6b-4ae7-b429-958ee92c96b2/image.jpeg)
e.log("두 번째 작업 완료");
}

asyncTask(secondTask);

위 코드에서는 첫 번째 작업이 2초 후에 완료되고, 콜백 함수로 두 번째 작업이 실행됩니다.

2. Promise 방식의 비동기 처리

Promise는 비동기 작업을 처리하기 위한 또 다른 방법입니다. then 메서드를 사용하여 작업 완료 후의 처리를 정의합니다.

function asyncTaskWithPromise() {
    return new Promise((resolve) => {
        console.log("첫 번째 작업 시작");
        setTimeout(() => {
            console.log("첫 번째 작업 완료");
            resolve();
        }, 2000);
    });
}

asyncTaskWithPromise().then(() => {
    console.log("두 번째 작업 시작");
    console.log("두 번째 작업 완료");
});

3. async와 await방식의 비동기 처리

async와 await는 Promise를 더 쉽게 사용할 수 있도록 도와주는 문법입니다. await 키워드는 비동기 작업이 완료될 때까지 기다렸다가 작업을 계속 진행합니다.

async function asyncTaskWithAwait() {
    console.log("첫 번째 작업 시작");
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log("첫 번째 작업 완료");

    console.log("두 번째 작업 시작");
    console.log("두 번째 작업 완료");
}

asyncTaskWithAwait();

위 코드에서는 await를 사용해 첫 번째 작업이 끝날 때까지 기다리고 그 후 두 번째 작업이 실행됩니다.

비동기의 특징

• 비순차적 처리
  • 작업이 병렬로 처리될 수 있으며, 긴 작업이 끝날 때까지 다른 작업이 계속 진행될 수 있습니다.
• 논블로킹(Non-blocking)
  • 하나의 작업이 실행되는 동안 다른 작업을 계속 실행할 수 있어 성능 향상이 가능합니다.

장점

• 네트워크 요청이나 파일 읽기 등 시간이 오래 걸리는 작업이 있을 때 유용합니다.
• 애플리케이션이 멈추지 않고 계속 작업을 처리할 수 있습니다.

단점

• 코드가 복잡해지고 가독성이 떨어질 수 있습니다.
• 작업 순서를 보장하기 위해 추가적인 처리나 구조화가 필요합니다.

    (예: 콜백 지옥, Promise 체이닝)

동기와 비동기 비교

동기(Synchronous)

• 작업이 순차적으로 처리됨
• 블로킹 방식
• 코드가 이해하기 쉬움 코드가 복잡해질 수 있음

비동기(Asynchronous)

• 작업이 병렬로 처리될 수 있음
• 논블로킹 방식
• 느린 작업이 전체를 느리게 만듦 성능 최적화에 유리

  결론

동기와 비동기 프로그래밍은 각각의 장단점을 가지고 있으며, 상황에 맞게 적절히 사용하는 것이 중요합니다. 자바스크립트에서는 기본적으로 비동기 처리를 많이 사용하지만, 그 과정에서 콜백 함수, Promise, async/await와 같은 다양한 기법을 활용할 수 있습니다. 성능과 코드 가독성을 고려하면서 적절한 방법을 선택해 구현하는 것이 핵심입니다.

연결리스트(Linekd List)란?

핵심 | 연결리스트는 연속된 노드(Node)의 연결체이다.

그럼, 노드란?

연결리스트에서 사용되는 하나의 덩어리로 데이터와 링크를 담고있는 구조이다. 그림으로 먼저 알아보자

여기서 왼쪽에 data, 오른쪽에 next라 적혀있는 부분이 있다. 각 역할을 보면

• data : Data, value(데이터 값이 들어감)
• next : pointer(링크, 포인터 역할로써 다음 노드 주소 저장)

코드로 보게된다면

class Node{
    constructor(data){
        this.data=data;
        this.next=null;
       }
 }

이렇게 구성이되고 next의 연결리스트의 기본 모델로 보게된다면 목적지는 null값이 출력된다.

연결리스트의 종류

• 단순 연결리스트(Singly Linked List)
• 원형 연결리스트(Circular Linked List)
• 이중 연결리스트(Doubly Linked List)

필요 단어 | Head Node(노드의 시작점), Tail Node(노드의 마지막)

각 리스트는 그림으로 보게되면 쉽게 비교된다

단순 연결리스트

단순연결리스트는 처음 노드부터(Head Node) next가 경로를 찾아 다음 노드로 향하게되고 마지막 노드(Tail Node)은 None 값을 출력하게된다.

# Node 클래스 정의
class Node:
    def __init__(self, data):
        self.data = data  # 노드의 값
        self.next = None  # 다음 노드에 대한 포인터

# LinkedList 클래스 정의
class LinkedList:
    def __init__(self):
        self.head = None  # 첫 번째 노드 (head)

    # 리스트의 끝에 노드 추가
    def append(self, data):
        new_node = Node(data)
        if self.head is None:
            self.head = new_node
        else:
            last = self.head
            while last.next:
                last = last.next
            last.next = new_node

    # 리스트 출력
    def display(self):
        current = self.head
        while current:
            print(current.data, end=" -> ")
            current = current.next
        print("None")

# 연결 리스트 사용 예시
ll = LinkedList()
ll.append(10)
ll.append(20)
ll.append(30)
ll.display()  # 10 -> 20 -> 30 -> None

원형 연결리스트

원형연결리스트는 순서대로 next가 다음 노드를 찾아가게되고 마지막 노드(Tail Node)는 처음 노드(Head Nod)로 향하게된다.

# Node 클래스 정의
class Node:
    def __init__(self, data):
        self.data = data
        self.next = None

# CircularLinkedList 클래스 정의
class CircularLinkedList:
    def __init__(self):
        self.head = None

    # 리스트의 끝에 노드 추가
    def append(self, data):
        new_node = Node(data)
        if not self.head:
            self.head = new_node
            new_node.next = self.head  # 자기 자신을 가리키도록 함
        else:
            current = self.head
            while current.next != self.head:
                current = current.next
            current.next = new_node
            new_node.next = self.head  # 마지막 노드가 다시 첫 번째 노드를 가리킴

    # 리스트 출력
    def display(self):
        current = self.head
        if self.head is None:
            print("Empty list")
            return
        while True:
            print(current.data, end=" -> ")
            current = current.next
            if current == self.head:
                break
        print("(Back to Head)")

# 원형 연결 리스트 사용 예시
cll = CircularLinkedList()
cll.append(10)
cll.append(20)
cll.append(30)
cll.display()  # 10 -> 20 -> 30 -> (Back to Head)

이중연결리스트

이중연결리스트는 처음 노드부터(Head Node) next가 경로를 찾아 간 후다음 노드로 향하게되고 마지막 노드(Tail Node)에서 거꾸로 돌아온다.

# Node 클래스 정의
class Node:
    def __init__(self, data):
        self.data = data  # 노드의 값
        self.next = None  # 다음 노드에 대한 포인터
        self.prev = None  # 이전 노드에 대한 포인터

# DoublyLinkedList 클래스 정의
class DoublyLinkedList:
    def __init__(self):
        self.head = None  # 첫 번째 노드 (head)

    # 리스트의 끝에 노드 추가 (Append)
    def append(self, data):
        new_node = Node(data)
        if self.head is None:  # 리스트가 비어있을 경우
            self.head = new_node
        else:
            current = self.head
            while current.next:  # 마지막 노드까지 이동
                current = current.next
            current.next = new_node  # 마지막 노드의 다음을 새로운 노드로 설정
            new_node.prev = current  # 새로운 노드의 이전을 현재 노드로 설정

    # 리스트의 앞에 노드 추가 (Prepend)
    def prepend(self, data):
        new_node = Node(data)
        if self.head is None:  # 리스트가 비어있을 경우
            self.head = new_node
        else:
            new_node.next = self.head  # 새로운 노드의 다음을 현재 첫 번째 노드로 설정
            self.head.prev = new_node  # 현재 첫 번째 노드의 이전을 새로운 노드로 설정
            self.head = new_node  # 새로운 노드를 첫 번째 노드로 설정

    # 리스트 출력 (앞에서부터)
    def display_forward(self):
        current = self.head
        while current:
            print(current.data, end=" <-> ")
            current = current.next
        print("None")

    # 리스트 출력 (뒤에서부터)
    def display_backward(self):
        current = self.head
        if current is None:
            return
        while current.next:  # 마지막 노드까지 이동
            current = current.next
        while current:  # 마지막 노드에서 첫 번째 노드까지 이동
            print(current.data, end=" <-> ")
            current = current.prev
        print("None")

# 이중 연결 리스트 사용 예시
dll = DoublyLinkedList()
dll.append(10)
dll.append(20)
dll.append(30)
dll.prepend(5)  # 리스트의 앞에 추가

print("Forward traversal:")
dll.display_forward()  # 5 <-> 10 <-> 20 <-> 30 <-> None

print("Backward traversal:")
dll.display_backward()  # 30 <-> 20 <-> 10 <-> 5 <-> None

그럼 배열과 연결리스트의 다른점은 뭘까?

배열과 리스트의 차이점은 그럼으로 보면 더욱 쉽다.

array즉 배열은 하나의 메모리 안에 순서대로 연결되어있다면

linked list는 각노드가 다음 노드의 주소를 찾아가는 모습을 볼 수 있다.

그렇다면 언제 배열과 연결리스트는 뭐가달라?

두 가지의 큰차이점은 하단과 같다. array

• 배열은 random access 가능
• 배열의 n번째 원소 방문시 O(1)시간으로 가능하다

    ex) arr[3]

• 원소 삽입&삭제시 일반적으로 O(n)시간 소요
• Linked List*
• 연결리스트는 random access 불가능
• 연결리스트의 n번째 원소 방문시 O(n)시간으로 가능 head노드부터 n번째 노드까지 순회하게된다.
• 배열보다 빨라질수있는 노드 삽입 삭제 가능

공부를 위해 기록해두는 글이다보니 틀린점이나 수정부분이 있으면 댓글 부탁드립니다!

현재 저는 프론트엔드 개발자겸, 윤민필름으로 취미 사진가 활동을하고있습니다.

이 웹 프로젝트를 시작하게된 이유는 나만의 자율성을 확보하고자하는 마음이었습니다.

늘 좀 더 이쁘고 감성지게 꾸미고싶은 SNS 피드지만, SNS의 특성상 한번 올리게되면 쉽게 피드수정이 불가능하다는 점과 정해진 규격으로 원하는 느낌을 전달하기가 어렵다는게 큰 단점이었습니다.

그래서 그동안 공부해왔던 지식들을 가지고 스스로 웹 사이트 자체를 제작하고자 합니다. 해당 자료들을 기록해나가며 제 소중한 순간들을 하나씩 남겨 보고자합니다.

'같이의 가치를' 해당 프로젝트에 대한 첨언은 환영입니다.✨ 많은 시행착오들을 블로그에 적어 내려갈 예정이니 혹시 지나가다 관심이 있으면 한번씩 봐주시면 감사하겠습니다 :)

하단 링크를 통해 제 활동을 확인 할 수 있습니다. 📸 @yoonmin_film SNS 📸

현재 무료로 강의를 청강할 수 있으며 비전공자로 시작해 현재 컴공 CS 수업을 듣고있지만 독학으로 시작한 비전공자는 언제나 스스로 공부하는 것이 가장 중요한 것을 알기에,,,🫠 해당 수업을 시작하게 되었습니다.

인터넷에서 많은 분들이 추천했던 강의이며 무려 MIT 수업이라니,,,🫨

The Missing Semester of Your CS Education [ English ver.]

The Missing Semester of Your CS Education [ Korea ver.]

미국 대학은 보통 여름방학이 길고 겨울방학이 1달정도로 짧은데, MIT에서는 1월에 쉬는 약 한 달간의 시간을 IAP(Independent Activities Period) 라고 부릅니다.

CS분야 코스중 웹사이트 만들어보기, 포케 게임 머신 만들기 등 여러 활동이 있으며 해당 수업도 IAP 수업중 하나입니다. 대충 한 달 안에 대부분 둘러볼 수 있는 코스입니다!

Shell, ,Git, Vim 등 CS 과목 수업에서 제대로 가르쳐주지 않아 상황에 맞춰 필요한 것만 공부하며 해결했던 분들에게 알맞은 수업일꺼 같습니다.

MIT 챌린지 관련 영상 | 출처 : ( 샤니의 공부로그 ) ✨추가로 MIT에서 진행하는 챌린지도 있다고합니다-! 관심있는 분들으 확인해보셔도 좋을꺼 같아요🥰 The Missing Semester of Your CS Education 수업을 다 듣게되면 저도 샤니님의 글을 보고 한 단계씩 따라가며 공부해볼까합니다-!

이 글을 보시는 분들에게도 큰 도움이 되었으면 좋겠네🍀

디앱(DApp, Decentralized Application)이란 탈중앙화 애플리케이션의 약자로 _탈중앙화된 블록체인 플랫폼을 기반으로 작동하는 앱_을 말합니다. 예를 들어 안드로이드 같은 스마트폰 운영체제가 이더리움과 같은 '플랫폼'이라면 안드로이드용 스마트폰 앱이 디앱이라고 할 수 있습니다.

[출처]googleplaystore, andriod

[출처]ethereum, pixabay

기존에는 ‘중앙화 애플리케이션’에서는 중앙 서버의 데이터베이스에 정보를 저장하였습니다. 또한 그 운용 역시 중앙 서버를 통해 이루어 졌습니다.

하지만 디앱이 나오게되면서 중앙 서버가 가졌던 신뢰와 권한을 블록체인 네트워크에 참여하는 수많은 컴퓨터가 나눠 가지게되면서 중앙 서버의 역할을 대체했습니다.

디앱 출현 배경

블록체인 기술의 발달에 따라 은행, 기업, 기관, 정부 등의 중앙 집중적인 제 3자의 보증 없이도 당사자끼리 직접 신뢰할 수 있게 해주는 블록체인 위에 스마트 컨트랙트를 추가하여 실행할 수 있게 해주는 DApp이라는 개념이 출현하였습니다.

스마트 컨트랙트 도입 이후

디앱이란 개념은 본격적으로 사용되어 하단과 같이 발전했습니다.

• DAO(탈중앙화된 자율조직)
• DeFi(탈중앙화된 금융)
• NFT 마켓플레이스
• P2E(Play-to-Earn)

가상자산 시장에서 가장 많이 사용되는 디앱은 탈중앙화 거래소(DEX, Decentralized Exchange)입니다. 탈중앙화 거래소는 중간 매개자 없이 스마트 컨트랙트를 통해 유저와 유저가 직접 거래하게 됩니다. (모든 신뢰와 권한은 수 많은 컴퓨터가 나눠가지게되어서 가능하게 되었습니다.)

Dapp 설계 및 구현 [WEB(feat.node.js)]

김순곤님이 작성한 논문 DApp 개발을 위한 블록체인 2.0 이더리움 플랫폼 분석 연구 과정 일부를 설명을 위해 발췌하였다.

전체적인 DApp의 시스템은 Back-End 시스 템 사양으로 Solidity, Truffle FrameWork, API, 라이브러리 등은 계약을 작성하는 곳에서 필요하다.

제품 구매, 등록, SOT 환전, 암호 화 폐 상품운영 등 Back-end에서 모든 것을 구현 한 후에 JavaScript를 이용하여 UI와 연동하여 E-bay같은 시스템을 완성해 진행하였다. [출처] : DApp 개발을 위한 블록체인 2.0 이더리움 플랫폼 분석 연구(김순곤) 일부 발췌

실제로 그림2와 같은 DApp 웹구조에서 Front-end에는 HTML폼이 있어서 사용자가 이 름, 가격, 이미지, 설명 등의 상품 정보를 직접 입력하고 저장 가능하다.

상품 정보와 이미지를 IPFS에 올리고 그 링크를 연결한다. 또한 컨트랙 트를 호출하여 IPFS의 상품 링크를 블록체인에 저장한다. 상품을 블록체인에 올리는데 성공하면 컨트랙트가 이벤트를 하나 생성하고 이 이벤트는

[출처] : DApp 개발을 위한 블록체인 2.0 이더리움 플랫폼 분석 연구(김순곤) 일부 발췌

node.js 서버에서 이러한 이벤트를 모니터링 하고 컨트랙트가 이벤트를 생성하면 이벤트의 내 용을 읽어서 Mongo DB 데이터베이스에 상품 정보를 입력한다.

일반적인 제품의 유통 구성도 는 그림 3과 같이 되어 있으며 본 논문에서도 이를 기반으로 주문, 결제, 제품 생산들 모두에 블록을 이용하여 사용하는 방식으로 바꿔서 기존 유통업 어플과의 차이점을 두었다.

장점

1. 보안성 및 투명성

데이터를 중앙화 된 데이터베이스에 기존의 앱과 다르게 중요 데이터를 탈중앙화된 블록체인에 저장하여 데이터의 보안성과 투명성을 높일 수 있습니다.

2) 인센티브

사용자의 참여 및 행동에 따라 스마트 계약을 통해 코인을 제공할 수 있습니다. (다양한 사람들이돈을 받고 계약 관리자 기능을 가능케한다. 지금의 블록체인과 같음)

3) 거버넌스 참여

프로젝트의 방향성에 대한 제안 및 공동 의사 결정을 코인 보유자들이 투표로 결정할 수 있습니다.

단점

1) 느린 속도

블록체인의 블록 생성 시간에 따라 속도가 달라지지만 일반적인 앱보다는 느립니다. 또한 디앱의 사용량이 증가하여 블록체인의 처리량을 초과하면 데이터를 기록하기 위한 시간이 더욱 증가합니다.

2) 높은 비용

블록체인의 유지 비용은 일반적인 중앙화 데이터베이스보다 비쌉니다. 따라서 블록체인에 데이터를 기록하는 데는 비용이 필요합니다.

3) 불편한 사용자 경험

블록체인을 사용하는 디앱의 근본적 문제는 사용자 경험 문제로 귀결됩니다. 사용자는 느린 속도로 인해 즉각적으로 디앱과 상호작용 할 수 없습니다. 또한 높은 거래 비용은 사용자가 지불해야 합니다.

최종 생각

보안 부분에있어서 탈중앙화는 놀라운 변화라 생각합니다. 하지만 아직 일반 사용자들에게 있어서 아직 개선되야할 부분이 많이 존재합니다.

정말 좋은 보안 기술이지만, 그에 따르는 단점들을 최적화 및 해결이 되어야 대중화 가능한 기술이지 않을까 생각합니다.

인공지능 발전을 통해 점점 가속화되는 하드웨어 기술들이 블록체인 기술의 비용 및 속도에 대한 일부분을 해결해 줄수있지 않을까 생각합니다.

출처: 업비트 투자자보호센터, DApp 개발을 위한 블록체인 2.0 이더리움 플랫폼 분석 연구(김순곤),

블록체인 기술에 처음으로 들어오게되면 마주하게되는 ERC-20 ERC-20이란 뭘까?

ERC-20란?

ERC 20(Ethereum Request for Comment 20)의 약자이다. 즉, 이더리움 프로토콜 개발을 위한 표준을 제안하는 문서의 집합이다.

ERC-20 외에 ERC-223, 621, 827등 여러 다른 종류가 있다. 위에 적힌 이들은 대부분은 ERC-20을 기반으로 뻗어나간 형태이기에 ERC-20을 분석해 보도록 하겠다.

그 외에 많은 ERC-000가 있으니 여기를 클릭해 확인해보자

ERC를 알기 위핸 먼저 Ethereum, EIPs를 알아야한다

이더리움(Ethereum)이란?

이더리움은 자체 블록체인을 기반으로 탈중앙화된 애플리케이션들이 작동할 수 있도록 고안된 하나의 플랫폼 네트워크이다.

디앱(Decentralized Application의 약자 플랫폼 코인 위에 작동되는 탈중앙화 분산 애플리케이션)은 이러한 이더리움 플랫폼 상에서 스마트 계약을 이용하여 쉽고 빠르게 토큰을 발행할 수 있다.

이더리움 블록체인에서는 이더(ETH)가 사용되고, 이더리움 블록체인 상의 디앱은 또 다른 다양한 분야에 적용될 수 있는 각각의 솔루션으로 그에 맞는 토큰을 발행하게된다.

이때 발행된 토큰은 독자적인 토큰인 듯 하지만 실제로는 이더리움 생태계에서 호환 및 사용 가능하다.

[출처] 이더리움

그렇다면 EIPs란?

EIPs(Ethereum Improvement Proposals)는 이더리움 개선 제안을 의미한다. EIP는 이더리움 커뮤니티에 정보를 제공하거나 이더리움 프로세스 , 환경에 대한 새로운 시능을 설명하는 설계 문서이다.

좋다 그럼 다시 그럼 ERC로 돌아가보자.

먼저 ERC-20에서 20은 리퀘스트 숫자이다. ERC-20은 이더리움 블록체인 네트워크에서 정한 표준 토큰 스펙이다.

이더리움 블록체인을 사용하여 생성된 대체 가능한 토큰에 대한 기술 표준이고, ERC-721의 대체 불가능 토근(NFT)와는 다릅니다.

ERC-20의 역사

ERC-20은 이더리움 블록체인의 스마트 계약 표준에 대한 필요성을 해결이 필요했다. 이에 개발자 Fabian Vogelsteller가 2015년에 Vogelsteller는 프로젝트의 Github 페이지를 통해 이더리움 의견 요청(ERC)를 제안서를 제출했다. 20번째 comment이므로 ERC-20이라는 명칭이 지정되었다.

특징

규칙으로는 하단과 같이 6가지 함수가있다.

totalSupply()
transfer(address _to, uint256 _value)
balanceOf(address _owner)
transferFrom(address _from, address _to, uint256 _value)
approve(address _spender, uint256 _value)
allowance(address _owner, address _spender)

자세히 하나씩 살펴보자

• totalSupply ()
  • 총 발행량

    totalSupply()

• transfer() 함수
  • 송금
  • _to에게 _value만큼 토큰을 전송

transfer(address _to, uint256 _value)

• balanceOf () 함수
  • 잔액
  • _owner가 소지하고 있는 토큰의 수량 확인

    balanceOf(address _owner)

• transferFrom () 함수
  • 사용자는 송금 기능을 사용하여 측정 토큰을 사용자가 전송및 교환 가능
  • _from으로부터 _to에게 _value만큼 토큰 전달

    transferFrom(address _from, address _to, 

• approve () 함수
  • 승인 기능 위조 토큰을 만드는 것을 방지
  • _spender에게 _value만큼 토큰의 권한을 부여
  • 토큰의 총 발행 양을 확인해 트랜잭션을 허용하거나 거부하고, 최대 토큰 수를 유지 관리하고 어떤 지갑에 어떤 토큰이 있는지 추적한다.

    approve(address _spender, uint256 _value)

• allowance ()
  • 허용 기능 누군가가 시스템을 속이고 본인이 소유한 것보다 더 많은 토큰을 보내고자 하는 상황일 때, 허용 기능을 통해사용자들은 자신들이 가진 것보다 더 많은 토큰을 보낼 수 없다.
  • _owner가 _spender에게 권한을 부여한 토큰 수량 확인
  • 거래가 이루어지면 취소된다.
  • 모든 트랜잭션은 트랜잭션이 실행되기 전에 유효한지 이중으로 확인된다.

    allowance(address _owner, address _spender)

    선택적 규칙

    선택적 규칙은 모든 사람의 편의를 위해 존재한다. 이 옵션들은 토큰, 심볼 및 10진법 규칙이다. 토큰의 이름은 사람들이 어떤 토큰을 다루고 있는지 알 수 있도록 도와주는 역할을 한다.

예를들어 싸이클린의 ERC-20 토큰 이름은 CyClean이다. 싸이클린의 심볼은 CCL이며, Dobitrade와 HitBTC에서 이러한 방식으로 표시되어 있다. 마지막으로 10진법 규칙이 있다. 이는 토큰을 몇 개의 10진수로 나눌 수 있는지를 알려준다. 싸이클린 토큰은 18개의 소수점으로 나눌 수 있다. 10진수 값이 0이면 토큰이 분리되지 않는다.

코인

이더리움 네트워크에서 이더는 자유롭게 거래된다. 이더는 모든 종류의 거래에 사용되는 토큰이나 암호화폐로 간주한다.

이더리움 네트워크에는 이더와 교환 가치에 기반해 사용되는 다른 토큰들도 존재한다. 이더리움 블록체인에서 또 다른 토큰을 실행하려면 ERC-20이라고 불리는 스마트 계약에서 코드나 기술 표준을 설정해야 한다.

문제점

스마트 계약 결제 수단으로 ERC-20 토큰을 사용할 경우 토큰이 파괴되는 현상이 나타난다.

ERC-20 토큰은 다른 이더리움 주소 사이에서 이동할 수 있는데, 그러나 이더리움 블록체인의 일반적인 에테르 거래는 근본적으로 다르다.

트랜잭션 양 및 추가 정보에 대한 트랜잭션 필드, 정보 필드의 필드를 포함하는 이더넷을 전송한다. 그러나 이때 토큰 트랜잭션에서 보낼 토큰 수에 대한 정보는 두 번째 필드에 있다.

따라서 양쪽의 당사자의 주소 간에 전송이 가능하지만 다른 스마트 계약 기능의 트리거로 토큰을 사용하면 작동하지 않는다.

사용자가 트랜잭션을 스마트 계약으로 보내고 스마트 계약이 인식되지 않으면 트랜잭션의 에테르가 영구적으로 손실된다. 이더로만 결제해야 하는 버그가 존재하게 되어, 현재까지 이 버그 때문에 약 3백만 달러어치의 토큰이 사라져버렸다고 한다.

[출처]해시넷, 무지개곰 티스토리 블로그, Investopedia, coinmarketcap