DevJong12

목차 1️⃣ 글 작성에 앞서... 해당 이슈는 우리 팀이 구현한 사용한 도구에 대한 이해가 필요하다. 일단 FrontEnd의 경우 React를 기반으로 작성을 진행하였으며, 이슈가 발생한 장소는 게시물을 등록하는 곳에서 발생이 되었다. 게시물을 등록시 필자의 팀의 경우에는 에디터를 사용하여 게시물을 등록할 수 있도록 기능 구현을 하였으며, 오픈소스중 하나인 React Quill을 활용하였다. Quill자체에는 이미지를 업로드하는 기능이 존재하였으나, 이미지를 업로드할때 발생이 되는 이슈사항에 대하여 기록을 해보고자 한다. 2️⃣ ReactQuill와 Quill을 선정한 이유? 1. ReactQuill이란? 공식페이지에서 소개되어있는 내용으로, 긴 텍스트를 작성할 수 있는 에디터라고 설명이 되어있다. 에디..

목차 1️⃣ 글을 적기에 앞서.. 해당 내용은 우리 팀에서 사용할 서버 환경을 구축하고자 할 때 발생했던 이슈의 내용을 기록한 글이다. 2️⃣ 이슈의 내용 아래의 이미지는 최초의 우리 팀의 인프라 아키텍쳐였다. 이미지부터 보는게 이해가 빠를 듯 하다. 다음 아키텍쳐의 문제는 다음과 같았다. Server에서 Object Storage, MySQL로의 Connection은 동일한 Private Zone이기 떄문에 정상적으로 이뤄졌었다. Server에서 Effective Log Search & Analytics, Papago로의 Connection은 Private Zone과 Public Area이기 떄문에 불가능했었다. 이 구간에 대한 통신을 어떻게 할지도, 생각도 못했던 부분이었으며, 실제로 어플리케이션을 ..

목차 1️⃣ Effective Log Search & Analytics란? 네이버 클라우드의 설명은 다음과 같으며, 역할은 그냥 로그수집기로, 일정 금액을 내면서 로그수집하는것이다. 2️⃣ 사용 이유 먼저 필자가 구성한 인프라 아키텍쳐를 확인이 필요하다. 아래의 이미지는 필자가 구축한 인프라다. 위의 이미지를 확인해보면 알 수 있듯이 Spring을 실행하는 서버가 3개다.. 즉 내가 로그를 확인하려면 일일이 Private한 서버에 직접 접속을 해서 Docker의 Container Log를 확인해야 하는 문제가 발생한다. 즉 귀찮다~ 이말이다. Log4j를 사용한 로그를 편하게 한곳에서 보고 싶다는 니즈를 만족하고자 Effective Log Search & Analytics를 도입해야겠다는 판단을 하게 되..

목차 1️⃣ 글을 시작하기에 앞서... 해당 글은 바로 적용할 수 없고 선수 과정으로 [OrientalUnity] PinPoint의 설치 과정이 이뤄져야 한다. 그 이유는 해당 작업은 Agent를 설정하는 것으로, PinPoint의 경우에는 Agent → Collector로 정보를 전달을 해주기 때문에 Agent의 정보를 수집해야 하는 Collector가 존재해야 하기 떄문이다. 위의 링크는 이러한 Collector, 그리고 가시적으로 확인이 가능한 Web어플리케이션을 실행하는 과정이니 먼저 확인하기 바란다. 또한 해당 글은 컨테이너 이미지로 빌드하고, 실행하는 Spring Boot Application에 PinPoint를 적용하는 과정이며 실제 클라우드환경이기 때문에, 유사한 환경에서만 참고하기를 바란..

목차 과거에 사용이력이 있어서 PinPoint를 적은줄 알았는데.. 적은 적도 없었을 줄은 몰랐다.. 1️⃣ PinPoint란? PinPoint는 어플리케이션 성능 관리(APM) 도구 중 하나로, 분산 시스템 환경에서 애플리케이션의 성능을 모니터링하고 분석하는 데 사용된다. 특히 대규모의 분산 어플리케이션 및 MSA에서 성능의 문제를 식별하고 해결하는데 도움을 주는 도구이다. 이건 그냥 GPT한테서 받은 대답으로, PinPoint는 어플리케이션에 대한 성능관리로 하기 4가지의 기능을 제공한다. 모니터링: Pinpoint는 애플리케이션의 성능 데이터를 실시간으로 수집하고 모니터링합니다. 이는 서버, 데이터베이스, 네트워크, HTTP 요청 및 기타 리소스와 관련된 성능 지표를 추적하는 데 도움이 됩니다. 추..

목차 프로젝트 정보 및 발표영상 이 글을 작성할 당시에 프로젝트는 완성이 되었다 보니... 프로젝트 링크를 달게 되었다.. 사실 프로젝트를 진행하면서 꾸준히 회고글이라든가 프로젝트를 진행중인 내용의 글을 작성하고 싶었으나... 변명이겠지만 자느라 바빴다...🤣 처음에 내 얼굴이 바로나오다 보니까...민망해서.. 난 영상을 제대로 보지를 못했다 https://github.com/hook-killer 물음표살인마 개발을 함에 있어 항상 왜?를 서로에게 질문하며 곤란하게 만들자는 의미의 팀명입니다. 물음표살인마 has 4 repositories available. Follow their code on GitHub. github.com HTML 삽입 미리보기할 수 없는 소스 1️⃣ 팀 결성? 사실 나는 해당 프..

