이 글에서는 React Native, Serverless 프레임워크, 그리고 Upstash를 활용하여 리더보드(순위표)를 조회하고 업데이트할 수 있는 모바일 애플리케이션을 개발하는 방법을 단계별로 소개합니다.
모바일 앱은 React Native로 개발하고, 백엔드는 AWS Lambda에서 실행되는 Python 함수들로 구성된 Serverless 프레임워크를 통해 구축합니다.
1. Upstash Redis 활용하기
일반적인 리더보드 앱에서는 사용자 정보와 각 사용자의 점수를 저장해야 합니다. 이러한 데이터는 점수를 기준으로 정렬되어야 하므로, Redis를 사용하는 것이 가장 효과적인 해결책 중 하나입니다.
Redis가 지원하는 'Sorted Set(정렬된 집합)'은 데이터를 정렬된 상태로 유지하면서 저장, 추가, 삭제, 범위 조회 작업을 매우 빠르게 수행할 수 있는 자료구조입니다.
즉, 정렬된 리더보드를 저장하고, 업데이트하고, 화면에 표시하는 데 Sorted Set은 정확히 필요한 기능을 제공합니다.
1.1 Upstash 시작하기
Upstash는 Redis를 위한 서버리스 데이터베이스를 제공합니다. Redis의 동작 방식에 대한 자세한 내용은 Redis 공식 문서를 참고하세요.
이번 예제에서 Upstash Redis를 선택한 주요 이유는 다음과 같습니다.
- 사용한 만큼만 지불하는 종량제 요금 체계
- 저장소와 연산에 대한 무료 티어 제공
- 매우 간편한 구현 방식
- 복잡한 설정 작업 불필요
먼저 Upstash 콘솔에서 계정을 생성합니다. 그다음 원하는 설정으로 Upstash 데이터베이스를 만들면 바로 사용할 준비가 완료됩니다!
익숙해지기 위해 Upstash 콘솔에서 제공하는 CLI로 몇 가지 작업을 직접 해볼 수 있습니다.
먼저 Leaderboard라는 이름의 Sorted Set에 새 사용자와 점수를 추가하여 데이터베이스를 시작해 보겠습니다.
ZADD Leaderboard <Score> <User>그다음 모든 사용자 정보를 점수와 함께 조회할 수 있습니다.
ZRANGE Leaderboard 0 -1 WITHSCORES
이러한 작업들을 Serverless Framework를 통해 AWS Lambda 함수에서 수행하면, 앱의 백엔드에 Redis를 손쉽게 연결할 수 있습니다.
2. Serverless Framework로 함수 만들기
Serverless는 AWS, Azure, Google Cloud 등 클라우드 제공자의 서버리스 함수를 손쉽게 다룰 수 있게 해주는 프레임워크입니다. 사용자 입장에서 서버리스 함수를 구현하고 관리하는 데 매우 강력한 도구입니다.
AWS용 Serverless Framework를 설치하고 설정하는 것부터 시작해 보겠습니다. Serverless 공식 문서의 빠른 시작 가이드를 따라 진행하세요.
설치가 완료되면 handler.py와 serverless.yml 두 개의 파일이 생성됩니다.
serverless.yml
이 파일에는 구현할 함수들을 정의합니다. 이번 예제에서는 새 사용자를 추가하는 기능과 리더보드를 조회하여 표시하는 기능만 필요하므로, 'addScore'와 'getLeaderboard' 두 함수를 정의하는 것으로 충분합니다.
functions:
addScore:
handler: handler.addScore
events:
- httpApi: 'POST /add'
getLeaderboard:
handler: handler.getLeaderboard
events:
- httpApi: 'GET /getLeaderboard'handler.py
이 파일에는 실제 함수 로직을 구현합니다. 모바일 앱에서 HTTP 요청이 전송될 때 serverless.yml에 정의된 대로 백엔드에서 실행되는 코드입니다.
우선 유일한 의존성인 redis를 임포트하고 설정해야 합니다. Serverless Framework에 redis 의존성을 추가하려면 'Serverless Python Requirements' 플러그인이 필요합니다. 아래 명령어를 실행하세요.
serverless plugin install -n serverless-python-requirements그런 다음 플러그인이 serverless.yml에 올바르게 추가되었는지 확인합니다.
plugins:
- serverless-python-requirements자세한 내용은 serverless-python-requirements 공식 문서를 참고하세요.
마지막으로 serverless.yml과 같은 디렉터리에 requirements.txt 파일을 생성하고, 아래와 같이 redis 의존성을 추가합니다.
redis==4.0.2이제 handler.py에서 Upstash Redis를 설정할 수 있습니다.
import json
import redis
r = redis.Redis(
host= 'YOUR_REDIS_ENDPOINT',
port= 'YOUR_REDIS_PORT',
password= 'YOUR_REDIS_PASSWORD',
charset="utf-8",
decode_responses=True)Redis 설정이 끝나면 사용자가 호출할 함수들을 준비합니다.
구현할 기능은 두 가지입니다.
첫 번째는 리더보드에 새 사용자와 점수를 추가하는 기능입니다. POST 요청 방식이며, 사용자는 HTTP 요청 본문(body)에 자신의 정보를 담아 보냅니다.
{"score": 15,"firstname": "Jack","lastname": "Thang"}함수는 아래와 같이 구현할 수 있습니다.
def addScore(event, context):
info = json.loads(event["body"])
leaderboard = "Leaderboard"
score = info["score"]
player_name = info["firstname"] + "_" + info["lastname"]
r.zadd(leaderboard, {player_name: score})
body = {
"message": "Score added successfully!",
}
response = {"statusCode": 200, "body": json.dumps(body)}
return responseAWS Lambda가 제공하는 event 파라미터에서 점수와 사용자 정보를 파싱할 수 있습니다.
redis의 zadd 함수를 사용하면 'Leaderboard'라는 Sorted Set에 사용자와 점수를 추가할 수 있습니다. 예시는 다음과 같습니다.
Request body: {"score": 15,"firstname": "Jack","lastname": "Thang"}
Response body: {"message": "Score added successfully!"}두 번째 함수는 getLeaderboard입니다. 이 함수는 GET 요청을 받아 Redis에서 읽어온 리더보드를 내림차순으로 반환합니다.
def getLeaderboard(event, context):
leaderboard = "Leaderboard"
score_list = r.zrange(leaderboard, 0, -1, withscores=True, desc=True)
body = {
"message": "Leaderboard returned successfully!",
"leaderboard": score_list
}
response = {"statusCode": 200, "body": json.dumps(body)}
return response예시:
Response body: {"message": "Leaderboard returned successfully!", "leaderboard": [["Jack_Thang", 15.0], ["Omer_Aytac", 12.0]]}마지막으로 아래 명령어를 실행하여 함수를 배포합니다.
serverless deploy -v배포 과정에서 Service Information이 출력됩니다. 나중에 다시 사용할 수 있도록 엔드포인트를 어딘가에 저장해 두세요.
endpoints:
POST - https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add
GET - https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboard이제 서버리스 백엔드가 준비되었습니다.
3. React Native로 모바일 앱 개발하기
React Native는 JavaScript 코드 하나로 여러 플랫폼용 모바일 애플리케이션을 개발할 수 있는 프레임워크입니다.
React Native로 모바일 앱을 개발하려면 먼저 개발 환경을 구성하고 프로젝트를 생성해야 합니다. 환경 설정 가이드를 따라 첫 번째 모바일 앱을 만들어 보세요.
이번 모바일 애플리케이션에는 두 개의 화면이 있습니다. 첫 번째 화면은 사용자가 자신의 정보와 함께 새 점수를 입력하는 화면입니다.
간단하게 하기 위해 이름, 성, 점수 세 가지만 입력받도록 하겠습니다.
점수를 제출하는 화면은 아래와 같습니다.
이 화면에서 사용자가 점수를 입력하면 앱은 배포 시 저장해 둔 서버리스 엔드포인트로 HTTP 요청을 전송합니다.
https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add이 예제에서 사용된 함수는 다음과 같습니다.
async addScore(){
if(isNaN(this.state.score)){
Alert.alert("Error", "Please enter a valid score.");
return;
}
if(this.state.firstname == "" || this.state.lastname == "" || this.state.score == null){
Alert.alert("Error", "Please fill in the blanks.");
return;
}
await fetch('https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/add', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstname: this.state.firstname,
lastname: this.state.lastname,
score: parseInt(this.state.score)
}),
})
.then(response => response.json())
.then(data => {
if(data.message == "Score added successfully!"){
Alert.alert("Done!", "Score added successfully!");
}
else{
Alert.alert("Error", "Please try again later.");
}
})
.catch(err => {
console.error(err)
Alert.alert("Error", "Please try again later.");
});
}위 코드에서 볼 수 있듯이 POST 요청 본문에는 사용자로부터 받은 'firstname', 'lastname', 'score' 키와 해당 값들이 포함됩니다.
백엔드에서 보낸 응답에 "Score added successfully!" 메시지가 포함되어 있다면, 요청이 정상적으로 처리되고 점수가 성공적으로 추가된 것입니다.
이제 아주 간단한 리더보드 화면을 설계해 보겠습니다. 사용자는 'Go to Leaderboard' 버튼을 클릭하여 리더보드 화면으로 이동할 수 있습니다.
리더보드 화면은 다음과 같습니다.
이 화면에서 가장 중요한 부분은 화면이 처음 열릴 때 아래 엔드포인트로 HTTP GET 요청을 전송하는 것입니다.
https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboard이를 위해 컴포넌트가 마운트된 직후 호출되는 componentDidMount 함수 안에서 요청을 보낼 수 있습니다.
async componentDidMount() {
await fetch('https://f571j8y8s1.execute-api.us-east-1.amazonaws.com/getLeaderboard',{
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
console.log(data);
userlist = data.leaderboard;
this.setState({reRender: !this.state.reRender});
})
.catch(err => console.error(err));
}애플리케이션의 전체 소스 코드는 upstash-react-native-project GitHub 저장소에서 확인할 수 있습니다.
결론
이 글에서는 Serverless Framework를 통해 AWS Lambda에서 실행되는 Python 함수를 백엔드로 하는 리더보드 모바일 애플리케이션을 개발했습니다. 리더보드 데이터는 Upstash Redis에 저장했습니다.
Upstash로 할 수 있는 일은 무궁무진합니다. Redis를 활용한 리더보드 앱 구축은 그중 하나의 예일 뿐입니다.
이 글이 여러분에게 도움이 되기를 바랍니다!