복습
JPA??
JPA 쿼리 작성 방법(쿼리메소드>쿼리dsl>JPQL,5번)
- 1.JPQL : DB테이블이 아닌 엔티티를 대상으로 쿼리를 작성 => 네이티브 SQL문으로 변경한다.
- 에러 찾기 어려움 - 디버깅, 트러블 슈팅 등 => QUerydsl 생성 - 2.쿼리메소드(주로 사용) : 메소드 이름으로 JPQL 자동 생성(단, 간단한 쿼리문에 유리)
- Spring Data 참조(https://docs.spring.io/spring-data/jpa/reference/repositories/query-keywords-reference.html)
- 예 : `List bList = boardRepository.findByTitleAndWriter("제목1","작성자1"); - 3.JAP Criterial : JPQL을 메소드의 조합으로 작성 - JPA 표준, 직관적으로 매우 불편함
- 예 : cq.select(b).where(cb.equals(b.get("title")"title")); - 4.Querydsl : JPQL을 메소드의 조합으로 작성 - 라이브러리 오픈소스
- 예 : `List bList = queryFactory.selectForm(board).where(board.title.eq("title)).fetch(); - 5.NativeSQL ; JPQL 대신 SQL 직접 작성(@Query 사용 가능) -> 이럴거면 그냥 MyBatis로 하지
강의 내용
JPA 쿼리작성(JPQL 활용)
JPA 쿼리작성방법 중 쿼리메소드
쿼리메소드란?
- Spring Data 제공 기능, 메소드 이름으로 JPQL 자동 생성
- [[Hibernate]]프레임워크 -> 제어권
- 쿼리문 보기 옵션 : .yml에 설정 (show-sql: true)
- Repository(CrudRepository<Board, @ID-PK)에 메소드 이름 규칙에 맞게 제공됨
//예 : find + (Entity명-생략가능) + By + 속성명(컬럼명, 전역변수 이름)
findByWriter
findByWriterAndTitle
//메소드 이름이 곧 쿼리문- 한번에 여러 문장 삭제한다면?
@Transaction //delete from board where writer = ?(파라미터 값)
int deletBuWriter(String writer)- 쿼리문 작성 팁
등가비교 : Is, Equls / IsNot, Not / Null, IsNull
대소비교 : LessThan / GreaterThan / +Equal(이상, 이하)
날짜비교 : InDateBefore / InDateAfter
와일드카드 : LIKE,NotLike(인덱스 사용 불가) - findByTitleLike(String Title)
StartingWith /
정렬 등 아래 링크 참고멀티파일 처리 - Ajax / form 전송 / Fetch (비동기)
-
동기와 비동기?
-
동기적인 방식은 작업이 순차적으로 실행되며, 한 작업이 끝날 때까지 다음 작업이 시작되지 않습니다. 전통적인 웹 페이지 요청과 응답은 동기 방식으로 동작합니다.
-
비동기적인 방식은 작업이 병렬적으로 실행되며, 한 작업의 완료 여부와 상관없이 다음 작업이 시작됩니다.
-
Ajax나 Fetch API를 사용한 파일 업로드는 비동기 방식으로 동작하며, 페이지 전체를 새로고침하지 않고도 데이터를 서버로 전송할 수 있습니다.
-
React에서의 비동기 처리는 주로 'fetch, axios'를 사용함.
-
Form 전송을 이용한 멀티파일 처리
-
Form 전송은 기본적으로 동기적인 방식으로 동작하며, 전체 페이지를 새로고침하게 됩니다.
-
enctype="multipart/form-data"속성을 추가하여 파일 전송을 활성화합니다." -
Ajax를 이용한 멀티파일 처리
-
Ajax를 사용하는 경우 JavaScript로 비동기적으로 파일을 전송할 수 있습니다.
-
파일 전송 시에
contentType: false와processData: false옵션을 주어야 하며, FormData 객체를 생성하여 데이터를 전송합니다.
JPA 실습-CRUD
퍼시스턴스컨텍스트(영속성)
- 영속성? 캐싱된 정보를 말하고, 이는 메모리에 상주하고 있다는 것을 의미한다.
- 사용자가 화면에서 입력한 정보를 쥐고 있고, 엔티티매니저에 찾아보고 없으면 그 때 서버에서 찾는다.
@GetMapping("fileDownLoad2")
public ResponseEntity<Resource> fileDownLoad2(@RequestParam(value="filename") String filename) {
logger.info("imageDownload 호출 성공");
try {
File file = new File(config.getUploadPath(), URLDecoder.decode(filename, "UTF-8"));
HttpHeaders header = new HttpHeaders();
header.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename="+filename);
header.add("Cache-Control", "no-cache, no-store, must-revalidate");
header.add("Pragma", "no-cache");
header.add("Expires", "0");
Path path = Paths.get(file.getAbsolutePath());
ByteArrayResource resource = null;
resource = new ByteArrayResource(Files.readAllBytes(path));
return ResponseEntity.ok()
.headers(header)
.contentLength(file.length())
.contentType(MediaType.parseMediaType("application/octet-stream"))
.body(resource);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
return null;
}
}// end of fileDownLoad-
파일 삭제하기
-
필터 사용(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
-
파일 다운로드
-
백틱, EL($()) ->역슬래쉬 필요! 둘의 표현법이 겹침
React File 처리
-
랜더링 이슈
-
첨부파일 추가에서의 어려움, 동기처리에 대한 부분 어떻게 해결??
-
메모이제이션(useMemo, useCallback - 함수, 변수에 다 적용 가능함)
-
프롭스 주의!! : 상위에서 하위 가능, 하위에서 상위 불가능
-
오늘의 교훈
-
prop 사용시 : 상위에서 하위의 방향만 가능
-
변수에도 메모이제이션 가능, 계속 유지, 반영해야할 때 오늘 실습처럼 변수에 저장을 시킨 뒤 넘겨서 넘긴 곳에서 푸쉬하고 반영할 수 있도록 작업하는 것 필요함.
-
useState의 첫번째 인자를 넘기게 되면, 동기화되지 않음. 깊은 복사와 같은 느낌
-
그 해결방법은 변수에 넣고, handle
-
함수 또는 변수 메모이제이션
-
useMemo, useCallback 사용 !!
const modules = useMemo(
() => ({
toolbar: {
// 툴바에 넣을 기능들을 순서대로 나열하면 된다.
container: [
[
{ header: [1, 2, 3, 4, 5, 6, false] },
{ color: [] },
{ align: [] },
{ background: [] },
],
["bold", "italic", "underline", "strike", "blockquote"],
[
{ list: "ordered" },
{ list: "bullet" },
{ indent: "-1" },
{ indent: "+1" },
],
["clean"],
["link", "image"],
],
handlers: {
// 위에서 만든 이미지 핸들러 사용하도록 설정
image: imageHandler,
},
},
}),
[imageHandler]
);
실습 중 사용한 컴포넌트 간 prop(함수,변수) 이동(상위->하위 가능)