목차 프로젝트 링크 Picasso 경매 예정작 NEW more picasso.jong1.com GitHub - donsonioc2010/picasso: temp name temp name. Contribute to donsonioc2010/picasso development by creating an account on GitHub. github.com 1) 계기 및 개요 내가 코드에 대해 재밌는 요소를 많이 많들어 볼 수 있을만한 소재의 토이프로젝트로, 간단한 미술품 경매 사이트를 만들어 보는것을 해봤다. 해커톤의 개념으로 짧은 기간 개발을 진행해야 했고, 전체적인 팀의 코드관리까지 도맡아 진행했었다. 2) 개발 기간 및 역할 23년 09월 13일 부터 시작하여 23년 09월 27일까지 정확히 약 2주..

지난번 Load Balancer작업 이후 그냥 간단한 프로젝트니까 CD를 쉽게 구축할 생각을 하면서 NCP를 계속 알아보고 있는 상황이다. 사실 AWS를 사용할떄야 CI / CD를 구축할 떄 Travis CI에서부터 연결되서 CD까지의 구축이 매우 쉽게 가능하고 참고할 수 있는 Reference가 많아서 매우 편한것이 사실이다. 이걸 NCP로 바꿔보려고 하면.. 참 고민이 많아 질 수 밖에 없는 것 같다. Travis CI로 작업을 시작하게 되면 너무 복잡해 지고 참고할 수 있는 Reference가 거의 전무해서 시간도 오래 소비되는게 참.. 일단 알아보는게 크게 4가지가 될것 같은데.. Github Actions를 통한 배포. 이거 근데 스크립트 일일이 내가 작성해야 해서 이럴꺼면 왜 하나 싶은 생각을..

개요 인프런의 강의를 들으면서 Vue를 활용하는 예제를 보고싶어서 강의를 보던 중, AWS배포 과정이 영상으로 있길래, 현재 금액이 발생하는 AWS를 사용하는 것보다는, 현재 내가 무료로 사용할 수 있는 Naver Cloud를 활용해 보기로 마음을 먹었다. 또한 과거에 구매했던 도메인을 활용하여 도메인을 통한 접속으로 AWS로 치면 EC2인 Server에 접속하도록 아키텍쳐를 구상하던 중, Load Balancer부분에서 많은 에로사항이 있었어 가지고, 기록해 두고자 글을 남겨둔다. 개요에서 미리 적어두지만 모든 과정을 nginx로도 처리가 가능하다. 단지 필자의 경우 구매한 도메인인 jong1.com을 dev.devlog.jong1.com, prod.devlog.jong1.com 등등 여러 도메인으로..

개요 서버에서 테스트를 계속 꾸준히 했던게 아니다 보니, 바이러스에 감염된 줄도 몰랐다. nGrinder Agent를 실행하려고 보니까 실행이 안되면서 알게 되었다. 뭐 당장 급한건 아니기 때문에 일단 Agent를 실행하는게 우선이라 생각을 하였다. 문제점 필자가 이미지를 마련해놓지를 못하였다... 당시에 문제를 해결하는게 우선순위였었고, 먼저 로그에 출력이 되는 경로로 가서 보니까 실제 파일이 존재하였다. rm -rf 로 삭제를 진행해보려 하였으나 삭제가 불가능했고 보니까 권한이 000이었다... chmod를 통한 수정도 불가능했었다... 로그 내용 nGrinder Agent를 실행하려고 하면 다음과 같이 /lib/libudev.so.6의 문제로 실행이 불가능하다고 지속적으로 출력이 되고 nGrinde..

개요 프로젝트의 기능 개발은 완료되었다 보니 부하테스트를 진행해보고자 nGrinder를 설치해보고자 하였다. 이포스트는 nGrinder의 Controller와 Agent의 설치과정을 작성하였다. nGrinder란? 어플리케이션의 부하 테스트 용도로 많이 사용되는 툴중에 하나로 nGrinder는 Controller와 Agent로 구성이 되어 있으며 두개를 같은 서버에 설치해도 되고 서로 다른 서버에 설치를 해도 된다. ※ 부하테스트이다 보니 추천하는건 서로 다른 서버에 설치를 하는 것을 추천하며 Agent는 어플리케이션이 존재하는 서버에 설치해야 한다. ※ 공식문서에서 3GB의 Free Memory라는 문구를 봤던 것 같은데 다시 찾으려니 못찾겠다.. 해당 문구를 보고 새 Controller서버를 분할 하..

프로젝트 서버작업 진행하다 생긴거니...일단 이곳에 적기로 한다... Naver Cloud Platform을 사용하면서 발생한 문제로, 파일을 전송하려고 FTP를 처음 연결을 해보려했다.. 항상 고정관념은 21, 22번포트를 사용하기에 , 해당 번호로 될줄알고 했으나 FTP는 연결이 되지를 않았고, 조금 긴시간 삽질을 파게되서 기록으로 남기고자 한다... 먼저 필자가 사용하는 FTP는 CyberDuck을 사용중이며, iterm을 통한 서버 접속을 주로 하는편이다. 또한 FTP를 사용할 때 21, 22번포트가 사용이 불가능해서 ACG에 추가적인 포트를 개방하고 사용하려했으나 그마저도 진행이 불가능했다. 아래의 사진처럼 진행을 했었다. 추가적으로 IP의 경우에는 서버정보에 있는 포트포워딩 IP를 통한 접속을..