본문 바로가기
반응형

전체 글166

[Nexacro] 2주차 - 3일차: 데이터 바인딩(Data Binding) 2주차 - 3일차: 데이터 바인딩(Data Binding)학습 목표데이터셋과 화면 컴포넌트를 연결하는 데이터 바인딩의 개념을 이해한다.스튜디오의 속성 창을 통해 데이터 바인딩을 설정할 수 있다.1. 데이터 바인딩이란?"데이터셋의 데이터와 화면 컴포넌트의 속성을 하나로 묶는 것"데이터 바인딩을 설정하면, 스크립트로 값을 일일이 주고받지 않아도 자동으로 데이터가 동기화됩니다.(데이터셋의 값 변경) ↔ (화면 컴포넌트의 값 변경) 이 양방향으로 이루어집니다.React에서 useState의 값이 바뀌면 화면이 리렌더링되는 것과 본질적으로 같습니다.2. 바인딩 실습: 사용자 정보 폼 만들기데이터셋의 특정 행을 사용자 정보 폼에 바인딩하여, 행이 바뀔 때마다 폼의 내용이 자동으로 바뀌는 예제를 만들어 봅시다.데이터.. 2025. 9. 24.
[Nexacro] 2주차 - 1~2일차: 데이터셋(Dataset) 완전 정복 2주차 - 1~2일차: 데이터셋(Dataset) 완전 정복학습 목표넥사크로의 핵심 객체인 데이터셋의 개념을 완벽히 이해한다.스튜디오에서 데이터셋을 생성하고, 스크립트로 제어할 수 있다.1. 데이터셋(Dataset)이란? (★★★★★)"클라이언트(화면)에 존재하는 가상의 데이터베이스 테이블"데이터셋은 넥사크로 애플리케이션의 모든 데이터 처리를 담당하는 핵심 객체입니다.서버로부터 받아온 데이터, 서버로 전송할 데이터, 화면 내부에서 계산되는 데이터 등 모든 데이터는 일단 데이터셋에 담깁니다.React의 useState로 관리하는 객체 배열과 유사하지만, 정형화된 행(Row)과 열(Column) 구조를 가진다는 점이 가장 큰 특징입니다.2. 데이터셋 생성하기Invisible Objects에 생성:Design .. 2025. 9. 24.
[Nexacro] 1주차 - 4~5일차: "Hello World" 및 이벤트 처리 1주차 - 4~5일차: "Hello World" 및 이벤트 처리학습 목표Form에 컴포넌트를 배치하고 이벤트 핸들러를 작성할 수 있다.JavaScript를 사용하여 간단한 상호작용을 구현할 수 있다.1. "Hello World" 만들어보기가장 기본적인 예제인 버튼 클릭 시 알림 창을 띄우는 기능을 만들어 봅시다.컴포넌트 배치:Toolbox에서 Button 컴포넌트 하나를 Design 탭의 Form 위로 드래그 앤 드롭합니다.Properties 창에서 버튼의 name을 btn_hello로, text를 "인사하기"로 변경합니다.이벤트 핸들러 생성:btn_hello 버튼을 선택한 상태에서 Properties 창의 번개 모양 아이콘(⚡)을 클릭하여 이벤트 목록을 엽니다.여러 이벤트 중 onclick 이벤트의 오.. 2025. 9. 24.
[Nexacro] 1주차 - 2~3일차: 핵심 용어 및 넥사크로 스튜디오 탐색 1주차 - 2~3일차: 핵심 용어 및 넥사크로 스튜디오 탐색학습 목표넥사크로 프로젝트의 기본 구조와 핵심 용어를 이해한다.넥사크로 스튜디오의 주요 패널과 기능에 익숙해진다.1. 넥사크로 핵심 용어Application: 하나의 넥사크로 프로젝트 결과물(.xadl). 웹으로 치면 하나의 웹사이트 또는 SPA(Single Page Application) 전체에 해당합니다.Form: 사용자가 실제로 보게 되는 하나의 화면 단위. React의 '페이지 컴포넌트'와 유사합니다.Component: Form을 구성하는 UI 요소들. Button, Edit(input), Grid(table), Div(container) 등이 있습니다. React의 일반적인 '컴포넌트'와 같습니다.Project: 넥사크로 스튜디오에서 관.. 2025. 9. 24.
[Nexacro] 1일차: 넥사크로 소개 및 환경 구축 1주차 - 1일차: 넥사크로 소개 및 환경 구축학습 목표넥사크로가 어떤 포지션의 기술인지 이해한다. (Spring/React와 비교)개발에 필요한 넥사크로 스튜디오를 설치하고 실행할 수 있다.1. 넥사크로란? (for Spring/React 개발자)포지션: 프론트엔드(Front-end) 개발 플랫폼React와 비교: React가 JSX와 JavaScript를 사용하여 웹 UI를 컴포넌트 기반으로 만드는 라이브러리라면, 넥사크로는 전용 IDE(넥사크로 스튜디오)를 통해 UI를 시각적으로 디자인하고, JavaScript로 로직을 작성하는 통합 개발 환경에 가깝습니다.Spring과 비교: Spring이 서버에서 비즈니스 로직과 데이터 처리를 담당하는 백엔드(Back-end)라면, 넥사크로는 그 서버가 제공하는.. 2025. 9. 24.
[Vue] 12장: 최종 프로젝트 - 미니 블로그 만들기 12장: 최종 프로젝트 - 미니 블로그 만들기지금까지 배운 모든 기술(컴포넌트, Props, 반응성, Vue Router, Pinia)을 총동원하여 간단한 CRUD(Create, Read, Update, Delete) 기능이 있는 블로그 애플리케이션을 만듭니다.1. 프로젝트 개요만들 기능글 목록 보기 (Read): 모든 게시글의 제목을 리스트 형태로 보여줍니다.글 상세 보기 (Read): 특정 게시글의 제목과 내용을 상세하게 보여줍니다.새 글 작성 (Create): 제목과 내용을 입력하여 새로운 글을 추가합니다.글 수정 (Update): 기존 글의 제목과 내용을 수정합니다.글 삭제 (Delete): 특정 글을 삭제합니다.사용할 기술 스택UI: Vue 3 (Composition API)라우팅: Vue Ro.. 2025. 9. 24.
[Vue] 11장: 전역 상태 관리 (Pinia) - 컴포넌트의 벽 허물기 11장: 전역 상태 관리 (Pinia) - 컴포넌트의 벽 허물기애플리케이션의 규모가 커지면, 여러 컴포넌트가 공유해야 하는 상태(예: 사용자 정보, 테마, 장바구니 등)가 생깁니다. Props drilling이나 provide/inject 없이 이러한 전역 상태를 효율적으로 관리하는 방법을 배웁니다. 여기서는 Vue의 공식 상태 관리 라이브러리인 Pinia를 사용합니다.1. 핵심 개념전역 상태(Global State): 여러 컴포넌트가 공통으로 접근하고 수정해야 하는 상태.Pinia: Vue 3를 위한 직관적이고 타입-세이프한 상태 관리 라이브러리입니다. Vuex의 차세대 버전으로 간주되며, Composition API와 매우 잘 어울립니다. (npm install pinia 필요)Pinia의 주요 개념.. 2025. 9. 23.
[Vue] 10장: Vue Router - 페이지 이동과 목차 만들기 10장: Vue Router - 페이지 이동과 목차 만들기Vue는 기본적으로 단일 페이지 애플리케이션(SPA)이므로, 여러 페이지를 가진 것처럼 보이게 하려면 "라우팅" 라이브러리가 필요합니다. Vue의 공식 라우터인 vue-router를 사용하여 페이지 간 이동을 구현하는 방법을 배웁니다.1. 핵심 개념SPA (Single Page Application): 최초에 하나의 HTML 페이지만 불러오고, 이후에는 서버와 데이터를 교환하며 동적으로 페이지 내용을 갱신하는 방식의 웹 애플리케이션입니다. 페이지를 이동할 때 전체 페이지를 새로고침하지 않아 사용자 경험이 부드럽습니다.vue-router: Vue.js를 위한 공식 클라이언트 사이드 라우팅 라이브러리입니다. (npm install vue-router .. 2025. 9. 23.
반응형

티스토리툴바