intro..

다른 금융앱이나, 주식앱 및 공공앱들을 보면 화면이 가려져 있기 때문이다. (쿠팡은 와이?)

여튼 앱 스취어에서 고객정보나 비밀번호 또는 중요 정보들이 노출되는 것 만으로도 큰 사고가 된다.

따라서 목표는 스크린샷/녹화 방지는 물론, 앱을 백그라운드로 전환했을 때 iOS의 앱 스위처 화면(멀티태스킹 뷰)에 Flutter 화면 대신 흰색 배경에 로고가 박힌 썸네일을 표시하는 것!

iOS 보안과 Flutter의 충돌

앞서 말했듯이 Android는 단 하나의 코드로 모든 문제가 해결된다.

window.addFlags(WindowManager.LayoutParams.FLAG_SECURE)

하지만 iOS는 단순하지 않다. 이쯤 생각나는 첫맛남은 너무 어려워!ㅎ

iOS에서는 다음과 같은 기능이 분리되어 있다

일반 iOS 앱에서는 SceneDelegate를 사용해서 이렇게 해결하라고 한다.

이는 iOS의 라이프 사이클과 관련이 있는데

iOS의 라이프 사이클 이용하기

iOS 13이상: ** UISceneDelegate**

핵심 역할: 개별 UI “장면(Scene)” 관리, 멀티 윈도우 대응 iOS 13 이상에서 등장, 멀티 윈도우(multi-window)를 지원하기 위해 만들어졋으며, 앱 내 각각의 Scene(화면, 창) 단위로 생명주기를 관리한다.

주요 이벤트: Scene이 화면에 나타날 때: sceneDidBecomeActive Scene이 백그라운드로 갈 때: sceneDidEnterBackground Scene 연결/해제할 때: scene(_:willConnectTo:options:), sceneDidDisconnect

https://developer.apple.com/documentation/uikit/uiscenedelegate

func sceneWillResignActive(_ scene: UIScene) {
    window?.addSubview(UIView(frame: window!.bounds))
}

iOS 12이하: UIApplicationDelegate

핵심 역할: 앱 전체 생명주기 관리, 시스템 이벤트 대응 iOS 앱에서 최초 진입점 역할을 수행하며 앱이 실행, 종료, 백그라운드 진입, 포그라운드 진입 등과 같은 전체 생명주기 이벤트를 받을 때 호출된다. 단일 앱에서 하나만 존재하고 앱 전체를 아우른다.

https://developer.apple.com/documentation/uikit/uiapplicationdelegate

❌ ScreenDelegate는 왜 사용할 수 없었나?

단순하다. 우리가 사용하는 플러터 버전(3.29.3)에서는 지원하지 않는다. 하지만 OS 26이 나오면서, 호환성 문제가 대두되었고, 추가적으로 개발중인것 같다.

https://docs.flutter.dev/release/breaking-changes/uiscenedelegate

즉, 우리는 AppDelegate만으로 앱 스위처를 제어해야 했다...

로고가 박힌 Secure Layer 생성하기

CALayer를 사용한 이유

앞서 설명한 앱 스위처 화면 가림 구현에서 핵심 포인트는 Flutter나 WebView가 그린 화면까지 완전히 가려야하고, 캡쳐 및 녹화시에도 화면을 가려야 한다는 점 이다.

단순히 UIView를 올리거나 isHidden을 바꾸는 수준으로는 모든 기능을 충족하기가 어려웠다.

Flutter는 GPU 기반 렌더링을 사용하고, WebView는 별도의 프로세스로 화면을 그리기 때문에, iOS 기본 뷰 계층만으로는 화면 캡처나 멀티태스킹 썸네일에서 민감 정보가 노출될 수 있다.

그래서 우리는 CALayer를 활용한 ‘보안 레이어’를 만들었다.

CALayer는 모든 UIView의 렌더링 최하위 계층이자 GPU 단에서 처리되는 레이어이므로, Flutter·WebView 등 하위 렌더링 엔진에서 그려진 화면까지 덮어 씌울 수 있는 유일한 방법이다.

그러나 추천하지 않는 이유

1. UIWindow 또는 UITextField 레이어를 직접 건드리면서 뷰 계층 구조(View Hierarchy)를 강제로 바꿈
2. overlay가 제대로 추가되지 않으면 일부 화면이 가려지지 않거나, 터치 이벤트가 overlay에 막혀 Flutter 화면이 반응하지 않음
3. 공식 API가 아닌 ‘hack’ 수준의 처리이므로, 미래 iOS 버전에서 앱 스위처/스크린샷 방지가 제대로 작동한다는 보장이 없음
4. 특히 멀티 Scene, 외부 라이브러리 UI가 많은 앱에서는 예상치 못한 버그가 발생할 가능성 높음

CALayer 사용 결과

우리가 생각한 처리 방식

1️⃣ 앱이 백그라운드로 전환될 때(applicationWillResignActive) → CALayer 기반 overlay를 생성해 화면 전체를 덮고 로고를 표시 2️⃣ 앱이 포그라운드로 돌아올 때(applicationDidBecomeActive) → overlay 제거 후, 원래 화면 표시. 3️⃣ 동시에 스크린샷/녹화 감지 알림을 AppDelegate에서 처리 → 민감 정보가 노출되면 즉시 사용자에게 알림.

적용한 처리 방식 (CALayer를 이용)

1. 보안 Layer 생성

let field = UITextField(frame: window.bounds)
field.isSecureTextEntry = true
window.addSubview(field)

UITextField를 전체 화면 크기로 생성하고 isSecureTextEntry = true 설정 iOS 시스템에 “이 Layer는 민감 정보이므로 캡처 금지”를 알림

*2. 로고 Layer 삽입 *

let logoLayer = CALayer()
logoLayer.backgroundColor = UIColor.white.cgColor

let imageLayer = CALayer()
imageLayer.contents = UIImage(named: "LaunchImage")?.cgImage
imageLayer.contentsGravity = .resizeAspect
logoLayer.addSublayer(imageLayer)

field.layer.insertSublayer(logoLayer, at: 0)

CALayer로 흰색 배경과 앱 로고를 생성 Flutter 화면 위에 강제로 덮어, 앱 사용 중 스크린샷/녹화 시 민감 정보 보호

*3. Layer 강제 조작 *

self.layer.superlayer?.addSublayer(field.layer)
field.layer.sublayers?.last!.addSublayer(self.layer)

UIWindow Root Layer를 UITextField Layer 안으로 강제로 이동

적용한 처리 방식 (앱 스위처 전환 시)

1. 백그라운드 진입 직전 (applicationWillResignActive)

window.makeUnsecure()   // Secure Layer 제거
window.addSubview(createOverlay(frame: window.bounds)) // 로고 UIView 추가

Secure Layer 제거 후 로고 UIView를 최상위에 추가 앱 스위처 썸네일에는 깔끔하게 로고만 표시

2. 포그라운드 복귀 (applicationDidBecomeActive)

overlayView?.removeFromSuperview()
window.makeSecure(overlayGenerator: createOverlay)

overlay 제거 후 Flutter 화면 복구 Secure Layer 재활성화 → 앱 사용 중 보호 유지

최종 적용 코드

@main
@objc class AppDelegate: FlutterAppDelegate {
    private var overlayView: UIView?

    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        self.window.makeSecure(overlayGenerator: { _ in UIView() }) //스크린샷 방지        

        // 스크린샷 감지 Alert 셋팅
        NotificationCenter.default.addObserver(
          self,
          selector: #selector(alertCapture),
          name: UIApplication.userDidTakeScreenshotNotification,
          object: nil
        )

        NotificationCenter.default.addObserver(
          self,
          selector: #selector(alertRecoding),
          name: UIScreen.capturedDidChangeNotification,
          object: nil
        )

        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    // 스크린샷/녹화 알림
     @objc private func alertCapture() {
        showCaptureAlert("캡쳐가 감지되어 화면을 차단합니다.")
     }
     @objc private func alertRecoding() {
        guard UIScreen.main.isCaptured else { return }
        showCaptureAlert("녹화가 감지되어 화면을 차단합니다.")
     }

     private func showCaptureAlert(_ title: String) {
         let alert = UIAlertController(
             title: title,
             message: "",
             preferredStyle: .alert
         )
         alert.addAction(UIAlertAction(title: "확인", style: .default, handler: nil))

         if var topController = self.window?.rootViewController {
            while let presentedViewController = topController.presentedViewController {
              topController = presentedViewController
            }
            DispatchQueue.main.async {
              topController.present(alert, animated: false, completion: nil)
            }
         }
     }

     // 앱이 비활성 상태가 될 때 (백그라운드 진입 직전) 호출
     override func applicationWillResignActive(_ application: UIApplication) {
        self.window?.makeUnsecure()

        guard let window = self.window else { return }

        if overlayView == nil {
            let overlay = createOverlay(frame: window.bounds)
            window.addSubview(overlay)
            overlayView = overlay
        }else {
             window.bringSubviewToFront(overlayView!)
        }
     }

     override func applicationDidBecomeActive(_ application: UIApplication) {
        overlayView?.removeFromSuperview()
        overlayView = nil

        self.window?.makeSecure(overlayGenerator: createOverlay)
     }

     // 로고 썸네일 생성
     private func createOverlay(frame: CGRect) -> UIView {
         let overlay = UIView(frame: frame)
         overlay.backgroundColor = .white

         let imageView = UIImageView(image: UIImage(named: "LaunchImage"))
         imageView.contentMode = .scaleAspectFit
         imageView.translatesAutoresizingMaskIntoConstraints = false
         overlay.addSubview(imageView)

         NSLayoutConstraint.activate([
             imageView.centerXAnchor.constraint(equalTo: overlay.centerXAnchor),
             imageView.centerYAnchor.constraint(equalTo: overlay.centerYAnchor),
             imageView.widthAnchor.constraint(lessThanOrEqualTo: overlay.widthAnchor, multiplier: 0.5),
             imageView.heightAnchor.constraint(lessThanOrEqualTo: overlay.heightAnchor, multiplier: 0.5)
         ])
         return overlay
     }
}


extension UIWindow {
    private static let secureFieldTag = 1000

    // 로고 CALayer를 UITextField의 Layer 내부에 삽입
    func makeSecure(overlayGenerator: @escaping (CGRect) -> UIView) {
        DispatchQueue.main.async {
            // 이미 추가되어 있다면 중복 방지
            guard self.viewWithTag(UIWindow.secureFieldTag) == nil else { return }

            // UITextField를 윈도우 크기로 초기화합니다.
            let field = UITextField(frame: self.bounds)
            field.isSecureTextEntry = true
            field.tag = UIWindow.secureFieldTag

            self.addSubview(field)

            let logoLayer = CALayer()
            logoLayer.frame = field.bounds // UITextField 전체 크기에 맞춤
            logoLayer.backgroundColor = UIColor.white.cgColor

            // 로고 이미지 CALayer를 생성
            if let launchImage = UIImage(named: "LaunchImage")?.cgImage {
                let imageLayer = CALayer()
                imageLayer.contents = launchImage
                imageLayer.contentsGravity = .resizeAspect

                let logoScale: CGFloat = 0.25
                let imageSize = CGSize(
                    width: field.bounds.width * logoScale,
                    height: field.bounds.height * logoScale
                )

                imageLayer.frame = CGRect(
                    x: (field.bounds.width - imageSize.width) / 2,
                    y: (field.bounds.height - imageSize.height) / 2,
                    width: imageSize.width,
                    height: imageSize.height
                )

                logoLayer.addSublayer(imageLayer)
            }

            // 로고 레이어를 UITextField 레이어의 가장 아래에 삽입
            field.layer.insertSublayer(logoLayer, at: 0)

            // 캡처 방지 핵심: 레이어 강제 조작 코드 유지
            self.layer.superlayer?.addSublayer(field.layer)
            field.layer.sublayers?.last!.addSublayer(self.layer)
        }
    }

    func makeUnsecure() {
        DispatchQueue.main.async {
            if let secureField = self.viewWithTag(UIWindow.secureFieldTag) as? UITextField {
                // 강제로 변경되었던 레이어 구조를 복원시도
                if let secureFieldSuperlayer = secureField.layer.superlayer {
                    secureFieldSuperlayer.addSublayer(self.layer)
                }
                // UITextField 제거 (내부의 logoLayer 포함하여 모두 제거됨)
                secureField.removeFromSuperview()
                secureField.layer.removeFromSuperlayer()
            }
        }
    }
}

