코코의 한정된여행

Warning: Extra attributes from the server: class,style

cocho/kuby — Tue, 13 Feb 2024 09:55:20 +0900

Warning: Extra attributes from the server: class,style

이런 오류가 생기면

suppressHydrationWarning 을 추가하면 된다

/app/layout.tsx

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="ko" suppressHydrationWarning>
      <body>{children}</body>
    </html>
  );
}

Flutter Flavor 간단하게 쓰자

cocho/kuby — Tue, 13 Feb 2024 09:54:37 +0900

Flutter 의 Flavor 를 간단하게 사용하는 방법을 알아볼께요

Flavor?

Flavor 는 nodejs 에 process.env.NODE_ENV 또는 java spring 의 profiles 설정 같은 환경 이라고 볼 수 있어요

이 방법을 사용하면, 무료버전/유료버전 이나, 흔히 웹 프로젝트에서 사용하는 profile 같은 속성을 정의 할 수 있어요.

이번에는 최대한 타 라이브러리는 사용하지 않고, 최대한 간단하게 flavor 를 정의 하고, 프로젝트 내에서 flavor 이름을 접근하는 방법을 알아볼께요

시나리오

현재 Flutter 앱과 통신하는 API 서버가 도메인이 두개로 나누어져 있다고 설정 해 볼께요

환경은 현재 production 환경에서 구동되고 있는 real 환경,

테스트 및 개발중인 stage 환경 두개로 나누었어요

real 서버의 도메인은 https://api.example.com 이고

stage 서버의 도메인은 https://stage.example.com 이라고 가정 할께요

Android

Android 에서 Flavor 를 설정하려면 아래 설정 가이드를 따라주세요

android/app/build.gradle

android {
    // other config....

    // 적용 할 Flavor 그룹 이름이에요
    // 어떤이름이든 상관없어요
    flavorDimensions "default"

    // Flavor 설정을 시작합니다
    // 여기서는 stage 와 real 이라는 이름으로 정의 했어요
    productFlavors {
        // stage 설정
        stage {
            // flavorDimensions 에 정의한 flavor 그룹 이름이에요
            dimension "default"

            // 디바이스에 설치 될 이름은 MyApp.stage 라고 합니다
            resValue "string", "app_name", "MyApp.stage"

            // applicationId 가 동일하면, 동일한 앱이 덮어써지기 때문에, suffix 로 .stage 라고 넣어줄꼐요
            // 예를들어, io.cocho.myapp 이 원래 applicationId 라면, io.cocho.myapp.stage 라고 만들어지게 되요
            applicationIdSuffix ".stage"

            // 이 Flavor 의 minSdk 를 설정합니다
            minSdkVersion 28
        }

        // real 설정
        real {
            // flavorDimensions 에 정의한 flavor 그룹 이름이에요
            dimension "default"
            // 디바이스에 설치 될 이름은 MyApp 라고 합니다
            resValue "string", "app_name", "MyApp"
            applicationIdSuffix ""
            minSdkVersion 28
        }
    }

    // other config...
}

이제 애플리케이션 이름을 구분 할 수 있도록, 설정 해 줄께요

menifest.application 속성의 android:label 을 아래처럼 바꿔주세요

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:label="@string/app_name"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <!-- ...other config -->
    </application>
</manifest>

IOS

IOS 설정은 Android 보다 조금 복잡해요 천천히 알려드릴께요

먼저 idea ios/Runner.xcworkspace 파일을 xcode 로 열어주세요 (또는 idea 에서 ios 프로젝트를 열어주세요)

PROJECT > Runner 의 Configurations 섹션에서 Debug 와 Release 를 real 과 stage 하나씩 각각 복제할께요

아래는 결과화면 이에요

이제 Android 처럼 패키지 이름을 변형시킬꺼에요

TARGETS > Runner > Build Settings 에서 product 라고 검색 해 보면 Packaging 항목에 Product Bundle Identifier 항목 을 펼치고

Debug-stage 와 Release-stage 의 패키지 이름 끝에 .stage 라고 추가 해 줄께요

아래는 결과화면 이에요

이제 다시 좌측 상단에 더하기 (+) > Add User-Defined Setting 을 누르면 User-Defined 항목에 NEW_SETTING 이 추가되는 것을 볼 수 있을꺼에요.

이 값을 APP_NAME 으로 바꾸고 real 과 stage 의 앱 이름을 구분 할 수 있게 변경 해 줄께요

아래는 결과화면 이에요

이제 앱 이름을 User-Defined 에 설정 한 APP_NAME 으로 변경할께요

ios/Runner/Info.plist

<key>CFBundleDisplayName</key>
<string>$(APP_NAME)</string>

이제 마지막이에요 Flavor 이름을 정의할꺼에요

Xcode > Product > Scheme > Manage Scheme 를 눌러주세요

그 다음, Runner 라고 되어있는 원본 Scheme 를 선택 후, 좌측 하단에 점3 개를 누른 후 Duplicate 를 눌러주세요

그 다음, 이름을 real 이라고 지어줄께요

동일한 방법으로 stage 이름의 Scheme 를 만들어 주세요

아래는 결과화면 이에요

이제 stage 이름의 Scheme 를 선택 후, 좌측하단에 Edit 을 누르고 real 이름의 빌드 설정들을 stage 로 바꿔주세요

Debug-real 은 Debug-stage 로, Release-real 은 Release-stage 로 바꿔주세요

이제 모든 설정은 다 끝났어요

