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