Spring Framework 개발 일지 (23) 썸네일형 리스트형 [Spring Boot와 React 연동하기-1] 소개 이번에 새로운 포스팅을 하게되었습니다. Spring의 사용방법을 익히고 표준적인 프로젝트를 완성하고 나서 모던한 웹애플리케이션을 구현하고 싶다는 생각이 들었습니다.모던한 웹애플리케이션이라면 SPA(Single Page Application)이 딱 떠올라서 우선 JQuery와 Spring으로 SPA 블로그를 구현했었어요.구현하는 것은 간단했지만 뒤로가기, 새로고침과 같은 기능을 구현하기 까다롭더군요.그리고 코드가 너무 너저분해지는 문제가 있었고요. 그래서 React나 Angular를 사용해야겠다는 생각이 들어서 공식 튜토리얼을 따라서 해보았죠.여태 Java 개발자 치고는 javascript에 자신이 있었는데..잘못생각했었다는 것을 꺠달았습니다.그래서 javascript부터 다시 공부하고 그나마 쉬웠던 Re.. [Spring과 React 연동-0] Spring boot와 React 연동을 위한 사전지식 & 자료 https://spring.io/guides/tutorials/react-and-spring-data-rest/ 스프링을 공부하는데 있어서 공식 사이트는 필수이다. 이 Tutorial의 문제점은 node.js나 npm, webpack 설정에 대해서 생략하고 있다는 점. https://github.com/eirslett/frontend-maven-plugin maven을 이용하여 node.js 개발환경을 구축할 수 있다. yarn과 npm을 해당 프로젝트에 설치할 수 있는 모듈 위 두 가이드만 보고 하다가 막혔다. React.js에 대해서는 기초적인 학습을 했지만 개발환경을 설정을 해본적이 없으니 어떻게 연동할지 감이 전혀 잡히지 않았다. 그래서 npm, webpack에 대해서 공부해야겠다는 생각이 들었다.. FirstSpringBoard#6-5] 검색 기능결과 화면 페이징 처리 안녕하세요.그간 바빠서 포스팅을 못하고 있었네요.javascript에 흥미를 느껴서 node.js랑 express, jquery에 빠져있느라 스프링에 너무 소홀했습니다.저번 시간에 MySQL에서 제공하는 limit()를 이용해서 페이징 처리를 구현해보았습니다.그 덕분에 컨트롤러의 로직이 대폭 줄어들었습니다.DB에 가는 부담도 줄었고요.하지만 검색 결과에 대해서 페이징 처리가 반영이 안됐었는데요.이번 시간에는 검색결과 화면도 페이징 처리를 해보겠습니다. 검색 결과에 대해서 페이징 처리를 하기위해서는 검색결과에 대한 페이지 개수를 구해줘야합니다.그러나 현재 Controller에서는 검색 유무와 관계없이 전체 게시물에 대한 페이지 개수를 가져옵니다.boardService.getTotalCount(); 메소드에.. FirstSpringBoard#00] git와 github를 이용해서 실습 코드 조회하기 안녕하세요.실습을 따라하면서 막히는 부분이 많을 거라고 생각합니다.아무래도 블로그의 코드를 보면서 하면 내가 맞게하고 있는지도 의심스러울거고 오타가 날 수도 있는거니깐요.저는 실습을 하면서 git를 이용해서 버전관리를 합니다.주요 기능들이 추가되면 커밋해서 변경이력을 남겨요.제 github에 올린 소스를 이용하는 것도 학습에 큰 도움이 될겁니다.git을 이용해서 프로젝트의 변경 이력을 조회하는 방법을 알아봅시다. git는 DVN으로 분산 버전 관리 시스템의 약자입니다.git에서 파일을 저장하는 repository는 두개입니다. 내 컴퓨터에 저장하는 local repository와 원격저장소에 저장하는 remote repository에요.github는 원격저장소라고 할 수 있습니다.우선 제 github로 .. FirstSpringBoard#6-4] mysql limit 기능을 이용한 페이징 우리는 지난시간 Controller에서 페이징 처리를 했었습니다.편의상 Controller에서 페이징을 했었는데. 이로 인해 생기는 문제점은 무엇일까요?우선 모든 게시글의 목록을 불러오는 문제가 있습니다.지금이야 게시글이 별로 안되지만 점점 게시물이 많아 진다면 DBMS에 부하가 엄청 생기겠죠.모든 사용자가 게시판에서 페이지를 이동할 때 마다 DB에서 모든 게시물 목록을 가져오기 때문이죠.그리고 마지막 페이지에 대한 분기처리와 같이 코드가 길어진다는 단점이 있습니다.이런 문제점을 해결하기 위해서 mysql에서 제공하는 limit 기능을 이용해서 페이징 처리를 해볼게요. 우선 Mapper.xml을 수정해야합니다.getSearchWriterAndContent를 아래와 같이 수정해주세요.order by 뒤에 .. FirstSpringBoard#6-3] 마지막 페이지에 대한 페이징 처리 안녕하세요.요 며칠은 의욕이 너무 안나서 드라마 정주행하고 공부는 간간히 하면서 지냈습니다.포스팅은 꿈도 못 꿨고요.전에 개발 했던 것을 git 커밋 로그를 보면서 따라가면서 포스팅하는거라 지루한 감도 있습니다.그래도 화이팅해야죠. 저번 시간에 우리가 페이징 처리와 검색 기능을 구현했었습니다.그런데 페이징 처리가 불 완전한데요.마지막 페이지가 제대로 조회되지 않으실겁니다. 그 이유는 마지막 페이지의 특징 때문인데요.마지막 페이지 이전의 모든 게시물들은 게시글을 무조건 정해진 갯수만큼 보여줍니다.그런데 마지막 페이지가 보여주는 게시글을 게시글의 전체 수에 따라서 달라져요. 전체 게시글이 12개이고 한 페이지당 3개씩 보여준다면 마지막 페이지에서도 3개를 보여주니 에러가 나지 않겠죠.그런데 전체 게시글이 1.. FirstSpringBoard#6-2] 검색 기능 비즈니스 로직 구현 안녕하세요. 저번 시간에는 페이징 처리를 했었죠.아마 완벽하게 되지 않아서 찝찝하게 느껴지시는 분들도 계실거에요.제가 프로젝트를하면서 느끼는 것은 한번에 완벽하게 되는 것 없다는 거에요.일단 기능을 구현하고 문제점을 찾아서 고치는 사이클이 이상적인거 같아요.누구도 한번에 이상적인 기능을 구현할 수는 없어요. 시행착오가 있을 뿐이죠.한번에 완성된 기능을 딱 보여주는게 아닌 문제점을 발견하고 고치는 과정을 거쳐야 실력이 업그레이드됩니다. 단순한 코더나 타이퍼? 타이피스트가 될 수는 없잖아요. 우리는 개발자가 되어야합니다. 검색 기능에 대해서 생각해봅시다.우선 우리는 작성자와 내용에 대한 검색 기능을 구현할 거에요.아래는 검색기능에 해당하는 HTML 태그입니다.구현된 화면도 같이 보시죠. 셀렉트 박스에서 검색.. FirstSpringBoard#6-1] 페이징 기능 구현하기 안녕하세요. 저번 챕터에서는 간단한 CRUD 기능을 구현했었죠.오늘 추가할 기능은 페이징 기능입니다.우리가 전체 게시글을 조회할 때 모든 게시물을 하나의 화면에 보여주었습니다.이렇게 할 경우 개발하는 우리 입장에서는 아주 편합니다.그러나 사용자 입장에서 가독성은 아주 떨어지죠.웹 애플리케이션에서 페이징 처리는 필수입니다. 우선 저희는 Controller에서 페이징을 처리해 줄 겁니다.일단 구현해 보고 문제점을 찾아야죠. 리팩토링해서 더 효율적인 방향으로 고쳐볼게요. 페이징 처리를 하는데 있어서 고려해야할 사항은 무엇이 있을까요.우선 게시판에서 페이지라는 것이 어떤 기능을 하는지 생각해봅시다.게시판에서 페이지는 게시글을 정해진 숫자로 나눠서 보여주는 기능입니다.그리고 페이지 번호를 클릭하면 해당하는 페이지.. 이전 1 2 3 다음
