평생 공부만 해야할듯

React + Electron 환경으로 프로그램을 만들어야 하는 일이 생겼습니다.

개발에서는 React 서버가 구동되고나서 Electron을 실행해야 정상적으로 프로그램에서 작동하는데요. 

이 부분을 한방에 처리하고자 했는데 wait-on 이후 실행이 되지 않는 문제가 있었습니다.

"scripts": {
    "start": "concurrently \"npm run react:start\" \"npm run electron:start\"",
    "electron:start": "wait-on tcp:localhost:3000 && mode=dev electron .",
    "react:start": "react-scripts start",
    "react:build": "react-scripts build",
    "build": "npm run react:build && electron-builder --publish=always"
  },

electron . 을 실행하면 정상적으로 프로그램이 실행되는데 wait-on으로 3000포트가 뜨는걸 기다렸다가 실행하는 부분은 계속 대기만 하고 있는 상태였습니다.

wait-on tcp:localhost:3000 && mode=dev electron .

검색 결과 Node 17에서는 아래와 같은 오류를 유발할 수 있는 주요 변경사항을 도입했다고 하는데요.

Error connecting to TCP host:localhost port:3000 Error: connect ECONNREFUSED ::1:3000

즉 localhost가 아닌 127.0.0.1 이라는 포트로 접근을 해야 됩니다.

"electron:start": "wait-on tcp:127.0.0.1:3000 && electron ."

이렇게 변경 후 다시 yarn start나 npm run start 명령어를 입력하시면 프로그램이 정상적으로 실행되는것을 확인할 수 있습니다.

Oracle Cloud 에 인스턴스를 만들고 서버 설정을 하고 있었습니다.

/etc/nginx/nginx.conf 파일을 아래와 같이 수정하고 GET, POST를 열어두고 nginx 를 다시 실행했습니다.

sudo systemctl restart nginx

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        # root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        # location / {
        # }

        location / {
            limit_except GET POST {
                deny all;
            }
            proxy_http_version 1.1;
            proxy_set_header    Host            $host;
            proxy_set_header    X-Real-IP       $remote_addr;
            proxy_pass http://localhost:8080;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

원하는 대로면 도메인이나 서버 IP로 접속을 하면 띄워놓은 8080 서버로 전달을 해주는건데.. 아래 같이 error 화면만 주구장창 나오고 502 Bad Gateway 오류가 발생했습니다.

nginx error 로그를 확인해보니 권한이 없다고 보이네요.

cat /var/log/nginx/error.log

to 127.0.0.1:8080 failed (13: Permission denied) while connecting to upstream, client:

구글 검색 결과 SELinux 때문이라고 해서 아래 명령어를 입력하면 문제 없이 해결된다고 하여 설정하니 문제가 없네요.

setsebool -P httpd_can_network_connect 1

https://stackoverflow.com/questions/23948527/13-permission-denied-while-connecting-to-upstreamnginx

근본적으로 정책을 변경하는 것 이기에 문제가 발생하지만 당장은 해결되었네요.. 

정상적인 방식으로 해결하는 방법을 확인하여 다시 작성해보도록 하겠습니다.

React 로 웹 페이지를 작업하고 있고, 간단하게 테스트 프로젝트를 배포하기 위해 Firebase Hosting 서비스를 자주 사용하고 있습니다.

# 문제

React환경에서 React Router를 사용하여 페이지를 보여주고 있는데요, 로컬 환경에서 잘 되던 페이지 이동이 Firebase Hosting에 올라가면 404 Page Not Found가 발생합니다.

무조건 발생한건 아니고 특정 /example/1 이런식의 / 루트가 아닌 경로로 접근해서 브라우저를 새로고침 하면 /example/1이라는 경로에 해당하는 파일이 없기 때문에 오류를 발생하는거죠.

# 문제해결

이런 오류를 해결하기 위해서는 React Router 환경에 맞게 firebase.json을 수정해줄 수 있습니다.

아래와 같이 rewrites 부분을 추가 하여 모든 요청에 대해서 /index.html 을 바라보도록 수정하면 해당 오류는 발생하지 않습니다.

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

이런 오류를 그냥 넘기지 말고 해결해두면 개발자의 입장에서 신뢰도가 올라갈 것이라고 생각합니다 :)

