Jun's Blog

1. 상품 정보 수정 이벤트 처리하기기존 상품 등록 기능과 상품 정보 수정 기능의 구현 차이점1. 기본 키인 상품 번호를 가지고 처리합니다.2. 상품 번호를 이용하여 기존에 기입했던 정보를 읽어 와야 합니다. (useEffect hook 사용) 1.1 상품 정보 수정 화면 생성 및 기존 상품 정보 가져오기ProductUpdateForm.js파일 추가(with. VS Code)기존 ProductInsertForm.js 파일을 복사하여 이름만 바꿔서 작업하는 걸 추천합니다.import axios from "axios";import { useEffect, useState } from "react";import { Button, Container, Form } from "react-bootstrap";impor..

1. 신규 상품을 등록하는 기능 구현하기 1.1 상품 등록 화면 생성하기ProductInsertForm.js 파일 추가import { useState } from "react";import { Button, Container, Form } from "react-bootstrap";function App(){    const [product, setProduct] = useState({        name:'',        price:'',        category:'',        stock:'',        image:'',        description:''    });    const handleChange = (event) => {        // event는 change 이벤트를..

1. 상세보기 이벤트 처리하기 1.1 상세보기 버튼 변경 및 이벤트 처리하기기존 상세보기 버튼을 제거하고 해당 아이템을 클릭하면 상세보기 이벤트가 실행되도록 변경합니다. https://www.w3schools.com/css/css3_flexbox_container.asp W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com  ProductList.js에서 ..

1. 상품 목록 조회 이벤트 처리하기1.1 상품 정보 테이블 만들기 Category.java에 추가 (with. IntelliJ)package com.coffee.constant;// 상품의 카테고리 정보를 나타내기 위한 열거형 상수public enum Category { BREAD("빵"), BEVERAGE("음료수"), CAKE("케익"); private final String description; Category(String description) { this.description = description; } public String getDescription() { return description; }}Product...

1. 홈페이지 BootStrap 기능을 활용하여 꾸미기(with. Carousel) https://www.w3schools.com/bootstrap5/bootstrap_carousel.php W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com https://react-bootstrap.github.io/docs/components/carousel/ Car..

비정상적으로 서비스가 종료될 경우, 포트가 열려 있는 경우가 발생합니다. 이럴 경우, 아래와 같이 해결하면 됩니다.  포트 번호 9000 번 강제 종료하는 방법 cmd창에서netstat -ano | findstr :9000 상황에 따라 프로세스 아이디는 다를 수 있습니다.프로세스 아이디가 15264를 다음 명령어로 종료 합니다. taskkill /PID 15264 /F성공: 프로세스(PID 15264)가 종료되었습니다.

1. 로그아웃 이벤트 처리하기 App.js에 수정한 부분(with. VSCode)     const MenuItems = () => {        switch(user?.role){ // user가 유의미한 데이터 일경우에는 role 정보를 가져오라는 의미임.            case 'ADMIN':                return(                                    Nav.Link style={{color:"white"}} href='/'>상품 등록Nav.Link>                     Nav.Link style={{color:"white"}} onClick={handleLogout}>로그 아웃Nav.Link>                     ..

1. 로그인 이벤트 처리하기 앞서 회원가입 처리에서 추가한 회원 정보 2명입니다.application.properties에 수정한 부분(with. IntelliJ)# DDL 관련 처리 과정에 대해서 설정하는 방식. 초기에는 create, 프로젝트 중후반에는 updatespring.jpa.hibernate.ddl-auto=update LoginPage.js에 수정한 부분(with. VSCode) import axios from "axios";import { useState } from "react";import { Button, Card, Form, Alert } from "react-bootstrap";import { useNavigate } from "react-router-dom";function A..

1. 유효성(vaildation) 추가하기pom.xml에 추가한 부분(with. IntelliJ) org.springframework.boot spring-boot-starter-validation 위의 내용 추가 후, 아래의 갱신 작업을 수행 member.java에 추가 및 수정한 부분(with. IntelliJ)import jakarta.validation.constraints.Email;import jakarta.validation.constraints.NotBlank;import jakarta.validation.constraints.Pattern;import jakarta.validation.constraints.Size;@NotBlank(message = "이름은 필수 입력 사항입니..

1. 회원 가입 이벤트 처리하기1.1 Spring(BackEnd) ↔ MySQL(DB) 간 이벤트 처리하기1.1.1 MySQL DataBase와 연동하기 위한 설정 하기application.properties에 추가 및 수정한 내용(with.IntelliJ)# 실행되는 쿼리 콘솔 출력spring.jpa.properties.hibernate.show_sql=true# 콘솔창에 출력되는 쿼리를 가독성이 좋게 포맷팅하겠습니다.spring.jpa.properties.hibernate.format_sql=true# 쿼리에 물음표로 출력되는 바인드 파라미터를 출력하겠습니다.logging.level.org.hibernate.type.descriptor.sql=trace# DDL 관련 처리 과정에 대해서 설정하는 방식..