마무리하며

처음에는 스크린샷과 화면 녹화 방지는 단순한 문제일 거라고 생각했다. 하지만 iOS와 Flutter, WebView가 각기 다른 렌더링 구조를 가지고 있어 상황은 훨씬 복잡했다. 게다가 앱 스위처 화면에서도 민감 정보가 노출될 수 있다는 점이 문제는 처음 알게 되었다. (iOS 와 Android는 다르게 작동하는것도 알게됨)

iOS 개발자가 아니어서 접근 자체가 쉽지 않았다. 수많은 빌드와 테스트를 반복하며 구현해야 했고, AppDelegate에서 화면 전환이 유연하게 처리되지 않아 캡처 시에도 썸네일이 나타나도록 꼼수를 부릴 수밖에 없었다. 과정 내내 쉽지 않았지만, 그 덕분에 안정적인 보안 처리가 가능했다.

재미있게도 기획자님들은 오히려 결과물을 더 마음에 들어하며 좋아했다. 덕분에 수많은 시행착오와 수많은 빌드가 충분히 보람 있었던것 같다.

이제 다음 글에서는 UI 보안 적용보다는, iOS 앱 빌드 시 freeRASP와 충돌하는 문제를 중심으로 해결 방법을 정리할 예정이다.

결론 보안 처리는 너무 어렵다.....

플랫폼별 접근

우선 Flutter 앱에서 화면 캡처 및 녹화 방지(Screen Security)는 안드로이드(Android)와 iOS가 작동하는 방식이 근본적으로 다르기 때문에 플랫폼별로 접근해야 한다. 특히, iOS는 단순 감지만 가능하므로, 이를 '방지'로 바꾸기 위한 특별한 트릭이 필요하다. 약간 랩같기도함 '방지'는 안되고 '감지'만 돼.. ㅈㅅ

Android에서의 스크린샷/녹화 방지

안드로이드는 상대적으로 간단하다!

안드로이드는 FLAG_SECURE라는 강력한 보안 플래그를 제공하고, 이는 앱의 내용을 스크린샷, 화면 녹화, 그리고 앱 스위처(최근 앱 목록) 미리보기에서 완전히 차단(방지)할 수 있다.

FLAG_SECURE 플래그 윈도우 추가하기

안드로이드의 MainActivity.kt 파일에서 FLAG_SECURE 플래그를 윈도우에 추가하면, 스크린샷·화면 녹화·앱 스위처 미리보기 모두 차단된다.

setFlags와 addFlags를 사용할 수 있는데 이건 기호에 맞게 사용하면 되지 않을까..

// MainActivity.kt
import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import android.view.WindowManager

class MainActivity : FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // addFlags로 설정하기
        window.addFlags(WindowManager.LayoutParams.FLAG_SECURE)

        // setFlags로 설정하기
        window.setFlags(
            WindowManager.LayoutParams.FLAG_SECURE,
            WindowManager.LayoutParams.FLAG_SECURE
        )
    }
}

적용 후 스크린샷 촬영 시 “스크린샷을 캡처할 수 없습니다” 라는 메시지가 뜨며 방지된다

iOS에서의 스크린샷/녹화 방지

iOS의 한계

먼저 알아야 할 점은, 안드로이드처럼 FLAG_SECURE와 같은 단일 옵션이 존재하지 않기 때문에 iOS는 시스템 차원에서 앱이 스크린샷을 찍히는 것을 막을 수 없다는것이다. 진짜 대곰탕

스크린샷/녹화 이벤트 감지: iOS에서는 UIApplication.userDidTakeScreenshotNotification 또는 UIScreen.capturedDidChangeNotification을 통해 “사용자가 지금 스크린샷을 찍었다/녹화가 시작되었다”는 사실만 알 수 있다.

NotificationCenter.default.addObserver(
    forName: UIApplication.userDidTakeScreenshotNotification,
    object: nil,
    queue: .main
) { _ in
    print("스크린샷이 감지되었습니다.")
}

NotificationCenter.default.addObserver(
    forName: UIScreen.capturedDidChangeNotification,
    object: nil,
    queue: .main
) { _ in
    if UIScreen.main.isCaptured {
        print("화면녹화가 감지되었습니다.")
    }
}

근데 이것은 앞서 알려준 패키지에서도 충분히 가능하는 것!

다만 이 알림을 받은 후 앱 개발자가 화면을 지우는 등의 로직을 처리해야 하는데 알림을 감지하는 순간과 화면을 가리는 로직이 실행되는 순간 사이에 캡처가 발생한다.

*따라서 스크린샷에는 앱 내용이 모두 노출된다!!!! *

감지를 방지처럼 보이게 만드는 트릭

차단이 불가능하다면, “사용자 눈에는 방지된 것처럼 보이게” 우회하는 방법을 쓰기로 했다.

UITextField의 isSecureTextEntry 속성은 비밀번호 입력 시 OS 레벨에서 캡처를 차단하는 특징이 있다. 이를 앱 전체에 적용하면, 캡처 시 검은 화면 또는 지정 로고만 찍히도록 할 수 있다.

// AppDelegate.swift

@main
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        self.window.makeSecure() //스크린샷 방지
        FirebaseApp.configure()

        ...생략

extension UIWindow {
    func makeSecure() {
        DispatchQueue.main.async {
            let field = UITextField()
            let view = UIView(frame: CGRect(x: 0, y: 0, width: field.frame.self.width, height: field.frame.self.height))
            field.isSecureTextEntry = true
            self.addSubview(field)
            self.layer.superlayer?.addSublayer(field.layer)
            field.layer.sublayers?.last!.addSublayer(self.layer)
            field.leftView = view
            field.leftViewMode = .always
        }
    }
}

이 방식은 실제 차단은 불가능하지만, 사용자 눈에는 방지된 것처럼 보이도록 만드는 효과가 있다.

그럼 여기까지 스크린샷 녹화 및 방지 처리 끝!

다음 글에서는 앱 스위처에서 화면을 가리는 방법을 라이프사이클을 통해 구현하는 방법을 자세히 다루겠다..... 오늘도 마무리는 용용이들로...

열심히는 아니고 적당히 모바일 웹앱 개발중이었다 그런데 우리가 진행하는 앱이 공공기관과 협의중이였고, 웹은 CSAP인증이 완료되었고, GS인증도 완료 되었다 (축하축하) 그런데 갑자기 모바일 앱에도 보안이 적용이 되었냐고 묻는게 아니겠는가? 근데 우리는 모바일웹앱이기 때문에 상관없지 않을까 라고 방심하고 있었다....

그러나 모바일 앱 개발시 에 필연적으로 따라오는 보안문제들을 간과하고 있었다 예를들어 금융, 기업용 앱 에서는 루팅·탈옥 탐지, 앱 위변조 방지, 스크린샷/화면 녹화 차단 같은 기능이 필수적인데 우리는 전혀 생각지도 못했다 ^^ 되는줄?

따라서 이번 글에서 실제로 적용해본freeRASP 패키지 소개와 적용 과정, 그리고 freeRASP만으로는 해결할 수 없었던 부분을 네이티브로 직접 보완한 경험을 정리하려고 한다.

freeRASP 패키지란?

freeRASP는 Flutter 앱 보안을 위해 제공되는 라이브러리이다. 앱 실행 중 다양한 위협 요소를 탐지하고, 개발자가 지정한 방식으로 대응할 수 있다고 한다.

https://pub.dev/packages/freerasp

주요 기능

• 루팅/탈옥 탐지 (Android/iOS)
• 앱 무결성 검증 (변조 여부 확인)
• 디버깅 탐지
• 앱 클로닝 감지
• 에뮬레이터 실행 탐지
• 화면 캡쳐/녹화 탐지 이벤트 제공 (단, 방지 기능은 직접 구현 필요)
• *- Android/iOS 공통 API 이벤트 제공 → Flutter + WebView 연계 가능
• *

그리고 서치중 좋은 글을 발견했는데, 이를 확인하고 freeRASP의 기능을 비교했다 Flutter(플러터) 보안 – 보안 리스크를 방지하기 위한 10가지 팁

📌  freeRASP 기능 제공 여부 및 대체 방안

이정도는 참고만 하시길바라며 freeRASP는 어떻게 사용되는가?

freeRASP 적용하기

패키지 설치

 $ flutter pub add freerasp

dependencies:
  freerasp: ^7.2.1

초기화

main.dart에서 앱이 시작될 때 초기화한다.

다만 우리는 빌드환경을 flavor로 분리하였기 때문에, 로컬이나 개발환경으로 빌드시: 앱 종료 or 차단을 무시하고 테스트 운영환경으로 빌드시: 앱 종료

iOS 심사시 안내 없이 앱 종료시킬 경우 승인이 안된다는 블로그를 참고하여 다이얼로그를 띄운 후 액션을 분기처리 하였다.

