기술이야기 | 브레인즈컴퍼니

주메뉴 바로가기 본문 바로가기

메인 페이지로 이동
블로그
기술이야기

블로그

기술이야기

기술이야기 APM 솔루션을 통한 구체적인 WAS 모니터링 가이드 기술이야기 APM 솔루션을 통한 구체적인 WAS 모니터링 가이드 WAS 환경에서 서비스를 운영하다 보면, 특정 시간대에 간헐적인 응답 지연, 트랜잭션 실패, 일시적인 서비스 불안정 등이 반복적으로 발생하는 경우가 많습니다. 문제는 이런 현상이 일정한 패턴 없이 나타날 때, 운영자가 단순한 모니터링 지표나 로그만으로는 정확한 원인을 파악하기 어렵다는 점입니다. 많은 운영자들이 CPU, TPS, 에러율 등 다양한 지표를 교차해서 살펴보지만, 실제로 "어떤 요청이 지연됐는지", "어떤 지점에서 병목이 생겼는지"를 끝내 확인하지 못하고 넘어가는 사례도 적지 않습니다. 결국 표면적인 수치만 보고 넘어갈 경우, 반복적인 문제에 대한 근본적인 해결책을 놓치게 됩니다. 이러한 운영 현실을 반영해, Zenius APM은 단순 지표 조회를 넘어 트랜잭션의 흐름을 따라가며 실제 문제를 찾아낼 수 있는 ‘주제별 분석’과 ‘Snapshot 분석’ 기능을 제공합니다. 이 두 가지 기능은 문제 발생 시점의 트랜잭션을 시각적으로 확인하고, 응답 지연의 원인을 한눈에 파악하는 데 효과적입니다. APM솔루션 Zenius APM을 통해 WAS를 효과적으로 모니터링하는 방법을 자세히 알아보겠습니다. 주제별 분석 – 문제 구간을 빠르게 좁혀가는 첫 단계 Zenius APM의 주제별 분석은 ‘APM > 분석 > 주제별 분석 > Issue’ 메뉴에서 시작됩니다. 운영자는 여기서 분석할 기간(예: 1일, 7일, 30일 등)과 대상 인스턴스(WAS 서버)를 선택할 수 있으며, 다수의 인스턴스를 동시에 지정하여 서비스 전체의 상태를 통합적으로 분석할 수도 있습니다. Zenius는 이 범위 내에서 수집된 트랜잭션 중 응답 지연, 예외 발생, 오류 응답 등 정상 범위를 벗어난 트랜잭션을 자동 탐지하고, 이슈 유형별로 정리해 보여줍니다. 이 덕분에 운영자는 로그를 일일이 검색하지 않아도, 문제 발생 구간과 주요 원인 유형을 한눈에 파악할 수 있습니다. 또한, 특정 애플리케이션이나 서버만 선택해서 보거나, 이슈 발생 시간대별로 정렬해보는 것도 가능하므로, 분석 범위를 점차 좁혀가며 원인 추적을 진행하기에 매우 유용합니다. 이 기능은 단지 이슈를 보여주는 데 그치지 않고, 다음 단계의 트랜잭션 분석이나 흐름 확인을 위한 기준점 역할을 합니다. Stack Trace 기반 흐름 분석 – 병목 지점을 구체적으로 확인 Zenius APM의 주제별 분석 화면에서 이슈 리스트를 클릭하면, 해당 트랜잭션에 대한 상세 분석 화면으로 진입할 수 있습니다. 이 화면에서는 단순히 에러가 발생했다는 사실을 넘어서, 트랜잭션의 흐름과 그 안에서 어떤 지점에서 문제가 발생했는지를 구체적으로 추적할 수 있는 정보들이 제공됩니다. 우선, 상단에서는 이슈 유형, 발생 시각, 애플리케이션 이름, 에러 메시지 등의 기본 정보가 정리되어 있어 문제가 언제, 어디에서, 어떤 유형으로 발생했는지를 빠르게 확인할 수 있습니다. 여기에 더해, Zenius는 각 트랜잭션이 어떤 호출 흐름을 거쳐 처리되었는지에 대한 Stack Trace 정보를 함께 제공합니다. 이 Stack Trace는 단순한 로그 텍스트가 아닌, 각 함수 호출 및 내부 모듈 간 처리 관계가 시각화된 형태로 제공되며, 각 단계별로 소요된 시간도 함께 확인할 수 있습니다. 이를 통해 전체 요청 중 어떤 구간에서 응답 지연이 발생했는지, DB 호출이나 외부 연동에서 병목이 있었는지를 직관적으로 파악할 수 있습니다. 특히 우측 상단에 위치한 ‘트랜잭션 상세보기’ 아이콘을 클릭하면, 해당 트랜잭션에 대한 더 구체적인 흐름 분석 화면으로 전환됩니다. 이 화면에서는 클라이언트 IP, 요청 경로, 호출 계층 구조, HTTP 상태 코드 등 네트워크 및 애플리케이션 관점의 주요 진단 정보를 모두 확인할 수 있어, 지연의 원인이 프론트엔드-백엔드-DB 중 어디에 있었는지를 명확하게 구분할 수 있습니다. 이러한 분석 방식은 단순히 응답 시간이 늘어났다는 결과만 보여주는 것이 아니라, 문제 발생의 맥락을 따라가며 원인을 추적할 수 있는 구조를 제공합니다. 기존 모니터링 도구에서는 트랜잭션의 처리 흐름을 별도로 조합해야 했다면, Zenius는 하나의 화면에서 모든 흐름을 자연스럽게 보여주기 때문에 운영자의 분석 부담을 크게 줄여줍니다. 애플리케이션 단위 흐름 파악 – 전체 상태를 한눈에 정리 트랜잭션 단위 분석만으로는 전체 시스템의 상태 흐름을 파악하는 데 한계가 있습니다. 특히 여러 서비스가 동시에 운영되는 환경에서는, 특정 애플리케이션의 호출 집중 시점, 실패율 변화, 응답 지연 구간 등을 종합적으로 분석해야 원인을 정확히 진단할 수 있습니다. Zenius APM은 이를 위해 ‘APM > 분석 > 주제별분석 > 어플리케이션’ 탭을 제공합니다. 이 화면에서는 운영 중인 각 애플리케이션에 대한 호출 수, 실패 수, 평균 응답 시간의 시계열 변화를 한눈에 확인할 수 있습니다. 뿐만 아니라, 화면 하단에서는 다음과 같은 분석 항목이 추가로 제공됩니다: - SQL 실행 패턴: 쿼리 호출량, 응답 시간, 반복 실행 여부 등 - 이슈 발생 현황: 에러 빈도, 처리 실패 패턴 - 일별/시간별 현황 차트: 특정 시간대에 집중된 요청, 급증 구간 탐지 - 응답 분포 차트: 지연 구간의 비정상 요청 탐색 이러한 시각적 분석을 통해 운영자는 “어떤 시간대에 요청이 몰렸는지”, “응답이 지연되기 시작한 시점이 언제인지”, “반복적인 병목 쿼리가 있는지” 등을 입체적으로 파악할 수 있습니다. 특히, Zenius APM은 단일 화면 내 탭 전환만으로 주요 데이터를 연계 분석할 수 있어, 운영자는 화면을 전환하거나 복잡한 조건을 따로 설정하지 않고도 전체 흐름을 집중도 있게 파악할 수 있습니다. Snapshot 분석 – 문제 발생 시점의 상태를 다시 확인하는 방법 서비스 운영 중 반복적으로 발생하는 응답 지연이나 트랜잭션 병목 문제는, 대부분 특정 시점에 집중되어 나타나는 경우가 많습니다. 하지만 문제가 실제로 발생한 그 ‘시점’의 시스템 상태를 정확히 기억하고 분석하는 것은 쉽지 않습니다. 특히 로그나 지표만으로는 당시 상황을 온전히 재현하기 어렵습니다. Zenius APM의 Snapshot 분석은 이러한 문제를 해결하기 위한 기능입니다. 이는 단순한 트랜잭션 저장이나 이력 조회를 넘어, 특정 시점의 트랜잭션 흐름, 요청량 변화, 응답 분포, 시스템 자원 사용 상태를 그대로 복원하여 보여줍니다. 운영자는 ‘APM > 분석 > Snapshot’ 분석 메뉴를 통해 분석이 필요한 시점을 선택하고, 해당 시간대에 수집된 트랜잭션 전체의 흐름을 다시 재현할 수 있습니다. 특히 응답 시간의 분포까지 시각적으로 함께 제공되기 때문에, 병목이나 실패가 시작된 구간을 한눈에 식별할 수 있습니다. 예를 들어, 매일 새벽 1시경 특정 서버에서 트랜잭션 수가 급증하면서 응답 지연이 발생하는 문제가 반복된다면, 운영자는 다음과 같은 항목을 Snapshot을 통해 명확히 분석할 수 있습니다: - 어떤 서비스 또는 애플리케이션에서 요청이 집중되었는지 - 세션 수, 응답 지연 시간, 트랜잭션 실패 건수의 변화 추이 - Stack Trace에서 어떤 호출 구간부터 처리 지연이 발생했는지 이와 더불어 Zenius는 Snapshot 데이터를 현재 실시간 대시보드와 병렬로 띄워 비교 분석할 수 있도록 지원합니다. 이를 통해 단순히 과거 상황을 재확인하는 것을 넘어, 문제 발생 전후의 시스템 차이를 입체적으로 파악하고, 재발 방지를 위한 운영 전략을 세우는 기반으로 활용할 수 있습니다. 구체적인 활용 가이드 Zenius APM은 운영 중 발생하는 애플리케이션의 속도 저하, 비정상 동작 등의 문제를 실시간으로 감지하고, 이에 대한 신속한 원인 분석을 지원합니다. 특히, 특정 시간대에 반복적으로 발생하는 이슈에 대해서는 해당 시점의 Snapshot을 재현함으로써, 문제의 흐름과 원인을 보다 정밀하게 진단할 수 있습니다. 이러한 분석은 ‘APM > 분석 > 주제별 분석 > Issue 메뉴’에서 시작됩니다. 먼저, 이슈 분석을 수행해 트랜잭션 지연, 오류, 예외와 같은 이상 패턴을 확인합니다. 이때, 조회 기준을 ‘Issue 유형’이 아닌 ‘대상 기준’으로 선택하면, 여러 인스턴스를 동시에 조회하여 각 인스턴스의 상태를 손쉽게 비교하고 분류할 수 있습니다. 이를 통해 매번 인스턴스별로 별도의 분석을 수행하지 않아도 되며, 다수의 WAS 서버나 노드가 구성된 환경에서도 통합적이고 효율적인 문제 탐색이 가능합니다. 분석 결과는 이슈 유형별로 정리되어, 문제의 집중 발생 시간대 및 영향을 받는 서비스 범위를 빠르게 파악할 수 있게 해줍니다. 분석 결과를 통해 이슈가 발생한 애플리케이션이 식별되면, ‘어플리케이션’ 탭으로 이동하여 해당 애플리케이션의 상태를 보다 심층적으로 확인할 수 있습니다. 이 탭에서는 호출량, 응답 시간, 실패 건수 등의 지표를 시간대별로 시각화해 보여주며, SQL 실행 패턴 및 응답 분포 차트까지 함께 제공되어 애플리케이션의 처리 흐름과 병목 구간을 정밀하게 파악할 수 있습니다. 어플리케이션의 호출 건수, 실패 건수, 응답 시간 등의 지표를 종합적으로 분석하면, 해당 애플리케이션의 현재 동작 상태를 명확하게 파악할 수 있습니다. 이러한 지표는 단일 트랜잭션 분석만으로는 알기 어려운, 서비스 전반의 처리 안정성이나 성능 이상 징후를 조기에 감지하는 데 유용합니다. 앞선 이슈 분석 화면에서는 이슈의 유형, 영향을 받은 애플리케이션, 연관된 트랜잭션 정보 등을 함께 확인할 수 있으며, 이를 기반으로 보다 정밀한 원인 추적이 가능합니다.특정 이슈 항목을 확인한 후에는 ‘일별/시간별 현황’ 탭으로 이동하여, 해당 문제가 어느 시간대에 집중적으로 발생했는지, 또는 지속적으로 반복되고 있는지를 시계열 기반으로 확인할 수 있습니다. 예를 들어, 위 화면에서 01시 시간대에 이슈가 가장 집중적으로 발생한 것을 확인할 수 있습니다. 이처럼 특정 시간대에 반복적으로 문제가 발생하는 양상이 보인다면, 해당 시점에 동일한 유형의 이슈가 재발될 가능성이 높다고 판단할 수 있습니다. 이에 따라 운영자는 해당 시간대의 Snapshot 분석을 실행해, 당시의 트랜잭션 흐름과 자원 사용 현황 등을 복원하고, 대상 인스턴스의 실제 상태를 보다 구체적으로 확인할 수 있습니다. Snapshot 분석을 통해 해당 시점의 접속자 수, 요청 건수, CPU·메모리 등 리소스 사용 현황을 종합적으로 확인할 수 있으며, 응답 분포 차트를 기반으로 성능 저하가 발생한 구간의 Stack Trace 정보와 관련 이슈 내역을 함께 분석할 수 있습니다. 또한 ‘새창에서 분석’ 기능을 활용하면 Snapshot 분석 결과를 별도의 창에서 확인할 수 있어, 현재의 실시간 대시보드와 병렬로 비교 분석이 가능합니다. 이를 통해 과거 특정 시점의 시스템 상태와 현재 상태를 정밀하게 대조할 수 있으며, 지속적인 성능 저하 여부나 개선 효과를 직관적으로 판단할 수 있습니다. 문제가 발생했을 때 단순히 지표를 보는 것만으로는 원인을 정확히 파악하기 어렵습니다. Zenius APM은 이슈 발생 구간을 중심으로 흐름을 따라가며, 트랜잭션 단위에서 실제 병목 지점을 시각적으로 확인할 수 있게 해줍니다. 덕분에 운영자는 반복되는 문제의 흐름을 놓치지 않고, 빠르게 대응할 수 있습니다. 운영 현장에서 ‘왜 문제가 생겼는가’를 정확히 알고 싶은 분들에게 꼭 필요한 솔루션입니다. 2025.08.01
기술이야기 벽을 넘어서고 싶은 신입 개발자의 브레인즈 생활기 기술이야기 벽을 넘어서고 싶은 신입 개발자의 브레인즈 생활기 지원 이유와 여정 대학교 졸업 후, 부족한 웹개발 역량을 쌓기 위해 5달간의 풀스택 부트캠프 교육을 수료하고 1달간의 기업 협업 인턴을 마쳤습니다. 이후, 제 역량을 마음껏 펼쳐내며 지속적으로 성장할 수 있는 회사에서 일하고 싶다는 생각이 들었습니다. 그러다 풀스택 기술뿐만 아니라, 빅데이터 및 AI 기술을 활용해 차세대 기술을 개발하는 브레인즈컴퍼니의 채용공고를 발견했습니다. 이 회사에서라면 많은 것을 배워 역량을 키우고 성장하며 일할 수 있겠다는 생각에 지원했고, 면접 끝에 첫 직장에 취업하게 됐습니다. 웹개발도 재밌지만 개발자로서 지속적으로 새로운 기술들을 습득하며 성장하는 것에서 성취감과 보람을 느끼는 것이 컸고, 그럴 수 있는 부서에서 첫 회사 생활을 시작할 수 있다는 생각에 기뻤습니다. 채용 과정 면접에서 기억에 남는 질문은 "우리 부서는 프론트엔드 보다 백엔드를 더 추구하는 편이라 함께 일을 하게 된다면, 프론트엔드와 백엔드 모두를 아울러 사용할 것인데 할 수 있습니까?"였습니다. 풀스택 개발자로서 일을 하게 된다는 질문이었고, 저는 이 부분에 대해 긍정적이었기 때문에 자신 있게 할 수 있다고 대답했습니다. 백엔드 개발자보다 많은 영역에서 발전하며 성장할 수 있다는 생각에 더욱 기대되고 설렜던 기억이 있습니다. 그렇게 저의 첫 직장 생활이 시작됐습니다. 입사 후, 지난 3달간의 일대기 채용이 된 후, 출근까지 2주간의 자유 시간이 주어졌습니다. 졸업 후 부트캠프 교육을 이수하면서 줄곧 달려왔고, 즐겁게 공부했지만 지쳐있는 심신을 달래기 위해 여행도 다녀오고 친구들과 가족들과 시간을 보내면서 출근 준비를 했습니다. 그렇게 2주 후 첫 출근을 하는 날이 됐고, 본격적으로 사원으로 근무하는 날이 다가왔습니다! 브레인즈컴퍼니의 개발 그룹은 1~5그룹으로 나눠져 있으며, 저는 개발4그룹에 소속됐습니다. 개발4그룹은 프론트엔드와 백엔드 개발뿐만 아니라, 빅데이터 및 AI 기술을 동원한 신기술 개발을 담당하고 있어, 배울 점도 많고 나아가야할 길도 멀리 펼쳐져 있다고 느꼈습니다. 1st Month_적응기 입사 첫 달은, 개발4그룹에서 집중적으로 개발 진행 중인 로그매니저와 Zenius AI의 제품 매뉴얼과 웹페이지에서 실제로 사용되고 있는 각각의 기능들을 학습하며 제품을 파악하고 익숙해지는 기간을 가졌습니다. 그렇게 한 달 간은 개발에 투입되기보다는 제품 및 사용된 기능들에 대한 학습과 공부를 하는 기간이었습니다. 단순히 제품의 매뉴얼만을 보며 학습을 했다면 집중도가 떨어졌을 수 있지만, 제품에서 사용하고 있는 다양한 기술들, Elasticsearch, Kibana, Kafka, Cluster 등 스택들에 대해 공부하면서 흥미와 재미를 느끼며 학습을 이어갈 수 있었습니다. 잘 몰랐던 신 기술들을 접하면서, 앞으로도 배우게 될 다양한 기술들에 대해 기대감이 부풀었던 한달이었습니다. 이외에도 학습을 진행하면서 원래 사용하던 스택인 JavaScript와 Linux의 Base부터 차근차근 다시 복습하며 결점을 보완하고, 제 자신을 Refactoring하기도 했던 한 달이었습니다. 2nd Month_개인정보 마스킹 기능 개발 입사 두 달째 부터는, 로그매니저와 Zenius AI의 기능들과 매뉴얼에 대해 전반적인 이해를 갖게 됐고, 각 사이트 기능들의 동작 원리 등을 대략적으로 파악할 수 있었습니다. 두 달이 된 이 시점부터 프론트엔드와 백엔드 모두를 사용하는 프로젝트가 주어졌습니다. 주어진 프로젝트는 ‘개인정보 마스킹 기능 개발’ 이었습니다. 로그매니저 내에서 수집되는 대용량의 로그들 안에 개인 정보가 포함될 경우가 있는데, 개인정보가 그대로 노출되는 것을 방지하기 위해 개인정보에 해당하는 정보는 마스킹처리를 자동적으로 진행하는 기능 개발을 진행하게 됐습니다. 예를 들어, 로그에 ‘961219-1234567’, ‘서울시 성동구 성수이로’, ‘010-1234-5678’ 등과 같은 주민등록번호, 주소, 연락처 뿐만 아니라 다양한 개인정보들을 지정한 특수문자(Default로는 *을 사용) 로 마스킹 처리를 해주는 기능을 개발하는 과정이 중점이 되는 프로젝트였습니다. 풀스택 공부를 하면서, 백엔드는 Node.js와 MySQL, PrismaOrm 등을 사용해 기능 개발을 진행했지만, 이번 프로젝트는 Elasticsearch, Kafka.js, Cluster.js 및 커스텀마이징된 다양한 메소드와 함수들을 통해 진행했기 때문에 배울 점이 매우 많았고, 성장하는 것을 느낄 수 있었습니다. 이외에도 프론트엔드에서 Ace.js를 통한 텍스트 편집기를 개발하고, 개인정보유형에 해당하는 정보가 입력되면 Syntax Highlighting 기능을 통해 해당 부분에 형광펜 효과를 적용시켜주는 기능의 개발을 진행했습니다. 개인정보 유형에 해당하는 정보에 대응되는 정규표현식, 그리고 백엔드에서 마스킹 처리될 특수문자 타입의 데이터 등은 Elasticsearch의 Index를 통해서 데이터의 저장과 반환작업 처리를 진행해줬으며, 이 데이터들을 기반으로 프론트엔드와 백엔드에서 모두 정상적인 마스킹 기능과 Syntax Highlighting 기능을 개발할 수 있었습니다. 새로운 기술을 활용해 프로젝트를 진행하면서 어려운 점도 많았고 시행착오도 겪었지만, 그만큼얻어가고 배워가는 것이 많았던 첫 업무였습니다. Elasticsearch, Kibana, Cluster, Kafka 등 새로운 기술 스택에 대해 배우고 적용할 수 있었다는 점이 매우 흥미로웠고 뿌듯한 경험이었습니다. <사진 설명: 개인정보 유형과 마스킹 여부, 정규표현식 관리와 마스킹 기능 ON/OFF가 가능한 페이지> <사진 설명: 선택한 개인정보 정규표현식에 해당되는 데이터 Syntax Hilighting 기능 구현> 3rd Month_데몬프로세스 그룹화 작업 및 테스트케이스 입사 세 달째 부터는, 어느 정도 회사 생활에 적응이 된 상태가 됐습니다. 아침 일찍 일어나는 것에도 적응이 됐고, 초반에는 어색했던 업무회의와 주간업무보고서 작성도 이제는 자연스럽게 하고 있는 모습을 발견할 수 있었습니다. 첫번째 프로젝트를 마친 후, 두번째로는 로그매니저의 데몬프로세스 기능을 그룹별로 정렬하는 업무를 맡게 됐습니다. 데몬프로세스가 각각의 그룹 속성을 지니고 있지만, 이를 그룹별로 나눠서 보여준다면 좀 더 가독성과 가시성이 높아질 것이기 때문에, Elasticsearch에서 반환 받는 데이터를 그룹의 조건에 따라 분류해주는 작업이 주가 됐습니다. 두번째 개발 후에는 로그매니저의 각 기능들에 대한 테스트 케이스 및 오류 사항 확인의 과정을 거쳤고, 제가 개발한 ‘개인정보 관리’ 기능에 대한 테스트 케이스 작성도 진행했습니다. 개발자가 개발을 잘하는 것도 중요하지만, 이렇게 자신이 개발한 기능에 대해 테스트케이스를 작성하면서 유저가 해당 테스트케이스를 확인하고, 개발한 기능을 자연스레 사용할 수 있게 해야 하는 것은 개발만큼이나 중요하다고 생각하기 때문에 기분 좋게 테스트케이스 작성을 진행할 수 있었습니다. 또, 로그매니저 제품 각 기술들의 테스트케이스들을 확인하며 각각의 기능들을 모두 테스트해볼 수 있는 기회가 됐으며, 개발하고 서비스되고 있는 기술들에 대해 좀더 명확하게 인지하고 확인할 수 있어 제품 이해에 큰 도움이 됐습니다. 이를 기회로 개발만이 중요한 것이 아닌 테스트케이스의 중요성을 절실히 깨닫고, 제가 개발하는 기술들에 대한 테스트케이스 작성이 필수불가결하다는 것을 느끼게 됐습니다. 느낀 점 브레인즈컴퍼니 개발4그룹에 입사 후, 3달간 근무하며 느낀 점은 제가 만족하며 회사를 다니고 있다는 점입니다. 그룹의 모든 구성원분들이 잘 적응할 수 있도록 도와주고 챙겨주셨고, 문제가 될 수도 있는 실수가 발생해도 모든 그룹원들이 다 잘 다독여 주셨습니다. 또, 좋은 피드백을 줘서 지속적으로 배워가고 성장할 수 있는 회사의 성장할 수 있는 부서라고 생각합니다. 그룹의 상래님, 신후님, 천웅님, 태민님 모두 제게 좋은 피드백과 도움을 주시고, 개선돼야할 점과 공부해야 할 부분, 그리고 개발을 하면서 고쳐야 할 습관들을 알려주셔서 점차 앞으로 나아갈 수 있다고 생각합니다. 일을 하면서 빼놓을 수 없는 게 워라밸일 것이라고 생각합니다. 첫 회사에서 일과 삶의 밸런스가 매우 적절하다고 생각하고 만족하며 근무를 하고 있습니다. 퇴근을 한 뒤에도 운동을 할 수 있고, 식단 관리도 병행하며 몸을 기르고 있습니다. 만약, 워라밸이 좋지 않았더라면 이렇게 삶을 유지할 수 없을 거라는 생각이 듭니다. 글을 마치며 면접에서 제가 했던 말이 있습니다. 저는 앞에 벽이 있다면 돌아가 다른 길을 찾으려 하기보다는 그 벽을 넘을 수 있는 방법을 생각합니다. 앞으로 나아갈 수 있고 성장할 수 있는 삶을 추구하고 있습니다. 비록 그 벽을 넘지 못하더라도, 다음에 그 벽보다 낮은 벽은 넘을 수 있을 것입니다. 시도조차 하지 않으면 당연히 발전도 없다고 생각합니다. 매번 도전하고 또 도전하며 발전하는 개발4그룹의 일원이 돼, 신기술 개발에도 큰 보탬이 되는 개발자로 성장하고 싶습니다. 그리고 브레인즈컴퍼니 개발4그룹에서 반드시 실현 가능하다고 생각합니다. 다양한 기술들을 배우고 학습해 제 것으로 만들고, 그룹과 회사에 보탬이 되는 개발자로 성장하겠습니다! [출처] https://twitter.com/gom_translate https://me2.kr/wvu3p http://jjaltoon.gallery/?p=11311 https://me2.kr/eq144 2022.08.25
기술이야기 [ZNG 개발기] #1. ZNG와 Vue.js 기술이야기 [ZNG 개발기] #1. ZNG와 Vue.js 안녕하세요. 브레인즈컴퍼니 개발 3그룹에서 ZNG의 프론트엔드를 개발하고 있는 1년차 신입 개발자 김현수입니다. ZNG란 Zenius New Generation의 약자로, 브레인즈컴퍼니의 핵심 서비스인 제니우스의 차세대 버전을 말합니다. ZNG는 데이터베이스를 제외한 프론트엔드와 백엔드는 완전히 제로베이스에서 시작하는 장기 프로젝트이기에, 프로젝트를 진행하는 과정에서 새롭게 배운 것, 개발자로서 성장, 팀 개발 경험 등을 기록하고자 ZNG 개발기를 작성하게 됐습니다. ZNG 개발기는 달마다 개발과정에서 있었던 이슈들, 경험, 공부한 내용 등을 기술적인 내용과 함께 작성할 예정입니다. 다 함께! <사진 설명: 펭수, "렛츠고!"> 1. ZNG가 무엇인가요? ZNG는 기존 제니우스에서 발생하는 불편함을 해소하고자 탄생한 프로젝트입니다. 기존 제니우스에는 어떤 불편함이 있었고, 이를 해소하고자 ZNG는 어떤 컨셉을 목표로 개발할 것인가에 대해 알아보겠습니다. 같은 부서 선배 동료들을 쫄래쫄래 따라다니며 물어보고 배워가며 정리한 내용을 바탕으로 작성하는 글입니다. 혹시라도 틀린 부분이 있다면 알려주시면 감사하겠습니다! <사진 설명: 자환님은 아니라고 하셨다...> 제니우스는 B2B 솔루션 서비스 상품으로 사용자의 요구사항에 맞게 유연한 변경이 가능해야 합니다. 새로운 컴포넌트를 추가 한다거나, 여러 기능을 합치는 등 다양한 요구사항에 대응해야 합니다. 당연히도 현재 제니우스는 사용자의 요구사항에 맞춰 조금씩 커스텀해 서비스되고 있습니다. 그러나 효율적이지 못한 상황이 생기기도 합니다. 대체로 같은 내용의 코드를 반복해서 작성하는 상황이 그러합니다. 같은 형태를 가진 컴포넌트여도 출력하고자 하는 데이터의 종류가 다르다면 컴포넌트를 통째로 다시 만들어야 했습니다. 반복적인 작업은 개발자에게 피로감을 주게 되고 단순히 피로감을 넘어, 개발자에게 목표 의식을 저하시킬 우려가 있습니다. <사진 설명: 다양한 종류의 컴포넌트가 있다. 사용자마다 원하는 컴포넌트, 데이터가 다를 수 있다.> 이런 불편함을 해소하는 방법으로, ZNG는 코드의 재사용성을 높이기 위해 노력합니다. 각 기능끼리의 의존도는 낮추고, 독립성을 높여서 반복적인 작업을 최소화합니다. 같은 형태를 가진 컴포넌트에 대해서 데이터만 다르다면 데이터만 바꿔주면 됩니다. 사용자마다 다른 종류의 데이터를 출력하기를 원할 경우 더 빠르고 효율적인 대처가 가능합니다. 이러한 컨셉과 Vue.js의 Component를 관리하는 방법이 일치해 ZNG는 Vue.js로 개발하게 됐습니다. 2. ZNG와 Vue.js Vue.js에는 여러가지 특징이 있습니다. 그 중에서도 Vue Component에 대해서 자세히 알아보겠습니다. Vue Component Vue Component란 화면을 구성하는 하나의 블록입니다. Component는 하나의 전체 화면일수도 있고 전체 화면 중 일부분을 차지하는 또 하나의 작은 화면일수도 있습니다. 따라서 화면을 구현할 때 화면 전체를 한 번에 구현하지 않고, 부분적으로 구현해 관리하는 것이 가능합니다. Component를 활용하면 화면을 구조화해 직관적으로 개발할 수 있으며 코드의 재사용성이 올라갑니다. <사진 설명: 화면의 영역을 블록으로 쪼개 재활용 가능항 형태로 관리하는 것이 Vue Component> ZNG 기능 중 모니터링은 추출한 데이터를 그래프, 표 등을 통해 다양한 형태의 컴포넌트로 보여줍니다. 각각의 컴포넌트는 서로 다른 모양을 통해, 서로 다른 데이터를 보여줍니다. 반대로 말하면 하나의 컴포넌트에 대해서 모양, 데이터만 다르게 준다면 여러 종류의 컴포넌트를 만들 수 있습니다. 다음은 ZNG 코드 일부입니다. PCContainer는 컴포넌트를 감싸는 블록입니다. component 태그 안에 있는 ‘is’옵션에 ‘컴포넌트의 이름’을 넣어 그리고자 하는 컴포넌트를 선택할 수 있습니다. PCLineChart는 그래프를 그리는 컴포넌트입니다. highchartsOptions에 어떤 데이터를 넣느냐에 따라 원하는 그래프를 그릴 수 있습니다. <사진 설명: PCContainer> 하나의 PCContainer로 여러 모양의 컴포넌트를 그리고, 하나의 컴포넌트(PCLineChart)로 다양한 데이터를 표현할 수 있습니다. 컴포넌트를 만들기 위해 새로운 코드를 작성하지 않고, Vue Component를 통해 코드를 재사용함으로써 효율적이고 직관적인 코드를 개발할 수 있습니다. 부모와 자식 컴포넌트 관계 각 Vue Component는 데이터를 주고받을 때 부모-자식 관계를 갖는 것이 일반적입니다. <사진 설명: 부모-자식 컴포넌트> 부모는 자식에게 데이터를 전달할 수 있어야 하며, 자식은 부모에게 일어난 일을 알려야 합니다. 부모는 props를 통해 자식에게 데이터를 전달하며, 자식은 emit로 이벤트를 호출해 부모에게 데이터를 알립니다. 부모 컴포넌트와 자식 컴포넌트는 분명히 구분된 컴포넌트지만 props와 emit을 통해 의사소통이 가능합니다. ZNG는 최상단 레이아웃에서 서버로부터 데이터를 받아와 props를 통해 각 컴포넌트로 데이터를 보내줍니다. 하위 컴포넌트에서 발생한 이벤트를 통해 다시 상위 컴포넌트로 데이터를 전달해 데이터를 관리합니다. 다음은 ZNG 코드 중 일부입니다. 자식 컴포넌트는 props를 통해 부모 컴포넌트로부터 데이터를 받고, emit을 통해 부모 컴포넌트로 이벤트를 통해 알립니다. props와 emit을 통해 컴포넌트 간 의사소통을 수행하지만, 각 컴포넌트마다 코드를 분리하기 때문에 관리가 편하고 쉽게 재사용할 수 있습니다. 3. 마치며 ZNG의 개발 방향성과 이와 관련해 Vue.js의 Component 특징을 정리해봤습니다. Vue Component는 이전부터 알고 있던 개념이지만 직접 개발한 코드와 비교해보니 머릿속에 명확하게 정리되는 느낌이었습니다. 특히 코드를 다시 보면서 개념을 리마인드하는 과정이 좋았습니다. ZNG 개발기는 이제 시작입니다! 앞으로도 계속될 ZNG 개발기에 많은 관심 부탁드리며 ZNG 프로젝트를 성공적으로 수행할 때까지 응원해주세요! <사진 설명: 개발의 신이시여... 지켜봐 주세요!> [출처] https://kr.vuejs.org/ https://ko.wikipedia.org/wiki/Vue.js https://www.instagram.com/waterglasstoon/ 2022.08.03

1