Flutter로 macOS 앱을 빌드해서 이미지를 보여주려고 했습니다.

그런데 아래와 같은 오류가 발생하면서 Crash가 발생하고 이미지는 불러와지지 못했는데요.

macOS에서 Network통신을 하려면 특정 권한이 필요합니다.

The following SocketException was thrown resolving an image codec:
Connection failed (OS Error: Operation not permitted, errno = 1), address = xxx.xxx.xxx, port = 443

https://docs.flutter.dev/platform-integration/macos/building#setting-up-entitlements

문서를 읽어보면 네트워크 요청을 하는 경우 권한을 추가해야 된다고 명시되어 있습니다.

# 네트워크 권한 추가

macos/Runner/*.entitlements를 열고 Key-Value를 쌍으로 추가해줘야 합니다.

<key>com.apple.security.network.client</key>
<true/>

Debug, Release에 맞게 권한을 추가 하고 다시 앱을 빌드하게 되면 정상적으로 네트워크 통신이 되는것을 확인할 수 있습니다.

문제

# 문제

두 정수 A와 B를 입력받은 다음, A×B를 출력하는 프로그램을 작성하시오.

# 입력

첫째 줄에 A와 B가 주어진다. (0 < A, B < 10)

# 출력

첫째 줄에 A×B를 출력한다.

# 알고리즘 분류

• 수학
• 구현
• 사칙연산

풀이

# 언어

Java 11 

# 소스코드 

Main Class와 main Method 구현을 한 뒤 풀이를 작성했습니다.

이번에는 BufferedReader를 사용했습니다.

readLine() 메서드로 공백 구분으로 입력되는 문자열을 자른 뒤 연산을 해줍니다.

기존 Scanner말고 BufferedReader를 사용하면 메모리 사용량과 처리 시간이 단축되는 장점을 알게 되었습니다.

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.IOException;

public class Main {
    public static void main(String[] args) throws IOException {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        
        String[] str = br.readLine().split(" ");
        int a = Integer.parseInt(str[0]);
        int b = Integer.parseInt(str[1]);
        
        System.out.println(a * b);
    }
}

문제

# 문제

두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.

# 입력

첫째 줄에 A와 B가 주어진다. (0 < A, B < 10)없음

# 출력

첫째 줄에 A+B를 출력한다.

# 알고리즘 분류

• 수학
• 구현
• 사칙연산

풀이

# 언어

Java 11 

# 소스코드 

Main Class와 main Method 구현을 한 뒤 풀이를 작성했습니다.

Scanner로 사용자 입력의 정수값을 a, b로 받아서 처리했습니다.

scanner.close() 메서드를 호출하지 않더라도 Closeable 인터페이스가 호출되어 스트림을 닫는다고 하는군요.

import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        
        int a = scanner.nextInt();
        int b = scanner.nextInt();
        
        scanner.close();
        
        System.out.println(a + b);
    }
}

문제

# 문제

두 정수 A와 B를 입력받은 다음, A-B를 출력하는 프로그램을 작성하시오.

# 입력

첫째 줄에 A와 B가 주어진다. (0 < A, B < 10)

# 출력

첫째 줄에 A-B를 출력한다.

# 알고리즘 분류

• 수학
• 구현
• 사칙연산

풀이

# 언어

Java 11 

# 소스코드 

Main Class와 main Method 구현을 한 뒤 풀이를 작성했습니다.

Scanner로 사용자 입력의 정수값을 a, b로 받아서 처리했습니다.

import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        
        Scanner scanner = new Scanner(System.in);
        
        int a = scanner.nextInt();
        int b = scanner.nextInt();
        
        System.out.println(a - b);
    }
}

문제

# 문제

Hello World!를 출력하시오.

# 입력

없음

# 출력

Hello World!를 출력하시오.

# 알고리즘 분류

• 구현

풀이

# 언어

Java 11 

# 소스코드 

Main Class와 main Method 구현을 한 뒤 풀이를 작성했습니다.

System 표준 입출력으로 풀이

public class Main {
    public static void main(String[] args) {
        System.out.print("Hello World!");
        
     	// System.out.println("Hello World!");
        // System.out.printf("Hello World!");
        // System.out.printf("%s", "Hello World!");
    }
}

Flutter로 iOS, AOS 테스트를 하다보면 화면 전환 효과가 다르죠.

iOS는 CupertinoPageRoute와 같이 옆으로 화면이 전환되고, 뒤로가기 swipe를 하면 pop이 되는 구조 입니다.

하지만 AOS는 MaterialPageRoute와 같이 가운데화 화면이 채워지는 효과가 있죠.

AOS도 iOS처럼 화면 전환효과를 동일하게 하고 싶을때에는 CupertinoPageRoute로 바꿔서 Navigate를 하곤 했는데... 언제 다 수정하지..

하지만 역시 Flutter는 이러한 부분을 알기라도 하듯이 사용자에 의해 설정을 변경할 수 있도록 제공하고 있습니다.

# ThemeData

ThemeData로 테마 설정을 하는데 pageTransitionsTheme이라는 속성이 존재 합니다.

https://api.flutter.dev/flutter/material/PageTransitionsTheme-class.html

MaterialPageRouter에서 사용하는 전환 효과를 설정하는 정의하는데요.

Default로 iOS이면 CupertionPageTransitionBuilder, AOS이면 ZoomPageTransitionsBuilder를 사용하고 있습니다.

class PageTransitionsTheme with Diagnosticable {
  ...
  
  const PageTransitionsTheme({ Map<TargetPlatform, PageTransitionsBuilder> builders = _defaultBuilders }) : _builders = builders;

  static const Map<TargetPlatform, PageTransitionsBuilder> _defaultBuilders = <TargetPlatform, PageTransitionsBuilder>{
    TargetPlatform.android: ZoomPageTransitionsBuilder(),
    TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
    TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
  };
  
  ...
}

# TransitionsBuilder 변경

위 처럼 기본값이 ZoomPageTransitionsBuilder로 지정되어 있으니 ThemeData에서 아래처럼 변경해주겠습니다.

TargetPlatform의 android일때 iOS의 CupertinoPageTransitionsBuilder를 제공함으로써 iOS와 동일한 Transition효과를 기대할 수 있겠습니다.

pageTransitionsTheme: const PageTransitionsTheme(
  builders: {
    TargetPlatform.android: CupertinoPageTransitionsBuilder(),
  }
),

이제 Android 일때에도 MaterialRoutePage만 사용해도 CupertinoRoutePage의 Transition효과를 얻을 수 있습니다.

크로스 플랫폼이기에 화면 전환까지 동일하게 변경했더니 AOS 특유의 버벅임이 줄어든 느낌이 들어서 좋은것 같습니다.

* 위 설정은 go_router에서도 동일하게 적용됩니다.

Firebase Analytics 패키지를 사용하던 중 새로운 버전이 나와 버전 업데이트를 진행했습니다.

Debug모드에서는 전혀 문제가 없었지만 스토어 배포를 하던 중에 'com.google.android.gms.permission.AD_ID' 권한에 대한 오류가 발생했습니다.

기본적으로 AD_ID 권한이 존재 하지만 광고 ID를 사용하지 않아 Paly Console에서 '광고' 앱 콘텐츠를 수정해줘야 합니다.

[!] Google Api Error: Invalid request - This release includes the com.google.android.gms.permission.AD_ID permission but your declaration on Play Console says your app doesn't use advertising ID. You must update your advertising ID declaration.

# Analytics version 20.1.1 릴리즈에서 해당 내용이 추가 되었습니다.

# Android 12, 13 광고 ID 요구사항 입니다.

https://developers.google.com/interactive-media-ads/docs/sdks/android/dai/android-12

# 콘텐츠 수정 

Google Play Console에 진입해줍니다.

https://play.google.com/console

개발자 계정을 선택하고, 수정할 앱을 선택합니다.

앱 상세에 들어가면 좌측 하단에 '정책 및 프로그램' 메뉴에서 '앱 콘텐츠' 메뉴로 진입합니다.

'광고 ID' 항목에서 관리를 선택합니다.

'앱에서 광고 ID를 사용하나요?' 항목에서 '예' 를 선택하고 아래 애널리틱스를 체크 하고 저장합니다.

# 마무리

위 변경된 정책은 심사를 거치게 됩니다.

심사에서 승인되면 권한에 대한 오류가 해결됨을 확인할 수 있습니다.