Future<void> configApp() async {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();

  // 스플래쉬 화면
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

  // 빌드 환경 분리
  // appFlavor : local | dev | prod
  await dotenv.load(fileName: '.env');
  FlavorConfig(appFlavor);

  Get.put(WebviewMainController());

  // SecurityService 초기화
  // 다이얼로그가 뜨면 _securityDialogCompleter가 완료될 때까지 진행 멈춤
  final Completer<void> securityDialogCompleter = Completer();
  SecurityService.dialogCompleteCallback = () {
    if (!securityDialogCompleter.isCompleted) {
      securityDialogCompleter.complete();
    }
  };

  // SecurityService 별도로 분리하여 관리
  await SecurityService.initializeTalsec(
      enableDialog: true,
      isProd: appFlavor == FlavorEnv.prod.name
  );

  // 탐지 다이얼로그가 안 뜨더라도 진행되도록 보장
  if (!securityDialogCompleter.isCompleted) {
    securityDialogCompleter.complete();
  }

  // 탐지 다이얼로그가 끝날 때까지 대기
  await securityDialogCompleter.future;

  ...이후 생략

여기서 핵심은 SecurityService.initializeTalsec() 내부에서 freeRASP 초기화를 하고, 위협 탐지 시 빌드 타입에 따라 무시 or 앱 종료로 분기한다는 점

ThreatCallback 활용: freeRASP의 핵심

freeRASP는 위협이 탐지되면 ThreatCallback을 통해 이벤트를 전달하며, 여기서 앱의 흐름을 제어할 수 있다.

아래는 ThreatCallback의 각 기능을 표로 정리했다.

해당 표를 참고하여 원하는 기능을 추가하면 될 것 같다

import 'dart:async';
import 'dart:convert';
import 'dart:typed_data';
import 'dart:io';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:get/get.dart';
import 'package:freerasp/freerasp.dart';

class SecurityService {
  static void Function()? dialogCompleteCallback;

  SecurityService._();
  static bool _dialogShown = false;

  static String _hexToBase64(String hex) {
    final bytes = Uint8List.fromList(
      [for (int i = 0; i < hex.length; i += 2) int.parse(hex.substring(i, i + 2), radix: 16)],
    );
    return base64.encode(bytes);
  }

  static Future<void> initializeTalsec({required bool enableDialog, required bool isProd}) async {
    final packageName = dotenv.get('ANDROID_PACKAGE_NAME');
    final sha256Hex = dotenv.get('ANDROID_SHA256');
    final iOSTeamId = dotenv.get('IOS_TEAM_ID');
    final watcherMail = dotenv.get('WATCHER_MAIL');

    final androidConfig = AndroidConfig(
      packageName: packageName,
      signingCertHashes: [_hexToBase64(sha256Hex)],
      supportedStores: [packageName],
      // malwareConfig: MalwareConfig(
      //   blacklistedPackageNames: ['com.aheaditec.freeraspExample'],
      //   suspiciousPermissions: [
      //     ['android.permission.CAMERA'],
      //     ['android.permission.READ_SMS', 'android.permission.READ_CONTACTS'],
      //   ],
      // ),
    );

    final iosConfig = IOSConfig(
      bundleIds: [packageName],
      teamId: iOSTeamId,
    );

    final config= TalsecConfig(
      androidConfig: androidConfig,
      iosConfig: iosConfig,
      watcherMail: watcherMail,
      isProd: true,
    );

    await Talsec.instance.start(config);

    final threatCallback = ThreatCallback(
      onHooks: () => _onEvent('후킹 탐지', '앱 무결성이 손상되었습니다.', enableDialog, isProd),
      onDebug: () => _onEvent('디버깅 탐지', '디버깅 도구가 감지되었습니다.', enableDialog, isProd),
      onSimulator: () => _onEvent('에뮬레이터 탐지', '에뮬레이터 환경이 감지되었습니다.', enableDialog, isProd),
      onAppIntegrity: () => _onEvent('앱 변조 탐지', '앱이 변조되었습니다.', enableDialog, isProd),
      onDeviceBinding: () => _onEvent('디바이스 바인딩 위반', '디바이스 바인딩 위반이 감지되었습니다.', enableDialog, isProd),
      onUnofficialStore: () => _onEvent('신뢰되지 않은 설치처', '신뢰되지 않은 설치 소스가 감지되었습니다.', enableDialog, isProd),
      onScreenshot: () => _onScreenshotDetected(enableDialog, isProd),
      onScreenRecording: () => _onScreenRecordingDetected(enableDialog, isProd),
    );

    Talsec.instance.attachListener(threatCallback);
  }

  static Future<void> _onEvent(String title, String message, bool enableDialog, bool isProd) async {
    if (kDebugMode) debugPrint('[Talsec] $title : $message');

    if (!enableDialog) return;
    // Prod 모드에서는 무조건 우회 버튼 없음, Dev/Local 모드에서는 항상 우회 버튼 노출 (릴리즈 빌드 포함)
    final allowBypass = !isProd;


    WidgetsBinding.instance.addPostFrameCallback((_)  {
      if (_dialogShown) {
        return;
      }
      _dialogShown = true;

      Get.dialog(
        PopScope(
          canPop: false,
          child: AlertDialog(
            title: Text(title),
            content: Text(message),
            actions: [
              TextButton(
                onPressed: () {
                  Platform.isAndroid ? SystemNavigator.pop() : exit(0);
                  dialogCompleteCallback?.call(); // 외부 Completer 완료
                },
                child: const Text('앱 종료'),
              ),
              if (allowBypass)
                TextButton(
                  onPressed: () {
                    if (Get.isDialogOpen ?? false) Get.back();
                    dialogCompleteCallback?.call(); // 외부 Completer 완료
                  },
                  child: const Text('무시(테스트용)'),
                ),
            ],
          ),
        ),
        barrierDismissible: false,
      );
    });
  }

  static void _onScreenshotDetected(bool enableDialog, bool hideBypassButton) async{
    _onEvent('스크린샷 탐지', '화면이 캡처되었습니다.', enableDialog, hideBypassButton);
    if (Platform.isIOS) {

    }
    // await FlutterWindowManager.addFlags(FlutterWindowManager.FLAG_SECURE);
  }

  static void _onScreenRecordingDetected(bool enableDialog, bool hideBypassButton) {
    _onEvent('화면 녹화 탐지', '화면 녹화가 감지되었습니다.', enableDialog, hideBypassButton);
  }
}

iOS, Android Config에는 각각의 내용들이 필요하다 [iOS] 번들Ids, teamID 는 iOS 개발자 사이트에서 확인이 가능하며, [Android] packageName, signingCertHashes 또한 구글 플레이콘솔에서 확인이 가능하다.

freeRASP의 문제점 및 freeRASP 대신 네이티브로 구현한 부분

코드를 보면 스크린샷 탐지 및 화면 녹화 탐지에 어떤 코드도 구현하지 않았다.. 이것은 해당 패키지는 감지만 할 뿐 방지를 하지 않기 때문이었다 나는 이것을 고민하던 중 네이티브에 직접 구현하기로 했다.

iOS

• UIScreen.main.isCaptured 감지
• 캡쳐·녹화 시 화면 블러 처리 또는 특정 뷰 차단

Android

• WindowManager.LayoutParams.FLAG_SECURE 플래그 설정으로 화면 캡쳐·녹화 방지

이렇게 네이티브 기능을 직접 적용하면서, freeRASP로 해결할 수 없는 부분을 보완했다.

왜 스크린샷 방지 코드를 여기 안 넣었나?

이번 글의 주제는 freeRASP 적용기에 집중하기 위해 iOS/Android 네이티브 단의 스크린샷 방지 코드 자체는 생략했다.

이유:

• freeRASP와 관련된 핵심 흐름(ThreatCallback + 보안 초기화)을 명확히 보여주고 싶었기 때문

• 캡쳐/녹화 방지 코드는 플랫폼마다 방식이 다르고, freeRASP와 직접적으로 연결되지 않음
• 따라서 글에서는 “왜 freeRASP 대신 네이티브로 처리했는가”까지만 정리

(추후 블로그 시리즈로 별도 포스팅: “iOS/Android 네이티브에서 화면 캡쳐/녹화 방지 구현하기”로 다루는 것이 더 적절하다고 판단,, 내용이 핵 길어질것 같기 때문)

마무리

이번 글에서는 실제 모바일 앱에서 적용한 freeRASP 패키지를 중심으로 보안 적용 과정을 정리했다.

• freeRASP는 Flutter 앱 보안을 위한 탐지 라이브러리로, 루팅·탈옥, 앱 변조, 디버깅, 클로닝, 에뮬레이터, 화면 캡처/녹화 이벤트를 감지할 수 있다.

• ThreatCallback을 활용하면, 탐지 이벤트가 발생했을 때 앱의 흐름을 개발자가 제어할 수 있습니다.

  • 운영 환경에서는 다이얼로그를 띄운 뒤 앱을 종료하도록 처리할 수 있다.
  • 개발이나 테스트 환경에서는 탐지를 무시하고 앱을 계속 실행하도록 설정할 수 있고,

• 다만 화면 캡처·녹화 방지는 freeRASP에서 직접 제공하지 않기 때문에, iOS와 Android에서는 네이티브로 직접 구현해야 한다.

특히, SecurityService를 별도로 분리한 이유는, 앱 빌드 환경(flavor)에 따라 로컬/개발/운영 환경을 구분하고, 탐지 이벤트를 한 곳에서 관리하기 편리하게 하기 위해서 였음

다음 글에서는 이번에 생략한 iOS/Android 네이티브 화면 캡처·녹화 방지 적용 방법과 실제 앱 적용 사례를 자세히 다룰 예정이다.....

힘내보자...

그리고 여기서부터 문제가 발생했다 휴대폰에서 개발자 모드가 안보인다는점 iOS 16부터 개발자 모드가 생겼다는 것이다!

그래도 Xcode로 빌드하면 된다고 하길래 재연결하여 진행하려고 했다.

Xcode에 접속하여 Command + shft + 2 입력 후, 타켓 아이폰을 Unpair Device 진행한 다음, 다시 연결하여 아이폰에서 신뢰하는 컴퓨터로 추가 후, 해당 경로로 다시 이동하면 보일 것!

그러나 여기서 더 큰 문제 발생! iOS14.4.1 버전은 Xcode에 12.4버전과 호환됨 그리고 Xcode에 12.4버전은 MacOS 14.x 이상 부터는 호환되지 않음!

대큰절망했지만 3시간 정도 뚝딱거렸더니 개발자 모드로 돌아가긴 하더라..

Xcode 다운그레이드 하는 방법

1️⃣ 애플 개발자 사이트에서 해당 버전 다운로드

developer.apple/download

다운로드가 완료되면 .xip 파일을 더블 클릭해 압축을 풀고, /Applications 폴더로 이동시킨다. 만약 다양한 버전을 사용할거라면 다운로드 후 파일 이름을 변경해주는것이 좋다.

그리고 터미널에서 사용할 버전을 변경하여 선택해준다

sudo xcode-select -s /Applications/Xcode12.4.app
xcode-select -p # 위치 확인
xcodebuild -version # 버전 확인

# 아래와 같이 나타남
/Applications/Xcode12.4.app/Contents/Developer 

2️⃣ xcodes를 설치해서 원하는 버전 간편 설치

xcodes 라는 프로그램을 사용하여 자동 설치 및 버전 변경이 가능하다고 한다 참고 사이트: https://tngusmiso.tistory.com/83

근데 결국 설치가 안되서 수동설치로 재진행함... 또륵

3️⃣ iOS 14.4.x 버전은 xcode 12.5.1 설치

여기서 추가로 12.4 설치 실행시 오류가 났는데 운영체제(macOS 14 Sonoma)와 Xcode 버전 간 호환성 문제로 인해 내부 프라이빗 프레임워크가 누락되어 실행이 아예 불가능한 상태라고 하여 12.5.1 설치를 권장한다고 하여 버전을 살짝 올렸다.

sudo xcode-select -s /Applications/Xcode12.5.1.app
xcode-select -p # 위치 확인
xcodebuild -version # 버전 확인

# 아래와 같이 나타남
/Applications/Xcode12.5.1.app/Contents/Developer

이후 강제로 실행하기로 했는데, xcode 에서 폴더에서 새로운 터미널 열기 설정하여 실행 하면 아래와 같이 실행된다.

 cd Contents/MacOS
 ./Xcode

개발자 활성화 되며 인스펙터 실행 하고 싶을 경우 설정 > Safari > 고급 > 웹 속성 ON

Xcode로 빌드시키고 싶을 때

이것은 apple 개발자 사이트에 해당 디바이스의 UUID가 등록되어있어야 하는 상태임! (무조건)

근데 이렇게 하나 저렇게 하나 사실 빌드가 안되었다. 그러다 꼼수를 부려봤는데 Xcode 16에서 iOS 14.4를 강제로 빌드시키도록 하는 방법이였다. 테스트가 인스펙터로는 한계가 있기 때문에 꼭 실제 기기에서 이루어져야 했다.

해당명령어를 실행하여 Xcode16을 강제로 열어서 Platforms에 해당 iOS버전 폴더를 넣고 나면 iOS버전을 읽게 되어 빌드가 된다..

 open /Applications/Xcode16.0.app/Contents/Developer

이렇게 삽질을 많이 하였으나 결론.... 지원되지 않는 CSS 들이 많아서 결국 최소 사양 버전을 올리기로 했다..

개발서버에 개발한것을 반영하였을 때, 모바일웹앱을 실행하면 이전 화면이 나타나지 않고 흰 화면이 나타나는 매혹적이고 치명적인 오류가 발생했다.

그래서 테스트를 하거나 앱을 시연할 때 앱 캐시를 한번 날리고 진행했다.

그렇게 연명하며 살던 도중 우리는 오류를 발견하였는데

🔍발견한 오류

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module:
https://.../assets/atdrnModify-37776692.js

앱이 기능을 실행할 때 필요한 파일 atdrnModify-37776692.js 을 불러오려고 했는데, 그 파일이 서버에 없어서 실패한 상황이다.

🧨 문제 발생의 이유

앱은 기능별로 파일을 쪼개서 불러온다. (동적 import)

Vue + Vite는 성능을 위해 화면 전환 시 필요한 기능만 동적으로 불러오는 방식(lazy loading) 을 사용한다.

새로 배포하면 파일명이 바뀐다.

새로운 버전이 배포되면, 기존에 있던 atdrnModify-37776692.js 같은 파일은 삭제되고, 대신 atdrnModify-11223344.js 처럼 새 이름의 파일이 생성된다.

모바일 사용자는 오래된 페이지를 볼 수 없다.

예를 들어, A 사용자가 오전에 웹앱을 켜둔 채 3시간 뒤에 다시 화면을 눌렀을 때: → 이미 서버에는 옛날 파일이 사라졌고, 앱은 여전히 옛날 파일을 불러오려 해서 실패한다.

🧠 해결을 위한 고민

💡문제 해결을 위한 방법들

1. 모든 파일 이름을 고정시키기

chunk 파일명을 고정시켜 삭제 문제 방지 단, 캐시 문제가 생기기 쉬워 권장되지 않음

2. PWA 캐시 강제 삭제

서비스워커에서 캐시를 지우고 새 버전 강제 로드 이건 설정이 복잡하고 테스트가 어려워 (내가) 함부로 건들 수 있는 영역이 아니라 패스

3. 안내 후 새로고침

에러가 나면 “새로고침 하시겠습니까?” 라는 안내창 표시 해당 방법은 기획과 이야기가 되지 않았고, 만약 사용자가 거절하면 문제가 지속되는 문제가 있음...

4. 앱 새로고침

문제가 생기면 자동 새로고침해서 최신 버전을 로드 단, 사용자 경험이 조금 끊긴다

그래서 난 가장 해결이 간단하고 확실한 해결책을 사용하기로 했다. 사용자도 웹앱을 다시 껏다 켠 것 같은 느낌만 받을 뿐, 앱이 멈추거나 흰 화면이 노출되지는 않을테니까 (아마도)

✅ 해결

main.js에 설정해 두었다

// Vite가 동적 파일을 못 불러오면
window.addEventListener('vite:preloadError', (event) => {
  event.preventDefault(); // 기본 에러 막고
  window.location.reload(); // 자동 새로고침
});

// Vue Router가 lazy import 실패 시
router.onError((error) => {
  if (/Failed to fetch dynamically imported module/.test(error.message)) {
    window.location.reload();
  }
});

배포 후 확인해 보았을 때 아직까지 흰화면 발생하는 현상은 발견하지 못했다. 만약 추후에 발견될 경우 추가적으로 조치 예정

번외

Hash 가 도대체 뭐야

관련 문제들을 검색했을 때 Vue-Router에서 사용하는 URL 모드를 수정하라는 방법과, vite.config.js에 캐시제어를 하라는 방법들이 많이 나타났다.

🔹 1. createWebHistory() or createWebHashHistory() 란?

import { createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(), // 히스토리 모드
  routes,
})

