DevJong12

목차 1️⃣ 프로젝트 소개 프로젝트의 시작을 알리는 아티클에서 적었지만 또 적어보면... 번역을 기반으로 피해자와 가해자들의 모임인 한.중.일이라는 언어도 틀리고, 역사가 꼬여있는 세개의 국가를 주제로 동북아 커뮤니티이다 👉 깃허브 코드 아래 이미지처럼 글을 남길 경우 한국어, 영어, 일본어, 중국어 총 4개국어로 글들이 자동번역되어 타 국가의 사용자와 교류할 수 있는 커뮤니티다. 2️⃣ 구현에 사용된 기술스택 Front의 경우에는 React를 채택하였고, 메인으로 집을만한 라이브러리는 다국어의 페이지를 만들기 위한 i18next과 게시물의 내용을 HTML로 받기 위한 React Quill을 짚어볼 수 있을 것 같다. Back의 경우에는 Java + Spring을 기본으로 채택하였고, 추가적으로 짚어볼 ..

목차 1️⃣ 글을 작성하기에 앞서... 필자의 경우 BackEnd를 위주로 공부하다 보니 Spring, Java 코드들에 비해서는 깔끔하면서 능숙한 코드가 안나올 수도 있다. 그 점은 양해하며, 어떻게 작업을 했는지를 중점으로 봐주면 좋을 듯 하다.. 😭 2️⃣ 다국어 처리를 하게 된 이유 그리고 i18next 해당 프로젝트는 게시물을 작성 할 때 4개국어로 번역한 이후 저장이 되는 타 국가와 소통이 가능한 프로젝트이다. 정작 게시물은 4개국어로 저장이 되는데 반해, 페이지는 한국어로 계속해서 표현이 되면 부자연스럽다 생각하게 되었다. 이후 생각이 들었던 프로젝트의 방향은 다양한 사이트에서 봤던 기능인, 국가 변경을 했을 때 해당 국가의 언어에 맞게 페이지, 데이터가 변경이 되어야 겠다는 생각을 하게 되..

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

목차 1️⃣ 글을 적기에 앞서... 와...정말 보기힘든 기능구현 글이다..! 해당 포스트는 Naver Cloud에서 제공되는 서비스중 하나인 Java를 활용해 Papago Translation을 사용하는 기능구현 방법을 기록해 보고자 한다. 그 중에서도 Text와 HTML번역에 대하여 다룰 예정이다. 또한 필자의 프로젝트의 경우 한국어, 영어, 중국어, 일본어만 활용했다보니 언어가 지원이 안되는 경우는 한개의 케이스밖에 없었다. 여러개의 언어를 활용하면 서비스를 지원하지 않는 언어타입도 존재하니 주의하기 바란다. 2️⃣ Papago Translation API 1. API 이용 신청 먼저 API를 활용하기 위해선 사용부터 해야한다. 이용신청을 할 경우 다음의 이미지들이 뜬다. 생성 및 동의를 먼저 해주..

목차 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️⃣ 팀 결성? 사실 나는 해당 프..

목차 💡해당 페이지에서 모든 메일 실행 로직에 대해서는 Thread.sleep(500)으로 대체하였다. 이유는 메일을 발송함에 있어 한계가 존재하나, 실제 걸리는 시간은 약 500ms~1000ms로 확인하였기 떄문에, 성능 테스트에까지 굳이 메일 API를 확인할 필요는 없다고 판단하였다. 💡메소드는 스케쥴러 메소드 한개만을 기준으로 작업을 진행하였다. 개요 아래의 게시물에서 지난번에 MailService와 연결한 코드를 볼 수 있다. 메일서비스와 연계하면서 메일 시간에 대해서 측정을 하고 보니, 많은 양의 게시물의 상태값을 변경하고자 하면 너무나도 오랜시간을 Scheduler메소드가 잡혀있으면서, 상태값이 변경되지 않는 문제를 장애로 인식을 해볼 수 있게 되었다. [Picasso][Spring] @Sch..

