CloudFront를 통해 퍼블릭 상태의 객체에 대한 접근을 차단하고, https까지 적용시키려고 합니다.

 

https://whyeskang.com/411

 

AWS S3로 React 배포하기

S3와 CloudFront를 이용한 배포 방법이 있고, S3 만으로 배포하는 방법이 있습니다. 권장하는 방법은 S3, CloudFront를 모두 사용하는 방법이고, 이 글에서는 S3 만으로 배포하는 것을 다룹니다. 사전에

whyeskang.com

우선 이전 글에 이어서 포스팅하니, 앞 내용은 여기서 확인해주시면 됩니다.

 

현재 S3만으로 배포가 완료된 이 버킷은 퍼블릭 상태이고, 퍼블릭 차단이 해제되어 있습니다.

먼저 이것부터 돌려놓습니다.

퍼블릭 액세스 차단을 다시 활성화하고, 현재 등록된 버킷정책을 삭제하여 액세스를 "버킷 및 객체가 퍼블릭이 아님" 상태로 돌려놓습니다.

완료된 화면입니다.

 

그리고 정적 웹 사이트 호스팅로 "비활성됨" 으로 변경합니다.

 

https://us-east-1.console.aws.amazon.com/cloudfront/v3/home

 

https://us-east-1.console.aws.amazon.com/cloudfront/v3/home

 

us-east-1.console.aws.amazon.com

그러면 이제 위 링크를 이용하여 CloudFront 페이지로 넘어갑니다.

 

우측의 "배포 생성" 버튼을 누릅니다.

 

우선 원본 도메인으로 해당 버킷에 해당하는 도메인을 선택합니다.

그리고 S3 버킷 액세스를 "원본 액세스 제어 설정"으로 변경합니다.

 

그 다음 제어 설정 생성을 눌러서 해당 S3의 제어 설정을 생성합니다.

건드릴 것 없이 바로 생성 버턴을 누르시면 됩니다.

 

 

그리고 아래에 Origin Shield 활성화를 "예"로 변경합니다.

지역은 S3 버킷과 동일하게 맞춥니다.

 

기본 캐시 동작에서는 하나만 변경하면 됩니다.

뷰어 프로토콜 정책이 HTTP and HTTPS로 되어있을겁니다.

이거를 "Redirect HTTP to HTTPS"로 변경합니다.

 

그리고 맨 밑에 내려와서 기본값 루트 객체를 /index.html 으로 작성하고 배포를 생성합니다.

 

그러면 배포를 생성함과 동시에 S3 버킷 정책을 업데이트하라고 합니다.

정책을 복사해줍니다.

 

그리고 해당 S3로 넘어가서 버킷 -> 권한 -> 버킷 정책 -> 편집에서 해당 내용을 넣고 저장합니다.

위 사진처럼 되면 완료입니다.

 

다시 생성된 배포로 넘어가면 도메인이 표시되어 있습니다.

 

도메인 + /index.html 으로 들어가면 배포가 완료되었고, https까지 적용된 것을 확인하실 수 있습니다.

그리고 버킷의 엔드포인트까지 노출되지 않아서 S3만으로 배포한 방법보다는 안정적이라고 볼 수 있습니다.

 

하지만 도메인/index.html 을 통해서만 이 페이지가 뜨며, /index.html를 제거한다면 AccessDenied가 뜹니다.

여기서 오류페이지에 대한 응답을 직접 생성하는 방법으로 해결합니다.

 

해당 배포 -> 오류 페이지 응답 생성에서 사용자 정의 오류 응답 생성 버튼을 누릅니다.

 

여기서 오류코드를 응답 페이지로 이동하도록 지정할 수 있습니다.

/index.html로 경로를 설정하고, 응답 코드를 200으로 변경합니다.

 

같은 방법으로 403, 404에 대한 응답 페이지를 생성하였습니다.

 

이제 /index.html 없이 도메인 입력만으로 이동이 가능한 것을 확인할 수 있습니다.

'Etc' 카테고리의 다른 글

AWS S3로 React 배포하기  (0) 2023.02.02
GitHub Actions를 이용한 Slack Notification  (0) 2023.01.30
React Web3로 Contract 함수 호출  (2) 2023.01.10
GitLab -> GitHub Mirroring  (0) 2022.06.12
Unity Script로 카메라 Culling Mask 기능 사용하기  (2) 2021.10.29

S3와 CloudFront를 이용한 배포 방법이 있고, S3 만으로 배포하는 방법이 있습니다.

권장하는 방법은 S3, CloudFront를 모두 사용하는 방법이고, 이 글에서는 S3 만으로 배포하는 것을 다룹니다.

 