Flutter

이제 Flutter 를 실행 할 때, --flavor 옵션으로 빌드를 변형 시킬 수 있어요

flutter run --flavor stage
flutter build --flavor stage

flutter run --flavor real
flutter build --flavor real

Flutter 에서 flavor 이름은 아래처럼 접근 할 수 있어요

import 'package:flutter/services.dart';

print("$appFlavor"); // stage or real

각각 Flavor 이름을 가져 온 모습

Android stage	Android real	iOS stage	iOS real

마무리

프로젝트 내부에서 Flavor 이름으로 접근하면, 별도로 빌드하고 쉽게 테스트하고 안전하게 배포 할 수 있겠죠?

전체 코드는 examples/flutter_simple_flavor 이곳에서 확인 해 보세요!

Flutter + Springboot 로 Firebase Auth 제대로 쓰자

cocho/kuby — Tue, 13 Feb 2024 09:50:21 +0900

Flutter 에서 Firebase 의 Authentication 서비스를 이용해, Spring boot 로 구현 된 API 서버와 함께 사용하는 방법을 알아보겠습니다.

Firebase 인증으로 구현 된 앱에서 API 를 호출 할때, Bearer 토큰을 Authorization 헤더로 넘겨주어야 합니다.

요청예시

GET /me
Authorization: Bearer {firebase id token}

만약 Dio 패키지를 사용 할 경우, dio 에서 제공하는 InterceptorsWrapper 를 이용해서 구현 할 수 있습니다


class FirebaseBearerInterceptor extends InterceptorsWrapper {
  @override
  void onRequest(
      RequestOptions options, RequestInterceptorHandler handler) async {
    if (FirebaseAuth.instance.currentUser != null) {
      final token = await FirebaseAuth.instance.currentUser?.getIdToken();
      if (token != null) {
        options.headers['Authorization'] = "Bearer $token";
      }
    }
    return handler.next(options);
  }
}

final dioClient = Dio(BaseOptions(baseUrl: baseUrl))
      ..interceptors.addAll([
        FirebaseBearerInterceptor(),
      ]);

Spring boot 로 API 서버 구현하기

Spring boot 프로젝트를 생성합니다

oauth2-resource-server, security, web 모듈이 필요합니다

dependencies {
    implementation("org.springframework.boot:spring-boot-starter-oauth2-resource-server")
    implementation("org.springframework.boot:spring-boot-starter-security")
    implementation("org.springframework.boot:spring-boot-starter-web")
    testImplementation("org.springframework.boot:spring-boot-starter-test")
    testImplementation("org.springframework.security:spring-security-test")
}

issuer-uri 를 Firebase 프로젝트 ID 로 설정합니다.

spring.security.oauth2.resourceserver.jwt.issuer-uri=https://securetoken.google.com/<Firebase Project ID>

프로젝트 ID 는 Firebase Console 에 프로젝트 설정 > 일반 > 프로젝트 ID 섹션에서 찾을 수 있습니다.

API 구성

이제 유저정보 조회 및 게시글 조회 하는 기능을 만들어 보겠습니다

MyAwesomeController.kt

package org.example.myauthappapi

import org.springframework.security.access.prepost.PreAuthorize
import org.springframework.security.core.Authentication
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RestController

@RestController
class MyAwesomeController {

    @GetMapping(value = ["/me"])
    fun me(authentication: Authentication): Authentication {
        return authentication
    }

    @GetMapping(value = ["/post"])
    fun post(): String {
        return "my awesome post"
    }
}

이제 SecurityFilter 를 설정합니다.

SecurityConfig.kt

package org.example.myauthappapi

import org.springframework.context.annotation.Bean
import org.springframework.context.annotation.Configuration
import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity
import org.springframework.security.config.annotation.web.builders.HttpSecurity
import org.springframework.security.web.DefaultSecurityFilterChain

@EnableMethodSecurity
@Configuration
class SecurityConfig {

    @Bean
    fun securityFilterChain(http: HttpSecurity): DefaultSecurityFilterChain? {
        http
            .authorizeHttpRequests { auth ->
                auth
                    .requestMatchers("/me").authenticated()
                    .anyRequest().permitAll()
            }
                        // resource server 활성화
            .oauth2ResourceServer { oauth -> oauth.jwt { } }
        return http.build()
    }
}

이제 /me 와 /post 를 각각 호출 해보세요

/me 는 401 오류가 나오면서 요청에 실패하는 걸 볼 수 있습니다

curl http://localhost:8080/post -i
HTTP/1.1 200
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-XSS-Protection: 0
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Content-Type: text/plain;charset=UTF-8
Content-Length: 15
Date: Thu, 08 Feb 2024 13:57:18 GMT

curl http://localhost:8080/me -i
HTTP/1.1 401
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Set-Cookie: JSESSIONID=3AA95483DCCF2EFCDC9A112A7678FCCB; Path=/; HttpOnly
WWW-Authenticate: Bearer
X-Content-Type-Options: nosniff
X-XSS-Protection: 0
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Content-Length: 0
Date: Thu, 08 Feb 2024 14:14:56 GMT

API 보호 테스트 해보기

Firebase Console 에서 Signin method 의 email 을 활성화 하고, 테스트 계정을 생성하세요

저는 test@email.com / 123456 으로 생성했습니다.

이제 idToken 을 받아오겠습니다.

curl -XPOST 'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=[API_KEY]' \
-H 'Content-Type: application/json' \
-d '{
    "email": "test@email.com",
    "password": "123456",
    "returnSecureToken": true
}'