목차 개요 💡해당 게시물은 Scheduled API를 뜯어보는 게시물이 아니다. 필자가 필요한 만큼만 활용을 하였다. 프로젝트를 제작함에 있어서, 올라온 게시물이 경매시작일인 경우 경매를 시작하거나 유찰이 되도록 상태값을 변경하고, 사용자한테 메일을 발송해야 하는 로직이 존재하였다. 상태를 변경함에 있어서 Database의 Event Scheduler를 활용하는 것도 방법이 될 수 있었다. 하지만 그건 결코 좋은 방법이 아니라고 필자는 생각했고, 첫번째로는 그래봐야 메일도 제시간에 보내야 하는것이었고, 두번째로는 해당이유가 대부분의 이유를 차지하는데 Database에 의존을 해야 하게 되는 문제가 발생하기 떄문이다. Database에 의존을 해버리게 되면 추후 Database를 MySQL에서 Oracl..

목차 개요 이번에 프로젝트를 진행하면서 프로젝트 내부에서 보내야 하는 메일 종류가 매우 많았다. 가벼운 생각만으로도 5종류가 넘었는데, 깊게 생각하고 보니 10종류가 넘어갔다. (실제 시간이 부족해서 구현한 메일은 사실 6개인가 밖에 안되는건 안비밀) 어쨋든... 그러다 보니 여러종류의 메일에 대처를 해야 했고, 템플릿화 해서 메일을 관리하는 수밖에 없었다. 내가 템플릿화하여 어떻게 진행하였는지를 기록해 보고자 한다. 추가 의존성 다음 두가지를 추가하였다, 필자는 Thymeleaf를 사용해 thymeleaf용 html을 미리 template화 하는데 활용하였으며, 메일 발송을 위한 spring-boot-starter-mail을 추가하였다 implementation 'org.springframework.b..

목차 개발 개요 별다른건 없고..Naver Cloud의 Object Storage를 개별로 Upload Util을 만들걸 생각하니까 머리가 지끈거려와서 공통기능으로 추출해주고 사용하면 좋을 것 같다고 생각하여 제작하였다. 추가적으로 한개의 버킷에서 dev/~, local/~ 형식으로 경로를 나눠가며 활용을 하고 싶었다. 이에 따른 코드를 공유해 보고자 한다. 의존성 추가 Common-io의 경우 확장자를 편하게 추출하기 위해 활용하였다. 또한 amazone의 aws-java-sdk의 경우 Naver Cloud에서는 Object Storage에서 오픈소스로 제작을 한 부분이다 보니 그대로 사용이 가능하였다. //File api 'commons-io:commons-io:2.13.0' // Amazon AWS..

목차 해당 프로젝트의 경우 CI 와 CD를 전부 Github Actions를 활용하였다. CI와 CD에 사용된 Github WorkFlows를 작성해 보고자 한다. 먼저 사전에 도움이 되라고, 내 프로젝트의 아키텍쳐이미지를 남겨논다. 1) CI 먼저 CI가 해당 프로젝트에서 왜 필요했을 까?부터 정의를 해보고자 한다. 필자의 프로젝트는 6명이 팀으로 있었고, 대부분이 Git에 미숙한 상황이었다. 하지만 Merge는 안전하게 진행해야 한다고 판단을 내렸으며 이에 따라, Build가 되지 않고 파일이 증발하는등의 위험한 PR을 솎아 내야 한다는 문제가 있었다. 해당 문제를 해결하고자 CI를 도입하였고, Build가 되지 않으면 CodeReview를 Approve하지 않고 Merge를 진행하지 않는 방법을 채..

