세무민의 코딩일기 : 포트폴리오 화면에 블로그 기능 추가하기 2탄 [포트폴리오 사이트 제작하기 4탄]

안녕하세요 세기무민입니다.

우선 제가 진행하려는 화면은 아래의 포스팅 화면을 기반으로 진행하였습니다.

---

👇👇👇👇👇👇👇👇👇 전에 진행했던 포스팅을 보고 싶다면?! 👇👇👇👇👇👇👇👇👇

세무민의 코딩일기 : (JPA&Jquery) 포트폴리오 화면에 블로그 기능 추가하기 1탄 [포트폴리오 사이트

---

👇👇👇👇👇👇👇👇👇 현재까지 진행한 내용들은 아래의 주소에서 확인 가능합니다. 👇👇👇👇👇👇👇👇👇

GitHub - sg-moomin/sg-moomin.github.io

---

전 포스팅에서 진행했던 내용을 추가적으로 해보도록 하겠습니다. 

DB랑 같이 다뤄볼 생각이였지만 DB는 좀 더 자세하게 설계하면 그때 다뤄보고

우선은 Blog 구성했던 코드들만 다뤄보겠습니다.

 

코드 및 사진 

1. blogCtl > blog 조회 

@Controller
@RestController	
@RequiredArgsConstructor
public class blogCtl {

	@Autowired
	public blogEntityService blogEntitySvc;

	@ResponseBody
	@RequestMapping(value="/blog", method=RequestMethod.GET)
	public ModelAndView blog(ModelAndView M) {
		List<blogEntity> result = blogEntitySvc.init();
		M.addObject("myBlog", result);
		M.setViewName("blog");
		
		return M;
	}
 }

컨트롤러에서는 blog에 조회해야 할 데이터를 받아옵니다. 

2. blogEntityServiceImpl - blogRepository

/**
* blogEntityServiceImpl.class
*/

@Service
@RequiredArgsConstructor
public class blogEntityServiceImpl implements blogEntityService {
	
	@Autowired
	private blogRepository blogRepository;

	@Override
	public List<blogEntity> init() {
		List<blogEntity> blogList = new ArrayList<blogEntity>();
		blogList = blogRepository.init();
		return blogList;
	}
 }
 
/**
* blogRepository.class
*/

@Repository
public interface blogRepository extends JpaRepository<blogEntity, Integer> {

	@Query(value = "SELECT * FROM blog order by blogid desc", nativeQuery = true)
	List<blogEntity> init(); 
}

우선적으로는 모든 결과 값들을 조회해옵니다.

조회하면 위와 같이 리스트들이 조회 됩니다.

상세 화면을 보면 위와 같은데 현재 테그 부분이 조금 고민이 있지만 일단은 아래와 같이 개발했다. 

3. blogCtl

@Controller
@RestController	
@RequiredArgsConstructor
public class blogCtl {
	
    @Autowired
	public blogPostEntityService blogPostEntitySvc;
	@Autowired
	public blogEntityService blogEntitySvc;
	
    @ResponseBody
	@RequestMapping(value="/blogPost", method=RequestMethod.GET)
	public ModelAndView blogPost(ModelAndView M, String findPostId) {
			
		// List<blogPostEntity> result = blogPostEntitySvc.init();
		blogPostEntity post = blogPostEntitySvc.searchFindId(findPostId);
		String imgtitle = blogEntitySvc.searchImgTitle(findPostId);
		
		String postId = post.getPostid();
		// tage 조회
		List<String> tag = blogEntitySvc.searchFindTag(postId);
		// blogPostVo 추가	
		blogPostVo result = new blogPostVo();
		result.setPostId(post.getPostid());
		result.setPostMainTitle(post.getPostmaintitle());
		result.setPostSn(post.getPostsn());
		result.setPostSnTitle(post.getPostsntitle());
		result.setPostUrl(post.getPosturl());
		result.setImgTitle(imgtitle);
		
		
		M.addObject("myPost", result);
		M.addObject("tag", tag);
		M.setViewName("blogPost");
		
		return M;
	}
}

우선 blogId를 통해 Post에 대한 정보들을 조회해옵니다. 

그리고 테이블에 들어있는 데이터 중 blog 테이블에 이미지 정보가 들어있어서 해당 img 정보도 같이 조회해옵니다. 

마지막으로 테크 정보까지 조회해서 보여주는 로직입니다. 

4.blogPostEntityServiceImpl / blogPostRepository

/**
* blogPostEntityServiceImpl.class
*/

@Service
@RequiredArgsConstructor
public class blogPostEntityServiceImpl implements blogPostEntityService {
	
	final private blogPostRepository blogPostRepository;

	@Override
	public blogPostEntity searchFindId(String findId) {
	
		blogPostEntity result = blogPostRepository.findIdSelect(findId);
		
		if(result == null) {
			return null;
		}
		
		result.setPostsn(result.getPostsn().replace("\n", "<br>"));
		return result;

	}
}

/**
* blogPostRepository.class
*/

@Repository
public interface blogPostRepository extends JpaRepository<blogPostEntity, Integer> {
	@Query(value = "select * from blogPost where postId = :id", nativeQuery = true)
	blogPostEntity findIdSelect(@Param("id") String findId);
}

FindId 값을 이용해서 post에 대한 정보들을 조회해옵니다. 

조회할 때 내용의 경우 줄바꿈처리가 되어있지 않아서 줄바꿈처리를 진행해주면 됩니다. 

5.blogEntityServiceImpl / blogRepository

/*
* blogEntityServiceImpl.class
**/

@Service
@RequiredArgsConstructor
public class blogEntityServiceImpl implements blogEntityService {
	
	@Autowired
	private blogRepository blogRepository;

	@Override
	public List<String> searchFindTag(String findId) {
		// TODO Auto-generated method stub
		List<String> result = new ArrayList<String>();
		String tags = blogRepository.searchFindTag(findId);
		
		String[] lists =  tags.split("&");
		
		for(String str : lists) {
			result.add(str);
		}
		return result;
	}


	@Override
	public String searchImgTitle(String findId) {
		String result = blogRepository.selectImgTitle(findId);
		return result;
	}
}

/*
* blogRepository.class
**/

@Repository
public interface blogRepository extends JpaRepository<blogEntity, Integer> {
	
	@Query(value = "select imgTitle from blog where postId = :id", nativeQuery = true)
	String selectImgTitle(@Param("id") String findId);
	
	@Query(value = "select blogTag from blog where postId = :id", nativeQuery = true)
	String searchFindTag(@Param("id") String findId);
	
    
}

Tag의 경우 현재 &를 구분으로 나눴는데 이 부분은 조금 더 생각해볼 예정이다. 

&를 구분으로 나누기 때문에 코드에서는 split을 이용하여 분할하였다.

6.blogPost.jsp (부분)

<div class="row">
	<div class="col-lg-8 ftco-animate">
		<h2 class="mb-3 mt-5 font-weight-bold">${myPost.postMainTitle}</h2>
		<h3><p>${myPost.postSnTitle}</p></h3>
		<h5><p>${myPost.postSn}</p></h5>
		<p><img src="resources/images/${myPost.imgTitle}" alt="" width="400" height="400" ></p>
							
		<div class="tag-widget post-tag-container mb-5 mt-5">
			<div class="tagcloud">
				<c:forEach var="tags" items="${tag}">
					<a href="#" class="tag-cloud-link">${tags}</a>
				</c:forEach>
			</div>
		</div>
	</div>
</div>

받아온 값들을 넘겨주면 된다. 

link 부분에 href가 현재 #로 구성했는데 추후에 해당 테그별 페이지를 만들어볼 계획이다. 

마무리

이번주에 코딩을 하나도 못해서 기존에 수정한 사항이 없다는게 조금 아쉽다. 

그래도 틈틈히 추가해서 포트폴리오 포스팅에 다양한 살들을 붙여서 포스팅 해보도록 하겠습니다.