📌 createWebHistory()

• 브라우저의 History API를 사용해서 URL에 # 없이 깔끔한 경로(/home) 를 사용한다. 예: https://example.com/home

📌 createWebHashHistory()

• URL에 #이 들어감 예: https://example.com/#/home

즉, 라우팅 방식의 차이를 말한다.

2. [hash] in vite.config.js란?

rollupOptions: {
  output: {
    entryFileNames: '[name].[hash].js',
    chunkFileNames: '[name].[hash].js',
    assetFileNames: 'assets/[name].[hash].[ext]',
  },
},

빌드된 파일명에 [hash]를 붙이면, 파일 내용이 바뀌면 이름도 바뀜 예: main.js → main.abc123.js

이는 브라우저 캐시를 무력화 시키기 위한 파일 캐싱 제어 방법이다.

Flutter에서 WebView를 사용하다 보면 디바이스의 시스템 폰트 크기가 커질 때, 웹 페이지의 폰트 크기도 함께 커지는 문제가 발생할 수 있다.

예전에 Flutter에서만 개발할 때 클라이언트의 노안이슈로 화면 내 방지턱 현상이 발생해서 한번 크게 고생했던 적이있다.

그래서 이번에는 미리 해당 문제를 방지하고자 했다. 이 문제는 Android와 iOS에서 각각 다르게 처리해야 할 부분이 있다!

🤖 Android에서의 해결 방법

첫 번째 시도: MediaQuery에서 textScaler 사용

final MediaQueryData data = MediaQuery.of(context);
return MediaQuery(
  data: data.copyWith(textScaler: const TextScaler.noScaling),
  child: child!,
);

final MediaQueryData data = MediaQuery.of(context);
return MediaQuery(
  data: data.copyWith(textScaler: const TextScaler.linear(1)),
  child: child!,
);

textScaleFactor 는 텍스트의 크기를 비율로 설정하여 조정하고, 기본값 1.0은 기본 크기를 유지하게 한다. textScaler (예: TextScaler.noScaling) 는 텍스트 크기의 스케일링을 완전히 비활성화하여, 시스템의 텍스트 크기 설정을 무시하게 만든다.

[Flutter] TextScale fix (텍스트 크기 고정) 참고링크

시도결과

처음에는 MediaQuery를 사용하여 앱 전체의 폰트 크기를 고정하려 했음. 그러나 MediaQuery는 WebView의 텍스트 크기까지 제어할 수 없었음. WebView는 HTML 콘텐츠를 로드하는 별도의 컴포넌트이므로 MediaQuery 설정만으로는 해결되지 않았음. ㅠ^ㅠ

두 번째 시도: textZoom 속성 설정

Flutter에서는 WebViewController를 통해 직접 setTextZoom 메서드를 호출하여 텍스트 크기를 제어할 수 있음. 이 방법은 주로 Android에서 사용된다. android WebSettings 관련 공식 문서

WebViewController의 platform 속성을 사용해서 AndroidWebViewController에 접근한 후, setTextZoom을 통해 텍스트 크기를 100%로 고정했다.

class WebviewMainController extends GetxController {
  late final WebViewController controller;

  WebviewMainController() {
    // WebViewController 초기화
    controller = WebViewController();

    // WebViewController 설정
    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(...);

    // Android 플랫폼에서 텍스트 줌 고정
    if (controller.platform is AndroidWebViewController) {
      final androidController = controller.platform as AndroidWebViewController;
      androidController.setTextZoom(100);  // 텍스트 줌을 100%로 고정
    }
  }
}

드디어 됐다!!!!!! 폰트가 고정되어서 작아졌지만.. 알게뭐람 우선해!! 나중에 비율 수정만 하면 되니까!!!

🍏 iOS에서의 해결 방법

iOS는 기본적으로 -webkit-text-size-adjust: none;을 무시할 때가 있지만, HTML 내에서 폰트 크기를 명시적으로 설정하면 시스템 폰트 크기 변경이 WebView에 영향을 미치지 않게 된다. 🧐

html{
  font-size: 62.5%; // 기본 10px 기준
  background-color: $bg-color;
  -webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
  -moz-text-size-adjust: none; /*Firefox*/
  -ms-text-size-adjust: none; /*Ie*/
  -o-text-size-adjust: none; /*old versions of Opera*/
}

해결 완료...장렬하게 전사해.

어쩌다가?

비행기 안에서 앱을 켜보신 QA 천재 개발자님의 피드백으로부터 시작된 이 이야기. 기내 Wi-Fi가 없는 환경에서 앱이 정상 작동하지 않는다는 아주 소중한 리포트를 받고, 고민을 시작했다.

"우리 앱은 Vue3 + Flutter인데, 네트워크 감지를 웹에서 할까, 아니면 네이티브(Futter)에서 할까?"

Javascript에서는 어떻게 처리하는데?

웹에서는 아주 간단하게 네트워크 감지를 할 수 있는 내장 API가 존재한다.

Javascript 처리 하는 방법

1. 브라우저가 네트워크에 연결되어 있는지 확인하는 내장 API navigator.onLine 사용하기

2. 브라우저에 네트워크 상태가 바뀔 때 연결 상태 변화 감지할수 있는 addEventListener 사용하기

3. 초기값을 설정하고 네트워크 변경을 확인하여 UI를 변경하거나 네트워크 재시도 요청 시도 하기

이것저것 사부작거린 코드 내용들

<script setup>
onMounted(() => {
  console.log('현재 상태:', navigator.onLine ? '온라인' : '오프라인');

  window.addEventListener('online', () => {
    console.log('📡 온라인으로 복구됨');
  });

  window.addEventListener('offline', () => {
    console.log('📴 오프라인으로 전환됨');
  });
}


const isOnline = ref(navigator.onLine);

const updateNetworkStatus = () => {
  isOnline.value = navigator.onLine;
  console.log('####', navigator.onLine);
  /*  if (isOnline.value) {
    retryCallbacks.forEach((cb) => cb());
  }*/
};
</script>

Javascript에서의 단점

이렇게 순조롭게 일이 풀리면 내가 아니지? 생각해보니 앱 진입 시점에서 네트워크가 없다면 웹을 가져오지도 못하기 때문에 원하는 화면을 보여줄수도 없잖아!!!!

또한 인터넷 연결 여부를 완전히 보장하지도 않는다. 예로 wifi에 연결되어 있더라도 인터넷이 안될수있다.

그렇다면 Flutter에서는?

아주 만족스럽게도 flutter에서 제공하는 패키지가 있다.

connectivity_plus

https://pub.dev/packages/connectivity_plus

패키지에서 제공하는 플랫폼인데 얼마나 아름다운가!

그리고 요구되는 버전도 잘 파악하길 바란다.

해당 패키지를 통해 Wi-Fi, Mobile, No Connection 등의 구분이 명확하게 가능하고, javascript보다 세밀하게 제어가 가능하다.

그래서 내가 생각한 구성

1. 실시간 감지하는 감시자 생성
2. 네트워크 상태의 따라 화면 분기처리

-> 이론은 항상 완벽하다.

자 그럼 시작해볼까

🧠 Step 1: 네트워크 상태를 감지하는 감시자 만들기

network_connectivity_observer.dart

import 'package:connectivity_plus/connectivity_plus.dart';

enum Status {
  available,
  unavailable,
}

class NetworkConnectivityObserver {
//connectivity_plus 패키지를 이용해서 Wi-Fi, LTE 등 모든 연결 상태를 감지
  final Connectivity _connectivity = Connectivity();

  Stream<Status> observe() async* {
    // 처음 연결 상태 체크
    final initial = await _connectivity.checkConnectivity();
    yield _convertToStatus(initial); // 리스트로 감싸서 전달

    // 이후 상태 변경 감지
    yield* _connectivity.onConnectivityChanged.map((List<ConnectivityResult> results) {
      return _convertToStatus(results); // 리스트로 처리
    });
  }

  // 리스트 형태로 연결 상태 확인
  Status _convertToStatus(List<ConnectivityResult> results) {
    // 리스트에서 하나라도 연결되어 있으면 available로 처리
    for (var result in results) {
      if (result != ConnectivityResult.none) {
        return Status.available;
      }
    }
    return Status.unavailable;
  }
}

• connectivity_plus 패키지를 사용해서 네트워크 상태를 감지
• enum Status를 통해 연결 여부를 명확하게 표현
• 스트림으로 상태를 보내주기 때문에 실시간으로 감지

🧱 Step 2: 연결 상태에 따라 UI를 분기하는 WebviewContainer

webview_container.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:safeit_mobile_native/app/safeit_app/webview/views/screen/offline_screen.dart';
import 'package:safeit_mobile_native/app/safeit_app/webview/views/screen/webview.dart';
import 'package:safeit_mobile_native/app/utils/service/network_connectivity_observer.dart';


class WebviewContainer extends StatefulWidget{
  const WebviewContainer({super.key});

  @override
  State<WebviewContainer> createState() => _WebviewContainerState();
}

class _WebviewContainerState extends State<WebviewContainer> {
  final observer = NetworkConnectivityObserver();
  late StreamSubscription<Status> _subscription;
  Status? _status;

  @override
  void initState() {
    super.initState();

    _subscription = observer.observe().listen((status) {
      setState(() {
        _status = status;
      });
    });
  }

  @override
  void dispose() {
    _subscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if(_status == Status.unavailable){
      return const OfflineScreen();
    }
    return Webview();
  }
}

• 앱이 실행되면 네트워크 상태를 구독하고 _status를 업데이트함
• 오프라인이면 OfflineScreen, 연결되면 WebView를 보여주기

📵 Step 3: 오프라인 안내 전용 화면 만들기

offline_screen.dart

class OfflineScreen extends StatelessWidget {
  final VoidCallback? onRetry;

  const OfflineScreen({super.key, this.onRetry});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(0),
        child: AppBar(elevation: 0),
      ),
      body: SafeArea(
        bottom: Platform.isAndroid ? true : false,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SvgPicture.asset("assets/images/icons/no_signal.svg",
                width: MediaQuery.sizeOf(context).width / 5,
              ),
              const SizedBox(height: 20),
              Text("인터넷 연결이 끊어졌습니다.", style: TextStyle(fontSize: 22, height: 2)),
              Text("원활한 이용을 위해 네트워크 상태를"),
              Text("확인한 후 다시 시도해 주세요."),
              const SizedBox(height: 50),
              SizedBox(
                width: 120,
                child: Button(
                  text: '재시도',
                  func: () {
                    // 추후 재시도 기능 구현 가능
                  },
                  borderColor: const Color(0xFF2e81ff),
                  backgroundColor: Colors.white,
                  fontColor: const Color(0xFF2e81ff),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• 사용자에게 현재 네트워크가 끊겼다는 점 알려주기
• "재시도" 버튼은 향후 기능 확장을 위해 추가
• 지금은 재시도 하는 '척'.. 엣큥ㅎ

느낀점..

Flutter로 구현하면서 웹보다 훨씬 정교하고 강력한 제어가 가능하다는 걸 느꼈고 마음이 매우 편안했다. 인터넷이 안 되더라도 우아하게 안내 가넝! 이걸로 며칠을 고민하다니!!!.. 따흐흑 그래도 인터넷 제발 끊기지는 말아죠..

현재 상황: 이렇게 저렇게 이케저케 빌드중

기존에 다른 프로젝트에서 숟가락떠서 가져온 프로젝트라 기본적인 셋팅은 되어있었다. 물론 안드로이드만, ios는 다 무너져가는 국밥집 같았다.

main.dart 에서 실행을 시키면

Future<void> configApp() async {
  // 빌드 환경 분리
  // appFlavor : local | dev | prod
  await dotenv.load(fileName: '.env');
  FlavorConfig(appFlavor);
  ...

Flavor 오류가 지속적으로 발생하는 상황

FlavorConfig 구경하러 가보자.

import 'package:flutter_dotenv/flutter_dotenv.dart';

enum FlavorEnv {
  local('local'),
  dev('dev'),
  prod('prod');

  const FlavorEnv(this.env);
  final String env;

  factory FlavorEnv.getEnv(String env) {
    return FlavorEnv.values.firstWhere(
          (value) => value.env == env
    );
  }
}

class FlavorConfig {
  static FlavorConfig? _instance;
  static FlavorConfig get instance =>
      _instance ?? FlavorConfig(FlavorEnv.dev.name);
  final String url;

  // IP instead of localhost.
  FlavorConfig._local() : url = dotenv.get('LOCAL_URL');

  FlavorConfig._dev() : url = dotenv.get('DEV_URL');

  // TODO: 운영 서버 URL 변경
  FlavorConfig._prod() : url = dotenv.get('PROD_URL');

  factory FlavorConfig(String? flavor) {
    switch (FlavorEnv.getEnv(flavor!)) {
      case FlavorEnv.local:
        _instance = FlavorConfig._local();
        break;
      case FlavorEnv.dev:
        _instance = FlavorConfig._dev();
        break;
      case FlavorEnv.prod:
        _instance = FlavorConfig._prod();
        break;
      default:
        _instance = FlavorConfig._dev();
        break;
    }
    return instance;
  }
}

빌드 환경이 분리되어있는것을 확인할 수 있다. .env를 통해 각각의 url로 찔러야하니 이것은 본인의 개발 환경에 맞게 설정하길 바랍니다.

그런데 이후에 설정되어있는것은 없었다. 그래서 급하게 구동되는지 확인하기 위해 main.dart에서 FlavorConfig('local') 하드코딩하여 사용하였는데, 더 이상 참을 수 없었다. (그냥)

iOS Native 설정 시작 width 'Flavor'

확인해보니 ios는 xcode를 통하여 빌드 및 flavor 설정을 할 수 있다고 한다. flavor 를 이용한 개발, 운영 환경 설정 (출처: dong.log)

1. Configrations 설정

1) 왼쪽 상단에 Runnuer 클릭 > PROJECT 내 Runnuer 선택 > info Tab 선택 > 하단의 + 버튼 클릭 2) Duplicate 하여 각각의 -prod, -local, -dev 추가 (기존에는 Debug, Relase, Profile 세개의 row만 있었음) 3)

2. Schemes 설정

1) main toolbar 에서 Product > Scheme > Manage Schemes 또는 상단의 아이콘을 통해서 Manage Schemes 들어가기 2) Runner 를 복사하여 local, dev, prod 를 만든다 3. Edit Shecme을 선택하여 각각의 탭들의 설정들을 변경한다 (Run, Text, Profile, Analyze, Archive) 에 선택된 build configuration 이 -local ,-dev 임 막간을 이용한 틀린 그림 찾기 시간 ^--------^* 각각의 세션들의 내용은 이렇다.