API_KEY 는 Firebase Console 의 웹 API 키 입니다

위처럼 호출하면 아래와 비슷하게 나오는 것을 확인 할 수 있습니다. idToken 항목을 복사 해 주세요

{
  "kind": "identitytoolkit#VerifyPasswordResponse",
  "localId": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
  "email": "test@email.com",
  "displayName": "",
  "idToken": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjUzZWFiMDBhNzc5MTk3Yzc0MWQ2NjJmY2EzODE1OGJkN2JlNGEyY2MiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vbXlhdXRoYXBwLTJlYWFkIiwiYXVkIjoibXlhdXRoYXBwLTJlYWFkIiwiYXV0aF90aW1lIjoxNzA3NDAxNDE0LCJ1c2VyX2lkIjoiQW1VckRtajRWemdrSUtLNG0xS1FDSkxZamhnMiIsInN1YiI6IkFtVXJEbWo0Vnpna0lLSzRtMUtRQ0pMWWpoZzIiLCJpYXQiOjE3MDc0MDE0MTQsImV4cCI6MTcwNzQwNTAxNCwiZW1haWwiOiJ0ZXN0QGVtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJlbWFpbCI6WyJ0ZXN0QGVtYWlsLmNvbSJdfSwic2lnbl9pbl9wcm92aWRlciI6InBhc3N3b3JkIn19.f0zu6nYJrH3N84hcCxKSYt7M6v9g63o5tTHHDWITmZffmmw84yGdCvIImQlwU-MKIqe74IBxiFCSuFOMVMXzv7SYBP8FKE7IkWV6pyXhSuaihw-UCHVDgdpvwwx-EH2A5UuYrBOeKyP1Yb4S2Rcmlsv0AsjQ17ZwpB3qeXtck6ilLO0SnZgJrCVTI7H9LrrCOIFkShnYjVRwRWmlnqRMW00QW0PdyoSmDLpOFfdb170s6odNX3oNaOkaT3yLEDjHo3R61Muhn0Qafrg5lkwepFmTFngs7oJUgebw1kVC0mCbKuxeA2wsazFfwznfL7ARcW0Hix13Kt2FK6y7uAwzow",
  "registered": true,
  "refreshToken": "AMf-vBwEoz00YFO6K5EVurw4fmQiqyajScTkF_D1xoE7JDcXt_pIlPZTysq5FrXpr8ECDGYUs0tKpYS3a0omQWTYTfuAxn1ta3JZz_G9wN_e92sdbivM4GJ_BVpJIPyFfhwkwy3vTNItHVLLtAabrKzAAmx9LKcLugilj-WaXaNl5bEPdyVq8Hu9GMNIf56oNGUkyLjH3iMBJCM0anjJ86NilhIyuV5-NA",
  "expiresIn": "3600"
}

이제 idToken 을 우리 API 의 /me 를 호출 할 때, header 에 함께 보내보겠습니다.

curl http://localhost:8080/me \
-H "Authorization: Bearer <idToken>" | jq ''

이제 정상적으로 응답 되는것을 확인 할 수 있습니다.

