개발하면서 JS에 메모리 누수가 있었나? 최근에 JS 메모리 누수에 관한 이야기를 듣게 되었다. 여태까지 개발을 진행하면서 프론트쪽에서 메모리누수에 관련된 이슈를 겪어본 적이 없었기에 생각도 못했던 주제였다. 출시했던 모든 제품에서 성능적인 문제는 대부분 서버에서 왔고, 프론트엔드쪽을 내가 개발을 하지 않았을 때 이긴 하지만 프론트엔드의 성능적인 부분은 전부 부자연스러움 이었기 때문. (해당 내용으로 인해서 기존 팀원이었던 직원들에게 많이 쓴소리를 하기도 하였다.) 1. 의도치 않은 전역변수로 인한 메모리 수누 function test() { text = "test" } test() 첫번째로, 내가 겪어보진 못했지만 JS 메모의 누수의 가장 대표적인 예. 진짜 생각도 못한 부분이었는데, 함수 내에 변수 ..
전체 글
개발, 맛집, 여행에 대한 정리!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으로 데이터 동기화 처리도 진행되고 있고, 각 어플리케이션의 컴파일도 내부에서 처리..
기존에 response 관리에 대해서 포스팅을 한 적이 있다. [Laravel] Response 관리 API 형태로 개발을 진행 할 때, 클라이언트와의 협업 중 중요한 부분인 response 값 관리에 대한 정리 내용 입니다. 기능이 나온지는 오래 되었지만.. 개인적으로 업무 하는 것들도 많고 공부를 안 jjong-factory.tistory.com 별도로, API 서버로만 활용 할 때 서버 오류 등이 발생 했을 경우 Laravel의 기본 오류 창이 return 되는 경우가 있는데 해당 경우 프론트쪽 개발자가 보면 솔직히 조금 난잡한 데이터가 오기 때문에 해당 부분을 일반적인 API 오류시의 return 방식으로 처리 하는 방법을 적어 둔다. 일단 나는 아래와 같은 방식으로 처리하긴 하는데, 다른 방법도..
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..
API 명세서를 제공하지 않는 곳이 너무 많다.. 혼자 작업을 하더라도, API 테스트를 위해 Postman을 사용한다. 협력 작업시엔 내 생각엔 필수적으로 사용되는데 내가 여태까지 외부와 협력 할 때 API 명세를 제대로 받아서 본 적이 없다. 일반적인 프론트 개발자라면 많이 당황하게 될 것이고 API 명세서를 요청하게 될 것이다. 대부분 그럴 때 마다 돌아오는 답변이 시간도 없는데 그걸 언제 만들고 있어요.. 코드 보면서 하세요. 개인이 서버 테스트 할 때도 Postman 같은 툴로 테스트 하면서 진행하지 않나..? 싶지만 어쩔 수 없이 코드 보면서 분석하거나, 코드를 볼 수 없는 환경일 때는 진짜 추측해서 작업하는 경우도 잦았다. 물론 나중에 몰아서 API 명세서를 작업하려면 엄청난 시간이 들어가는..
최근에 로스트아크를 시작했다. 쉬는동안 친구들이 추천하기도 하고, 유튜브에 계속 나와서.. 재미있을 것 같아 보여서 시작했다. 친구들이 서포터 없다고 찡찡대길래, 서포터로 처음 시작했는데 룰렛을 굴렷더니 도화가 바드 중에 도화가가 나와서 아가로 시작! 잘 하고 있기는 하지만, 취준생의 특성상 시간도 돈도 없기 때문에 현재 즐길 수 있는 컨텐츠를 어떻게 효율적으로 할 수 있을까 고민하다가 기존에 하고 있던 개인 프로젝트를 잠시 접고 계산기를 만들어 보기로 했다. https://cal.arkinfo.kr/ 로아계산기 cal.arkinfo.kr 로고랑 디자인도 있으면 좋겠지만, 아쉽게도 ㅠ_ㅠ 능력이 부족하여 만들지 못하였다.. 컬러 코드값은 로아 공식 홈페이지의 코드값들을 참고하였다. 채집, 제작 계산기와 ..
각 셀에 색을 지정해보자! 지난번에는 일단 그리드를 그렸지만 빨간 단색으로 채워졌었다. 해당 부분을 조금 변경하여서, 색을 다채롭게 칠해보자. @fragment fn fragmentMain() -> @location(0) vec4f { return vec4f(1, 0, 0, 1); } 위 코드에서 각 프레그먼트에 반환되는 컬라값으로 #FF0000를 넘기고 있기 때문에 전부 빨간 사각형으로 채워졌었다. 색을 다채롭게 하기 위해서는 생각보다 간단하다고 하는데, @vertex 부분에서 렌더링 중인 셀을 알고있으므로 @fragment 단계에 값을 전달만 하면 된다고 한다. 일단, 최종 코드를 먼저 보면 다음과 같다. struct VertexOutput { @builtin(position) position: ve..
Canvas를 Grid로 나눠보자. 지난번에는 사각형을 그리는 파틀르 진행했었다. 이번에는 Uniform 이란걸 이용하여, canvas를 그리드로 나눠 볼건데, 유니폼은 모든 호출에서 동일한 버퍼의 값 이라고 한다. 기하학적 요소나 애니메이션 처리 등 공통된 값을 전달한느데 유용하다고 하는데, 코드를 통해 알아보자. 일단, 기존 drawRect 함수를 일부 수정하였고, 아래는 그 전문이다. drawRect() { // 삼각형 두개로, 정사각형의 좌표 지정. const vertices = new Float32Array([ // X, Y, -0.8, -0.8, // Triangle 1 (Blue) 0.8, -0.8, 0.8, 0.8, -0.8, -0.8, // Triangle 2 (Red) 0.8, 0.8,..
캔버스 초기화를 했으니, 간단한 도형을 그려보자 지난번에 캔버스 초기화를 완료하였다. 생각보다 조금 복잡하였는데 어찌저찌 캔버스를 초기화 하였으니 이제 cnavas에 간단한 도형을 그려보도록 하자. https://codelabs.developers.google.com/your-first-webgpu-app?hl=ko#3 첫 번째 WebGPU 앱 | Google Codelabs 이 Codelab에서는 새로운 WebGPU API의 기본사항을 소개합니다. GPU에서 실행되는 Conway's Game of Life의 버전을 빌드하는 방법을 안내합니다. WebGPU의 렌더링 기능은 보드를 그리는 데 사용되고 WebGPU의 컴 codelabs.developers.google.com 위 내용을 참고하면 좋을 것 같다..
WebGPU란? 웹 어플리케이션에서 GPU의 기능에 액세스 하기 위한 최신 기술이다. 기존에는 WebGL이 있었지만, 성능적인 제약이 많았다. 벌컨, 메탈, Direct3D 12가 제공하는 API를 기반으로 모방리 및 데스크톱 플랫폼에 고성능을 제공하는 것이 목적이며, 애플, 모질라, 마이크로소프트, 구글 등의 엔지니어들과 함께 개발 되어가고 있다. 한 때, canvas를 이용하여 이것저것 해본 경험들이 있었는데 WebGPU 기술을 이용하여서 뭔가 쪼물쪼물 만들어 봐야겠다. 일단 그를 위해서 튜토리얼 먼저 진행을 해 보는 것으로! 첫 번째 WebGPU 앱을 통한 튜토리얼 시작. node + ts로 환경 세팅 https://codelabs.developers.google.com/your-first-webg..
서론 어제 주기적인 패치때문에 데이터 동기화가 필요하기 때문에 작업의 필요성을 느끼고, 적용 되었다! 간단하게 작업 내용을 정리해 보려고 한당.. 실 서버에 스케줄링 등록 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..