Run Build Test : 빌드 후 테스트 실행 Profile : 특정 기기에서 퍼포먼스 체크용도로 사용 Analyze : static analyzer를 사용해서 빌드를 진행하고 코드의 버그를 검사 Archive : 앱 스토어나 테스트 플라이트, 혹은 adhoc에 보내기 위해 코드 사이닝을 포함해서 빌드를 진행

3. Build Setting 에 설정

1) 좌측에 TARGETS > Build Settings 에서 직접 찾으면 좋겠지만 내용이 많으므로, Packaging 검색 > Product Bundle identifier > 빌드 환경에 맞게 각각 .dev, .local 변경해준다

2) APP_NAME을 추가 및 APP_FALVOR 추가 각 빌드마다 앱 이름을 다르게 설정하기 위해 APP_NAME 값을 추가 해 준다.

app_flavor추가 후, flutter 소스에서 AppDelegate에 Method Channel 설정해야 native 의 build 값을 flavor로 가지고 올 수 있기 때문에, 각 빌드 scheme 에 맞는 flavor 값을 추가 설정 해주어야 한다.

여기서 고백하자면 사실 나는 저 이름대로 빌드되지 않는다. 그렇다고 pubspec.yaml에 설정된대로 되지도 않는다..(안드로이드는 됨) 이것은 차차 고민해봐야 할 문제다...ㅠㅠ

3) info.plist 에 Bundle display name 을 $(APP_NAME) 로 변경 시켜주면 된다. 그렇다면 일괄적으로 변경 된다.

4. AppDelegate.swift 수정

앞서 말했듯 build설정을 flutter 에 전달하기 위해 ios Native의 최상단인 AppDelegate를 설정해야 한다.

import UIKit
import Flutter
import flutter_downloader

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)

        FlutterDownloaderPlugin.setPluginRegistrantCallback({ registry in
            FlutterDownloaderPlugin.register(with: registry.registrar(forPlugin: "vn.hunghd.flutter_downloader")!)
            GeneratedPluginRegistrant.register(with: registry)
        })

          let controller = window.rootViewController as! FlutterViewController

          let flavorChannel = FlutterMethodChannel(
              name: "flavor",
              binaryMessenger: controller.binaryMessenger)

          flavorChannel.setMethodCallHandler({(call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
              // Note: this method is invoked on the UI thread
              let flavor = Bundle.main.infoDictionary?["App-Flavor"]
              result(flavor)
          })

        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

기존에 main.dart에 설정이 flutter flavor 설정이 되어있기 때문에

flutter run --flavor local
flutter run --flavor dev

를 통해 실행하면 동작 완~!

ios 환경 설정을 해본 후기: 와....apple 이 녀석들 뭐야 이게 뭐야 대체 뭐야 Xcode또 뭔데 피크민에 빠져 멋진 하찮은 앱을 만들려고 했던 나의 꿈 오늘로써 접는다.

참고 udong85-velog https://dokit.tistory.com/61 https://deku.posstree.com/ko/flutter/app-id/

Vue3에서 카메라 기능을 활용할 수 있는 방법

1. vue-web-cam : Vue.js용으로 개발된 웹캠 컴포넌트

2. vue-camera-lib : Vue.js를 위한 또 다른 카메라 컴포넌트

3. MediaDevices API : Vue 3에서 직접 브라우저의 MediaDevices API를 사용(별도의 라이브러리 없이 네이티브 웹 API를 활용)

4. Capacitor : Capacitor는 네이티브 기기 기능에 대한 접근을 제공하는 크로스 플랫폼 앱 개발 프레임워크 (quasar에서 추천하긴 하나, 상의 후 해당 방법은 보류)

헤헷 헤헷 어떻게든 되기만 하면 된다.

1. vue-web-cam

vue-web-cam 라이브러리 에서 해당 내용을 확인할 수 있으나 이것은 마지막 업데이트가 현재 시간 기준 5년전 이라고 한다

2. vue-camera-lib

해당 라이브러리는 Vue 3에 특화되어 개발되어 있다. 가능한 기능으로는 아래와 같다 웹페이지 내 사진 촬영: 사용자가 웹 페이지에서 직접 사진을 찍을 수 있는 기능을 제공 사용자 인터페이스: 모바일 카메라 앱과 유사한 기본 UI를 제공하며, 필요에 따라 커스텀 UI 구현 디바이스 방향 감지: 자이로스코프가 있는 기기에서는 가로 모드로 사용 시 사진을 자동으로 회전 다양한 출력 옵션: 이미지를 데이터 URL 또는 Blob 형태로 출력

vue-camera-lib Git에서 참고할 수 있다.

3. MediaDevices API

<video> 코드를 통해서 작성이 가능하다.

<q-btn @click="startCamera">카메라 시작~</q-btn>
<video ref="videoElement"></video>

const startCamera = async () => {
  try {
    console.log(navigator.mediaDevices.getUserMedia);
    const stream = await navigator.mediaDevices.getUserMedia({video: true});

    if (videoElement.value) {
      videoElement.value.srcObject = stream;
      videoElement.value.play();
    }
  } catch(err) {
    if (err.name === "NotFoundError" || err.name === "DevicesNotFoundError") {
      console.error("요청된 장치를 찾을 수 없습니다.");
    } else if (err.name === "NotAllowedError" || err.name === "PermissionDeniedError") {
      console.error("카메라/마이크 접근 권한이 거부되었습니다.");
    } else {
      console.error("getUserMedia 오류:", err);
    }
  }
}

다만 여기서 주의할 점은 navigator.mediaDevices.getUserMedia() not working 또는 TypeError: Cannot read properties of undefined (reading 'getUserMedia') 이라는 오류가 계속 발생하는데 https, http 관련 보안 문제다. chrome://flags/#unsafely-treat-insecure-origin-as-secure chrome://flags 연결링크 에 접속할 서버 ip를 입력후 브라우저를 재시작하면 임시적으로 허용하여 사용할 수 있다.

라고 생각했으나 또 다른 오류가 error가 발생 DOMException: Requested device not found

(번외) 삼성 노트북 카메라 장치 작동 확인

1. Webcam Test 사이트 들어가서 작동 확인
2. 설정>개인 정보 및 보안> 카메라 에서 앱에서 카메라에 액세스하도록 허용 여부 확인하고 켬으로 설정 바꾸기
3. Samsung Security 앱 들어가서 카메라 및 마이크 차단 여부 확인하고 꺼짐 으로 변경
4. 다시 웹캠 테스트 사이트 들어와서 Test My Cam 버튼 클릭! 권한 요청 체크가 되면서, 강력하게 허용 해버림

다시 원래 하던일(삽질) 로 돌아와서, 설정 변경후 코드 테스트를 해보았는데 페이지 상단에 빨간색 10점만점 과녁표가 생기면서 카메라가 작동해버림

최종 작성된 Script 코드

const videoElement = ref(null);

const startCamera = async () => {
  try {
    const devices = await navigator.mediaDevices.enumerateDevices();
    const videoDevices = devices.filter(device => device.kind === 'videoinput');

    if (videoDevices.length === 0) {
      throw new Error('No video input devices found');
    }

    const constraints = {
      video: {
        // facingMode: 'environment', // 'exact' 제거, 후면 카메라 선호
        width: { ideal: 1280 },    // 'ideal'로 변경하여 유연성 확보
        height: { ideal: 720 }
      }
    };
    const stream = await navigator.mediaDevices.getUserMedia(constraints);

    if (videoElement.value) {
      videoElement.value.srcObject = stream;
      videoElement.value.play();
    } else {
      console.error('Video element not found');
    }

  } catch(err) {
    if (err.name === "NotFoundError" || err.name === "DevicesNotFoundError") {
      console.error("요청된 장치를 찾을 수 없습니다.");
    } else if (err.name === "NotAllowedError" || err.name === "PermissionDeniedError") {
      console.error("카메라/마이크 접근 권한이 거부되었습니다.");
    } else {
      console.error("getUserMedia 오류:", err);
    }
  }
}

나도 너도 퇴근하자..

MDN문서-getUserMedia() 메서드, MDN문서-웹캠 사진촬영에서 자세하게 확인 할 수 있다.

추가 업로드 예정

대시보드에 다양한 컴포넌트들을 배치하고 놓고 기간의 업데이트에 따라 컴포넌트들의 데이터를 변경해야했다.

가장 단순하게는 기간을 관리하는 컨트롤러에서 defineEmits()를 사용하여 부모로 데이터를 올린후 이벤트를 받아 부모컴포넌트에서 자식컴포넌트로 props를 이용한 데이터 바인딩을 하려고 하였다.

그렇게 단순하게 끗? 하려고 하는 순간 컨트롤러.vue -> 부모.vue -> 자식.vue 의 과정이 너무 불필요하다고 하셨다... (생각해보니 맞는것 같음)

또한 사용하는 자식컴포넌트마다 defindProps()를 사용하는게 마음에 들지 않았다.

시도방법1. defineEmits, defindProps 사용하기

1. 컨트롤러에서 watch를 통해 기간데이터가 변경 될 때 마다 emit를 보내기

//controller.vue <script setup>

const emit = defineEmits['period]

watch(period, ()=>{
emit('period', period.value)
})

2. 부모 컴포넌트에서 받기

//home.vue, <script setup>

<template>
  <controller @period="period"/>
  <component :period='period'/>
</template>

<script setup>
const period = ref([]);

onBeforeMout(()=>{
  emitter.on('period', (period)=>{
    period.value = period;
  })
})
</script>

시도방법2. mitt를 이용한 emitter이용하기

이 방법은 mitt 라이브러리를 설치 후 createApp(App)을 통해 전역으로 provide('emitter')해줘야함!

1. 컨트롤러에서 watch를 통해 기간데이터가 변경 될 때 마다 emitter를 보내기

//controller.vue <script setup>

watch(period, ()=>{
emitter.emit('period', period.value)
})

2. 부모 컴포넌트에서 데이터 받기

//home.vue, <script setup>

const period = ref([]);

onBeforeMout(()=>{
  emitter.on('period', (period)=>{
    period.value = period;
  })
})

이렇게 받아서 각 period를 컴포넌트들로 보내는 방법. 사실 이것 또한 처음에 시도했던 방법과 별 다를것이 없었다. 떼잉

시도방법3. store 사용하기

간단한 데이터에 비해 Pinia를 통해 store 를 하기엔 덩치가 너무 커져서 포기

시도방법4. 컴포지션 API 사용하여 이벤트 버스 만들기

1. eventBus용 js 생성하기

import { ref } from 'vue';

const bus = ref(new Map());

export const useEventBus = () => {
  const emit = (event, args) => {
    bus.value.set(event, args);
  };

  return { emit, bus };
};

2. 컨트롤러에서 이벤트버스에 함수 태워보내기

import { useEventBus } from '@/modules/dashboard/eventBus';

const { emit } = useEventBus();

watch(period, ()=>{
emit('period', period.value)
})

3. 받을 곳에서 computed를 통해 실시간으로 감지하여 화면에 보여주기

import { useEventBus } from '@/modules/dashboard/eventBus';

const { bus } = useEventBus();

const setPeriod = computed(() => {
  return bus.value.get('period');
});

Map() 을 이용하여 여러 종류의 함수를 넣고 가져다 쓸 수 있다. watch를 걸었기 때문에 이벤트가 발생할 때 마다 computed를 통해 화면에 보여주는 용도로만 사용하기에 간단하게 쓸 수 있었는데 추가적으로 api를 호출할때는 싸이클을 한번 자세하게 확인하고 쓸 수 있을 것 같다.

event-bus 참고 stack overflow

우리에겐 멋진 그래프를 만들수 있는 chart.js가 있다. 하지만 내 데이터가 매우 간단하고, 특별한 커스텀이 필요없다하는 경우에 사용할 수 있는 패키지를 공유하겠삼 이름하야 Vue3-charts chartJs와는 다르니까 혼동말기 사용법도 간단하지만, 내용도 매우 간단하여 커스텀이 거의 불가능하니 참고!!! (사실 사용법을 매우 자세하게 읽어보지 않아서 그럴수도 있다..내가 필요한 기능만 사용했기 때문에)

Vue3-charts 공식 문서 바로가기

Vu3-Charts 시작하기

Vu3-Charts 패키지 설치

# usign npm
npm install vue3-charts --save

# usign yarn
yarn add vue3-charts

명령어에서도, 패키지 이름에서도 알 수 있듯 Vue version > 3.x 이어야 한다! Vue3-charts 패키지 설치 안내 바로가기

사용할 수 있는 차트의 종류는 Line, Bar, Area Pie 정도가 있다.

사용할 차트 종류 import 하여 붙여넣기

나는 Bar차트와 부가적인 기능(tooltip, grid) 등을 사용할 예정이다. 해당 내용들을 모두 import 해줘야 사용할 수 있다.

import { Chart, Grid, Bar, Tooltip } from 'vue3-charts';

왜 이렇게 흐림처리되는지는 모르겠다..마치 사용하지 않는 패키지처럼..;;

그리고 이제 본격적으로 사용을 해보기전에, 공식 사이트에 있는 coade를 긁어 왔다. 이렇게 집어 넣고 내가 사용할 데이터 들만 변경하여 넣는것이 제일 간단하긴 하다.

<template>
  <Chart
    :size="{ width: 500, height: 420 }"
    :data="data"
    :margin="margin"
    :direction="direction"
    :axis="axis">

    <template #layers>
      <Grid strokeDasharray="2,2" />
      <Bar :dataKeys="['name', 'pl']" :barStyle="{ fill: '#90e0ef' }" />
      <Bar :dataKeys="['name', 'avg']" :barStyle="{ fill: '#0096c7' }" />
      <Bar :dataKeys="['name', 'inc']" :barStyle="{ fill: '#48cae4' }" />
      <Marker :value="1000" label="Avg." color="#e76f51" strokeWidth="2" strokeDasharray="6 6" />
    </template>

    <template #widgets>
      <Tooltip
        borderColor="#48CAE4"
        :config="{
          pl: { color: '#90e0ef' },
          avg: { color: '#0096c7' },
          inc: { color: '#48cae4' }
        }"
      />
    </template>

  </Chart>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Chart, Grid, Line } from 'vue3-charts'
