Server Programming (202) 썸네일형 리스트형 7장-5. 이미지 추가를 위한 컨트롤러와 화면 처리 (+ 파일명에 언더바가 들어간 경우 에러 발생) 요구사항 기능 설명 게시물 등록 모달창으로 파일 등록, 추가된 파일은 섬네일로 표시 파일의 삭제시 업로드된 파일도 함께 삭제 게시물 목록 게시물과 함께 파일을 목록상에 출력 게시물 조회 해당 게시물에 속한 모든 파일 함께 출력 게시물 수정 게시물 조회 기능 파일 삭제는 일단 화면에서만 안 보이도록 처리, 실제 파일 삭제는 수정 작업 처리시에 파일도 함께 처리 게시물 삭제 해당 게시물 삭제 + 업로드된 모든 파일 삭제 이미지 추가를 위한 등록 처리 요구사항 모달창을 이용해 파일 업로드 처리 업로드한 파일 섬네일로 표시 업로드한 파일 삭제 처리 태그의 submit함수가 아니라 자바스크립트를 활용해 Ajax를 적용 태그 자체에 id 속성을 부여해 자바스크립트 처리시 사용한다. 파일 업로드를 위한 모달창을 위해.. 7장-4. 이전 프로젝트에 이미지 추가 이전 프로젝트에 이미지 추가 DTO 목록 처리 검색 조건 처리 게시물 CRUD 컨트롤러와 화면 처리 1. 화면에 출력되는 최종 DTO 작성 : BoardDTO -> BoardListReplyDTO = BoardDTO + BoardListReplyCount -> BoardListAllDTO = BoardListReplyDTO + BoardImageDTO (1) BoardImage 엔티티를 위한 BoardImageDTO 작성 package org.zerock.b01.dto; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor; @Data @Builder @NoArgs.. 7장-3. 일대다 연관관계의 N+1 문제와 @BatchSize 요구사항 @BatchSize : N+1 문제의 해결 Tuple 이용 : 중첩된 엔티티 객체를 DTO로 변환하는 방식 N+1 문제의 발생 충분히 많은 데이터가 존재하는 경우 목록을 처리하는 과정에서 'N+1'문제가 발생할 수 있다. (1) 더미 데이터 추가 -Board, BoardImage, Reply에 더미 데이터 추가 //N+1문제 발생을 위해 더미데이터 추가 @Test public void testInsertAll() { for (int i = 1; i { System.out.println(board1.getBno()); System.out.println(board1.getImageSet()); System.out.println("----------"); }); return null; } (3) 테스.. 7장-2. 일대다 연관관계인 게시물과 첨부파일 (+ 매핑테이블, @Transactional, @EntityGraph) 연관관계 다대일 연관관계 일대다 연관관계 기준 다른 엔티티 객체의 참조로 FK가 속하는 쪽 기준 PK를 가진 쪽 기준 어노테이션 @ManyToOne @OneToMany 로딩 방식 기본값 fetchType.EAGER fetchType.LAZY 특징 'N+1' 문제 발생 주의 간편한 하위 엔티티 관리 요구사항 일대다 연관관계 @OneToMany를 이용해 일대다 연관관계 처리 영속성 전이를 이용해, 일대다 관계에 있는 엔티티 객체 삭제 처리 참조 방식 단방향 : @JoinColumn을 이용해 참조관계 형성 양방향 매핑 테이블 이용해 양방향 참조관계 형성 mappedBy 속성을 이용해 양방향 참조관계 형성 일대다 연관관계 - 매핑 테이블 생성하는 양방향 참조관계 @ManyToOne : 댓글의 관점에서 게시물을 .. 7장-1. 다중 파일 업로드 처리 (+MultipartFile) 요구사항 게시물 목록에 썸네일 이미지 추가 게시물 등록시에 이미지 업로드 게시물 조회시 이미지 출력 첨부파일의 처리 브라우저의 데이터를 파일 형태로 서버에 보관 업로드한 데이터의 부가 정보를 처리 파일 업로드시 고려사항 UUID : 동일 파일명을 고유 파일명으로 처리 Thumbnailator : 썸네일 파일 처리 JSON 데이터로 업로드 결과 반환 GET 방식으로 업로드 파일 조회 DELETE 방식으로 업로드 파일 삭제 MultipartFile API를 이용한 파일 업로드 컨트롤러에서 파라미터로 전달해 업로드 처리를 수행하는 것보다 Swagger UI로 테스트하기 위해서 dto 패키지에 UploadFileDTO를 별도의 DTO로 선언 1. apllication.properties에 파일 관련 설정 추가 .. 6장-3. 댓글의 자바스크립트 처리 (+Axios, @JsonFormat, @JsonIgnore) 동기식 : 여러 작업의 동시 처리가 불가능 비동기식 : 처리가 끝나면 '콜백'이라고 부르는 통보 방식으로, 하나의 작업이 끝날 때까지 기다리지 않고도 여러 작업의 동시 처리가 가능 자바의 람다식 : 자바에서 함수를 파라미터로 전달 -파라미터로 전달되는 콜백을 내부에서 호출하는 방식 자바스크립트의 함수 : 객체와 동일한 일급 객체로 파라미터가 되거나 리턴타입이 가능하다. -함수를 이용해 콜백을 수행할 수 있다. https://ko.javascript.info/callbacks 콜백 ko.javascript.info -Promise : 비동기 호출을 동기화된 방식으로 작성하는 문법 기능 요구사항 댓글 목록 댓글 등록 / 조회 / 수정 / 삭제 댓글 페이지 이동 댓글 처리가 필요한 화면을 작성하기 위한 Axi.. 6장-2. 다대일 연관관계를 이용한 댓글 처리 (+ 인덱스, Querydsl, Optional<T>, orElseThrow(), @RestControllerAdvice) 요구사항 다대일 연관관계를 이용한 댓글 CRUD 순서 다대일 연관관계 댓글 처리 구현 다대일 연관관계 PK와 FK를 이용해 연관관계를 표현하는 데이터베이스 연관관계의 방향성을 판단하기 어려운 JPA JPA에서 연관관계 판단 기준 변화가 많은 쪽 기준 회원-게시물 : 게시물 회원-좋아요 : 좋아요 ERD의 FK 기준 참조방식 데이터베이스 : PK를 FK가 참조 JPA : A B와 같은 형태로 서로 참조가 가능한 양방향도 지원 양방향과 단반향 참조 양방향 : 구현은 가능하지만, 관리가 어렵고 에러 발생 가능성이 높아서 웬만하면 사용하지 않도록 한다. 단방향 : 조인 처리를 통해 다른 엔티티를 사용하므로, 불편함이 존재하지만 에러 발생 확률이 적아서 권장 댓글 처리 구현 다대일 연관관계를 이용한 댓글처리 요구.. 6장-1. Ajax와 JSON을 이용한 REST 서비스 구현 (+ swagger, BindException, BindingResult, @RestControllerAdvice) 순수한 데이터만 제공하는 서버 사이드 프로그래밍 사용 기술 REST Ajax JSON Swagger RESTful 웹 서비스 (Representational State Transfer) 특정한 URL과 HTTP 메소드를 결합해 '특정한 자원에 특정한 작업'을 지정하는 방식 기존 방식 : URL이 '행위나 작업'을 의미하고, GET/POST가 '데이터를 전송하는 위치'를 의미 Ajax를 이용해 브라우저의 주소 이동없이도 서버와 데이터를 교환하므로, REST 방식 : URL이 '원하는 대상'을 의미, PUT/DELETE가 '행위나 작업'을 의미한다 쿼리 스트링을 이용하지 않고, 직접 주소의 일부로 사용해 하나의 자원을 하나의 주소로 유일무이 표현함으로써, 하나의 URL이 하나의 자원을 식별하는 고유값이 된다.. 이전 1 ··· 10 11 12 13 14 15 16 ··· 26 다음
