Jaybon 의 지식창고

[도메인 등록]

1. Route53 페이지로 이동

2. 도메인 등록 화면으로 이동

3. 도메인 등록을 클릭

4. 도메인 이름을 선택

- 도메인 이름을 선택하고 기관(.com 등)을 선택하고 확인을 눌러서 사용 가능한지 확인 해본다

- 내가 적은 것이 사용 가능하면 사용 가능이라고 뜨며 원하는 도메인을 장바구니에 추가한다

5. 장바구니 확인

- 왼쪽에 장바구니에 등록된 도메인이 나온다

- 확인 후 아래에 있는 계속을 누른다

6. 도메인 등록 세부 정보를 입력한다

7. 약관을 확인하고 주문을 완료한다

8. 등록된 도메인 화면에서 도메인이 등록되었는지 확인한다 (끝)

[호스팅 관리]

1. DNS 관리 - 호스팅 영역으로 들어 간다

2. 도메인 리스트를 확인한다

- AWS에서 만든 도메인은 설명란에 HostedZone created by Route53 Registrar와 같이 뜬다

- 해당 도메인 이름을 클릭하여 이동한다

3. 레코드 생성을 클릭한다

4. 레코드의 속성을 입력한다

- 레코드 이름은 특별한 경우가 있을 경우 (blog.naver.com 등) 입력

- 레코드 유형 아래를 참고 하거나 인터넷 검색 해보자(사이트 아이피를 등록할 경우 A로 설정한다)

https://www.cloudflare.com/ko-kr/learning/dns/dns-records/

- 값 부분에 아이피를 입력한다

- TTL은 Route53이 레코드의 정보를 얻는 주기인 것 같다
(아이피를 변경할 경우 TTL의 시간만큼의 대기시간이 생긴다는 것)

- 기타 사항은 info 버튼을 이용하여 확인해보자

5. 레코드 생성 버튼을 클릭한다

6. 레코드가 추가 되었는지 확인한다 (끝)

- A 레코드로 입력한 사이트를 도메인으로 접속해본다 (접속이 되지 않을 경우 몇분 기다려 본다)

[HTTPS 적용]

웹 서버의 SSL 설정 없이 HTTPS 적용 가능한 시스템인 것 같다

http://devstory.ibksplatform.com/2017/10/aws-acm-amazon-certificate-manager-ssl.html

1. Certificate Manager로 접속한다

2. 인증서를 만들 것인지 사설 인증기관을 사용할 것인지 선택한다

- 여기서는 AWS에서 인증서를 생성한다

3. 인증서 요청을 클릭한다

4. 공인 인증서 요청

- 인증서 요청을 클릭

5. 도메인 이름을 추가한다

- 도메인 이름은 실제 도메인 이름과 앞에 www. 를 붙여 2가지로 작성한다
(www.을 추가하지 않으면 해당 주소로는 접속이 안된다고 한다)

- 다음을 클릭한다

6. 검증 방법 선택하기

- DNS 검증이 편할 경우 DNS 검증을 하고 aws계정에 등록된 메일 주소를 본인이 관리하고 있다면 이메일 검증도 가능하다

- 선택한 뒤 다음을 클릭한다

7. 메일을 확인한다

- 도메인 이름을 여러개 추가했을 경우 메일이 여러개 온다

- 확인 한 뒤 I Approve를 클릭해준다

8. 인증서 리스트 페이지에서 발급 확인

- 검증 상태가 모두 성공이 되고, 어느정도 기다리면 상태가 발급 완료로 변경된다.

9. EC2 콘솔에서 로드 밸런서를 찾아 들어간 뒤 로드 밸런서 생성

10. Application Load Balancer 선택

- 클래식을 사용해도 무방하나 http로 요청시 https로 리다이렉트하려면 Application Load Balancer를 선택해야한다

11. 로드 밸런서 설정하기

#

- 로드밸런서 이름을 기입한다

- 외부 통신이기 때문에 Internet-facing을 선택

- IP address type은  IP4 / IP6에 따라 선택