import { plByMonth } from '@/data'

export default defineComponent({
  name: 'LineChart',
  components: { Chart, Grid, Line },
  setup() {
    const data = ref(plByMonth)
    const direction = ref('horizontal')
    const margin = ref({
      left: 0,
      top: 20,
      right: 20,
      bottom: 0
    })

    const axis = ref({
      primary: {
        type: 'band'
      },
      secondary: {
        domain: ['dataMin', 'dataMax + 100'],
        type: 'linear',
        ticks: 8
      }
    })

    return { data, direction, margin, axis }
  }
})
</script>

그러나 나는 Script setup을 사용하는걸..?

template 사용법은 비슷하지만, 나는 차트들의 옵션을 한번에 관리하고 싶어서 옵션들을 한곳에 담았다.

const chartDatas = ref({
  size: { width: 740, height: 340 }, // 차트 사이즈 
  graphData: [],
  margin: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  }, // 차트들에게 마진값이 필요할 때
  direction: 'horizontal',
  axis: {
    primary: {
      type: 'band',
    },
    secondary: {
      domain: ['dataMin', 'dataMax+10'], //데이터 최소값, 최대값의 범위
      type: 'linear',
      ticks: 5, // 표시되고 싶은 가로선의 갯수
    },
  },
  responsive: 'true',
});

해당 옵션들을 살펴본다면 크게 어려운건 없을것 같다. chartDatas.graphData에는 API로 부터 받아오는 데이터들을 넣을 예정이다.

<template>
  <Chart
    class="chart"
    :size="chartDatas.size"
    :margin="chartDatas.margin"
    :data="chartDatas.graphData"
    :axis="chartDatas.axis"
    :direction="chartDatas.direction"
    :responsive="chartDatas.responsive"
   >
    <template #layers>
      <Grid
        :hideY="true"
        :center="false"
      />
      <Bar
        :dataKeys="['date', 'uCount']"
        :barStyle="{ fill: '#eb6483' }"
      />
      <Bar
        :dataKeys="['date', 'pCount']"
        :barStyle="{ fill: '#42afc3' }"
      />
    </template>
    <template #widgets>
      <Tooltip
        class="chart--tooltip"
        color="#606060"
        :config="{
          date: { color: '#606060' },
          uCount: { label: `u회원가입`, color: '#606060' },
          pCount: { label: `p회원가입`, color: '#606060' },
          }"
          :style="{ fontSize: '14px' }"
       />
    </template>
  </Chart>
</template>

표시된 <Bar/>의 dataKeys에는 key, value 값이라고 생각하면 될것같다.

그리하야 만들어진 차트

추가로 데이터의 범례를 만들고 싶었는데, 사용법을 찾지 못해 직접 만들어 넣었다..

<ul class="item--legend">
  <li>
    <div class="square left"></div>
    <p>u</p>
  </li>
  <li>
    <div class="square right"></div>
    <p>p</p>
  </li>
</ul>

Tooltip을 사용하고 싶을 땐 위에 표시된 코드처럼 작성하면 되고, 내가 넣고 싶은 내용은 직접 커스텀하여 넣을 수 있다.

마우스 오버 하면 툴팁이 생성되여 해당 내용을 볼 수 있고, 그리드가 표시되어 어떤 지점에 데이터를 확인할 수 있는지 알 수 있다. 만약 툴팁에 그리드가 표시되는게 싫다면 툴팁 태그 내에 :hide-line="true" 옵션을 추가하면 된다.

결론..

사용법이 매우 간단하여 그래프를 간단하게 그려서 표현하고 싶을 땐 매우 추천한다. 다만 커스텀이 어렵고, 사용자들이 많이 없어 관련 내용들을 검색 할 때 찾기가 어렵다.

나도 처음에 간단한 내용을 표현할 때 사용하려고 이 패키지를 사용했는데, 기획쪽에서 요구되는 기능들이 점점 추가되어 chart.js로 다시 갈아타야 하나 했는데, 잘 조율이 되어 현재선에서 마무리 되었다.

이런 대참사를 방지하기 위하여 사전에 협의가 많이 필요할 것 같다.

시계는 watch, Vue2에서 조건감시자 사용법 바로 가기

Vue3 + script setup에서 사용하기

이전에는 Vue2를 사용하여 개발을 하였는데, 이번 프로젝트는 Vue3를 사용하고 있다. 사용법은 크게 차이가 없으나, watch 함수를 반응형 데이터ref와 reactive와 사용할 때 사용법이 달라 정리하려고 한다.

Vue3에서 watch 함수 기본 사용법

나는 로그인시 에러가 발생하면 q-input의 rules를 사용하기 때문에 error 처리하여 인풋박스 하단에 에러메세지를 보여주도록 유효성검사를 하였다. (quasar는 유효성 검사를 조금 더 쉽게 사용할 수 있는데 이건 나중에 추가로 작성하겠음)

그러나 input에 접근하여 재입력 하는 경우 이전에 발생한 유효성검사 error문구가 사라져야 하는데 지워지지 않아 버그로 잡히게 되었다.

그래서 input을 실시간으로 감시하여 작동하도록 해야했다..... 따라서 데이터가 실시간으로 바뀔수 있게 반응형 데이터를 reactive를 활용하여 생성하였으며, 기존 사용법을 참고하여 watch를 사용하였다.

// 로그인 정보 관련 관련 
<script setup>

const managerFormValue = reactive({
  managerId: '',
  managerPwd: '',
  otpNum: '',
  record: false,
  tel: '',
});

//유효성 검사
let errorMessage = ref('');
let isValid = computed(() => errorMessage.value == '');
const isValidFormat = (val) => {
  errorMessage.value = Global.loginPwFormat(val);
};

const clearError = () => {
  errorMessage.value = '';
};

watch(managerFormValue.managerId, () => {
  clearError();
});

</script>

그러나 watch함수가 왜 작동하지 않는지 알수가 없었다. 기존에 watch를 사용할 때는 이런 식으로 잘만사용했다. 시계는 와치... 기존에 사용하던 방법

//날짜 변경시 api 재호출
watch(getSearchDate, () => {
  getDashboardAccountApi();
 });

반응형데이터를 watch로 감시할 때

오랜 고민 결과 ref와 reactive 차이 때문에 watch가 안먹히는것이였다!!! reactive 로 만들어진 객체는 직접적으로 감시할 수 없다고 한다. 그래서 reactive 로 만들어진 객체를 감시하려면, 접근하는 시점에서 함수를 사용하여 감시 대상을 반환시켜야 한다.

reactive를 사용할 경우

() => managerFormValue.managerId와 같이 함수를 사용하여 managerFormValue.managerId를 감싸야 한다.

watch(() => managerFormValue.managerId, () => {
  clearError();
});

차이점을 알겠는가? 모르면 그냥 이렇게 써.

ref를 사용할 경우

ref로 만들어진 경우에는 .value속성에 실제 값을 가지고 있으므로 직접적으로 사용할 수 있다.

