분류 전체보기 검색 결과

해당 글 68건

6. 리액트와 상품 API 서버 연동

이번 목표 파일이 추가되는 데이터의 처리 기존 공통 컴포넌트들의 재사용 6.1 상품 관련 React-Router 설정 목록 화면에서 새로운 상품을 등록할 수 있다 조회 화면에서는 수정/삭제 화면으로 이동이 가능하도록 구성 상품 등록 시 상품의 이미지들을 함께 추가해서 등록 상품 목록 페이지에서는 상품들의 이미지를 같이 보여주고 페이지 처리가 가능해야 된다 특정 상품을 선택하면 상품의 조회 페이지가 출력되고 해당 상품의 모든 이미지가 출력되야 한다 해당 상품의 modify 버튼을 선택하면 상품 수정이 가능하도록 구현 상품정보와 같이 새로운 이미지를 추가하거나 기존 이미지를 삭제할 수 있어야됨 상품의 수정/삭제 후에는 모달창에서 수정/삭제 결과를 확인할 수 있게 수정 => 조회 페이지로 이동 삭제 => 목록..
개발/연습프로젝트기록 2024. 4. 1. 21:23

5. 상품 API 서버 구성하기

이번 목표 파일 업로드와 다운로드 처리 하나의 상품에 여러 이미지를 가지는 데이터 처리 첨부파일이 있는 API 개발과 테스트 5.1 파일 업로드를 위한 설정 application.properties 추가 spring.servlet.multipart.max-request-size=30MB spring.servlet.multipart.max-file-size=10MB org.zerock.upload.path=upload 파일 하나의 최대 크기를 10MB로 제한하고 한번에 전송하는 데이터는 30MB로 제한하는 설정 마지막 라인은 코드 내에서 변수로 사용하기 위한 설정임 상품 정보 처리를 위한 DTO 업로드가 완료된 파일의 이름을 가지고 있는 변수와, 실제 파일 데이터 변수를 선언해준다. productDTO.j..
개발/연습프로젝트기록 2024. 4. 1. 01:09

객체지향 쿼리 언어 - JPQL

JPQL JPQL은 객체지향 쿼리 언어다. 따라서 테이블을 대상으로 쿼리하는 것이 아니라 엔티티 객체를 대상으로 쿼리한다. JPQL은 SQL을 추상화해서 특정 데이터베이스 SQL에 의존하지 않는다. JPQL은 결국 SQL로 변환된다. 문법 select m from Member as m where m.age > 18 엔티티와 속성은 대소문자 구분 O (Member, age) JPQL 키워드는 대소문자 구분 X (SELECT, FROM, where) 엔티티 이름 사용, 테이블 이름이 아님(Member) 별칭은 필수(m) (as 는 생략가능) TypeQuery, Query TypeQuery : 반환 타입이 명확할 때 사용 Query : 반환 타입이 명확하지 않을 때 사용 TypedQuery query = em..
Spring/Spring JPA 2024. 3. 29. 23:17

값 타입 컬렉션

값 타입 컬렉션 값 타입을 하나 이상 저장할 때 사용 @ElementCollection, @CollectionTable 사용 데이터베이스는 컬렉션을 같은 테이블에 저장할 수 없다 컬렉션을 저장하기 위한 별도의 테이블이 필요함 Member.java @Entity @Table @Getter @Setter public class Member { @Id @GeneratedValue @Column(name = "MEMBER_ID") private Long id; @Column(name = "USERNAME") private String username; @Embedded private Address homeAddress; @ElementCollection @CollectionTable(name = "FAVORIT..
Spring/Spring JPA 2024. 3. 29. 18:01

값 타입의 비교

값 타입 : 인스턴스가 달라도 그 안에 값이 같으면 같은 것으로 봐야 함 동일성 비교 : 인스턴스의 참조 값을 비교, == 사용 동등성 비교 : 인스턴스의 값을 비교, equals() 사용 값 타입은 a.equals(b)를 사용해서 동등성 비교를 해야 함 값 타입의 equals() 메소드를 적절하게 재정의 (주로 모든 필드 사용) 예시 public static void main(String[] args){ int a = 10; int b = 10; System.out.println("a == b: " + (a==b)); Address address1 = new Address("city", "street", "10000"); Address address2 = new Address("city", "stree..
Spring/Spring JPA 2024. 3. 29. 16:35

4. 리액트와 API 서버 통신

이번 목표 Axios 라이브러리를 이용한 서버와의 통신 useEffect() 를 활용한 비동기 처리와 상태 변경 커스텀 훅을 이용한 공통 코드 재사용하기 컴포넌트에서 모달창을 이용해서 결과 보여주기 4.1 Ajax 통신 처리 Axios 라이브러리를 추가해 준다. npm install axios Axios 의 경우 기본적으로 데이터 형식이 JSON 을 사용한다. todoApi.js import axios from "axios"; export const API_SERVER_HOST = 'http://localhost:8080'; const prefix = `${API_SERVER_HOST}/api/todo`; export const getOne = async(tno) =>{ const res = await ..
개발/연습프로젝트기록 2024. 3. 28. 01:25

3. API 서버

이번 목표 Spring Data JPA 를 이용한 데이터처리 DTO와 엔티티 객체의 변환과 처리 스프링부트 RESTful 서비스 개발 3.1 프로젝트 설정 JPA 설정 Todo.java @Entity @Table(name="tbl_todo") @Getter @ToString @Builder @AllArgsConstructor @NoArgsConstructor public class Todo { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long tno; private String title; private boolean complete; private LocalDate dueDate; } @Entity : 엔티티 클래스 (반드시 데이..
개발/연습프로젝트기록 2024. 3. 24. 21:22