반응형 프론트엔드/넥사크로10 [Nexacro] 3주차 이후 - 6일차: 심화 학습 및 다음 단계 3주차 이후 - 6일차: 심화 학습 및 다음 단계학습 목표넥사크로 학습을 마무리하고, 추가적으로 학습할 수 있는 심화 주제를 파악한다.공식 문서를 활용하여 스스로 문제를 해결하는 능력을 기른다.1. 학습 요약 및 다음 단계지금까지 넥사크로의 기본적인 환경 설정부터 핵심 개념(Dataset, Data Binding, Transaction), 그리고 Spring Boot 백엔드와 연동한 CRUD 게시판 구현까지 진행했습니다. 이 정도면 넥사크로 프로젝트에 참여하여 기본적인 업무를 수행할 수 있는 기반을 다졌다고 볼 수 있습니다.이제부터는 실제 프로젝트에서 마주칠 수 있는 다양한 상황에 대비하여 심화 학습을 진행할 차례입니다.2. 심화 학습 주제공통 스크립트 및 라이브러리 활용: gfn_IsNull과 같이 자.. 2025. 9. 24. [Nexacro] 3주차 이후 - 4~5일차: 실전 CRUD - 상세/등록/수정 화면 개발 3주차 이후 - 4~5일차: 실전 CRUD - 상세/등록/수정 화면 개발학습 목표게시글 상세 정보를 조회하고, 등록 및 수정 기능을 구현한다.넥사크로에서 서버로 데이터를 전송하는 transaction 사용법을 익힌다.1. 상세/등록/수정 Form 개발새 Form 생성: frm_board_detail.xfdl을 생성합니다.데이터셋 정의: Invisible Objects에 ds_board_detail 데이터셋을 생성하고, Spring Board 엔티티의 필드(id, title, content, author, createdAt)와 동일한 컬럼을 정의합니다. (단, id는 Long 타입이므로 INT로, createdAt은 String으로 정의할 수 있습니다.)ds_board_detail은 단일 게시글의 정보를 .. 2025. 9. 24. [Nexacro] 3주차 이후 - 2~3일차: 실전 CRUD - 목록 화면 개발 3주차 이후 - 2~3일차: 실전 CRUD - 목록 화면 개발학습 목표Spring Boot 백엔드에서 제공하는 게시글 목록 API를 호출하여 넥사크로 그리드에 데이터를 표시한다.그리드에서 특정 행을 클릭했을 때 상세 화면으로 이동하는 기능을 구현한다.1. 넥사크로 프로젝트 준비새 Form 생성: Project Explorer에서 Forms 폴더에 마우스 오른쪽 클릭 > Add > Form을 선택하여 frm_board_list.xfdl을 생성합니다.데이터셋 정의: Invisible Objects에 ds_board_list 데이터셋을 생성하고, Spring Board 엔티티의 필드(id, title, content, author, createdAt)와 동일한 컬럼을 정의합니다.컴포넌트 배치: frm_boar.. 2025. 9. 24. [Nexacro] 3주차 이후 - 1일차: 실전 CRUD 프로젝트 - 기획 및 백엔드 준비 3주차 이후 - 1일차: 실전 CRUD 프로젝트 - 기획 및 백엔드 준비학습 목표넥사크로와 연동할 Spring Boot 백엔드 프로젝트를 구성한다.간단한 게시판 CRUD API를 설계하고 구현한다.1. 프로젝트 목표: 간단한 게시판 CRUD넥사크로의 핵심 기능을 모두 활용하여 간단한 게시판(Board)을 만들어 봅시다. 기능은 다음과 같습니다.게시글 목록 조회게시글 상세 조회게시글 등록/수정게시글 삭제2. Spring Boot 백엔드 프로젝트 구성넥사크로와 통신할 Spring Boot 백엔드를 먼저 준비합니다. 기존에 사용하시던 Spring Boot 프로젝트가 있다면 활용하셔도 좋습니다.프로젝트 생성: Spring Initializr (start.spring.io)를 통해 새로운 Spring Boot 프.. 2025. 9. 24. [Nexacro] 2주차 - 4~5일차: 서버 통신 (Transaction) 2주차 - 4~5일차: 서버 통신 (Transaction)학습 목표넥사크로에서 서버 API를 호출하는 transaction 함수의 사용법을 익힌다.서버와 데이터를 주고받는 전체 과정을 이해한다.1. Transaction 이란?넥사크로가 서버와 비동기(Asynchronous)로 통신하기 위해 사용하는 기능입니다.Spring 서버의 @RestController API를 호출하고, 그 결과를 데이터셋으로 받는 역할을 합니다.fetch나 axios와 유사하지만, 데이터셋을 직접 주고받을 수 있도록 최적화되어 있습니다.2. transaction 함수의 주요 파라미터this.transaction( "strSvcID", // 1. 서비스 ID (임의의 Unique한 문자열) "strURL".. 2025. 9. 24. [Nexacro] 2주차 - 3일차: 데이터 바인딩(Data Binding) 2주차 - 3일차: 데이터 바인딩(Data Binding)학습 목표데이터셋과 화면 컴포넌트를 연결하는 데이터 바인딩의 개념을 이해한다.스튜디오의 속성 창을 통해 데이터 바인딩을 설정할 수 있다.1. 데이터 바인딩이란?"데이터셋의 데이터와 화면 컴포넌트의 속성을 하나로 묶는 것"데이터 바인딩을 설정하면, 스크립트로 값을 일일이 주고받지 않아도 자동으로 데이터가 동기화됩니다.(데이터셋의 값 변경) ↔ (화면 컴포넌트의 값 변경) 이 양방향으로 이루어집니다.React에서 useState의 값이 바뀌면 화면이 리렌더링되는 것과 본질적으로 같습니다.2. 바인딩 실습: 사용자 정보 폼 만들기데이터셋의 특정 행을 사용자 정보 폼에 바인딩하여, 행이 바뀔 때마다 폼의 내용이 자동으로 바뀌는 예제를 만들어 봅시다.데이터.. 2025. 9. 24. 이전 1 2 다음 반응형