스프링부트를 이용한 웹서비스 제작 따라하기(3) - 프론트,테스트편

이 글은 jojoldu라는 개발자분이 만드신

3) 스프링부트로 웹 서비스 출시하기 - 3. SpringBoot & Handlebars로 화면 만들기를 따라하면서 생긴 궁금점을 적는 일기장입니다!

css 와 js의 삽입 위치

HTML은 최상단에서부터 코드가 실행되기 때문에 head가 다 실행되고서 body가 실행된다.

-> head가 다 불러지지 않으면 사용자 쪽에선 백지 화면만 노출

1. CSS는 Head에 -> 화면을 그리는 역할을 하기 때문에 head에서 불러옴

2. js는 body 최하단에 -> 용량이 크면 클수록 실행이 늦어지기 때문에 body하단에 두어 화면이 다 그려진 뒤에 호출

※bootstrap.js의 경우 jquery가 있어야하기 때문에 jquery.js밑에 호출하여야 함

js안에 function들을 한 객체로 묶는 이유

만약 a.js 와 b.js에서 같은 function명이 존재하게 된다면, 브라우저의 scope는 공용으로 쓰이기 때문에 나중에 불려진 js의 function이 덮어 쓰여지게 됨!

 -> 위와 같은 문제를 해결하기위해 각각 js만의 객체 안에서 function을 선언하여 객체안에서만 이름이 유효하게 만든다.

H2에서 application 실행시 데이터 삽입하는 방법

1. resources 하단에 data-h2.sql 생성

2. 해당 sql 파일에 insert 쿼리문 작성

3. application.yml 내용 추가

spring:

datasource:

data: classpath:data-h2.sql

jpa:

show-sql: true

hibernate:

ddl-auto : create-drop

h2:

console:

enabled: true

※Spring boot는 Hibernate의 id 생성 전략을 그대로 따라갈지 말지 결정하는 useNewIdGeneratorMappings 설정이 있다. - 해당 설정이 SpringBoot 1.5에선 기본값이 false, 2.0부터는 true로 바뀌였다. - Hibernate 5.0부터 MySql의 AUTO는 IDENTITY가 아닌 TABLE을 기본 시퀀스 전략으로 선택된다. - 1.5에서는 Hibernate 5를 쓰더라도 AUTO를 따라가지 않기 때문에 IDENTITY가 선택 - 2.0에선 true이므로 Hibernate 5를 그대로 따라감(TABLE이 선택) 따라서 자동적으로 id 생성을 하기위해서는 다음과 같은 방안으로 조치를 해줄 수 있다. (1) application.properties/yml의 use-new-id-generator-mappings: false 설정 spring: jpa: hibernate: use-new-id-generator-mappings: false (2) @GeneratedValue의 전략을 GenerationType.IDENTITY로 지정 @GeneratedValue(strategy = GenerationType.IDENTITY) 출처 : https://jojoldu.tistory.com/295

Handlebars 문법 공부

※ @Transactional(readOnly = true) 해주면 조회 기능만 남겨두어서 조회 속도 개선

람다식

ex) postsRepository.findAllDesc()

.map(PostsMainResponseDto::new)

.collect(Collectors.toList());

1. postsRepository.findAllDesc()

- postsRepository에 있는 findAllDesc()를 실행 : Stream<Posts>가 return 됨

2. .map(PostsMainResponseDto::new)

- Stream<Posts>에 있는 하나하나 Posts들을 PostsMainResponseDto로 매핑 시킴

- posts -> new PostsMainResponseDto(posts)와 동일

- Stream<PostsMainResponseDto>가 return

3. .collect(Collectors.toLists());

- Stream<PostsMainResponseDto> -> List<PostsMainResponseDto로 변환

- 최종적으로 List<PostsMainResponseDto가 return됨

TEST코드 작성

1. Repository

(1) 테스트 구상 : Repository.findAllDesc()를 통해 데이터가 잘 불러와지는지 테스트

(2) 유의 사항 : JPA 테스트를 위해 @SpringBootTest 대신 @DataJpaTest를 사용함

(3) 값 검증 방법 : data-h2.sql에 2개의 insert를 넣은 후 findAllDesc()를 통해 출력된 Stream 길이가 2인지 확인 함.

(4) 코드

<추가 필요>

(5) 결과 : 성공

(6) 생각해볼 사항 : Stream에서 값 출력은 어떻게 해야하는지 확인 해보는게 좋을것 같음

2. Service

(1) 테스트 구상

- Service.findAllDesc()를 통해 List<PostsMainResponseDto>가 return되는지 확인

- findAllDesc()는 내림차순이기 때문에 첫번째 데이터의 title이  "테스트2"인지 확인

(2) 유의 사항 

(3) 값 검증 방법 : Service.findAllDesc()의 return값을 List<PostsMainResponseDto>에 넣은 후 첫번째 데이터의 title이 "테스트2"인지 확인

(4) 코드

<추가 필요>

(5) 결과 : 성공

(6) 생각해볼 사항