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

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

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

블로그

기술이야기

기술이야기 Java APM 기반 기술에 대한 간략한 설명 기술이야기 Java APM 기반 기술에 대한 간략한 설명 몇 년 전부터 미국 실리콘밸리에서 불어온 스타트업 광풍이 인플레이션과 경기 침체가 동시에 예상되는 최악의 전망 속에서 조금 사그러드는 모습입니다. 그러나 빠른 속도로 퍼지기 시작한 IT 관련 유행들은 아마 꽤 오랜 시간 우리들 근처에 남아 그 영향이 지속되지 않을까 예상해봅니다. 그 중 한 부분을 차지하는 것이 새로운 혹은 인기가 급상승한 Go, Python, R, Julia, Kotlin, Rust, Swift 등의 컴퓨터 언어들입니다. 이렇게 많은 언어들이 새로 등장해 번쩍번쩍하는 장점을 뽐내고 있는 와중에도, 아직 세상의 많은 부분, 특히 ‘엔터프라이즈 IT’라 불리는 영역에서 여전히 가장 많이 사용되는 것은 Java입니다. 절대적이지는 않지만 컴퓨터 언어의 인기 순위 차트인 TIOBE 인덱스에 따르면, 2022년 6월 현재도 Java의 인기는 Python, C의 뒤를 잇는 3위입니다. Java 역시 Java 9부터는 십 수년간 고수하던 백워드 컴패티빌리티 정책을 포기하고 여러가지 반짝거리는 장점을 받아들이면서 버전업을 계속해, 올해 9월에는 Java 19가 나올 예정입니다. 그러나 아직도 우리나라 ‘엔터프라이즈 IT’에서 가장 많이 쓰이는 버전, 그리고 작년까지는 세계에서 가장 많이 쓰이는 버전은 Java 8이었습니다. 이렇게 많은 Java 어플리케이션의 성능을 모니터링하고 관리할 수 있는 솔루션을 통상적으로 APM(Application Performance Management)이라고 합니다. 위에서 서술한 것처럼 다른 컴퓨터 언어들의 인기가 올라가고 사용되는 컴퓨터 언어가 다양해지면서 많은 APM 제품들이 Java외의 다른 컴퓨터 언어로 작성된 어플리케이션도 지원하는 경우가 늘어나고 있으나, 이 글에서는 APM을 Java 어플리케이션의 성능을 모니터링하고 관리할 수 있는 솔루션으로 한정하도록 하겠습니다. 어플리케이션의 성능을 보다 깊이 모니터링하는데 필수적인 것이 Trace[i]입니다. Trace는 어플리케이션이 실행되는 과정에 중요하다고 생각되는 부분에서 중요하다고 생각되는 어플리케이션의 상태를 기록으로 남긴 것입니다. 전통적인 어플리케이션에서는 실행 Thread를 따라가면서 순차적인 Trace가 남게 되고 유행에 맞는 MSA(Micro-Service Architecture) 어플리케이션에서는 서로 연관됐지만 직선적이지는 않은 형태의 Trace가 남게 됩니다. 이러한 Trace를 수집하고 추적하고 분석하는 것이 APM의 주요 기능 중 하나입니다. 그런데, 여기서 문제가 하나 생깁니다. Trace는 누가 남길 것인가 하는 문제입니다. 개발 리소스가 충분하고 여유가 있는 경우, 개발시 성능에 대한 부분에 신경을 써서 개발자들이 Trace를 남기며 이를 분석하고 최적화하는 것이 정례화, 프로세스화 돼있겠지만, 많은 경우 개발 리소스를 보다 중요한 목표 달성을 위해 투입하는 것도 모자랄 지경인 것이 현실입니다. 아무리 분석 툴인 APM이 좋아도, 분석할 거리가 되는 Trace가 없으면 무용지물이 돼 버립니다. 그래서 APM에는 미리 정해진 중요한 시점에 어플리케이션에서 아무 것도 하지 않더라도 자동으로 Trace를 남기도록 하는 기능이 필수적으로 필요합니다. Java 어플리케이션의 경우 이러한 기능은 Java Bytecode Instrumentation이라고 하는 기반 기술을 사용해 구현됩니다. 서론이 매우 길어졌지만, 이 글에서는 Java Bytecode Instrumentation에 대해 조금 상세히 살펴보도록 하겠습니다. Java Bytecode Instrumentation을 명확히 이해하려면, 먼저 Java가 아니라 C, C++, Rust등의 언어들로 작성된 프로그램이 어떤 과정을 거쳐서 실행되는가, 그리고 Java 프로그램은 어떤 과정을 거쳐서 실행되는가를 살펴보는 것이 도움이 됩니다. Java가 세상에 나오기 이전에는 ‘컴퓨터 학원’이나 고등학교 ‘기술’ 과목, 그리고 대학의 ‘컴퓨터 개론’ 등에 반드시 이런 내용이 포함돼 있었지만 요즘은 그렇지도 않은 것 같습니다. 컴퓨터에서 프로그램을 실행시키는 것은 CPU, 즉 Central Processing Unit입니다. 지금 이 글을 작성하고 있는 컴퓨터의 CPU는 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz입니다. CPU는 메모리의 프로그램이 있는 영역을 읽어 들여, 미리 정해진 값에 따라 정해진 동작을 수행하게 됩니다. 이때 어떤 값이 어떤 동작을 수행하는지 규정해 놓은 것을 Machine Language라고 합니다. Machine Language는 100% 숫자의 나열이므로 이를 좀더 사람이 읽기 쉬운 형태로 1:1 매핑 시킨 것이 Assembly Language입니다. (그렇다고 읽기가 많이 쉬워지지는 않습니다.) 이 글에서는 이 두 단어를 구분없이 혼동해 사용합니다. C, C++, 그리고 나온 지 벌써 10년이나 된 Go, 요즘 인기가 계속 상승하고 있는 Rust 등의 언어로 작성된 프로그램은, 이들 언어로 작성된 소스 코드를 Machine Language로 미리 변환해서[ii] 실행 파일을 만들고 이를 실행하게 됩니다. 이 변환을 수행하는 것을 Compile한다라고 하고 이 변환을 수행하는 프로그램을 Compiler라고 부릅니다. 한편, 소스 코드를 완전히 Machine Language로 변환시킨 실행 파일을 실행하는 것이 아니라 Interpreter라 불리우는 프로그램이 소스 코드를 읽으면서 그 의미에 맞게 동작을 수행시키는 언어들도 있습니다. ‘스크립트 언어’라 불리는 bash, Perl, PHP, Ruby, Python 등이 이에 해당되면, 요즘은 잘 쓰이지 않지만 그 옛날 Bill Gates가 직접 Interpreter를 만들기도 했던 BASIC 등이 이에 해당합니다. 본론으로 돌아가보겠습니다. 그렇다면, Java 프로그램은 어떤 방식으로 실행이 되는가? 기본적으로는 Interpreter 방식이라고 생각해도 이 글의 주제인 Java Bytecode Instrumentation을 이해하는 데는 무리가 없습니다.[iii] 여기에 더해 Java의 실행 방식에는 몇 가지 큰 특징이 있습니다. 첫째로, Java는 소스 파일을 직접 읽어 들이면서 실행하는 것이 아니라 소스 파일을 미리 변환시킨 Java Class File을 읽어 들이면서 실행합니다. 하나의 Java Class File에는 하나의 Java Class 내용이 모두 포함됩니다. 즉, Class의 이름, public/private/internal 여부, 부모 클래스, implement하는 interface 등의 Class에 대한 정보, Class의 각 필드들의 정보, Class의 각 메서드[iv]들의 정보, Class에서 참조하는 심볼과 상수들, 그리고 이 글에서 가장 중요한 Java로 작성된 각 메서드의 내용을 Java Bytecode 혹은 JVM Bytecode라고 하는 중간 형태의 수열로 변환시킨 결과 등이 Java Class File에 들어가게 됩니다. 이 Java Bytecode는 실제 실행 환경인 CPU 및 Machine 아키텍처에 무관합니다. 똑같은 Java 소스 코드를 Windows에서 Compile해 Java Class File로 만들건, Linux에서 Compile해 Java Class File로 만들건 그 내용은 100% 동일하게 되고 이 점은 C, C++, Rust 등 Compiler 방식의 언어와 큰 차이점입니다. Java의 가장 큰 마케팅 캐치프레이즈 “Write Once, Run Anywhere”는 이를 표현한 것입니다. 둘째, Java Bytecode는 일반적인 CPU의 Machine Language와 많은 유사점을 지닙니다.[v] 어찌 보면 Java Bytecode는 실제 존재하지는 않지만 동작하는 가상의 CPU의 Machine Language라고 볼 수 있는 것입니다. 이러한 이유에서 Java Class File을 읽어 들여 실행시키는 프로그램을 JVM이라고 (Java Virtual Machine) 부릅니다. Java 소스 파일을 Java Class File로 변환시키는 프로그램을 Java Compiler라고 부르며, 가장 많이 쓰는 Java Compiler는 JDK(Java Development Kit)에 포함된 javac라고 하는 프로그램입니다.[vi] JVM은 JDK에 포함된 java라고 하는 프로그램을 가장 많이 씁니다. 한편 사용 빈도는 그렇게 높지 않지만, Java Class File을 사람이 알아볼 수 있는 형태로 변환해서 그 내용을 보고 싶은 경우도 있습니다. 이런 일을 하는 프로그램을 Java Bytecode Disassembler[vii]라고 부르며, JDK에는 Java Bytecode Disassembler인 javap가 포함돼 있습니다. 혹은, Eclipse나 Intellij IDEA 같은 IDE에서 Java Class File을 로드하면 사람이 알아볼 수 있는 형태로 변환해 보여줍니다. Java Bytecode의 실제 예를 한번 살펴보도록 하겠습니다. 설명을 간단히 하기 위해, 클래스나 메서드 선언 등은 다 제외하고, 오직 메서드의 내용에만 집중하면,  System.out.println(“Hello, World.”); 라는 Java 프로그램은 다음과 같은 Java Bytecode로 변환됩니다. (전통적으로 16진수로 표시합니다.)  b2 00 0b 12 09 b6 00 0f b1 이를 javap를 사용해, 혹은 JVM Reference[viii]를 보고 좀더 사람이 보기 쉬운 형태로 표현하면 다음과 같습니다.  0: getstatic #11 // Field java/lang/System.out:Ljava/io/PrintStream;  3: ldc #9 // String Hello World  5: invokevirtual #15 // Method java/io/PrintStream.println: (Ljava/lang/String;)V  8: return JVM Reference의 Chapter 7을 참고하면, Java Bytecode를 javap의 결과에 어떻게 대응되는지를 알 수 있습니다. javap의 결과를 조금 더 살펴봅시다. 먼저 콜론 앞의 숫자는 인스트럭션의 offset으로서 Bytecode 시퀀스의 0번째, 3번째, 5번째, 8번째를 의미합니다. 0번째의 getstatic은 그 다음 숫자에 해당하는 필드를 스택의 맨 위에 저장하도록 합니다. 3번째의 ldc는 “Hello, World”라는 상수값을 스택의 맨 위에 저장하도록 합니다. 5번째의 invokevirtual은 println 메서드를 호출하고, 8번째의 return은 메서드에서 리턴해 호출한 곳으로 실행을 넘깁니다. Java 프로그램은 (정확히는 Java 소스 코드로 작성된 프로그램을 Compile한 결과) 통상적으로 많은 수의 Java Class File로 이뤄집니다. JVM은 이러한 Java Class File을 한꺼번에 읽어 들이는 것이 아니라 실행을 하다가 필요한 순간이 되면 그 때 읽어 들입니다. JVM은 이 로딩 과정에 사용자가 개입할 여지를 남겨 뒀는데, 이것이 Java Bytecode Instrumentation입니다. 이에 대한 개요는 https://docs.oracle.com/javase/8/docs/api/java/lang/instrument/package-summary.html에 설명돼 있습니다. 요약해서 설명하면 다음과 같습니다. (1)사용자는 미리 정해진 규약대로 Java Agent라는 프로그램을 작성하고 이를 JVM 실행시에 옵션으로 명기합니다. (2)JVM은 Java Class File을 읽어 들여서 JVM이 처리하기 좋은 형태로 저장하기 전에, 그 파일 내용을 Java Agent의 ClassFileTransformer 클래스의 transform 메서드[ix]에 전달합니다. (3)JVM은 Java Class File의 원래 내용이 아니라 (2)의 메서드가 반환하는 결과를 저장하고 실행합니다. 이 과정을 Java Bytecode Instrumentation이라고 합니다. 사용자는 Java Bytecode Instrumentation을 구현해, 즉 Java Agent를 잘 작성헤 무엇이든 원하는 바를 달성할 수 있는 것입니다![x] 이러한 Java Bytecode Instrumentation은 APM, 그리고 Aspect-Oriented Programming의 기반 기술이 됩니다. 우리나라에서 Java로 프로그래밍을 한다고 하면 누구나 다 알고 있을 것 같은 Spring Core의 핵심 요소 중의 하나가 Aspect-Oriented Programming입니다. 예를 들어 Spring에서 @Transaction 이라고 annotation된 메서드가 있으면, Spring은 그 메서드의 맨 처음에 transaction을 시작하는 코드, 정상적으로 return하기 직전에는 transaction을 commit하는 코드, 그리고 익셉션에 의해 메서드를 빠져 나가기 직전에는 transaction을 rollback하는 코드를 삽입해 주게 되는데 이를 Java Bytecode Instrumentation을 이용해 구현하는 것입니다. 그럼, Java Agent에 거의 무조건적으로 필요한 기능은 무엇일까요? Java Agent는 Java Class File 내용을 그대로 전달받기 때문에 이를 해석할 수 있어야 무언가를 할 수 있습니다. 불행히도, java 스탠다드 라이브러리에는 Java Bytecode를 직접 다루는 기능은 없습니다.[xi] 그래서 de facto standard로 사용되는 것이 asm이라는 라이브러리입니다. 이 라이브러리는 수많은 java 라이브러리와 어플리케이션에 포함돼 있습니다. 그러나 asm이 훌륭한 라이브러리이긴 하지만, 이를 직접 사용하려면 각 상황에 맞게 코드를 삽입하는 프로그램을 작성해서 사용해야 하므로 자유도가 떨어집니다. 그래서 Zenius APM에서는 asm을 사용하되 삽입될 코드를 설정 파일에서 지정할 수 있는 suji(Simple Universal Java Instrumentor)[xii]라고 이름 붙인 라이브러리를 직접 만들어 사용하고 있습니다. suji를 사용하면 yaml 형식의 설정 파일에서, 어떤 클래스의 어떤 메서드의 어느 부분에 삽입할 것인지에 대한 조건과 삽입될 코드를 yaml의 list 형태로 지정하는 것만으로 (이는 Lisp와 비슷한 방식으로, 이렇게 하면 파싱 과정을 생략하면서 쉽게 코드를 넣을 수 있습니다.) Java Bytecode Instrumentation을 손쉽게 처리할 수 있습니다. 예를 들어, Zenius APM에서 JDBC getConnection을 처리하기 위해서 다음과 같은 부분이 설정 파일에 포함돼 있습니다. JDBC.DataSource.getConnection: IsEnabled: true ClassChecker: [ HasInterface, javax/sql/DataSource ] MethodName: getConnection IsStatic: false IsPublic: true IsDeclared: false ReturnType: Ljava/sql/Connection; Locals: [ Ljava/lang/Object;, Ljava/lang/Object; ] AtEntry: - [ INVOKE, dataSourceGetConnection, l1, [] ] AtExit: - [ INVOKE, poolGetConnectionEnd, l2, [ l1, ^r, true ] ] - [ LOAD, l2 ] - [ CAST, Ljava/sql/Connection; ] - [ STORE, ^r ] AtExceptionExit: - [ INVOKE, endByException, null, [ l1, ^e ] ] 간략하게 설명하면, Class가 만약 javax.sql.DataSource를 implement하고 메서드가 스태틱이 아니고 public이면서 java.sql.Connection을 리턴하는 getConnection이라는 이름을 가진 경우에 메서드 시작 시, 리턴 시, 그리고 익셉션에 의해 메서드를 나갈 때 위의 예제에 규정된 코드를 삽입하라는 의미입니다. 이상으로 Java Bytecode Instrumentation에 대한 간략한 설명을 마칩니다. 다음에는 실제로 APM이 중점적으로 추적하고 분석하는 것은 어떤 것들인가에 대해 설명하겠습니다. -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [i] Sridharan, Distributed Systems Observability, O’Reilly, 2018의 Chapter 4. The Three Pillars of Observability 참조. 번역본은 없는 듯합니다. [ii] 이 외에 여러가지 과정을 거치지만 이 글의 목적과는 무관하므로 과감하게, 자세한 설명은 생략합니다. [iii] 실제로는 Java 프로그램이 100% 이렇게 interpret되어 실행되는 것은 아닙니다. 특정 메쏘드 혹은 메쏘드의 일부분이 자주 실행돼 interpret하는 것보다 미리 컴퓨터(=CPU)가 바로 실행할 수 있는 형태(=Machine Language)로 변환(=compile)해 놓는 것이 더 낫다고 JVM이 판단하는 경우, 미리 이런 변환 과정을 한번 거쳐 그 결과를 기억해 놓고, 그 기억된 결과를 컴퓨터(=CPU)가 바로 실행합니다. 이렇게 변환하는 과정을 Just-In-Time Compile 혹은 JIT라고 합니다. 또 이 때문에 JVM을 단순한 interpreter로 부를 수는 없는 것입니다. [iv] 국립국어원은 메서드가 맞는 표기라고 합니다. [v] 물론 많은 차이점도 지닙니다. (1) JVM은 register가 존재하지 않고 오로지 stack에만 의존한다. (2) JVM은 Class, Method의 개념을 포함하고 있지만 일반적인 범용 CPU에는 그런 상위 개념은 없습니다. [vi] 보통 IDE를 써서 개발을 하기 때문에, javac를 직접 사용하거나 Java Class File을 직접 다룰 일은 잘 없고, jar 파일이 이 글을 읽는 여러분에게 훨씬 더 익숙할 지도 모릅니다. Jar 파일은 그냥 zip으로 압축된 파일이니 그 압축을 한번 풀어 보길 바란다. 확장자가 class인 수많은 파일을 찾을 수 있을 것입니다. [vii] Assembly는 Assemble의 명사형이며, Assemble의 반대말은 Disassemble입니다. [viii] JVM에 대한 모든 것은 The Java Virtual Machine Specification에 나와 있습니다. 이 중 'Chapter 6. The Java Virtual Machine Instruction Set'를 참고하면 각각의 instruction에 대해 상세히 알 수 있습니다. [ix] https://docs.oracle.com/javase/8/docs/api/java/lang/instrument/ClassFileTransformer.html#transform-java.lang.ClassLoader-java.lang.String-java.lang.Class-java.security.ProtectionDomain-byte:A- [x] 쉽다고는 하지 않았습니다. 또 몇가지 제약 사항은 있습니다. [xi] 참고로 최근에는 asm을 대체할 수 있는 기능을 스탠다드 라이브러리에 넣을 계획이 진행되고 있습니다. https://openjdk.org/jeps/8280389 [xii] 명명이 아이돌 그룹 출신 모 여배우와 관계가 아주 없지는 않음을 조심스럽게 밝혀 둡니다. 2022.08.04
기술이야기 [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 2 3 4