jhhan의 블로그

이번 포스트는 이전에 다뤘던 SOLID원칙을 이용해서 진행할 것입니다. 특히 DIP와 OCP를 지켜볼려고 노력하면서 진행합니다. 자바를 사용해서 코드를 진행합니다. 하지만 프로젝트 설정은 스프링으로 시작합니다. 처음에는 자바로 코딩을 하다가 나중에 스프링으로 넘어가기 위해서입니다. 지금은 자바 쪽에 넣어놨지만, 나중에는 스프링으로 옮겨서 글을 이어서 쓸 것 입니다. 그래서 처음 설정은 스프링으로 시작합니다.. 스프링을 설정을 하기 위해 다음의 사이트로 들어갑니다. start.spring.io 여기로 들어가면 스프링 설정을 할 수 있습니다. 혹은 인텔리제이 얼티메이트 버전을 사용한다면 여기에 들어가지 않고 스프링 프로젝트를 바로 만드실 수 있습니다. 사이트에 들어가시면 왼쪽 위쪽에 이런 것들이 보입니다. ..

이번 포스트에서는 웹 기능에 대해 적겠습니다. 사실 저도 많이 알고 있는 부분이기도 해서 자세히 적지는 않겠습니다. 그냥 한번 다시 생각해보자는 차원에서 쓰겠습니다. (이 포스트로 끝낼 거여서 내용이 길거 같습니다.) 프로젝트 구조입니다. 뭔가 좀 추가되었습니다. 일단 먼저 HomeController를 추가해봅니다. @Controller public class HomeController { @GetMapping("/") public String home() { return "home"; } } 너무 간단하군요 ㅎㅎ 어쨌든 이렇게 적고 이제 home.html파일을 만듭니다. (만든 위치는 프로젝트 구조에 나와있으니 거기다 만들어주세요) Hello Spring 회원 기능 회원 가입 회원 목록 정말 간단한 화..

오랜만에 글을 씁니다. 이번에는 스프링에 대해서 글을 써볼 건데요 다시 초심으로 돌아가자 라는 마음가짐으로 조금 기초적인 내용을 적어보겠습니다. 일단 스프링 프로젝트를 하나 제작합니다. (프로젝트 생성은 간단하니 건너뛰겠습니다.) 아 생성할 때 Spring Web과 thymeleaf를 포함해서 생성해주셔야 합니다. 아마 다음과 같은 프로젝트 형태가 구성되었을 것입니다. (maven 인지 gradle 인지 중요하지 않습니다.) 먼저 /resources/static 아래에 index.html 파일을 생성합니다. 그리고 다음과 같이 작성합니다. Hello hello 그리고 실행을 하면 다음과 같은 화면을 얻을 수 있습니다. localhost:8080을 주소창에 입력하면 다음과 같은 화면을 바로 얻을 수 있는데..

Spring과 Vue.js를 연결해보는 예제에 대해 해보겠씁니다. 이전에 제가 backend를 Spring으로 하고 front를 Vue.js로 해서 둘을 연동하는 법을 진행했습니다. 이번에는 다른 방식으로 둘을 연동해보겠습니다. 경우에 따라서는 이 방법이 더 편하게 느낄 수도 있을 것입니다. 이번에는 back과 front 프로젝트를 따로 만들 것 입니다. 먼저 back을 만들겠습니다. 1. Back Spring 프로젝트를 만듭니다. 프로젝트의 이름을 설정합니다. Maven과 Gradle 둘 중 어느 것을 선택할 지는 원하시는 쪽을 하시면 됩니다. 간단한 연동만 할 것이니 저기 2개만 선택합니다. 원하시는 것을 더 추가하셔도 됩니다. 마지막으로 프로젝트 위치를 설정하시고 back 설정을 잠시 멈춰두겠습니다..

이번에도 간단하게 적어보려고 합니다. 저는 이전에 Report System과 관련해서 Spring 글을 몇번 올렸었는데 어느 시점 이후부터는 올리지 않았습니다. 그래도 코딩을 계속 진행했고, 현재는 간단한 리포트를 올리고, 수정하거나 삭제할 수 있게 했습니다. 참고로 thymeleaf를 사용해서 진행합니다. 수정할 때 textarea 부분에는 text가 올라오지 않아서 고민일 때가 있었습니다. 이건 제가 기존에 계속해서 작성했던 부분입니다. Done Achievement Comment 이 코드는 리포트 수정하는 코드의 일부분이고 이 부분이 화면에 나타나면 이런 식으로 textarea에는 기존에 썼던 글이 보이지 않는 점이 있었습니다. 그래서 아예 th:value 부분을 삭제해서 안 나타나게 하는 방식으로..

스프링-뷰 연동 2번째 포스트 입니다. 별로 적을 것이 없다고 생각해서 뭘 적을까 생각하다가 스프링과 뷰 사이의 통신을 어떻게 해야하는지에 대해 간략하게 적어보려고 합니다. 뷰에서 통신은 axios를 사용해서 합니다. 이를 응용해서 axios를 통해 spring으로 데이터를 보낸 후 다시 뷰로 받는 방식에 대해 써보겠습니다. 먼저 axios를 사용하기 위해 다음과 같은 작업을 합니다. 터미널에 'vue add axios'를 입력하시면 자동으로 axios가 추가됩니다. 이제부터는 axios를 사용하실 수 있습니다. 먼저 프론트부터 보겠습니다. Click {{a}} 이렇게 간단한 코드가 있습니다. 1이나 2 혹은 그 외의 것을 입력하는 경우에 따라 다르게 나타나도록 할 것입니다. methods 부분에서 ax..

이번에는 Spring과 Vue.js를 연동해보겠습니다. 그러면 Spring은 Backend가 되고, Vue.js는 frontend가 되게 됩니다. 프로젝트를 만드는 방법은 다양하지만, 저는 스프링 프로젝트를 먼저 만든 후 Vue-cli를 적용할 것입니다. 먼저 스프링 프로젝트를 만듭니다. 저는 다음과 같은 Dependency를 포함해서 넣었습니다. 넣고 싶은 것을 넣으면 됩니다. (여기서 일단 스프링 세큐리티는 제외하시기를 권장합니다.) 그럼 다음과 같은 프로젝트 구조를 보실 수 있으실 겁니다. 그리고 실행을 한다면 실행이 안됩니다. MariaDB 설정을 안하셔서 그렇습니다. 저는 마리아DB로 했지만, 다른 dB를 원한다면 그것을 하시면 됩니다. 먼저 pom.xml 파일로 가서 다음을 추가합니다. org..

원래 이번편까지 (1)에 할려고 했는데 길어질 것 같아서 이렇게 나눠서 진행합니다. 저번 편을 보셨다면 프로젝트 생성은 완료되셨을 것입니다. 이제 직접적으로 로그인을 해보겠습니다. 우선 프로젝트 파일 중에서 pom.xml을 찾아서 다음과 같이 추가합니다. dependency를 추가하는 부분인데 없는 것만 추가하시면 됩니다. 그런 다음 src/main/java/com.example.설정한이름 파일 밑에 SecurityConfig라는 클래스를 하나 생성합니다. (SecurityConfig말고 다른 이름을 하셔도 됩니다.) 그리고 다음과 같이 SecurityConfig클래스를 작성합니다. antMatchers("/adminOnly").hasAuthority("ROLE_ADMIN") : /adminOnly라는 ..