사전에 준비하셔야할 것은 배포 하려고하는 React 프로젝트입니다.

npx create-react-app deploy-app

저는 기본 프로젝트를 배포하기 위해 위 명령어로 새 프로젝트를 만들었습니다.

 

우선 프로젝트를 S3에 업로드한 후에 배포를 진행하게 됩니다.

먼저 리액트 프로젝트를 아래 명령어로 빌드해주시면 됩니다.

npm run build

그럼 프로젝트 바로밑에 build 폴더가 생성되는 것을 확인할 수 있습니다.

build 폴더 아래의 모든 파일을 S3에 업로드합니다.

 

https://s3.console.aws.amazon.com/s3/buckets

 

https://s3.console.aws.amazon.com/s3/buckets

 

s3.console.aws.amazon.com

위 링크를 이용하여 S3 버킷 페이지로 이동합니다.

그리고 우측에 "버킷 만들기" 버튼으로 버킷을 생성합니다.

 

버킷 이름은 원하는대로 작성합니다.

 

객체 소유권은 비활성화됨을 유지합니다.

 

원래는 모든 퍼블릭 액세스를 차단하는 것이 맞습니다.

하지만 S3만으로 배포할 때는 차단을 해제합니다.

이는 추후에 업로드할 CloudFront로 보완할 수 있습니다.

 

나머지 설정은 기본으로 놔두고 버킷을 생성하시면 됩니다.

이렇게 생성된 버킷의 액세스는 "객체를 퍼블릭으로 설정할 수 있음" 상태입니다.

이것을 "퍼플릭" 상태로 변경해야 합니다.

이를 위해 버킷 -> 권한 -> 버킷 정책에서 "편집" 버튼을 눌러 버킷 정책을 넣어주시면 됩니다.

 

1시 방향의 "정책 생성기" 버튼으로 편하게 정책을 생성할 수 있습니다.

그 전에 왼쪽의 버킷 ARN을 복사하고 넘어가도록 합시다.

 

먼저 Policy Type은 "S3 Bucket Policy"를 선택합니다.

Principal은 *

Actions는 GetObject