{
  "authorities": [],
  "details": {
    "remoteAddress": "127.0.0.1",
    "sessionId": null
  },
  "authenticated": true,
  "principal": {
    "tokenValue": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjUzZWFiMDBhNzc5MTk3Yzc0MWQ2NjJmY2EzODE1OGJkN2JlNGEyY2MiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vbXlhdXRoYXBwLTJlYWFkIiwiYXVkIjoibXlhdXRoYXBwLTJlYWFkIiwiYXV0aF90aW1lIjoxNzA3NDAxNDE0LCJ1c2VyX2lkIjoiQW1VckRtajRWemdrSUtLNG0xS1FDSkxZamhnMiIsInN1YiI6IkFtVXJEbWo0Vnpna0lLSzRtMUtRQ0pMWWpoZzIiLCJpYXQiOjE3MDc0MDE0MTQsImV4cCI6MTcwNzQwNTAxNCwiZW1haWwiOiJ0ZXN0QGVtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJlbWFpbCI6WyJ0ZXN0QGVtYWlsLmNvbSJdfSwic2lnbl9pbl9wcm92aWRlciI6InBhc3N3b3JkIn19.f0zu6nYJrH3N84hcCxKSYt7M6v9g63o5tTHHDWITmZffmmw84yGdCvIImQlwU-MKIqe74IBxiFCSuFOMVMXzv7SYBP8FKE7IkWV6pyXhSuaihw-UCHVDgdpvwwx-EH2A5UuYrBOeKyP1Yb4S2Rcmlsv0AsjQ17ZwpB3qeXtck6ilLO0SnZgJrCVTI7H9LrrCOIFkShnYjVRwRWmlnqRMW00QW0PdyoSmDLpOFfdb170s6odNX3oNaOkaT3yLEDjHo3R61Muhn0Qafrg5lkwepFmTFngs7oJUgebw1kVC0mCbKuxeA2wsazFfwznfL7ARcW0Hix13Kt2FK6y7uAwzow",
    "issuedAt": "2024-02-08T14:10:14Z",
    "expiresAt": "2024-02-08T15:10:14Z",
    "headers": {
      "kid": "53eab00a779197c741d662fca38158bd7be4a2cc",
      "typ": "JWT",
      "alg": "RS256"
    },
    "claims": {
      "aud": ["myauthapp-2eaad"],
      "sub": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
      "email_verified": false,
      "user_id": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
      "auth_time": 1707401414,
      "iss": "https://securetoken.google.com/myauthapp-2eaad",
      "exp": "2024-02-08T15:10:14Z",
      "firebase": {
        "identities": {
          "email": ["test@email.com"]
        },
        "sign_in_provider": "password"
      },
      "iat": "2024-02-08T14:10:14Z",
      "email": "test@email.com"
    },
    "subject": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
    "id": null,
    "audience": ["myauthapp-2eaad"],
    "notBefore": null,
    "issuer": "https://securetoken.google.com/myauthapp-2eaad"
  },
  "credentials": {
    "tokenValue": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjUzZWFiMDBhNzc5MTk3Yzc0MWQ2NjJmY2EzODE1OGJkN2JlNGEyY2MiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vbXlhdXRoYXBwLTJlYWFkIiwiYXVkIjoibXlhdXRoYXBwLTJlYWFkIiwiYXV0aF90aW1lIjoxNzA3NDAxNDE0LCJ1c2VyX2lkIjoiQW1VckRtajRWemdrSUtLNG0xS1FDSkxZamhnMiIsInN1YiI6IkFtVXJEbWo0Vnpna0lLSzRtMUtRQ0pMWWpoZzIiLCJpYXQiOjE3MDc0MDE0MTQsImV4cCI6MTcwNzQwNTAxNCwiZW1haWwiOiJ0ZXN0QGVtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJlbWFpbCI6WyJ0ZXN0QGVtYWlsLmNvbSJdfSwic2lnbl9pbl9wcm92aWRlciI6InBhc3N3b3JkIn19.f0zu6nYJrH3N84hcCxKSYt7M6v9g63o5tTHHDWITmZffmmw84yGdCvIImQlwU-MKIqe74IBxiFCSuFOMVMXzv7SYBP8FKE7IkWV6pyXhSuaihw-UCHVDgdpvwwx-EH2A5UuYrBOeKyP1Yb4S2Rcmlsv0AsjQ17ZwpB3qeXtck6ilLO0SnZgJrCVTI7H9LrrCOIFkShnYjVRwRWmlnqRMW00QW0PdyoSmDLpOFfdb170s6odNX3oNaOkaT3yLEDjHo3R61Muhn0Qafrg5lkwepFmTFngs7oJUgebw1kVC0mCbKuxeA2wsazFfwznfL7ARcW0Hix13Kt2FK6y7uAwzow",
    "issuedAt": "2024-02-08T14:10:14Z",
    "expiresAt": "2024-02-08T15:10:14Z",
    "headers": {
      "kid": "53eab00a779197c741d662fca38158bd7be4a2cc",
      "typ": "JWT",
      "alg": "RS256"
    },
    "claims": {
      "aud": ["myauthapp-2eaad"],
      "sub": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
      "email_verified": false,
      "user_id": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
      "auth_time": 1707401414,
      "iss": "https://securetoken.google.com/myauthapp-2eaad",
      "exp": "2024-02-08T15:10:14Z",
      "firebase": {
        "identities": {
          "email": ["test@email.com"]
        },
        "sign_in_provider": "password"
      },
      "iat": "2024-02-08T14:10:14Z",
      "email": "test@email.com"
    },
    "subject": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
    "id": null,
    "audience": ["myauthapp-2eaad"],
    "notBefore": null,
    "issuer": "https://securetoken.google.com/myauthapp-2eaad"
  },
  "token": {
    "tokenValue": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjUzZWFiMDBhNzc5MTk3Yzc0MWQ2NjJmY2EzODE1OGJkN2JlNGEyY2MiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vbXlhdXRoYXBwLTJlYWFkIiwiYXVkIjoibXlhdXRoYXBwLTJlYWFkIiwiYXV0aF90aW1lIjoxNzA3NDAxNDE0LCJ1c2VyX2lkIjoiQW1VckRtajRWemdrSUtLNG0xS1FDSkxZamhnMiIsInN1YiI6IkFtVXJEbWo0Vnpna0lLSzRtMUtRQ0pMWWpoZzIiLCJpYXQiOjE3MDc0MDE0MTQsImV4cCI6MTcwNzQwNTAxNCwiZW1haWwiOiJ0ZXN0QGVtYWlsLmNvbSIsImVtYWlsX3ZlcmlmaWVkIjpmYWxzZSwiZmlyZWJhc2UiOnsiaWRlbnRpdGllcyI6eyJlbWFpbCI6WyJ0ZXN0QGVtYWlsLmNvbSJdfSwic2lnbl9pbl9wcm92aWRlciI6InBhc3N3b3JkIn19.f0zu6nYJrH3N84hcCxKSYt7M6v9g63o5tTHHDWITmZffmmw84yGdCvIImQlwU-MKIqe74IBxiFCSuFOMVMXzv7SYBP8FKE7IkWV6pyXhSuaihw-UCHVDgdpvwwx-EH2A5UuYrBOeKyP1Yb4S2Rcmlsv0AsjQ17ZwpB3qeXtck6ilLO0SnZgJrCVTI7H9LrrCOIFkShnYjVRwRWmlnqRMW00QW0PdyoSmDLpOFfdb170s6odNX3oNaOkaT3yLEDjHo3R61Muhn0Qafrg5lkwepFmTFngs7oJUgebw1kVC0mCbKuxeA2wsazFfwznfL7ARcW0Hix13Kt2FK6y7uAwzow",
    "issuedAt": "2024-02-08T14:10:14Z",
    "expiresAt": "2024-02-08T15:10:14Z",
    "headers": {
      "kid": "53eab00a779197c741d662fca38158bd7be4a2cc",
      "typ": "JWT",
      "alg": "RS256"
    },
    "claims": {
      "aud": ["myauthapp-2eaad"],
      "sub": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
      "email_verified": false,
      "user_id": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
      "auth_time": 1707401414,
      "iss": "https://securetoken.google.com/myauthapp-2eaad",
      "exp": "2024-02-08T15:10:14Z",
      "firebase": {
        "identities": {
          "email": ["test@email.com"]
        },
        "sign_in_provider": "password"
      },
      "iat": "2024-02-08T14:10:14Z",
      "email": "test@email.com"
    },
    "subject": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
    "id": null,
    "audience": ["myauthapp-2eaad"],
    "notBefore": null,
    "issuer": "https://securetoken.google.com/myauthapp-2eaad"
  },
  "name": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
  "tokenAttributes": {
    "aud": ["myauthapp-2eaad"],
    "sub": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
    "email_verified": false,
    "user_id": "AmUrDmj4VzgkIKK4m1KQCJLYjhg2",
    "auth_time": 1707401414,
    "iss": "https://securetoken.google.com/myauthapp-2eaad",
    "exp": "2024-02-08T15:10:14Z",
    "firebase": {
      "identities": {
        "email": ["test@email.com"]
      },
      "sign_in_provider": "password"
    },
    "iat": "2024-02-08T14:10:14Z",
    "email": "test@email.com"
  }
}