watch(managerFormValue.managerId, () => {
  clearError();
});

그런데 나는 managerId값과 managerPwd의 값 즉 유효성검사 오류 출력 후 아이디, 비밀번호 재입력할 경우 해당 input v-model을 watch를 사용하고 감시하고 싶을 땐, 이렇게 입력하면 된다.

watch([() => managerFormValue.managerId, () => managerFormValue.managerPwd], () => {
  clearError();
});

왜 이렇게 사용하나면, watch 함수는 두가지 형태로 사용될 수 있다고 한다.

watch 함수의 두가지 형태

1. 단일 속성을 감시할 경우

watch(
  () => managerFormValue.managerId,
  (newValue, oldValue) => {
    // 속성 값이 변경될 때 실행되는 로직
  }
);

managerFormValue.managerId의 값이 변경될 때마다 두 번째 인자로 전달된 콜백 함수가 실행, 이 콜백 함수는 새 값(newValue)과 이전 값(oldValue)을 인자로 받아 실행된다.

2. 여러 속성 감시할 경우

watch(
  [() => managerFormValue.managerId, () => managerFormValue.managerPwd],
  (newValues, oldValues) => {
    // 속성 값이 변경될 때 실행되는 로직
  }
);

managerFormValue.managerId와 managerFormValue.managerPwd 두 속성의 변경을 함께 감시하고 있으며, 이 경우 콜백 함수는 감시 중인 모든 속성의 새 값들(newValues)과 이전 값들(oldValues)을 Array 형태로 받아 실행된다.

그리하여 반응형 데이터를 watch와 함께 사용할 때 매우 주의하도록 하자!

watch를 사용해도 바로 반영되지 않을 때, 비동기처리할 때

데이터를 실시간으로 확인하면서 비동기처리하여 작업하려 하였으나, 바로 감지하지 못하였을 때 해결하는 간단한 방법은 nextTick() 사용하기!

변경되는 데이터를 통해, 호출되는 모든 API를 확인하고, API가 모두 처리 되면 작업을 수행하도록 하고 싶었다.

watch(searchDate, async () => {
  await nextTick();
  try {
    emitter.emit('showLoading');
    await callApis();
  } catch (err) {
    handleApiError(err);
  } finally {
    emitter.emit('hideLoading');
  }
});

이렇게 사용하면, 데이터를 실시간으로 확인하여 원하는 작업도 진행하고, 비동기 처리하여 에러도 확인하고 ! 아주 간단하다!

그럼 잘 사용해보라고 ADIOS!

널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

라는게 mdn web docs의 이야기!

쉽게 말하면 거짓의 판단을 유연하게 판단하며, 삼항 연산자와 비슷하게 사용할 수 있다. ?? 앞에 자료가 없다면 ?? 뒤에 내용이 출력된다

console.log(age.미성년자 ?? '돌아가' ); //돌아가

언제 어떻게 사용할까

null값을 체크하여 특정 문구를 내보내거나, null 때문에 발생하는 오류들을 없앨때 사용하면 좋다.

value 을 받아와서 화면에 출력하고 싶다, 단순히 null 이여서 표시가 안되어도 된다면 nullish를 사용하지 않아도 되지만, value를 가공하여 화면에 출력하려 할 때 (replace/substring 같은 메서드 사용 시)이 value가 null 이라면 오류가 발생한다. 또는 내가 해야될 부분은 집계된 데이터를 출력하여야 하는데, 사이트 오픈시 집계전이라 이건 0과는 다르게 표시 되어야 하기 때문에 가공이 필요했다. 백엔드쪽에서 가공하여 N/A 값으로 표현하여 주면 좋지만.. 힘없는 우리는 어쩔수없지..

사용 방법

api를 받아 올 때 코드

.then((res) => {
  const resData = res.data;
  // console.log('resData', resData);
      if (res.retCode === '000') {
      dailyBoxList.value.forEach((topList) => {
        const { contentKey, percentKey, signKey } = topList;
          if (contentKey in resData) {
            topList.content = resData[contentKey];
          }
          if (percentKey in resData) {
            topList.percent = resData[percentKey];
          }
          if (signKey in resData) {
            topList.sign = resData[signKey];
            styleToSign(topList.sign);
          }
        });
      }
    })

해당화면에선 null값을 체크하지 않고, key가 맞으면 value값을 삽입하도록 되어있다. 값이 있을 때 ,

값이 없을 때 화면

이건 쪼옴,,, 곤란하잖아? 테스터님들께서 분명 버그로 잡을것이 분명하다고!ㅠㅠ

그래서 null값을 체크하여 N/A로 내보내기로 했다. if문을 새로 돌리는 방법도 있지만,, 게으른 나는 그렇게 복잡하게 쓰기 싫어 조금만 추가했다.

.then((res) => {
  const resData = res.data;
  // console.log('resData', resData);
      if (res.retCode === '000') {
      dailyBoxList.value.forEach((topList) => {
        const { contentKey, percentKey, signKey } = topList;
        if (contentKey in resData) {
          topList.content = resData[contentKey] ?? 'N/A'; //?? 추가
        }
        if (percentKey in resData) {
          topList.percent = resData[percentKey] ?? 'N/A'; //?? 추가
        }
        if (signKey in resData) {
          topList.sign = resData[signKey];
          styleToSign(topList.sign);
        }
       });
      }
    })

수정후 출력된 화면! 매우 간단하죠?

그럼 나는 이제,, 내 화면에서 나오는 null 값을 체크하러 가야겠다..

번외) || 하고 ?? 차이

||는 0, "", false, undefined 같은 false 값을 전부 검사 하는 연산자, ??는 undefined 하고 null 같은 nullish 만 검사하는 연산자

다시한번 보여주지만 0과 null의 차이는 당연히 알겠지? 각인시켜주지.

const a = false || "어떻게";
// a => "어떻게"
const b = false ?? "사람 이름이";
// b => false
const c = undefined ?? null ?? "엄",
// c => "엄"

설치부터 해보면서 배우는것이 최고의 방법이기 때문에 설치 시작! storybook-tutorials : https://storybook.js.org/docs/vue/get-started/introduction

설치방법

1. npx storybook init 이렇게 사용하면 패키지를 자동으로 분석하여 설치해준다. 그럼 나는 vue3+vite를 사용중이기 때문에 확인 후 설치를 해준다.

2. eslintPlugin 을 사용할것이냐고 묻는데 나는 Yes

설치된 package들 이다.

그러면 .storybook 이라는 폴더가 생기고, src아래 stories라는 폴더가 또 생긴다.

3. 설치 완료 되었고 , yarn storybook 명령어를 사용하여 실행!

따로 localhost의 주소를 주지 않아도 자동으로 설정되어 실행된다.

추가적인 셋팅은 조금씩 공부를 더 하면서 추가하도록 하겠다!

watch object 사용 방법

watch는 감시자 역할을 하고 있으며, 설정한 데이터가 변화할 때 마다 watcher도 실행이 된다 watch : {감시할데이터(){}}

코드 예시 :

watch : {
  month(e){
    if(isNaN(e) == true || e >=13 ){
      alert('One year is 12 months');
      this.month = 1;
    }
  }
},

month 데이터가 변할 때 마다 watcher도 실행 된다.

💡Tip) input type=range 를 주어서 값을 제한줘도 된다.

이에 대한 자세한 설명은 타블로그를 참고 부탁드립니다...

this.$watch()를 사용하게 된 이유

내가 처음 데이터를 셋팅해 놓은것은 [현재 날짜로부터 한달전] ~ [현재 날짜] 이기 때문에 이 날짜 안에 선택된 데이터들만 보였다. 그러나 기획에서 처음에는 [현재 날짜] ~ [현재 날짜] 로만 표시되고 데이터의 기간 필터는 걸지 않았으면 좋겠다고 하셨다.

요약 : 캘린더의 특정 기간을 선택하게 되었을 경우에'만' 필터가 걸려서 데이터가 변경되도록 하고 싶었다.

처음에 셋팅한 [현재 날짜로부터 한달전] ~ [현재 날짜] 코드

/* data */
      range: {
        start: dayjs().add(-1, 'M').format('YYYY-MM-DD 00:00:00'),
        end: dayjs().format('YYYY-MM-DD 23:59:59'),
        field: 'regDt',
        fieldLabel: '등록 일시',
        type: 'date',
        label: 'dateSelectedCal',
      },

  watch: {
    range: {
      deep: true,
      handler(value) {
        this.dateSelected(value) //데이터 선택시 실행 함수
      },
    },
  },
  methods: {
    async initialize() {
      this.range = {
        start: dayjs().add(-1, 'M').format('YYYY-MM-DD 00:00:00'),
        end: dayjs().format('YYYY-MM-DD 23:59:59'),
        field: 'regDt',
        fieldLabel: '등록 일시',
        type: 'date',
        label: 'dateSelectedCal',
      }
    },

나같은 말하는 돌맹이에겐 또 한번의 삽질의 시간... 비동기화하여 처리해야하는지 아니면 처음에 데이터를 다 비워놓고 나중에 데이터를 넣어준다던지.. 이 방법들이 맞는지도 틀린지도 모르고 우선 시작해 보았다.

그러던 도중 조건부 watch를 우연하게 찾게 되었고 바로 삽질을 끝내고 불필요한 코드를 모두 지울 수 있었다. 얏호

사용 방법

this.$watch 사용 예시

/* Watch a property name */
this.$watch('a', (newVal, oldVal) => {})

/* Watch a dot-delimited path */
this.$watch('a.b', (newVal, oldVal) => {})

/* Using getter for more complex expressions */
this.$watch(
  // every time the expression `this.a + this.b` yields
  // a different result, the handler will be called.
  // It's as if we were watching a computed property
  // without defining the computed property itself.
  () => this.a + this.b,
  (newVal, oldVal) => {}
)

/* Stopping the watcher */
const unwatch = this.$watch('a', cb)

// later...
unwatch()

vue 공식 문서 - https://vuejs.org/guide/essentials/watchers.html#this-watch

시계는 와치 적용 하기

this.$watch 를 적용하기 위해선 초기값(range)데이터가 필요하고, 해당 range가 변경 되었을 경우에만 특정함수를 실행하여 값을 변경해주어야 하기 때문에 watch(){} 에 있는 것 range를 지우고 이것을 methods에서 작동할 수 있도록 옮겨주었다.

  methods: {
   /* this.range = {
        start: dayjs().add(-1, 'M').format('YYYY-MM-DD 00:00:00'),
        end: dayjs().format('YYYY-MM-DD 23:59:59'),
        field: 'regDt',
        fieldLabel: '등록 일시',
        type: 'date',
        label: 'dateSelectedCal',
      } 
  */

      // range 데이터가 변경되는 경우에 watch 실행
      this.$watch('range', value => {
        this.dateSelected(value)
      })
    },

기존에는 초기 설정된 한달동안의 range 데이터가 먼저 보이고 그 이후에 값이 보였다면,

this.$watch를 사용한 지금은 처음에 전체의 값이 다 보이고 그 이후에 데이터를 변경하였을 경우에만 필터가 적용되어 선택한 기간의 데이터만 보였다.

아주 유용한 기능인것 같다!

기존 프로젝트에서는 한 페이지 안에 모든 데이터를 넣다보니 무겁고, 유지보수할 때 찾는게 쉽지 않았다. 그래서 신규 프로젝트때는 component화해서 잘 사용했으면 좋겠다는 생각이 들어서 시작되었다. 나의 지옥행이(?)

프로젝트에서 페이지마다 형태가 다르기때문에 본인 페이지에 맞게 커스텀이 필요했다. 공통component에 다 집어넣으면 사용이 쉽지 않기때문에!

그래서 제일먼저 하고자한것이 캘린더를 component화 시키는 것

1. 캘린더 형태 잡기 (Bootstrap 사용)

나는 이런형태에서 날짜 클릭시 캘린더가 보여졌으면 했다.

<b-button-group class="mx-1">
    <b-button @click="showCalendar" class="btn-cal" variant="transparent">
        {{ startDate }}
        <span>📅</span>
    </b-button>
    <b-button :disabled="true" variant="transparent" class="mx-2">~</b-button>
    <b-button @click="showCalendar" class="btn-cal" variant="transparent">
        {{ endDate }}
        <span>📅</span>
    </b-button>
</b-button-group>

해당 형태를 만들었고, click event를 넣어서 클릭시 캘린더가 보여지도록 했다. startDate와 endDate는 day.js를 통해 생성하여 가져왔다.

<script>
import dayjs from 'dayjs'
export default {
  layout: 'default',
  name: 'MemberInfo',
  components: {
},
data() {
  return {
      calendarFlag: false,
      range: {
        start: dayjs().format('YYYY-MM-DD'),
        end: dayjs().format('YYYY-MM-DD'),
      },
},
computed: {
  startDate() {
    return this.range.start
  },
  endDate() {
    return this.range.end
  },
},
methods: {
  showCalendar() {
    this.calendarFlag = true
  },
  hideCalendar() {
    if (this.calendarFlag) this.calendarFlag = false
  },
},
</script>

그리고 show, hide 하는 methods를 작성해 놓는다!

2. 캘린더 component 생성 (v-date-piker 사용)

calendar.vue 생성 후 코드 작성하기

<template>
  <div>
    <v-date-picker
      :v-model="range"
      locale="ko"
      is-range
      mode="date"
      class="datetime-picker"
      is24hr
      :max-date="new Date()"
      :columns="
        $screens({
          default: 1,
        })
      "
    >
    </v-date-picker>
  </div>
</template>
<script>
export default {
  name: 'Calendar',
  data() {
    return {}
  },
  props: {
    range: {
      type: Object,
      default() {
        return {}
      },
    },
  },
}
</script>

<style>
.datetime-picker {
  position: absolute;
  left: 430px;
  top: 120px;
  z-index: 5;
}
</style>

3. 캘린더 작동하게 하기 ($emit 사용하기)

이제 진행해야 할 것은

1) 캘린더(자식) component를 부모 component에 장착시키기 2) click 했을 때 오픈시키기 3) 캘린더 외 다른 부분을 클릭했을 때 닫게하기 (자식컴포넌트에서 작동으로 부모컴포넌트의 데이터 변경시키기)

