본문 바로가기
반응형

프론트엔드46

[React] Axios로 Spring과 동기화하는 가이드 Axios를 이용한 Spring Boot와 React 연동 가이드1. Axios란?Axios는 브라우저와 Node.js 환경 모두에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리입니다. 비동기적으로 HTTP 통신을 쉽게 할 수 있도록 도와주며, 대표적인 경쟁 기술로는 JavaScript에 내장된 fetch() API와 jQuery의 ajax()가 있습니다.Axios의 주요 특징자동 JSON 데이터 변환: 요청 시 JavaScript 객체를 자동으로 JSON으로 변환하고, 응답 시 JSON 데이터를 자동으로 JavaScript 객체로 변환해 줍니다. fetch()는 이 과정을 수동(JSON.stringify(), res.json())으로 처리해야 합니다.Promise 기반: asyn.. 2025. 10. 16.
[React] 키오스크 미니 프로젝트 피드백 리액트의 라우터(컴포넌트 관리)와 리덕스(전역함수), 퍼시스턴스(스토리지)를 활용하는 실습 중에 AI에게 도움받은 마크다운 파일들입니다. 첫 번째 문제점 : 메뉴페이지에서 함수가 정상 작동하지 않음미니 키오스크 개선 가이드안녕하세요! 미니 키오스크 프로젝트의 장바구니 기능 구현에 어려움을 겪고 계신 부분을 도와드리겠습니다. MenuPage.jsx의 addCart 함수와 cartSlice.jsx의 리듀서 로직을 중심으로 개선 방안을 제안합니다.1. MenuPage.jsx 개선현재 MenuPage.jsx는 useRef와 여러 개의 을 사용하여 클릭된 메뉴를 식별하려고 하고 있어 비효율적이고 정상적으로 작동하지 않습니다. 각 버튼이 클릭될 때 해당 메뉴 정보를 직접 addCart 함수로 넘겨주는 방식으로 간.. 2025. 9. 24.
[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.
반응형

티스토리툴바