이제 security 에서

authentication.name 으로 접근하면, Firebase uid 에 접근 할 수 있습니다.

예

@GetMapping(value = ["/me"])
fun me(authentication: Authentication): Authentication {
            authentication.name // my firebase uid
      return authentication
}

이제 Firebase Auth 와, 우리 백엔드 통합을 완료했습니다.

즐코딩 하세요

[커플 앱 추천 /러브다이어리/ 커플다이어리/러브장] 커플, 연인에게 유용한 앱 추천 - 짝꿍

지나는 지나지나해 — Thu, 4 Jan 2024 15:57:58 +0900

안녕하세요!

이번에는 커플, 연인들을 위한 유용한 앱 소식을 가지고 왔어요!

사랑하는 연인과 더 은밀하고, 더 깊이 연결되고 싶으시다면,

'짝꿍' 앱을 주목해주세요.

짝꿍은 우리 둘만의 세상을 만들어 줄 거예요.

어떻게?

지금부터 알려드릴게요!

팔로팔로미

아지트
둘만의 비밀스러운 공간

여기는 우리 둘만의 소중한 아지트예요.
사진, 일상의 소소한 이야기, 감성 가득한 편지, 유용한 정산까지 모두 공유할 수 있어요.
함께 만드는 추억의 공간이죠.

아지트 만드는 방법도 아주 간단해요!!

1. 아지트를 만든다. (이름도 우리가 결정해서 만들고, 사진도 넣어준다)

2. 아지트에 초대한다.(링크 또는 큐알코드)

개인적으로 큐알코드로 초대하는게 편하당~

3.초대받은 사람은

앱이 없을 경우 우선 앱을 다운 받고,

앱이 있을 경우 바로 입장하기 버튼을 누르면 승인을 요청 할 수 있다.

4.초대한 사람은 아지트 멤버 관리에서 승인을 해주고, 권한을 변경해 줄 수 있다.

- 관리자는 아지트 정보를 수정할 수 있고, 아지트 멤버도 관리할 수 있다.

- 매니저는 멤버 관리만 할 수 있다.

- 일반멤버는 다른 권한은 없고, 피드와 채팅을 볼 수 있다.

어차피 우리 둘만 쓸거라 둘다 관리자로 변경해주었당!

이러면 아지트를 만들고 멤버를 초대하는 건 끝나요!

이제 피드도 작성하고, 채팅도 할 수 있게 됐어요~

피드

즐겁고 행복했던 우리의 소중한 순간들을 기록해요

데이트 할 때 사진, 기념일 메시지, 서로에게 보내는 사랑스러운 글귀들...

우리의 모든 순간들을 피드에 담을 수 있어요.

나중에 둘이서 피드에 올린 내용 보면서 그때를 얘기하면,

그날의 기억과 날씨, 온도, 기분이 새록새록 기억나서 좋더라구요~

특히, 여행다니면서 기록해두면 좋을 거 같아요~

다음에 짝꿍이랑 여행갈 때 그날그날 소소하게 기록해봐야겠어요~

이번에는 짝꿍이랑 데이트한 피드를 올려봤어요~

영화보구 마라탕도 먹구❤️

이렇게 데이트하고 집에와서 커플 다이어리 처럼 기록해두니 나중에 꺼내보기 좋더라구요~

채팅

언제나 함께하는 대화

다른 메신저도 사용하긴 하지만

우리 둘만의 공간에서 대화하는게 되게 묘하고 좋더라구요~

그리고 재미있었던 건

이렇게 피드를 작성하면 우리 채팅방에도 기록이 남더라구요~

좋은 기능인거 같아요~

정산

데이트 비용도 스마트하게

데이트 비용 정산기능도 있어요!

나중에 데이트 통장 관리 내역도 작성할 수 있으면 좋을듯!

