'프로그래밍 일지/명빵' 카테고리의 글 목록

서론 어제 주기적인 패치때문에 데이터 동기화가 필요하기 때문에 작업의 필요성을 느끼고, 적용 되었다! 간단하게 작업 내용을 정리해 보려고 한당.. 실 서버에 스케줄링 등록 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..

혁종2023.05.12

프로그래밍 일지/명빵

[개인프로젝트] 데이터 동기화

데이터 동기화의 필요성 아무래도 게임 주제의 개인 프로젝트 이다보니, 게임은 계속 패치하는데 혼자 작업하다 보니 패치 속도를 따라가지 못해 누락되는 데이터가 너무 많다. 초창기에 해두지 않으면 나중에 모든 데이터를 동기화 하려면.. 로직 짜는데 엄청난 시간이 소비 될 것 같으니 미리미리 해 두려고 하는데, 작업 들어가기 전에 필요 기술들에 대해 나열하고 작업하면서 기록해 두려고 한다. 일단, API를 제공해주지 않기 때문에 자료를 열심히 찾아서 처음에 개발을 진행했었다. 데이터들은 다음과 같은 곳에서 가져 올 수 있었다. https://github.com/Kengxxiao/ArknightsGameData GitHub - Kengxxiao/ArknightsGameData: 《明日方舟》游戏数据《明日方舟》游..

혁종2023.05.11

프로그래밍 일지/명빵

[개인프로젝트] Redux->Mobx 전환 및 typescript로 변환

