AWS CloudFormation 을 이용하여 인프라를 구축해보자 AWS CloudFormation은 AWS에서 제공하는 IaC 툴이다. 새로운 인프라를 생성하는데 유용하게 사용 할 수 있다. 일단 EC2를 생성하고, 해당 EC2의 세팅값들을 넣어주고 탄력적 IP를 자동부여 하는 CloudFormation을 만들어보자. https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/template-reference.html Template reference - AWS CloudFormation Thanks for letting us know this page needs work. We're sorry we let you down. If you've got..
프로그래밍 일지
현재 인프라에는 문제점이 많다. 현재 개인적으로 진행하는 개인 프로젝트의 인프라 구조에는 사실 문제점이 굉장히 많다. S3 부분은 제외 하고 얼추 구조도를 그려보면, 위처럼 표현이 가능하다. 사실 문제점이 굉장히 많은데, LB 자체에 물려있는 EC2도 하나고 EC2 하나에서 하는 작업도 굉장히 많다. DB도 전부 내장으로 처리되어 있어서 EC2가 죽게 되면 큰일이다. 이와 같은 문제점들이 있어서, DB의 자동 백업을 진행하고 S3에 자동적으로 업로드 되게끔 처리 해 두긴 했지만 이건 해당 구조가 아니더라도 일반적으로 DB 자동백업은 처리해 두는 것이 좋은 편이라, 당연히 해야 하는 작업이다. 심지어 EC2 내부에서 cron으로 데이터 동기화 처리도 진행되고 있고, 각 어플리케이션의 컴파일도 내부에서 처리..
EC2 내부에 데이터 베이스를 자동 백업해야 한다. 비용문제상 EC2 내부에 데이터베이스를 구축 할 수 밖에 없었는데, 해당 내용을 자동 백업 후 S3에 업로드를 해야 한다. EC2 특성상 언제 잘못 될 지 모르기 때문에 주기적으로 백업을 해두지 않는 이상 복구를 할 수 있는 방법이 없다. AWS CLI를 이용하여 주기적으로 백업된 데이터를 S3에 업로드 하고, 기간이 어느정도 지난 백업 데이터를 삭제하는 과정까지 구축 했다. 양 프로젝트에서 공통적으로 사용되는 거라서, 타이틀은 그냥 프로그래밍 일지로 두었다. AWS CLI 설치 1. curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip" 2. unzip awsc..
최근에 로스트아크를 시작했다. 쉬는동안 친구들이 추천하기도 하고, 유튜브에 계속 나와서.. 재미있을 것 같아 보여서 시작했다. 친구들이 서포터 없다고 찡찡대길래, 서포터로 처음 시작했는데 룰렛을 굴렷더니 도화가 바드 중에 도화가가 나와서 아가로 시작! 잘 하고 있기는 하지만, 취준생의 특성상 시간도 돈도 없기 때문에 현재 즐길 수 있는 컨텐츠를 어떻게 효율적으로 할 수 있을까 고민하다가 기존에 하고 있던 개인 프로젝트를 잠시 접고 계산기를 만들어 보기로 했다. https://cal.arkinfo.kr/ 로아계산기 cal.arkinfo.kr 로고랑 디자인도 있으면 좋겠지만, 아쉽게도 ㅠ_ㅠ 능력이 부족하여 만들지 못하였다.. 컬러 코드값은 로아 공식 홈페이지의 코드값들을 참고하였다. 채집, 제작 계산기와 ..
서론 어제 주기적인 패치때문에 데이터 동기화가 필요하기 때문에 작업의 필요성을 느끼고, 적용 되었다! 간단하게 작업 내용을 정리해 보려고 한당.. 실 서버에 스케줄링 등록 protected function schedule(Schedule $schedule): void { $today = date("Y-m-d"); // 백업, 10분뒤 동기화 처리 $schedule->exec('mongodump -d arknights_info -o ~/dump/'.$today) ->dailyAt('0:00'); $schedule->job(function() { $setDataController = new SetDataController(); $setDataController->setBuildingsSync(); $setD..
데이터 동기화의 필요성 아무래도 게임 주제의 개인 프로젝트 이다보니, 게임은 계속 패치하는데 혼자 작업하다 보니 패치 속도를 따라가지 못해 누락되는 데이터가 너무 많다. 초창기에 해두지 않으면 나중에 모든 데이터를 동기화 하려면.. 로직 짜는데 엄청난 시간이 소비 될 것 같으니 미리미리 해 두려고 하는데, 작업 들어가기 전에 필요 기술들에 대해 나열하고 작업하면서 기록해 두려고 한다. 일단, API를 제공해주지 않기 때문에 자료를 열심히 찾아서 처음에 개발을 진행했었다. 데이터들은 다음과 같은 곳에서 가져 올 수 있었다. https://github.com/Kengxxiao/ArknightsGameData GitHub - Kengxxiao/ArknightsGameData: 《明日方舟》游戏数据 《明日方舟》游..
Redux->Mobx 전환 처음에 typescript를 사용하지 않고 개인 프로젝트를 진행했었는데, typescript를 적용하면서 기존에 store로 이용한 redux를 배제하고 mobx를 사용하기로 했다. 여러 이유가 있긴 한데, 가장 적합한 이유는 redux보다 사용하기가 편하다는 것. 코드량도 확실히 줄어듬을 느꼈다. 또한, 기존에 작업해둔 결과물에서는 store에 통신부분이 같히 엮여있었는데, useQuery를 사용함으로서 store 부분의 통신부분을 배제 할 겸 mobx로 전환하여 다시 개발 하기로 했다. 둘의 차이와 mobx의 장점은 배달의민족으로 유명한 우아한형제들 블로그에 자세히 기재되어 있었다. React에서 Mobx 경험기 (Redux와 비교기) | 우아한형제들 기술블로그 {{item..
서론 간단하게 구현하려면 한없이 간단하게 구현 할 수 있지만.. 실제 서버 올라가서 비용문제도 생각해야 하고, 리소스 문제 등등 실제 프로젝트 처럼 짜려다 보니 react는 처음 해보는데 되게 생각해야 하는 기능들이 많이 있었다. 일단 구현 자체는 되었지만 삽질 시간이 5~6시간은 되는 것 같아 조금 힘들다 ㅠ_ㅠ 풀스크린샷으로 찍어서 그런지 아직 화면에 그려지지 않은 얘들은 이미지가 노출이 안된다. 굉장히 좋군.. 일단, 무한 스크롤로 화면 구현을 했고 검색창은 헤더에 달려있고 필터 목록은 검색 페이지 내에 달려있다. 실제로 디자이너들은 더 빡센 구조도 요청하는 경우가 많으니.. 또 다른 페이지에 갔다 왔을 때 현재 검색 내용을 초기화 해서는 안된다.. 무한 스크롤 특성상 상세 페이지 들어갔다가 뒤로 ..
도메인 연결, SSL 인증서 및 LB 처리 일단 기존에 Route53과 ACM, EC2 LB를 이용해서 SSL을 구축, 도메인 연동을 진행했다. 정상적으로 인증서 연동이 되었고, https로 접속, http->https redirect도 처리 되었다. 방식은 기존에 작성해둔 아래 포스트를 참조. https://jjong-factory.tistory.com/92 [AWS] ACM + Route53을 이용한 SSL(Https) 인증서 발급 서론 서비스를 진행하다 보면 SSL 인증서를 발급받아서 실 서버에 적용해야 되는 경우들이 많이 있습니다. 실 서비스라면 무조건 적용 해야 겠죠? 무료 인증서 발급으로는 letsencrypt 같은 친구들 jjong-factory.tistory.com 서버 세팅 클라이언트용 ..
Mysql Setting + 보안세팅 + passport 세팅 일단 Mysql 설치부터 진행한다. apt-get install mysql-server 외부 접속을 위해 포트를 열어줘야 하는데, EC2 내부에 설치를 진행했고 API 서버 이외에는 접근할 필요가 없다. terminal에 접속하기 위해 SSH 포트인 22번 포트를 개인 PC에만 열어 두었으니, 이를 통해서 외부 접근을 이용하면 된다. 내부 접속은 허용 되어 있어서 바로 되어야 하지만 접근시 오류가 발생한다. 실제로 터미널에서 접속해보면 정상적으로 접근 할 수 있는데, 접근 후 아래와 같은 쿼리를 이용하여 내용을 확인해 보았다. mysql -uroot use mysql; select user, host, plugin from user; root..
EC2 세팅 가장 먼저 프리티어로 EC2를 개설했다. 데이터 베이스 들도 따로 구축 해 주고 싶긴 한데... 비용 문제상 EC2 내부에 구축 하기로 했다. 일단 SSH로 접속 후, apt를 update, upgrade 진행을 먼저 했다. 이후 nginx를 먼저 설치해 주었다. apt-get install nginx 정상적으로 설치된 걸 확인 후, 개발 환경과 맞추어 PHP를 설치! 로컬에서 8.2 버전을 사용 중이라 해당 PHP 버전으로 설치 해 주었다. add-apt-repository ppa:ondrej/php apt-get install php8.2 이후 서버 코드를 clone 해 주고 .env를 세팅, 이 때 .env의 APP_DEBUG는 false값으로 지정 해 주어야 한다. composer를 ..
태그 정보, Operator 정보 API 연동 먼저, 태그 정보와 Operator 정보를 API를 통해서 받아와야 했다. export default function RecruimentPage({results}) { const tagList = results.tagList const opList = results.opList // ... } export async function getServerSideProps() { const tagList = await (await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/recruitment/tag/list`)).json() const opList = await (await fetch(`${process.env.NEXT_PUB..