오늘 데이트한 내역을 정리해봤어요~ 영화관 갔다가 마라탕 먹고, 사진도 찍고!

1차, 2차, 3차 나눠서 정산을 추가할 수 있어서 좋더라구요

나중에 보면 데이트할 때 뭐에 썼고 얼마에 썼고 이런걸 관리할 수 있어서 좋은거 같아요~

정산 방법도 선택할 수 있더라구요

저는 계좌로 받는 걸 선택했답니다.

정산을 다 만들면 이렇게 총 비용하고 내가 낼 비용을 알려줘요.

돈을 보낼 사람에게도 자동으로 메세지가 전달되구요~

상세내역을 보면 어디에 썼는지 확인도 할 수 있구,

정산현황에서 누가 돈을 냈고 안냈는지 확인도 가능하답니다~

이정도면 커플을 위한 모든 기능이 있는 앱인거 같아요.

채팅도 하고 기록도 하고, 정산도 하고!

친구들이나 가족, 아니면 모임에서도 많이 사용하고 있는 앱이라고 하는데

연인들에게도 유용한 앱인거 같네요~

구글 플레이스토어, 앱스토어 모두 있으니

다운 받아서 사용해보세요~

구글플레이스토어 다운로드 링크는 요기!!!!!

앱스토어는 다운로드 링크는 요기!!

[모임 앱 추천/ 동호회 앱 추천/동아리 앱 추천] 모임의 새로운 트렌드: '짝꿍' 앱으로 만나는 무한한 재미!

지나는 지나지나해 — Fri, 22 Dec 2023 10:00:37 +0900

안녕 친구들!

모임을 사랑하는 트렌디한 너!

오늘은 20-30대 사이에서 핫한 새로운 앱, '짝꿍'을 소개하려고해!

이 앱은 너의 모임을 더욱 색다르고 재미있게 만들어 줄 거야.

어떤 건지 궁금하지? 그럼 지금 바로 알아보자!

아지트
모임의 새로운 공간

'짝꿍'의 아지트는 너의 비밀스러운 공간이야!.

친구들과 사적인 이야기를 나누고, 재미난 사진들을 공유할 수 있는 완벽한 장소!

너희들의 방식으로 공간을 꾸며봐!

피드
생생한 모임의 순간들

모임에서의 즐거운 순간들을 피드에 담아봐!.

친구들과의 재미난 이야기, 멋진 사진들을 공유하며 더 많은 추억을 만들 수 있어.

채팅
실시간으로 함께하는 대화

언제 어디서나 친구들과의 대화를 할 수 있지.

실시간 채팅으로 모임의 열기를 그대로 유지할 수 있어!

정산
간편하고 스마트한 방식

모임에서 가장 힘든게 뭐지? 바로 정산!

모임의 마무리는 '짝꿍'의 정산 기능으로 간편하게! 복잡한 계산 없이 모두가 만족할 수 있는 방법으로 정산해봐!

이제 정산을 어떻게 해야하는지 걱정할 필요가 없다구!

'짝꿍' 앱과 함께라면 우리의 모임은 더욱 즐거워질 거야!

이제 모임의 순간들을 '짝꿍'과 함께 기록하며,

더 많은 추억을 만들어보자!

모임의 모든 순간을 '짝꿍'과 함께!

지금 바로 플레이스토어 또는 앱스토어에서 "짝꿍"을 검색해 다운받자!

구글플레이스토어 다운로드 링크는 요기!!!!!

앱스토어는 다운로드 링크는 요기!!

[모임 앱 추천/커뮤니티 앱 추천/SNS 추천)] 함께하는 시간이 더욱 소중해지는 '짝꿍' 앱 소개

지나는 지나지나해 — Thu, 21 Dec 2023 10:00:59 +0900

안녕하세요, 여러분!

오늘은 모임을 더욱 특별하게 만들어 줄 앱, '짝꿍'을 소개하려고 합니다.

친구들과의 오랜 추억, 가족과의 따뜻한 순간, 연인과의 소중한 시간을

더욱 뜻깊게 만들어 줄 이 앱을 함께 살펴보시죠.

아지트
오랜친구들과의 비밀공간

'짝꿍'의 아지트는 여러분만의 비밀 공간입니다.

오랜 친구들과 함께 추억을 나누고, 사진을 공유해보세요.

QR 코드로만 접근 가능하니, 프라이버시가 보장되는 안전한 공간이죠.

이야기
추억과 이야기가 넘치는 공간

아지트의 피드에서는 일상의 소소한 이야기부터 중요한 순간까지, 모두 공유할 수 있습니다.

서로의 소식을 실시간으로 확인하고, 댓글로 소통하며 더 가까워지세요.

채팅
즐거운 수다와 정보 공유

채팅 기능을 통해 친구들과 즐거운 수다를 떨거나 유용한 정보를 공유해보세요.

간편하고 직관적인 인터페이스로 누구나 쉽게 사용할 수 있어요.

정산
모임의 마무리까지 깔끔하게

모임 후에는 정산 기능을 이용해 간편하게 모임 회비를 정리할 수 있습니다.

복잡한 계산 없이, 몇 번의 클릭으로 모든 것이 해결되니 모임의 마무리도 편리하게!

'짝꿍' 앱과 함께라면 여러분의 모임은 더욱 의미 있고 즐거워질 거예요.

지금 바로 앱을 다운로드하고,

소중한 사람들과의 시간을 더욱 풍성하게 만들어보세요.

