함수 호출 3

Vue 3 <script setup>과 TypeScript로 부모-자식 컴포넌트 간 함수 호출 구현 (공통 타입 분리)

Vue 3의 설명:DataStructure를 ../types/DataStructure에서 임포트합니다.processData 함수는 DataStructure 타입의 데이터를 받아 처리합니다.defineExpose로 processData를 부모 컴포넌트에서 접근 가능하도록 노출합니다.설명:DataStructure를 ../types/DataStructure에서 임포트합니다.parentData는 DataStructure 타입으로 정의됩니다.ref로 자식 컴포넌트를 참조하며, InstanceType으로 타입을 명시합니다.handleButtonClick은 자식 컴포넌트의 processData 함수를 호출합니다.5. 동작 원리부모 컴포넌트에서 버튼을 클릭하면 handleButtonClick이 실행됩니다.childRe..

Node.js로 JavaScript 파일의 함수 호출 정보 파싱하기

Node.js, JavaScript, 함수 호출, 파싱, 아규먼트, AST, 코드 분석, 개발 도구프로그래밍을 하다 보면 코드 내에서 어떤 함수가 어떻게 호출되고 있는지, 그 함수에 어떤 아규먼트가 전달되는지를 분석해야 할 때가 있습니다. 이번 글에서는 Node.js 환경에서 JavaScript 파일을 읽고, 모든 함수 호출과 관련된 정보를 파싱하는 방법을 알아보겠습니다. 이를 위해 AST(Abstract Syntax Tree)를 활용하며, 구체적인 예제 코드를 제공합니다.1. 필요한 도구 준비하기AST, @babel/parser, @babel/traverse, Node.js 모듈, 파일 읽기, 설치먼저, JavaScript 코드를 파싱하려면 AST를 생성하고 탐색할 도구가 필요합니다. 여기서는 @bab..

웹 템플릿 엔진

스프링 부트 웹 템플릿 엔진: 자세하고 깊이 있는 설명템플릿 엔진이란 무엇일까요?템플릿 엔진은 정적인 HTML 구조와 동적인 데이터를 결합하여 완전한 HTML 페이지를 생성하는 소프트웨어입니다. 즉, 미리 정의된 HTML 템플릿에 데이터를 채워 넣어 사용자에게 보여줄 최종 페이지를 만드는 역할을 합니다.왜 템플릿 엔진이 필요할까요?MVC 패턴의 완성: 스프링 부트는 MVC 패턴을 기반으로 하는데, 템플릿 엔진은 View 부분을 담당하여 모델(데이터)과 컨트롤러(처리 로직)를 분리시켜줍니다.코드 재사용성 증가: 공통적인 HTML 구조를 템플릿으로 만들어 재사용하면 코드 중복을 줄이고 유지보수를 쉽게 만들 수 있습니다.개발 생산성 향상: 템플릿 엔진은 개발자가 HTML 코드를 직접 작성하는 대신 템플릿 언어..