ARN은 방금 복사했던 ARN + /*을 넣습니다. (/*을 반드시 포함해야 합니다.)

그러면 Add Statement 버튼이 활성화되며, 클릭합니다.

 

Generate Policy 버튼까지 누르면 JSON 형식으로 버킷 정책이 생성됩니다.

위 내용을 복사합니다.

 

그리고 다시 버킷 정책으로 돌아와서 복사한 내용을 붙여 넣으면 됩니다.

그리고 "변경 사항 저장" 버튼을 눌러 저장합니다.

 

그러면 객체의 액세스가 퍼블릭으로 변경된 것을 확인할 수 있습니다.

 

다시 해당 버킷으로 들어갑니다.

여기에 아까 build했던 파일을 다 업로드합니다.

업로드가 완료되면 이런 상태가 됩니다.

 

그리고 속성에서 맨 밑으로 내려가면 "정적 웹 사이트 호스팅"이 있습니다. 편집을 누릅니다.

우선 활성화부터 해주시고, 기본 페이지로 index.html 을 넣어줍니다.

그리고 변경사항을 저장합니다.

 

그러면 이렇게 URL을 발급 받을 수 있습니다.

 

그리고 해당 URL을 클릭하면 배포가 완료된 것을 확인할 수 있습니다.

 

다만 이 방법은 객체가 퍼블릭 상태고, https가 적용되지 않아 보안상의 이슈가 있습니다.

이를 해결하기 위해서는 CloudFront에 S3를 연결해주는 작업이 필요합니다.

CloudFront 관련 글은 아래 링크에서 확인해주시면 되겠습니다.

https://emoney96.tistory.com/412

 

'Etc' 카테고리의 다른 글

AWS S3 & CloudFront로 React 배포하기  (0) 2023.02.02
GitHub Actions를 이용한 Slack Notification  (0) 2023.01.30
React Web3로 Contract 함수 호출  (2) 2023.01.10
GitLab -> GitHub Mirroring  (0) 2022.06.12
Unity Script로 카메라 Culling Mask 기능 사용하기  (2) 2021.10.29

GitHub Actions를 이용하기 전에 Github & Slack부터 진행하며, Slack 워크스페이스가 만들어져 있다는 가정하에 시작합니다.

 

우선 알림을 받으려고 하는 채널을 생성합니다.

 

그리고 아래에 있는 "앱 추가" 버튼을 누릅니다.

 

"GitHub"를 추가합니다.

 

그 다음은 채널 우클릭 -> 채널 세부정보 보기 -> 통합 -> 앱 에서 앱 추가를 합니다.

GitHub를 추가하시면 됩니다.

그러면 해당 채널에서 위 메시지를 확인할 수 있습니다.

 

/github signin 명령어를 치면 GitHub에 연결할 수 있도록 메시지가 전송됩니다.

버튼을 눌러서 연결할 수 있고, Verification Code를 받으면 위 사진에 있는 Enter code에 입력하면 연동되는 것을 확인할 수 있습니다.

 

이제 계정과 연결을 했으니 GitHub Repository에 연결하도록 합니다.

명령어는 /github subscribe owner/repository 입니다.

여기 드래그된 부분을 owner/repository 자리에 넣어주시면 되겠습니다.

 

이 메시지를 받으셨다면 연결은 완료되었습니다.

 

이제 GitActions와 연동을 하겠습니다.

https://api.slack.com/apps

 

Slack API: Applications | Slack

Your Apps Don't see an app you're looking for? Sign in to another workspace.

api.slack.com

먼저 위 링크를 타고 가서 Create New App 버튼으로 앱을 생성합니다.

 

그리고 Settings -> Basic Information -> Add features and functionality에서 Incoming Webhooks를 누르고 활성화합니다.

 

그 다음 아래에서 Add New Webhook to Workspace 버튼으로 워크스페이스와 채널에 연결합니다.

그러면 이렇게 Webhook URL을 받을 수 있습니다. 이거를 GitHub의 secrets에 넣어줍니다.

 

GitHub -> Settings -> Security -> Secrets and variables -> Actions에 들어가셔서 New repository secret 버튼으로 발급 받은 Webhook URL을 넣어줍니다.

이렇게 등록되어야 합니다.

 

이제 yml 파일을 .github/workflows 경로 내에 작성해야 합니다.

Actions 페이지로 와서 "set up a workflow yourself"를 클릭합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
name: Slack Notification
 
on:
  pull_request:
    branches: [ "master", "develop" ]
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: action-slack
      uses: 8398a7/action-slack@v3
      with:
        status: ${{ job.status }}
        author_name: www-be
        fields: repo,message,commit,author,action,eventName,ref,workflow,job,took
        if_mention: failure,cancelled
      env:
        SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} # required
      if: always() # Pick up events even if the job fails or is canceled.
 
 cs

먼저 name으로 workflow의 이름을 작성합니다.

 

on은 workflow가 실행될 조건을 명시합니다.

보통 push나 pull request를 등록하며, 저는 pull request만 작성했습니다.

 

jobs에는 실행되는 명령어들을 작성합니다.

여기서 secrets에 등록한 SLACK_WEBHOOK_URL을 사용합니다.

그 외 파라미터나 필드 등 설명은 https://action-slack.netlify.app/ 여기서 확인해주시거나 아래 레퍼런스에서 확인해주시면 되겠습니다.

 

등록이 완료되었다면 이렇게 알림을 받아보실 수 있습니다.

 

Reference

GitHub & Slack 연동

Git Actions 활용

'Etc' 카테고리의 다른 글

AWS S3 & CloudFront로 React 배포하기  (0) 2023.02.02
AWS S3로 React 배포하기  (0) 2023.02.02
React Web3로 Contract 함수 호출  (2) 2023.01.10
GitLab -> GitHub Mirroring  (0) 2022.06.12
Unity Script로 카메라 Culling Mask 기능 사용하기  (2) 2021.10.29

알고리즘

1일 1알고리즘

 

넥스터즈 3주차

저번주 설 연휴가 있어서 오랜만에 정규활동을 진행했다.

이번주 활동으로는 팀 회의와 레크레이션이 진행되었다.

레크레이션은 퀴즈 위주로 진행되었고, 팀원 한분이 하드캐리를 하는 바람에.. 너무 재미있었다 ㅎㅎ

 

후기

개발을 계속 하고있지만 중간에 애매한 부분이 많아 물어보고, 회의 일정 잡고 하는 시간이 늘어난 것 같다.

화면 설계를 보면서 api 정리를 다시 해야할 것 같다.

벌써 1월이 끝나려고 하는데, 정말 열심히 하자는 생각을 갖고 올해가 시작되었고, 현재는 잘 지켜진것 같아 만족스럽다.

근데 점점 워커홀릭이 되어가는 느낌이다. 개발이 점점 재밌어지는데 긍정적인게 맞겠지?

'잡담' 카테고리의 다른 글

2월 2주차 결산  (0) 2023.02.13
2월 1주차 결산  (2) 2023.02.05
1월 3주차 결산  (0) 2023.01.22
1월 2주차 결산  (0) 2023.01.16
1월 1주차 결산  (0) 2023.01.09

https://www.acmicpc.net/problem/12996

 

12996번: Acka

첫째 줄에 앨범에 포함된 곡의 개수 S와 dotorya, kesakiyo, hongjun7이 불러야 하는 곡의 수가 주어진다. (1 ≤ S ≤ 50, 1 ≤ dotorya, kesakiyo, hongjun7 ≤ S)

www.acmicpc.net

N곡을 세 사람이 나눠서 불러 앨범을 완성해야 합니다.

정확히 N곡을 불러야하며, 세 사람의 기회가 모두 소진되어야 합니다.

 

그러면 경우의 수를 얻는 조건은 N이 0이되면서 세 사람의 기회가 모두 0이 되는 경우에만 1을 추가합니다.

dp[N][x][y][z]: N곡이 남았고, 세 사람의 기회가 x, y, z만큼 있을 때 앨범을 완성할 수 있는 경우의 수

 

한 곡에 대해 부를 수 있는 경우는 아래와 같습니다.

  1. 세 사람 중 적어도 한 명 이상이 불러야 한다.
  2. 세 사람 모두가 한 곡을 불러도 된다.
  3. 세 사람 중 두 사람이 한 곡을 불러도 된다.
  4. 세 사람 중 한 사람이 한 곡을 불러도 된다.

이 문제는 간단하게 위의 경우를 하나씩 모두 구해주시면 되겠습니다.

경우의 수를 더하면서 % MOD 연산을 해주도록 합시다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
#include <iostream>
#include <cstring>
#define MAX 51
#define MOD 1000000007
using namespace std;
 
int dp[MAX][MAX][MAX][MAX];
int N, x, y, z;
 
int solve(int n, int a, int b, int c) {
    if (!n) {
        return !a && !b && !c;
    }
    
    int& ret = dp[n][a][b][c];
    if (ret != -1) return ret;
    ret = 0;
 
    if (a && b && c) {
        ret = (ret + solve(n - 1, a - 1, b - 1, c - 1)) % MOD;
    }
 
    if (a && b) {
        ret = (ret + solve(n - 1, a - 1, b - 1, c)) % MOD;
    }
    if (a && c) {
        ret = (ret + solve(n - 1, a - 1, b, c - 1)) % MOD;
    }
    if (b && c) {
        ret = (ret + solve(n - 1, a, b - 1, c - 1)) % MOD;
    }
 
    if (a) {
        ret = (ret + solve(n - 1, a - 1, b, c)) % MOD;
    }
    if (b) {
        ret = (ret + solve(n - 1, a, b - 1, c)) % MOD;
    }
    if (c) {
        ret = (ret + solve(n - 1, a, b, c - 1)) % MOD;
    }
 
    return ret;
}
 
void func() {
    memset(dp, -1, sizeof(dp));
    cout << solve(N, x, y, z) << '\n';
}
 
void input() {
    cin >> N >> x >> y >> z;
}
 
int main() {
    cin.tie(NULL); cout.tie(NULL);
    ios::sync_with_stdio(false);
 
    input();
    func();
 
    return 0;
}
 cs

'algorithm > dp' 카테고리의 다른 글

boj 25427 DKSH를 찾아라  (0) 2023.05.21
boj 25682 체스판 다시 칠하기 2  (0) 2023.02.26
boj 14450 Hoof, Paper, Scissors (Gold)  (0) 2022.12.30
boj 14453 Hoof, Paper, Scissors (Silver)  (0) 2022.12.30
boj 2281 데스노트  (1) 2022.10.08

알고리즘

1일 1알고리즘

 

프로젝트 회의

이번주는 설 연휴라 정규활동이 없고, 팀원들과 온라인으로 회의를 진행했다.

조금 애매했던 부분들을 정리했고, 개발 시작할 예정이다.

일단 프로젝트 세팅은 마무리했고, 수정할 부분은 계속 수정할 예정이다.

 

후기

이제 개발을 시작했고, 새로운 기술들을 공부하면서 개발할 차례다.

회사일도 이제 개발 시작단계에 접어들어서 휴일을 많이 활용해야 할 것 같다.

명절이라 부산에 내려와서 충분히 휴식한 것 같다.

내일 올라와서부터는 다시 열심히 해야겠다.

'잡담' 카테고리의 다른 글

2월 1주차 결산  (2) 2023.02.05
1월 4주차 결산  (2) 2023.01.30
1월 2주차 결산  (0) 2023.01.16
1월 1주차 결산  (0) 2023.01.09
12월 5주차 결산  (0) 2023.01.02

알고리즘

1일 1알고리즘

 

넥스터즈 2주차

2주차 정규활동 이전에 팀원들과 오프라인으로 모여 기획 회의를 진행했다.

생각보다 많은 팀원들이 모이게되었고, 멀리서 오신분도 계셨는데.. 대단했다.

진행도 어느정도 많이되었고, 팀 분위기도 좋았다.

정규활동 시간에도 회의를 계속 진행했고, 팀 배정이 되고 첫 발표를 진행했다.

간단하게 팀원 소개 및 진행상황을 발표하는거라 편하게 했다.

 

후기

다음주는 설이라서 2주 후에 3주차 세션이 진행되는데 이 기간안에 설계는 마무리 해야할 것 같고, 어느정도 진행을 해야겠다는 생각이 든다.

같이 백엔드 맡으신 분이 엄청 열정적이셔서 많이 배워야겠다는 생각이 들었다.

하지만 나도 같은 팀원인 만큼 최대한 기여할 수 있는 부분을 하려고 한다.

다음주도 화이팅~

'잡담' 카테고리의 다른 글

1월 4주차 결산  (2) 2023.01.30
1월 3주차 결산  (0) 2023.01.22
1월 1주차 결산  (0) 2023.01.09
12월 5주차 결산  (0) 2023.01.02
12월 4주차 결산  (0) 2022.12.26

이 글에서는 solidity 문법을 다루지는 않으며, 배포된 solidity의 Contract 함수를 web3에서 호출하는 방법을 포스팅합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// SPDX-License-Identifier GPL-30
pragma solidity >= 0.7.0 < 0.9.0;
 
contract Hello {
    uint public num = 0;
    string public hi = "hello solidity!!";
 
    function addNumAndX(uint x) public {
        num += x;
    }
 
    function hello() public view returns(string memory) {
        return hi;
    }
 
    function getNum() public view returns(uint) {
        return num;
    }
}
 
 cs

우선 solidity를 이렇게 작성해줍니다. 저는 Remix에서 작성하였습니다.

그 다음 compiler에서 컴파일을 해준 후에

 

deploy에서 배포를 해야합니다.

아래의 Deploy 버튼을 누르기 전, 환경을 "Injected Provider - MetaMask"로 변경합니다.

그리고 Deploy 버튼을 누릅니다.

 

그러면 해당 Contract를 배포하기 위한 가스비를 지불하는 창이 뜹니다.

위 창은 크롬의 MetaMask 확장 프로그램입니다.

 

배포가 완료되면 아래의 Deployed Contracts에 해당 컨트랙트가 뜹니다.

이제 우측 복사 버튼을 눌러 컨트랙트 주소를 가져올 수 있습니다.

이제 React로 넘어갑니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import {Component} from 'react';
import Web3 from 'web3';
 
class App extends Component {
    constructor(props) {
        super(props);
 
        const contractAddress = '0xaFA55F3E3DB63C536581762ceb3149aD3349913d';
        const abi = [
            {
                "inputs": [
                    {
                        "internalType": "uint256",
                        "name": "x",
                        "type": "uint256"
                    }
                ],
                "name": "addNumAndX",
                "outputs": [],
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "getNum",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "hello",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "hi",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "num",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            }
        ];
 
        this.fromAddress = '0xE8Ed81Ae938Ede438501d12d87324AB1428A251a';
        this.web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8546');
        this.contract = new this.web3.eth.Contract(abi, contractAddress);
    }
}
 cs

web3 모듈을 가져와서 사용하고, abi, contractAddress를 이용하여 contract를 가져옵니다.

여기서 abi는 Contract 함수와 매개변수들의 정보가 담겨있는 JSON 형식의 리스트입니다.

Remix의 compiler 메뉴 밑에 해당 컨트랙트의 ABI를 복사할 수 있습니다.

그대로 가져와서 React 코드에 붙여줍니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
render() {
    return (
        <div className="App">
            <button onClick={this.connectWallet.bind(this)}>connectWallet</button>
            <br/>
            <button onClick={this.hello.bind(this)}>hello</button>
            <br/>
            <button onClick={this.addNumAndX.bind(this)}>addNumAndX</button>
            <br/>
            <button onClick={this.getNum.bind(this)}>getNum</button>
            <br/>
        </div>
    );
}
 
 cs

화면에는 버튼을 놓았습니다.

각각 connectWallet, hello, addNumAndX, getNum 함수를 호출하는 버튼입니다.

함수에서는 constructor의 this를 사용할 수 없어 bind(this)로 this를 사용할 수 있도록 넘겨주었습니다.

 

이제 메소드입니다.

1
2
3
4
5
6
connectWallet() {
    this.web3.eth.requestAccounts().then((res) => {
        console.log(res);
    });
}
 
 cs

지갑연결을 요청하는 코드입니다.

MetaMask가 설치되어있다면 문제없이 작동됩니다.

res는 지갑 주소가 array 형식으로 담겨있습니다.

 

1
2
3
4
5
6
hello() {
    this.contract.methods.hello().call((err, res) => {
        console.log(res);
   });
}
 
 cs

다음은 Contract의 hello 함수를 호출하는 부분입니다.

string을 return받는 역할만 있어 가스비를 지출하지 않으며, call을 이용하여 호출할 수 있습니다.

res는 string입니다.

 

1
2
3
4
5
6
getNum() {
    this.contract.methods.getNum().call((err, res) => {
        console.log(res);
   });
}
 
 cs

다음은 변수 num의 값을 가져오기 위한 getNum 함수 호출입니다.

hello 함수와 동일하게 call을 이용하여 호출합니다.

res는 uint입니다.

 

1
2
3
4
5
6
7
8
9
10
11
addNumAndX() {
    let x = 2;
    this.contract.methods.addNumAndX(x).send({from: this.fromAddress})
        .on('receipt', function (res) {
            console.log(res);
        })
        .on('error', function (err) {
            console.log(err);
        });
}
 
 cs

다음은 num에 x만큼 더하는 로직이 있는 addNumAndX 함수 호출입니다.

다른 함수와는 다르게 값을 변경하는 로직이 포함돼서 그런지 가스비를 요구하고 있습니다.

이 코드에서는 지불할 ETH가 0이지만 형식적으로 지불은 해야합니다.

가스비 지불을 위해 call 대신 send를 사용하였으며, 지불할 주소를 from에 작성하면 호출할 수 있습니다.

 

'receipt'을 감지하면 가스비 지불이 완료되었고, 트랜잭션 내역을 확인할 수 있습니다.

transactionHash를 통해 etherscan에서도 확인이 가능합니다.

그리고 getNum 함수를 다시 호출하면 값이 변경된 것을 확인할 수 있습니다.

 

다른 로직들은 [web3 공식문서]에서 확인해주시면 됩니다.

 

아래는 전체 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import {Component} from 'react';
import Web3 from 'web3';
 
class App extends Component {
    constructor(props) {
        super(props);
 
        const contractAddress = '0xaFA55F3E3DB63C536581762ceb3149aD3349913d';
        const abi = [
            {
                "inputs": [
                    {
                        "internalType": "uint256",
                        "name": "x",
                        "type": "uint256"
                    }
                ],
                "name": "addNumAndX",
                "outputs": [],
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "getNum",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "hello",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "hi",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "num",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            }
        ];
 
        this.web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8546');
        this.fromAddress = '0xE8Ed81Ae938Ede438501d12d87324AB1428A251a';
        this.contract = new this.web3.eth.Contract(abi, contractAddress);
 
    }
 
    connectWallet() {
        this.web3.eth.requestAccounts().then((res) => {
            console.log(res);
        });
    }
 
    hello() {
        this.contract.methods.hello().call((err, res) => {
            console.log(res);
        });
    }
 
    addNumAndX() {
        let x = 2;
        this.contract.methods.addNumAndX(x).send({from: this.fromAddress})
            .on('receipt', function (res) {
                console.log(res);
            })
            .on('error', function (err) {
                console.log(err);
            });
    }
 
    getNum() {
        this.contract.methods.getNum().call((err, res) => {
            console.log(res);
        });
    }
 
    render() {
        return (
            <div className="App">
                <button onClick={this.connectWallet.bind(this)}>connectWallet</button>
                <br/>
                <button onClick={this.hello.bind(this)}>hello</button>
                <br/>
                <button onClick={this.addNumAndX.bind(this)}>addNumAndX</button>
                <br/>
                <button onClick={this.getNum.bind(this)}>getNum</button>
                <br/>
            </div>
        );
    }
}
 
export default App;
 
 cs

'Etc' 카테고리의 다른 글

AWS S3로 React 배포하기  (0) 2023.02.02
GitHub Actions를 이용한 Slack Notification  (0) 2023.01.30
GitLab -> GitHub Mirroring  (0) 2022.06.12
Unity Script로 카메라 Culling Mask 기능 사용하기  (2) 2021.10.29
Unity 카메라 Culling Mask  (0) 2021.10.29

알고리즘

1일 1알고리즘

 

넥스터즈 1주차

이번주 활동이 시작되었다.

PM 분들의 아이디어 발표 후에 팀 빌딩을 진행하였다.

내가 원하는 팀에 들어갈 수 있어서 너무 좋았다.

 

후기

큰 부분에서는 싸피와 비슷하겠지만 디자이너분들이 있다는 점, 회사 일과 병행한다는 점과 같이 다른부분도 있다.

처음 팀이 확정되고, 너무 만족스러웠다.

내가 원했던 주제기도 하고, 회식을 하면서 텐션을 담당하는 팀원이 많아서 분위기도 금방 좋아졌다.

앞으로의 일정이 기대가 되고, 민폐가 되지 않도록 준비 잘해야겠다.

'잡담' 카테고리의 다른 글

1월 3주차 결산  (0) 2023.01.22
1월 2주차 결산  (0) 2023.01.16
12월 5주차 결산  (0) 2023.01.02
12월 4주차 결산  (0) 2022.12.26
12월 3주차 결산  (0) 2022.12.19

알고리즘

1일 1알고리즘

 

후기

와 23년이다..

22년을 돌아보면 싸피를 끝내고, 취업을 했다.

회사에서 직접 프로젝트를 경험해보고 충격을 받았었다.

싸피 내에서 내가했던 프로젝트는 정말 기초중의 기초라는 것을 알게되었다.

유저 로그인을 위해 jwt 토큰을 발급 받는 과정, oauth를 이용한 로그인 이런것들을 security에서 구현할 수 있다는 것부터가 신기할 따름이었다.

올해는 새로운 경험을 위해 넥스터즈에 합류했다.

싸피 활동처럼 조급함을 가지지 않고 즐기면서 활동할 것이고, 이 활동이 내가 더 성장할 수 있는 기회가 되었으면 좋겠다.

'잡담' 카테고리의 다른 글

1월 2주차 결산  (0) 2023.01.16
1월 1주차 결산  (0) 2023.01.09
12월 4주차 결산  (0) 2022.12.26
12월 3주차 결산  (0) 2022.12.19
12월 2주차 결산  (0) 2022.12.11

https://www.acmicpc.net/problem/14450

 

14450번: Hoof, Paper, Scissors (Gold)

You have probably heard of the game "Rock, Paper, Scissors". The cows like to play a similar game they call "Hoof, Paper, Scissors". The rules of "Hoof, Paper, Scissors" are simple. Two cows play against each-other. They both count to three and then each s

www.acmicpc.net

가위바위보 마지막 문제입니다.

이 문제에서도 입력으로 상대방의 race가 주어지며, 베시는 같은 것만 여러번 연속으로 낼 수 있습니다.

Silver 문제와 다른 점은 K번까지 바꿀 수 있으며, K의 최대는 20입니다.

 

누적합으로는 해결할 수 없으며, dp와 재귀를 활용합니다.

dp[idx][cnt][race]: idx번째 게임에서 베시는 race를 cnt번 변경한 상태고, 현재 race를 낸 상태일 때 얻을 수 있는 최대 점수

3중 배열을 사용해야 하며, 첫 번째 게임에서 race를 낼 수 있는 경우 3가지를 모두 확인해야 합니다.

(race를 인덱스로 활용하고, 편의를 위해 입력에서 race를 숫자로 변경하였습니다.)

 

모든 경우에서 race를 변경하지 않고 연속으로 내는 경우를 구할 수 있고,

cnt < K인 경우에만 race를 변경하는 경우를 구하도록 합니다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.Arrays;
import java.util.StringTokenizer;
 
public class Main {
    private final static int MAX_N = 100001;
    private final static int MAX_K = 21;
    private static final int RACE_CNT = 3;
    private static int list[] = new int[MAX_N];
    private static int dp[][][] = new int[MAX_N][MAX_K][RACE_CNT];
    private static int N, K;
 
    private static void init() {
        for (int i = 1; i <= N; i++) {
            for (int j = 0; j <= K; j++) {
                Arrays.fill(dp[i][j], -1);
            }
        }
    }
 
    private static int getScore(int x, int y) {
        if (x == 0 && y == 1) {
            return 1;
        } else if (x == 1 && y == 2) {
            return 1;
        } else if (x == 2 && y == 0) {
            return 1;
        } else {
            return 0;
        }
    }
 
    private static int dfs(int idx, int cnt, int race) {
        if (idx > N) {
            return 0;
        }
        if (dp[idx][cnt][race] != -1) {
            return dp[idx][cnt][race];
        }
 
        dp[idx][cnt][race] = dfs(idx + 1, cnt, race) + getScore(race, list[idx]);
        if (cnt < K) {
            dp[idx][cnt][race] = Math.max(dp[idx][cnt][race], dfs(idx + 1, cnt + 1, (race + 1) % RACE_CNT) + getScore(race, list[idx]));
            dp[idx][cnt][race] = Math.max(dp[idx][cnt][race], dfs(idx + 1, cnt + 1, (race + 2) % RACE_CNT) + getScore(race, list[idx]));
        }
 
        return dp[idx][cnt][race];
    }
 
    private static void func() {
        init();
        System.out.println(Math.max(dfs(1, 0, 0), Math.max(dfs(1, 0, 1), dfs(1, 0, 2))));
    }
 
    private static int getRace(char x) {
        if (x == 'H') {
            return 0;
        } else if (x == 'S') {
            return 1;
        } else {
            return 2;
        }
    }
 
    private static void input() throws Exception {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        StringTokenizer st = new StringTokenizer(br.readLine());
 
        N = Integer.parseInt(st.nextToken());
        K = Integer.parseInt(st.nextToken());
        for (int i = 1; i <= N; i++) {
            st = new StringTokenizer(br.readLine());
            list[i] = getRace(st.nextToken().charAt(0));
        }
    }
 
    public static void main(String[] args) throws Exception {
        input();
        func();
    }
}
 
 cs

'algorithm > dp' 카테고리의 다른 글

boj 25682 체스판 다시 칠하기 2  (0) 2023.02.26
boj 12996 Acka  (0) 2023.01.29
boj 14453 Hoof, Paper, Scissors (Silver)  (0) 2022.12.30
boj 2281 데스노트  (1) 2022.10.08
boj 2015 수들의 합 4  (0) 2022.08.12

https://www.acmicpc.net/problem/14453

 

14453번: Hoof, Paper, Scissors (Silver)

You have probably heard of the game "Rock, Paper, Scissors". The cows like to play a similar game they call "Hoof, Paper, Scissors". The rules of "Hoof, Paper, Scissors" are simple. Two cows play against each-other. They both count to three and then each s

www.acmicpc.net

입력으로 상대방의 race를 확인할 수 있으며, 그거에 맞도록 적절한 race를 결정해야 합니다.

그리고 베시는 같은 것만 여러번 연속으로 낼 수 있으며, 최대 한 번만 바꿀 수 있습니다.

 

이 문제는 누적합을 활용할 수 있습니다.

입력으로 주어지는 race의 P, H, S의 누적 합을 각각 구하고,

베시가 race를 변경할 어떤 구간을 기준으로 왼쪽, 오른쪽의 P, H, S의 누적합의 최대를 더한 값으로 구할 수 있습니다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.StringTokenizer;
 
public class Main {
    private static class Point{
        int pCnt;
        int hCnt;
        int sCnt;
 
        public Point(int p, int h, int s) {
            pCnt = p;
            hCnt = h;
            sCnt = s;
        }
    }
 
    private static final int MAX = 100001;
    private static Point[] dp = new Point[MAX];
    private static int N;
 
    private static void func() {
        int ret = Math.max(dp[N].pCnt, Math.max(dp[N].hCnt, dp[N].sCnt));
        for(int i = 1; i < N; i++) {
            int l = Math.max(dp[i].pCnt, Math.max(dp[i].hCnt, dp[i].sCnt));
            int r = Math.max(dp[N].pCnt - dp[i].pCnt, Math.max(dp[N].hCnt - dp[i].hCnt, dp[N].sCnt - dp[i].sCnt));
 
            ret = Math.max(ret, l + r);
        }
 
        System.out.println(ret);
    }
 
    private static void input() throws Exception {
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        StringTokenizer st = new StringTokenizer(br.readLine());
 
        char x;
        N = Integer.parseInt(st.nextToken());
        dp[0] = new Point(0, 0, 0);
        for (int i = 1; i <= N; i++) {
            dp[i] = new Point(0, 0, 0);
            st = new StringTokenizer(br.readLine());
            x = st.nextToken().charAt(0);
 
            if (x == 'P') {
                dp[i].pCnt++;
            } else if (x == 'H') {
                dp[i].hCnt++;
            } else {
                dp[i].sCnt++;
            }
 
            dp[i].pCnt += dp[i - 1].pCnt;
            dp[i].hCnt += dp[i - 1].hCnt;
            dp[i].sCnt += dp[i - 1].sCnt;
        }
    }
 
    public static void main(String[] args) throws Exception {
        input();
        func();
    }
}
 
 cs

'algorithm > dp' 카테고리의 다른 글

boj 12996 Acka  (0) 2023.01.29
boj 14450 Hoof, Paper, Scissors (Gold)  (0) 2022.12.30
boj 2281 데스노트  (1) 2022.10.08
boj 2015 수들의 합 4  (0) 2022.08.12
boj 21923 곡예 비행  (0) 2022.06.10

+ Recent posts

티스토리툴바