여러분의 소중한 순간들이 '짝꿍'과 함께 더욱 빛날 것입니다!

지금 바로 플레이스토어 또는 앱스토어에서 "짝꿍"을 검색하여 다운받아보세요!

구글플레이스토어 다운로드 링크는 요기!!!!!

앱스토어는 다운로드 링크는 요기!!

(모임 앱 추천/커뮤니티 앱 추천/SNS 추천) 짝꿍 우리들만의 커뮤니티 - "짝꿍"으로 만드는 우리만의 소중한 순간들!

지나는 지나지나해 — Wed, 20 Dec 2023 15:20:06 +0900

안녕하세요, 여러분!

오늘은 여러분의 일상을 더욱 특별하게 만들어 줄 멋진 앱을 소개하려고 해요.

'짝꿍'은 친구, 가족, 연인과의 소중한 추억을 공유하고,

함께 만들어가는 우리만의 SNS입니다. 지금부터 짝꿍 앱의 멋진 기능들을 소개할게요!

아지트
우리들만의 비밀공간

"짝꿍"의 아지트는 친구, 가족, 연인들과의 포근한 비밀 공간이에요.

여기서 우리만의 추억을 사진으로 남기고, 아지트 이미지를 꾸며볼 수 있어요.

또한, QR 코드와 링크를 통해 초대하고, 승인을 거쳐야만 들어올 수 있기 때문에 매우 비밀스럽고 안전해요!

피드
도란도란 나누는 우리들의 이야기

아지트의 짝꿍들과 나눌 수 있는 우리들의 이야기를 피드에 기록해보세요.

이 피드는 아지트 채팅방에서도 공유할 수 있어요.

우리들만의 소중한 순간들을 함께 나누며 더 가까워질 수 있답니다.

채팅
소근소근 비밀스런 대화

아지트에서는 짝꿍들과 즐거운 대화를 나눌 수 있어요.

비밀스럽고 즐거운 시간을 보내며, 우리만의 추억을 쌓아보세요.

정산
정확하고 확실한 모임의 마무리

짝꿍들과의 모임 후에는 정산 기능을 이용해보세요.

정확하고 편리한 정산으로 모임의 마무리까지 완벽하게!

귀염뽀작한 짝꿍이 캐릭터가 함께하는 우리들만의 아지트 짝꿍 앱화면이에요!

짝꿍 앱을 통해 여러분의 일상에 특별한 추억을 추가해보세요.

지금 바로 앱을 다운로드하고, 소중한 사람들과 함께 아지트를 만들어 추억을 공유해보세요.

여러분의 소중한 순간들을 '짝꿍'과 함께하세요!

지금 바로 플레이스토어 또는 앱스토어에서 "짝꿍"을 검색하여 다운받아보세요!

구글플레이스토어 다운로드 링크는 요기!!!!!

앱스토어는 다운로드 링크는 요기!!

Flutter Firebase Push 연동

cocho/kuby — Fri, 28 Jul 2023 01:10:54 +0900

사전준비

1. Firebase 프로젝트를 생성합니다.
- 생성 후, 프로젝트 개요 톱니바퀴 > 일반 탭 > [프로젝트 ID] 를 기억 해 둡니다

2. Flutter 프로젝트를 준비합니다.

3. Flutterfire Cli 도구를 준비합니다 (https://firebase.flutter.dev/docs/cli)

# Flutterfire 홈페이지에서 긁어왔습니다

npm install -g firebase-tools
dart pub global activate flutterfire_cli

4. Flutter 프로젝트를 생성합니다.
5. Project Root 에 .firebaserc 파일을 생성합니다.

{
    "projects": {
           "default": "<1 항목에서 기억 해 둔 프로젝트 ID>"
       }
}

6. Flutter 프로젝트 Root 에서 아래 명령어를 실행합니다.

flutterfire configure

7. firebase_core firebase_messaging 2개 디펜던시를 설치 해 줍니다

dart pub add firebase_core firebase_messaging

firebase_core
firebase_messaging

8. main.dart 파일에서 main 함수를 다음과 같이 작성합니다


void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(const MyApp());
}

다음 코드로 token 을 가져 올 수 있습니다.

final fcmToken = await FirebaseMessaging.instance.getToken();

Android 푸시 연동

별도로 설정 할게 없습니다..

IOS 푸시 연동

1. 애플 개발자센터 에서 [Account] > [인증서, 식별자 및 프로파일] 항목 > [키] 로 들어갑니다.

바로가기

2. 더하기 (+) 를 누르고 아래 항목을 체크하고 키를 만듭니다

[Key ID] 항목을 기억합니다.

중요! 여기서 만든 키는 제한이 잇으니, 안전한 곳에 항상 영구적으로 보관하세요!

3. Firebase 프로젝트로 들어가서 APN 다운받은 키를 업로드 합니다

[프로젝트 개요 옆 톱니바퀴] > [클라우드 메시징 탭] > [Apple 앱 구성] 항목 > [APN 인증 키 업로드]

키 ID 는 이전단계의 [Key ID] 항목을 넣으시면 됩니다. (또는 다운받은 키 파일의 뒤에 숫자및 알파벳)
팀 ID 는 애플 개발자센터의 [팀 ID] 항목에서 넣으시면 됩니다. (하단 이미지 참조)

4. 프로젝트로 돌아와서, xcode 로 ios 프로젝트를 열거나, ios/Runner.xcworkspace 파일을 실행합니다.