Redux->Mobx 전환 처음에 typescript를 사용하지 않고 개인 프로젝트를 진행했었는데, typescript를 적용하면서 기존에 store로 이용한 redux를 배제하고 mobx를 사용하기로 했다. 여러 이유가 있긴 한데, 가장 적합한 이유는 redux보다 사용하기가 편하다는 것. 코드량도 확실히 줄어듬을 느꼈다. 또한, 기존에 작업해둔 결과물에서는 store에 통신부분이 같히 엮여있었는데, useQuery를 사용함으로서 store 부분의 통신부분을 배제 할 겸 mobx로 전환하여 다시 개발 하기로 했다. 둘의 차이와 mobx의 장점은 배달의민족으로 유명한 우아한형제들 블로그에 자세히 기재되어 있었다. React에서 Mobx 경험기 (Redux와 비교기) | 우아한형제들 기술블로그 {{item..

혁종2023.05.05

프로그래밍 일지/명빵

[개인프로젝트] 오퍼레이터 목록 검색 , infinite scroll, 상태관리

서론 간단하게 구현하려면 한없이 간단하게 구현 할 수 있지만.. 실제 서버 올라가서 비용문제도 생각해야 하고, 리소스 문제 등등 실제 프로젝트 처럼 짜려다 보니 react는 처음 해보는데 되게 생각해야 하는 기능들이 많이 있었다. 일단 구현 자체는 되었지만 삽질 시간이 5~6시간은 되는 것 같아 조금 힘들다 ㅠ_ㅠ 풀스크린샷으로 찍어서 그런지 아직 화면에 그려지지 않은 얘들은 이미지가 노출이 안된다. 굉장히 좋군.. 일단, 무한 스크롤로 화면 구현을 했고 검색창은 헤더에 달려있고 필터 목록은 검색 페이지 내에 달려있다. 실제로 디자이너들은 더 빡센 구조도 요청하는 경우가 많으니.. 또 다른 페이지에 갔다 왔을 때 현재 검색 내용을 초기화 해서는 안된다.. 무한 스크롤 특성상 상세 페이지 들어갔다가 뒤로 ..

혁종2023.03.23

프로그래밍 일지/명빵

[개인프로젝트] EC2 Next.js App 배포 (Ubuntu + next.js + pm2 + nginx + Route53 + Ec2 LB)

도메인 연결, 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 서버 세팅 클라이언트용 ..

혁종2023.03.21

프로그래밍 일지/명빵

[개인프로젝트] EC2 Mysql, MongoDB Setting 및 data transper

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..

혁종2023.03.20

프로그래밍 일지/명빵

[개인프로젝트] EC2 laravel 배포 (Ubuntu22 nginx Laravel 배포)

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를 ..

혁종2023.03.20

프로그래밍 일지/명빵

[개인프로젝트] 공개모집 태그 로직 정리 및 임시 통신 (SSR) 처리(교집합, 부분집합, Combination 처리)

태그 정보, 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..

혁종2023.03.20

프로그래밍 일지/명빵

[개인프로젝트] next.js 퍼블리싱 / Layout / Component / propType 처리

퍼블리싱 사실 퍼블리싱은.. 지루해서 적을게 없긴 하다 디자인 자체를 못하기도 하고.. arknights tool box쪽 디자인과 인게임 디자인을 참조해서 만들었다. 색감도 인게임 디자인과 명일방주 공식사이트를 참조하였다. 인게임 형태의 카드모양을 퍼블하는쪽이 조금 힘들었다. 상단 이미지는 랜덤한 몇개의 이미지에서 변경 되도록 처리 해 두었다. Layout / Component / styles 처리 루트 아래에 components, layout 을 따로 두어 처리 했다. 각 컴포넌트/ 페이지별로 사용하는 스타일은 module로 처리 했다. import pageLayoutCss from "@/styles/layout/page.module.scss" export default function PageLay..

혁종2023.03.20

프로그래밍 일지/명빵

[개인프로젝트] 명일방주 정보 조회용 프론트엔드 세팅 (Next.js + SCSS)

서론 일단, Next.js로 클라이언트를 개발해 보기로 마음 먹긴 했는데.. 나는 사실 React도, Next.js도 사용해 본적이 없다.. ㅎㅎ.. Vue.js를 사용해 본 적이 있어서 대충 개념을 하루정도 익힌 뒤, 일단 세팅.. 퍼블리싱은 SCSS를 사용하기로 했다. Next.js에 SCSS 세팅 일단 프로젝트를 만들자. npx create-next-app 얼추 세팅을 진행하고 npm i sass sass 모듈을 추가해 주었다. 이후 해당 부분 세팅이 제대로 진행 되었는지, 기존에 있는 global.css, Home.module.css를 global.scss, Home.module.scss로 이름 변경 하였다. 또, 전역 스타일링을 위해서 _mixins.scss, _variable.scss를 추가 ..

혁종2023.03.16

프로그래밍 일지/명빵

[개인프로젝트] 명일방주 정보 조회용 프로젝트 개발 시작!

Laravel + MongoDB 세팅 먼저 JSON 데이터로 되어있는 게임 데이터를 최적화 하여 사용 할 수 있도록 MongoDB를 세팅을 진행 하였다. https://github.com/jenssegers/laravel-mongodb GitHub - jenssegers/laravel-mongodb: A MongoDB based Eloquent model and Query builder for Laravel (Moloquent) A MongoDB based Eloquent model and Query builder for Laravel (Moloquent) - GitHub - jenssegers/laravel-mongodb: A MongoDB based Eloquent model and Query bui..

혁종2023.03.16

프로그래밍 일지/명빵

[개인프로젝트] 명일방주 정보 조회용 개인프로젝트 시작

서론 퇴사 후 잔여 시간동안 개인적인 개발 역량도 늘리고 포트폴리오도 늘릴 겸, 개인프로젝트를 진행 해 보려고 했다. 주제 정하기가 조금 어려웠는데, 개인 프로젝트로 많은 양의 데이터도 처리해 보고 싶기도 하고 새로운 DB, 프론트엔드 언어도 사용해 보고 싶었다. 처음에는 롤토체스와 관련된 프로젝트를 진행하고 싶어서 여러가지 데이터를 찾아보기도 하고 분석하여서 어느정도 정리 하였는데 롤토체스라는 게임의 특성상 데이터가 너무 자주 변경되기 때문에 개인 프로젝트로 진행하기엔느 부적합 하다는 생각이 들었다. 어느정도 하다 보니까 곧 시즌마감이라서 데이터가 확 바뀌고 주기적인 패치 때문에 혼자서는 개발 속도가 따라가지 못하는 문제가 있어서 비슷한 내용으로 개발을 진행하려다 보니 핸드폰 게임이 눈에 들어왔다. 내..

혁종2023.03.16

티스토리툴바