프로필 페이지 5

이제 실제로 프로필 화면에 업로드한 이미지를 뿌려보도록 한다.

 

UserController.java 에서 profile.jsp 파일에 Model 객체로 넘겨준 userEntity 를 사용하기만 하면된다.

 

<UserController.java> 파일

 

	@GetMapping("/user/{id}")
	public String profile(@PathVariable int id, Model model) {
		User userEntity = userService.회원프로필(id);
		model.addAttribute("user", userEntity);
		return "user/profile";
	}

 

 

 

 

UserController.java 파일에서 

	model.addAttribute("user", userEntity);

이렇게 profile.jsp 파일에 데이터를 전달해주기 때문에, profile.jsp 파일에서는 이 데이터를 사용하려면

${user.name} 이런식으로 사용하면 됨.

여기서 user는, user 테이블(모델?)을 의미하므로 user.name은 user 테이블에 있는 name 변수 값을 사용한다는 뜻

 

특히, ${} 이런 식으로 사용 하는 것을 EL 표현식이라고 하는데,

여기서는 그냥 변수명 user.name 같이 사용하면,

user.getName 이 되는 거임

(get 함수 자동 호출)

 

 

여러 이미지를 뿌리기 위해, profile.jsp 파일에서 아래와 같이 <c:forEach> 문법 사용

(profile.jsp 파일이 양이 많아서 필요한 부분만 조금씩 첨부하겠음)

 

			<c:forEach var="image" items="${user.images}">
				<div class="img-box">
					<a href=""> <img src="/upload/${image.postImageUrl}"/>
					</a>
					<div class="comment">
						<a href="#" class=""> <i class="fas fa-heart"></i><span>0</span>
						</a>
					</div>
				</div>
			</c:forEach>

 

 

아래 코드의 뜻은,

	<c:forEach var="image" items="${user.images}">

 

user 모델에서 images 변수 값들을 가져와서 itmes 에 담고,

그 값들을 하나하나 image 라고 하여 forEach 를 돌면서

forEach 문 내부에 있는 아래의 코드에서 사용

 

<img src="/upload/${image.postImageUrl}" />

 

위의 <img src>를 자세히 설명하자면,

여기에는 이미지 경로(위에서 /upload/부분) + 파일명(postImageUrl 부분 )이 나와야 하는데, 

이 자료들은 우리가 프로필 페이지 1,2 글에서 만들었던 1) 경로와 2) postImageUrl  에 있다.

 

 

1) C:/Hello/Hi/upload/ 

-> application.yml 에 설정함

(참고 : 프로필 페이지 1 글 : https://happy-fun.tistory.com/170)

 

2) postImageUrl 

-> UUID + 파일명(a.jpg 등)

(참고 : 프로필 페이지 2 글 : https://happy-fun.tistory.com/171)

 

2개가 필요하다.

그래야,

" C:/Hello/Hi/upload/ "  경로에 있는,

" UUID + 파일명 " 이름을 갖는 파일을 찾을 수 있음

 

 

이 때 

2) postImageUrl 을 적으면 그 앞에 자동으로 1) application.yml 에서 설정한 경로를 붙여주도록 하는 방법이 있음

WebMvcConfig.java 파일 만듦

 

@Configuration
public class WebMvcConfig implements WebMvcConfigurer{

	
	@Value("${file.path}")
	private String uploadFolder;
	
	@Override
		public void addResourceHandlers(ResourceHandlerRegistry registry) {
			WebMvcConfigurer.super.addResourceHandlers(registry);
			
			
			registry
				.addResourceHandler("/upload/**") 
				.addResourceLocations("file:///"+uploadFolder)
				.setCachePeriod(60*10*6) 
				.resourceChain(true)
				.addResolver(new PathResourceResolver());
		}
}

 

 

 

 

 

@Configuration : ioc 

 

WebMvcConfigurer 를 implements 하여,

WebMvcConfig 클래스는 web 설정 파일이 됨

 

ImageService.java 파일에서 했던 것처럼,

	@Value("${file.path}")
	private String uploadFolder;

이런식으로 하여 application.yml 파일에 설정한 경로,

 

<application.yml> 파일

path 를 예를 들어 C:/Hello/Hi/upload/ 

를 가져온다.

 

즉, 위의 변수 uploadFolder 에는 C:/Hello/Hi/upload/  이 값이 들어가 있음

 

1) 

.addResourceHandler("/upload/**")

jsp페이지에서 /upload/** 이런 주소 패턴이 나오면 아래 코드가 발동

 

즉 예를 들어 profile.jsp 파일에서

 

<img src="/upload/${image.postImageUrl}" />

이런식으로 사용할 수 있음 (/upload/) 이렇게

 

 

2) 

	.addResourceLocations("file:///"+uploadFolder)

즉, profile.jsp 파일에서 /upload/** 이런 주소를 사용했다면

"file:///"+uploadFolder

얘가 발동됨.

그런데, uploadFolder 는, C:/Hello/Hi/upload/ 이 값임.

 

 

즉, 다시 정리하자면 jsp 파일에서

/upload/** 이런 주소를 사용했다면,

file:///C:/Hello/Hi/upload/

이렇게 된다는 거임

 

 

.setCachePeriod(60*10*6)

유효기간 

60 초 * 10 = 10분

10분 * 6 = 1시간

 

.resourceChain(true)

이렇게 true 라고 해주면 이것들이 발동되고

 

.addResolver(new PathResourceResolver());

이렇게 해주면 됨.

 

 

**

나중에 사용할 때 우리가 변경해줘야 하는 부분은

 

1)

.addResourceHandler("/upload/**")

여기서 "/upload/**"

 

2)

	.addResourceLocations("file:///"+uploadFolder)

여기서 "file:///"+uploadFolder

 

이 2개 주소 부분만 바꿔주면 됨 

 

 

 

이렇게 한 다음,

즉,UserController.java 에서 profile.jsp 파일에 Model객체로 데이터 전달해주고, 

WebMvcConfig.java 설정 파일 만든 다음 

profile.jsp 파일에서 ${} 이 식으로 사용하면

 

프로필 화면이 아래와 같이 변하게 됨.(네모친 부분)

 

 

 

hi는 사용자의 name 값이다.

profile.jsp 파일에 아래와 같이 입력하면 사용자의 name 값이 나옴

 

${user.name}

아래의 코드는 profile.jsp 파일에서 이미지를 나타내는 부분.

 

			<c:forEach var="image" items="${user.images}">
				<div class="img-box">
					<a href=""> <img src="/upload/${image.postImageUrl}"/>
					</a>
					<div class="comment">
						<a href="#" class=""> <i class="fas fa-heart"></i><span>0</span>
						</a>
					</div>
				</div>
			</c:forEach>

 

 

 

UserController.java 파일로부터 model 객체에서 받은 데이터들을 

items = "${user.images}" 에 담고

forEach 문을 돌면서

이 데이터들을 하나씩 꺼내 image 라는 이름으로 사용함

 

<img src="/upload/${image.postImageUrl}"/>

이 코드에서 사용하는데, 즉 서버의 

/upload 주소에 있는 각 이미지들을 가져와서 화면에 뿌리라는 뜻

 

 

 

그리고 만약 프로필 화면에서 이미지에서 오른쪽 버튼 클릭 후 검사 버튼을 누르면

아래와 같이 /upload/UUID값 logo.jpg

를 볼 수 있다.

logo.jpg는 업로드한 이미지 파일 이름이다.

 

 

 

참고자료 : 이지업 강의 사이트 "스프링부트 SNS프로젝트 - 포토그램 만들기"