##

- VPC는 직접 인터넷을 검색해서 선택하거나 기본 사용하는 것이 있다면 사용

- Mappings는 해당 인스턴스의 지역을 체크 하면 되고 최소 2개 이상의 지역을 선택해야 함

###

- 보안 그룹을 설정한다

- 보안 그룹이 없다면 다른 페이지에서 생성 후 새로고침 버튼을 누른 후 추가 해준다
(세팅 시 아래와 같이 인바운드 옵션을 추가하자)

####

- 리스너와 라우팅을 추가한다

- 위 사진과 같이 HTTPS 프로토콜과 HTTP 프로토콜을 각각 만들어 주자

- 타겟 그룹을 선택해야 하지만 없다면 Create target group를 이용하여 타겟 그룹을 추가해보자

- 타겟 그룹은 아래와 같이 추가해보자

-

-

-

-

- 원하는 인스턴스 체크

-

-

- 타겟 그룹 생성 됨 (로드밸런서 설정으로 돌아가서 세팅하자)

#####

- 보안세팅은 기본 제시된 것으로 사용

- ACM은 위에서 만든 인증서를 등록하자

######

- 로드밸런서 생성

12. 로드 밸런서 리스트에서 확인

- DNS 이름을 따로 복사 해놓자

13. HTTP 접속 시 HTTPS 리다이렉트를 위해 리스너를 설정한다

- HTTP 80 포트의 규칙 보기/편집 클릭

14. 연필 모양 클릭 클릭

15. THEN 삭제

16. 작업추가- 리디렉션 대상 선택

17. 리디렉션 대상을 HTTPS 443으로 설정하고 업데이트

18. 호스팅 영역에서 해당 도메인을 선택한 뒤 위에서 만든 A 레코드를 삭제하고 새로운 레코드를 생성해야한다

- A레코드는 2가지를 생성해야한다 (레코드이름을 공백으로 한번 / www. 를 앞에 붙이고 한번더 )

- 트래픽 라우팅 대상은 별칭을 선택하고 이전에 만든 로드밸런서를 선택한다

19. 로드밸런서 아웃바운드 로드밸런서 설정

이제 HTTPS가 적용되었다. (끝)

참고.

https://twofootdog.tistory.com/29

https://sovovy.tistory.com/37

https://mwoo526.tistory.com/16

https://www.comtec.kr/2021/07/14/aws-dns-ssl/

필요프로그램

openssl