캘린더(자식) component를 부모 component에 장착시키기

<Calendar v-if="calendarFlag" @hideCalendar="hideCalendar" :range="range" />

click 했을 때 오픈시키기

click했을 때 calendarFlag값이 true가 되도록 설정해 놓았다.

v-if="calendarFlag" calendarFlag가 true일경우 컴포넌트를 보여준다. 그리고 데이터(range)를 props로 전송한다.

자식컴포넌트에서 작동으로 부모컴포넌트의 데이터 변경시키기

자식컴포넌트에서 무언가를 작업하면 calendarFlag 값이 false가 되면서 캘린더가 닫혀야 한다

그러나! 부모에 있는 값을 자식이 함부로 가공해서는 안된다. 그렇기 때문에 자식이 부모한테 '이 값을 바꿔주세요~'라고 요청해야 한다

그래서 자식 component에서 $emit 쏴주자

자식 component 에서 보낼 정보를 $emit 통해서 신호 발송! this.$emit(’이벤트명’)

<template>
  <div>
    <v-date-picker
      v-click-outside="onClickOutside" 
      :v-model="range"
      locale="ko"
      is-range
      mode="date"
      class="datetime-picker"
      is24hr
      :max-date="new Date()"
      :columns="
        $screens({
          default: 1,
        })
      "
    >
    </v-date-picker>
  </div>
</template>

methods: {
    onClickOutside() {
      this.$emit('hideCalendar')
    },
  },

v-click-outsid은 vuetify에서 확인할 수 있는데, 이외의 것을 찍으면 특정 함수를 실행시켜주는것이다. 그래서 우리는 캘린더를 닫아달라는 이벤트명을 쏴주도록 한다.

부모 component 에서 받을 준비를 한다 @이벤트명=”실행할 함수”

<Calendar v-if="calendarFlag" @hideCalendar="hideCalendar" :range="range" />

그래서 이제 부모가 해당 값을 받고나면 hideCalendar()를 실행하여 닫게한다.

그러려고 했으나? 이렇게 쉽게 끝날리 없지

캘린더는 보이는데 닫히지가 않는다! 그래서 서치한 결과

directives: {
    clickOutside: {
      bind(el, binding, vnode) {
        el.event = function (event) {
          if (event.target.classList.contains('not-outside')) return false
          if (!(el === event.target || el.contains(event.target))) {
            vnode.context[binding.expression](event)
          }
        }
        document.body.addEventListener('click', el.event)
      },
      unbind(el) {
        document.body.removeEventListener('click', el.event)
      },
    },
  },

이것을 사용해야 한다고 한다. 그래서 당연히 넣어보았으나, 실행되지 않았고 console()로 찍어보았을때 캘린더는 쥐도새도 모르게 사라져있고 해당 함수마다 다 각각 실행되어 있었다.

뭔가 한 tick만 잡으면 보일것 같은데 계속 고민하고 ref를 사용해보려고 열심히 시간을 보내봤지만 되지 않았다. 그러다 캘린더 버튼을 @click.stop="showCalendar" click.stop 형태로 바꾸었더니 매우 아주 잘 실행되었다.

<b-button @click="showCalendar" class="btn-cal" variant="transparent">
        {{ startDate }}
  <span>📅</span>
</b-button>

그리고 결론!

2일에 걸려서 이것저것 알아보면서 하느라 성공시켰지만 V-Calendar를 쓰기로 했다. 기성품이좋아 V-Calendar

살펴보던 도중 나는 node 16.15.1 버전을 사용하는데, 프로젝트는 node 14버전을 쓰는것을 알게되었다.

이걸 어째..? 신규 프로젝트는 node 16인데 매번 삭제후 재설치 할 수 없잖아

그렇게 찾게된 NVM! 너무나 유용해서 공유하려한다 (사실 매번 사용법 까먹음)

NVM 사용방법

NVM 설치하기

nvm의 github에 방문해서 nvm 설치 파일 다운로드하여 설치 NVM GItHub(https://github.com/coreybutler/nvm-windows/)

CMD에서 Node버전 변경

1. cmd 창에 해당 명령어 입력 - nvm list available 사용가능한 node.js 버전을 알려준다.

2. 원하는 버전 설치 - nvm install '버전'

3. 설치된 node 버전 조회 - nvm list

4. 사용할 버전 선택 - nvm use '버전' 변경완료! 가 될 줄 알았으나 오류가 뜸 그래서 찾아보니! 관리자 권한으로 실행해야 한다! 관리자 권한으로 재실행하여 버전 변경 - node -v

5. 버전 변경 확인 하기! 끗!

Vue Router를 사용하는 이유

URL 변경시 Dom을 새로 갱신하는 것이 아니라 변경된 영역만 갱신하기 때문에 유연한 페이지 전환이 가능하다!

라우터 생성 및 사용 방법

1. Vue-router를 설치한다

node npm install vue - router@4

2. router.js 생성하여 route 관리하기

1) vue-router를 import 하고, router를 변수 선언하여 작성한다. 2) 사용할 component 들을 import 시키고, routes에서 설정을 해준다. - path는 주소로 사용, component 에는 해당 페이지 이름

import { createWebHistory, createRouter } from "vue-router";
import Home from './component/Home.vue';
import About from './component/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

3. main.js 설정하기

우리는 router를 사용할 것 이기 때문에 .use(router) 꼭 작성!

// ** vue2 버전 **//

// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)

app.mount('#app')

// ** vue3 버전 **//

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

버전에 따라 설정하는 방법이 다르기 때문에 확인하고, 더 정확한건 vue-router 공식 홈페이지에서 확인할 수 있다.

4. app.vue에서 view 설정하기

<router-view></router-view> 를 사용하여 어디에나 배치하여 레이아웃에 맞게 조정할 수 있다.

<template>
  <div>
    <nav class="navbar bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img
            src="@/assets/1F92A.svg"
            alt=""
            width="30"
            height="24"
            class="d-inline-block align-text-top"
          />
          Vuelog
        </a>
        <router-link to="/">Home</router-link>
        <router-link to="/list">list</router-link>
      </div>
    </nav>
    <div class="mt-4">
     <router-view :listDatas="listDatas"></router-view>
    </div>
  </div>
</template>

router-view에 전송할 정보가 있다면 데이터 바인딩도 진행한다! 여기서 편리한 점은, view로 데이터바인딩을 해주기 때문에 router로 관리하는 모든 component에서 해당 데이터를 사용 할 수 있다!

5. 해당 view 로 이동하고 싶다면

<router-link to=”/링크”></router-link> 해당 페이지로 이동 to 사용하여 페이지 걸면 된다! (4. 의 코드 참조!)

vue-router 공식페이지 참고 https://router.vuejs.org/

코드를 작성하다 보면 뭔가 묘하게 불편한게 느껴진다 (나만?) 다른 사람들의 코드를 보면 굉장히 깔끔하고 잘 붙어있는 느낌인데 그래서 다른점을 찾아보니 다른사람들은 공백이 2, 나는 4로 설정되어 있었다.

간단하게 변경하는 방법

그래서 간단하게 바꾸는 방법을 찾아보니 공백:4을 눌러서 바로 변경할 수 있었다

tab키로 한번에 변경해도 되지만! 귀찮으니까 alt+shift+f 그런데 매번 이렇게 변경하다 보니 귀찮아졌다. 나는 게으른 개발자라네 껄껄껄

환경설정으로 바꾸는 방법

code > 환경설정 > 설정에 들어가서 Editor:Tab-size 를 2로 변경! 새로운 파일을 만들 때 마다 공백이 2로 변경되어있는것을 확인할 수 있을것이다.

이것도 귀찮다면? cmd+shift+p키-'설정' 입력-'tab size' 입력

그런데 검색도중 .reduce()를 유용하게 많이 사용한다고 하여 나도 한번 알아보았다.

Array.reduce() 기본 사용법

// 배열.reduce((누적값, 현재값, 인덱스, 요소) => { return 결과 }, 초깃값);
// 배열.reduce((accumulator, currentValue, index) => { return 결과 }, 초깃값);

const array = [ 6, 2, 1, 8, 10 ]

const result = array.reduce((accumulator, currentValue, index, arr) => {
  console.log(accumulator, currentValue, index);
  return acc + cur;
}, 0);
// 0 6 0
// 6 2 1
// 8 1 2
// 9 8 3
// 17 10 4
result; // 27

//초기값을 적어주지 않았을 떄! 
const result = array .reduce((acc, cur, index) => {
  console.log(acc, cur, index);
  return acc + cur;
});
// 6 2 1
// 8 1 2
// 9 8 3
// 17 10 4
result; // 27

이렇게 풀어놓기만 하면 무슨말인지 잘 이해가 안될 수 있다.

accumulator 누적값, currentValue 현재값, index는 인덱스, arr은 요소 이다. 반복문처럼 한번씩 돌아가면서 값을 더해준다고 생각하면 된다.

초기값을 0으로 셋팅해 주었으니 누적값은 0, 배열에 처음에 있는 값 현재값 6, 그리고 인덱스는 0, 그 다음 단계에서는 누적값은 6, 현재값은 두번째 요소인 2, 인덱스는 1, 이런식으로 차근차근 돌아가는 것이다.

내가 알기로 reduce는 중간에 도망쳐 나올수가 없다고 한다. 주의 요망!

화살표함수를 이용한 reduce()사용법

//arrow function 이용하기

const array = [ 6, 2, 1, 8, 10 ];

const result = array.reduce((acc,cur)=> acc + cur );
console.log(result); // 27

Object에서 사용하기

var array = [
  { name: "Heina", age: 25 },
  { name: "Claire", age: 60 },
  { name: "Patrick", age: 30 },
  { name: "Teo", age: 20 },
];

const result = array.reduce((acc, cur) => acc + cur.age); //err

여기선 결과가 나오지 않는다 이유는 초기값을 설정하지 않았기 때문!

const result = array.reduce((acc, cur) => acc + cur.age, 0); //135
const result = array.reduce((acc, cur) => acc + cur.age, 10); //145

//평균값을 구하려면
console.log(result / array.length); //33.75

콜백으로 reduce()사용하기

function reducer(acc, cur, index){
    const result = acc + cur;
    console.log('acc = ', acc, 'cur = ', cur , 'index = ', index , 'result = ',result)
    return result
  }

  return array.reduce(reducer, 0);

rudece() 를 이용하여 filter 기능도 사용할 수 있다고 하였는데, 그건 추가로 공부한 후 내용을 추가시킬 예정이다.

array 메소드 함수에 대한 재밌는 짤방 ㅎ