5. Runner > Targets [Runner] > Signing & Capabilities > + Capability 클릭 > Push Notification 을 검색 후 추가합니다.

끝!

예외사항

Push Notification 추가 후, 빨간색으로 무섭게 나오면 IOS 앱 생성 후 bundle Identifier 를 일치시키고 다시 해보세요

칭찬 스티커 어플 - 굿잡

cocho/kuby — Sat, 22 Jul 2023 15:05:43 +0900

코하-

안녕하세요 코코의 커비에요!

오늘은 새로운 어플을 들고 왔어요 (헥헥...)

바로바로바로!!!

칭찬 스티커 챌린지 어플 - 굿잡!!!

왜 다들 어렸을적에 냉장고 앞에 항상 붙어있던 포도모양 스티커 하나쯤은 있었죠 ( 엇,,,, 아닌가요..? )

거기서 아이디어를 착안했죠.

얼마동안 하겠다는 목표를 설정하고 하루하루 스티커를 붙히면서 목표를 달성하면 보상을 해준다는 어플을 만들면 좋겠다 생각했어요

너무 멋지지 않나요?!

간단히 어플 소개하는 시간을 가져볼께요!

일단 로그인 부터 너무 귀엽지 않나요 ㅎㅎㅎ

로그인은 구글 / 애플 / 카카오 로그인을 지원하고있어요

얘 이름은 애프리라고 해요 ! 애프리 말고도 복숭이, 규리, 야꾸아 등 다양한 귀여운 스티커들이 많아요!

스티커를 붙일때 다양한 스티커로 보드를 꾸밀수 있어요!

보드를 만들면 이렇게 내가 만든 보드를 보고 얼마나 남았는지 확인 할 수 있어요!

우리모두 스티커 많이 붙히고 칭찬하는 시간을 가졌으면 좋겠어요!

스토어에서 '참잘했어요'를 검색하시거나 아래 링크를 클릭하셔서 받으실 수 있어요!

안드로이드 다운로드예요!

http://bit.ly/3zdiuUU

애플 다운로드예요!

https://apple.co/3KeedH6

똑똑하게 웹/앱 외주 맡기기

cocho/kuby — Thu, 13 Jul 2023 04:05:08 +0900

웹사이트나 앱을 외주로 맡길때 견적이 너무 천차만별이라 당황하실꺼에요

각 업체들마다 요구사항을 바라보는 시점이 다르기 때문인데요

어떻게하면 더 싸고 좋은 퀄리티의 나만의 앱 또는 웹사이트를 맡길 수 있는지 알려드릴께요!

1. 요구사항은 확실하고, 간결하게!

단순히 “당근마켓과 같은 어플을 만들어주세요”
라고 전달하시나요?

받아드리는 업체에서 이 말은
- 내 주변기능
- 결제기능 (당근페이)
- 이미최적화
- 광고 솔루션

이런 기능적 요구사항부터
이미지최적화 / 서버스케일링 / 인터페이스 설계같은 기능적 요구사항까지 고려대상이 돼요

아마 적어도 적게는 1억원에서 많게는 몇십억까지 견적을 받으실꺼에요

하지만 아마 많은 분들이 당근마켓의 모든기능을 다 원하시는건 아닐꺼에요

이럴땐 정말 나의 요구사항 중 핵심요구사항이 뭔지 부터 스스로에게 물어보고 최대한 작은기능을 빠르게 만드는것이 더 좋아요!

2. 단가가 너무 낮은 업체는 피하세요!

고급 프로그래머, ui/ux 설계에 뛰어난 디자이너 들이 있는 회사는 절대 단가가 저렴 할 수 없어요!

신입 개발자나 신입디자이너로만 구성되어있다면.. 내 소중한 돈과 시간을 낭비 할 순 없겠죠?

3. 비즈니스보다 기술에만 포커스를 맞추는 업체는 피하세요!

아마 어느곳은 고객의 비즈니스보다 그 업체만의 기술만 강조하는 곳이 있어요

예를들어,
”우리는 마이크로서비스로 트래픽이 몰리는 현상을 방지하기 위해.. 블라블라…“
”오라클과 자바를 쓰기때문에 안정성있고…블라블라“

와 같이 말하며 기술에 의존하도록 해요.

하지만 기억하세요!

이미 어떻게개발되었든 뻗어버릴 트래픽이라면 개발자를 채용하고 고객님은 이미 성공 했을꺼에요

그럴땐 리뉴얼을 해서 더 안정성 있게 만들겠죠?

4. 애자일하게 프로젝트에 참여 해 주세요!

기획 -> 디자인 / 설계 / 개발

물론 문서도 중요하지만 프로젝트에 중요한게 문서인가요? 성공적인 마무리인가요?
끝나지 않는 프로젝트와 완벽한 문서를 받고 싶나요?
잘 만들어진 프로젝트와 그저그런 문서를 받고싶나요?

적어도 제 경험상 문서대로 예쁘게 나오는 프로젝트는 .. 거의 없었어요… ;) 그럴바엔 프로젝트를 함께 참여해서 생각을 공유하는 것이 좋겠죠?

가장 좋은 방법은

- 작게 핵심만 개발하며, 사용자의 니즈를 살핀다
- 니즈가 있다 생각들면 그때 더 많은 투자를한다

- 똑똑한 에이전시 코코와 함께한다 :)

이상 코코 였습니다!

다음에 또 봐요 안녕~

코코와 함께 여러분의 꿈을 실현시켜보세요!

코코에게 프로젝트 문의하기