openssl req -x509 -out localhost.crt -keyout localhost.key \ -days 365 \ -newkey rsa:2048 -nodes -sha256 \ -subj '/CN=localhost' -extensions EXT -config <( \ printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

참고

https://letsencrypt.org/ko/docs/certificates-for-localhost/

https://ichi.pro/ko/lokeol-gaebal-eul-wihae-sinloehal-su-issneun-ssl-injeungseoleul-mandeuneun-bangbeob-21978868951494

https://dev-jelly.netlify.app/posts/Apply%20Https%20on%20next.js%20when%20development

플러터에서 구글 로그인을 구현하기 위해

https://pub.dev/packages/google_sign_in

위의 라이브러리를 사용하였다.

이렇게 코드를 추가하고 실행해보면

아래와 같이 에러가 발생한다.

스택오버플로우 등 여러 곳을 찾아 보았으나 문제가 해결되지 않았는데, 

라이브러리 제작자의 예시코드를 보니 clientId가 optional인 것을 확인하였다.

그래서 clientId를 지워보았더니...

정상적으로 정보를 가져온다.

플러터 프로젝트를 생성하고 lib폴더에서 패키지를 생성하려고 할 때 아래와 같이 패키지가 보이지 않는 경우가 있다.

필자의 경우 툴박스의 안드로이드 스튜디오를 사용 할 때 보이지 않았다.

안드로이드 스튜디오를 독립적으로 설치했을 때에는 바로 패키지가 만들어졌는데 이상하다.

이럴 경우 아래와 같이 하면 해결된다.

Mark Directory as -> Sources Root

패키지가 생긴 것을 확인하였다.

플러터에 firebase auth 등을 추가하려면 아래와 같이 오류가 발생한다.

버전이 올라가면서 firebase 기능을 사용하려면 추가 코드가 필요하다.

위와 같이 firebase_core를 디펜던시에 추가하고,

메인 메서드에서 위 코드를 입력한다.

이후 재가동하면 정상작동할 것임. 

https://flutter.dev/

위 사이트 접속

오른쪽 상단의 get started 클릭

윈도우 환경이기 때문에 windows 선택

zip 파일 다운로드

압축을 풀고 원하는 디렉토리에 이동시킨다.

홈페이지에서 경고했듯이 C:\Program Files 에 이동시키지 않도록 한다.

폴더 내부의 bin 폴더를 환경변수에 등록하여야 플러터 명령어를 사용할 수 있다.

먼저 사용자 변수에 플러터 bin폴더를 추가한다.

시스템 변수에 Path를 선택하고 편집을 클릭한뒤 bin 경로를 입력한뒤 확인을 누른다.

cmd창에서 flutter 를 입력해본다.

위와 같은 메세지들이 나온다면 성공.

https://developer.android.com/studio

안드로이드 스튜디오가 없다면 홈페이지에서 다운로드 받는다.

설치후 SDK 매니저를 실행해본다.

개발대상 안드로이드 버전을 선택한다.

최신버전보다 그 이전 버전을 선택하는 것이 좋다.

다음으로 플러그인을 설치한다.

플러터를 검색한뒤 설치하고 스튜디오를 재시작한다.

재시작되면 플러터프로젝트를 생성할 수 있게 된다.

cmd 창에서 flutter doctor를 입력해본다.

위와 같이 뜨면 빨간박스 내용을 입력하고 모두 Y를 입력해준다.

다시 flutter doctor를 입력했을 때 문제가 없다면 제대로 완료된 것임.

스튜디오에서 플러터 프로젝트를 생성해본다.

프로젝트명은 소문자와 언더바를 이용하여 입력한다. (대문자를 허용하지 않는다.)

SDK 경로는 이전에 플러터 사이트에서 다운받고 위치시킨 경로를 입력한다.

project location은 프로젝트 폴더를 넣을 경로를 입력한다.

Description은 프로젝트 설명을 적는다.

패키지명을 적는다.

자신의 도메인을 역순으로 적는 것이 비공식 규칙이다.

site.com이라면 com.site라고 적는다.

도메인이 없다면 위와 같이 임의로 적어본다.

플랫폼 채널 랭귀지는 원하는 플랫폼을 선택한다. (둘다 선택해도 됨.)

프로젝트 화면이 나온다면 성공.

리액트에서

A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

에러가 발생할 경우 값변경이 제대로 되지 않는 경우가 있다

이 경우는 받아온 DTO나 state가 null일 경우이다

value={dto.name}

이렇게 들어간 코드를

value={dto.name || ''}

이런식으로  널처리를 해주면 해결된다.

fcm push가 올 경우 화면을 실시간으로 변경해야될 경우가 있음.

liveData를 이용하여 구현 할 수 있다.

안드로이드 App 파일에서

스태틱으로 라이브데이터를 선언해준다

App파일의 onCreate에서 초기화 라이브데이터를 초기화 해준다.

fcm 메시지 리시버 내부에서

뱃지와 관련된 글로벌 카운트를 올려준 뒤
라이브 데이터를 변경한다(변경이 되어야 액티비티/프래그먼트에서 변경 감지를 할 수 있다)
메인쓰레드가 아닌곳에서 변경을 하려면 postValue를 이용한다

뷰를 변경할 액티비티나 프래그먼트로 이동한다
액티비티는 this / 프래그먼트는 viewLifecycleOwner를 라이프사이클 오너로 입력한다

이제 푸시 알림이 오면 해당 뱃지의 뷰가 변경이 된다.

rx Customer를 이용하여서도 비슷하게 구성 할 수 있다.