목차 와이어 프레임과 디자인을 정말 허접하게 한채로 진행하였다... 일단 내 목표는 프로젝트 경과에 대한 기록들이기 때문에 글들을 올려두긴 하는데... 많이 민망하다... 그렇기에 아무 내용없이 이미지만 올리도록 하겠다... (도망쳐) 해당 챕터는 재미로 봐주면 좋을 것 같다. ㅎㅎ;;;; 메인페이지 회원가입 경매품 등록 및 경매품의 관리자 승인 페이지 경매품의 상세 정보 및 입찰 페이지 포인트 전환(결재) 마이페이지 및 내 경매 내역에 대한 조회 많이 민망한 페이지인데... 6명 팀인데 6명모두 백엔드의 피가 흘럿나보다... 디자인이 모두 젬병이었다..흑흑흑... 이쁘게 꾸미는 사람들... 필자는 개인적으로 존경한다...

목차 프로젝트 링크 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주..

제작 계기 수업 방식이 Virtual Box로만 물리적인 설치를 통해서 진행을 하는 방식이었으나 내장비는 M1.... 가상머신돌릴라면 돌릴수야 있지만 귀찮은 환경이었다. 나는 그냥 말로 하는 설명을 듣기만되는 입장이라 문제가 없지만... 혹시나 Mac을 사용해 수업을 듣고싶고 편하게 날리고 재설치하는걸 희망하는 분들을 위한 컨테이너를 제작해봤다. Git Repo https://github.com/donsonioc2010/ubuntu_study_for_dev GitHub - donsonioc2010/ubuntu_study_for_dev: 리눅스를 처음 사용해보는 사람을 위해서 개발시 자주 사용하 리눅스를 처음 사용해보는 사람을 위해서 개발시 자주 사용하는 패키지를 Base로 설정한 docker-compos..

해당 기록은 서버의 ScaleUp의 기록입니다. 여러편으로의 작성이 될 수도 있고, 1편으로 종료될 수도 있는 글입니다. 1. 기존에 사용하던 개발서버는 Micro서버로 프리티어 서버였으며, 싱글코어 CPU + 1G의 메모리 였다. 최초에 사양을 변경하게 된 것은, 어플리케이션(NooBLoL)을 실행하는데 까지는 문제가 없지만 이후에 핀포인트를 설치 후 실행을 해보면서 Scale Up이 필요하다 생각하게 되었다. 핀포인트를 실행할때 Agent, Collector, Web 세개를 실행시켜야 하는데 세개를 모두 같은 서버에 두려고 하다보니까 CPU와 메모리가 모두 부족한 상황이 생겨버렸다. Collector와 Agent를 분리는 할 수 있었지만, 분리를 한다는 것은 추가적인 금액을 소요한다는 것이기 때문에 ..

이전 포스트 [refactor]MyBatis에서의 Enum활용기 (By.boolean) 포스트를 작성하게 된 계기(?) 기존에 사용하던 코드에 대해서 수정을 하고자 많은 소스들을 찾아 봤으나 예제가 없었다. 검색을 하는데 없다. 어..진짜없었다. 그래서, 기록이 필요해 보여 작성 devjong12.tistory.com 개요 일단 MyBatis에서 Enum을 사용하는 글에 대해서 추가적으로 작성하게 될 줄 몰랐다.... 완벽히 이해를 하지 않고 일단 되게 해보자!가 원인이 되었다. ㅋㅋ;;;; 역시...잘알고 써야하는데..ㅠㅠ... 1편에서의 문제점은 다음과 같다. 여러개의 Enum을 제작하게 되어도 단 한개만의 Enum밖에 활용이 불가능 해당 문제를 인지하게 된건 다음 기능을 손보게 되면서 Enum으로 ..

개요 프로젝트를 진행하면서 기존에는 @PostMapping과 @GetMapping에 대해서만 사용을 했었다. 그러다보니 대부분의 Mapping을 셋팅 할 때 URL을 남겨줘야 하는 문제가 있었고, /만 선언을 하는경우는 거의 없었다. 이후, 회원정보의 수정기능에 대해서 제작을 하면서 다음과 같이 Controller영역에 대해서 개발을 진행했었다 //기존의 소스 @PostMapping("/user/update") public ResponseDto userUpdate(@Valid @RequestBody UserInfoUpdateDto userInfoUpdateDto) { return userInfoService.updateUserInfo(userInfoUpdateDto); } 다음과 같이 Mapping을 셋..