728x90 반응형 웹개발/SpringBoot33 파일 업로드 구현하기 게시물 작성시 파일을 업로드할 수 있게 하고, 게시물 조회시 업로드한 파일을 보고, 다운로드받을 수 있도록 해보자. 1. 파일 업로드 화면 만들기 ... Upload save 게시물 작성 화면에 파일 업로드 input을 생성한다. ``` 2023. 7. 27. 네이버 검색 API를 이용하기 외부 API를 이용해보는 경험을 쌓고자 백과사전 검색기능을 프로젝트에 추가해보기로 했다. 네이버 검색(백과사전) API를 이용해서, 검색어를 입력하면 검색결과를 보여주도록 만들어보자. 사전 준비 https://developers.naver.com/docs/serviceapi/search/blog/blog.md#%EB%B8%94%EB%A1%9C%EA%B7%B8 검색 > 블로그 - Search API 검색 > 블로그 블로그 검색 개요 개요 검색 API와 블로그 검색 개요 검색 API는 네이버 검색 결과를 뉴스, 백과사전, 블로그, 쇼핑, 영화, 웹 문서, 전문정보, 지식iN, 책, 카페글 등 분야별로 볼 수 developers.naver.com 위 링크로 접속해서, API 이용방법을 숙지. (로그인 후 이용.. 2023. 7. 26. 검색 기능 적용하기 게시물을 제목으로 검색할 수 있는 기능을 만들어본다. (페이징 적용) 검색 기능 적용하기 1. Repository public interface ArticleRepository extends JpaRepository { ... Page findByTitleContaining(String keyword,Pageable pageable); } JpaRepository를 상속받는 레파지토리 인터페이스에, findBy{필드명}Containing({타입} 검색어) 형식으로 메소드를 작성한다. 나는 Article엔티티에 String타입의 title이 있고, 이 title을 이용해서 검색할것이기 때문에 findByTitleContaining(String keyword) 로 작성했다. 그럼, title필드에 keywo.. 2023. 7. 26. 페이징 기능 적용하기 예전에 혼자 만들던 프로젝트에 페이징기능과 검색기능을 추가해보기로 했다. (1로 표시해놓은 페이지 전환버튼까지 적용함. 2번은 게시물 검색기능인데 이건 다음 글에서...) 페이징 1. Repository public interface ArticleRepository extends JpaRepository { ... Page findAll(Pageable pageable); } JpaRepository를 상속받는 레파지토리 인터페이스에서, 메소드 파라미터로 Pageable을 넣으면 Page로 엔티티를 반환받을 수 있다. Pageable은 SpringDataJPA에서 제공하는 인터페이스로, 페이지 번호, 페이지 크기, 정렬 기준 등의 정보를 가지고 있다. Page는 SpringDataJPA에서 제공하는 인터.. 2023. 7. 26. swagger 작성해보기, Springboot swagger 연동하기 Swagger는 API명세 문서를 작성하는데 도움을 주는 도구이다. https://app.swaggerhub.com/home Build, Collaborate & Integrate APIs | SwaggerHub app.swaggerhub.com 여기서 회원가입 후, create버튼을 눌러 새 문서를 작성할 수 있다. 템플릿 없이 문서를 생성하면 이런 기본 창이 뜬다. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Servi.. 2023. 7. 5. MySQL 설치 및 Spring 연동 방법 https://downloads.mysql.com/archives/installer/ MySQL :: Download MySQL Installer (Archived Versions) Please note that these are old versions. New releases will have recent bug fixes and features! To download the latest release of MySQL Installer, please visit MySQL Downloads. MySQL open source software is provided under the GPL License. downloads.mysql.com 위 링크에서 mySQL 8.0.32버전을 다운받습니다. 설치과정에서 .. 2023. 6. 9. 로그인 여부에 따라 바뀌는 로그인/로그아웃 버튼 만들기 로그인 상태에서는 로그아웃 버튼이 나오고(우측상단) 로그아웃 상태에서는 로그인 버튼이 나오도록 만들어보자. 식물친구들 Home My Plant Forum SignUp logout login 네비게이션 바는 부트스트랩에서 마음에 드는걸 하나 골라왔다. 나는 제일 우측에 로그인 버튼과 로그아웃 버튼을 만들었다. 이제, 로그인상황과 로그아웃 상황을 판단해서 두 버튼이 적절하게 나오도록 해야한다. 1. 서버측에서 로그인 여부를 판단해서 정보를 보내주는 api가 필요하다. 2. 그 api에 데이터를 요청해서 받아온 후 3. 로그인여부에 따라 다르게 나오도록 자바스크립트를 작성하면 된다. 1. 사용자 인증상태를 확인하는 API 작성 @GetMapping("/currentUser") @ResponseBody publ.. 2023. 5. 27. @RequestBody를 적어야 됐던 일 회원가입할 때 중복유저가 있는 경우에는 에러메세지를 띄워 사용자가 봤으면 좋겠다는 생각을 했다. 우선 chatGPT한테 html과 JS 코드를 작성해달라고 했다. {{>layouts/header}} 회원가입 userId userPassword nickName save {{>layouts/footer}} 스크립트태그 안에서 fetch를 이용하여 post요청을 하도록 되어있다. 그럼 이제 컨트롤러에서 PostMapping해주면 되겠네. 하고 만들었는데? @PostMapping("/signUp") public String signUp(UserDto userDto){ userService.addUser(userDto); return "redirect:/"; } (대략 이렇게 작성함) 뭐가..데이터가 비어있어서 .. 2023. 5. 18. [JPA] 엔티티 수정시 Dirty checking(변경 감지), Merge(병합) JPA에서 엔티티 수정 시 사용되는 방식은 두 가지가 있다. Dirty checking(변경 감지) Merge(병합) Dirty checking : 영속성 컨텍스트에서 관리되는 엔티티의 변경 사항을 추적하고, 트랜잭션 커밋 시점에 변경 사항이 있는 엔티티를 데이터베이스에 반영하는 방식이다. Merge 방식 :준영속 상태인 엔티티를 다시 영속 상태로 변경하면서 모든 속성을 변경하고 데이터베이스에 반영한다. 우선, 물품의 정보를 수정하는 과정을 보자. 1. 수정 버튼을 누르면, 상품 수정 폼을 보여주는 페이지로 이동 더보기 상품 목록 페이지에 수정 버튼이 있고, 수정 버튼을 누르면 "/items/{id}/edit"으로 이동한다고 하자. 그럼 해당 url로의 get요청을 처리하는 코드가 필요하겠다. @GetM.. 2023. 5. 7. JPA, Spring Data JPA JPA(Java Persistence API)는 객체와 관계형 데이터베이스를 매핑할 때 사용하는 ORM(Object-Relational Mapping)프레임워크이다. JDBC는 자바에서 데이터베이스에 접근하기 위한 API로, 개발자가 SQL쿼리를 직접 작성하여 데이터베이스와 통신한다. JDBC는 개발자가 SQL을 직접 작성하여 데이터베이스와 통신하기 때문에, 데이터베이스 연동 작업을 상세하게 제어할 수 있지만, JDBC를 사용하면 개발자가 매번 SQL을 작성해야 하며, 이로 인해 반복적인 작업이 많아지고 오류 발생 가능성이 높아지기도 한다. 반면, JPA는 엔티티 클래스를 사용하여 데이터베이스의 테이블과 객체간의 매핑을 자동으로 처리한다. 이를 통해 개발자는 객체 지향 프로그래밍 방식으로 데이터베이스와 .. 2023. 3. 21. 의존성 주입(DI), 스프링 빈과 의존관계 의존성 주입(DI)을 간단히 말하면, 클래스에서 필요로 하는 의존성을 직접 생성하지 않고, 외부에서 주입받는 방식이다. 이를 통해 클래스 간의 결합도를 낮추어 유연성을 높일 수 있다. 예를들어, A클래스가 B클래스를 의존한다면, A클래스에서 B클래스의 객체를 생성하고 사용하는것이 아니라, 외부에서 B클래스의 객체를 생성하여 주입하는 방식을 사용하는 것이다. public class UserService { private final UserRepository userRepository = new UserRepositoryImpl(); public void addUser(User user) { userRepository.save(user); } } 예를들어, UserService클래스는 UserReposito.. 2023. 3. 19. 빌드하고 실행하기 ./gradlew build cd build/libs java -jar hello-spring-0.0.1-SNAPSHOT.jar 콘솔에서 작업파일로 이동한다. 나는 hello-spring의 hello-spring디렉토리로 이동했다. 그리고 ./gradlew build 명령어를 입력하면 빌드가 시작된다. 빌드가 끝났다면 build디렉토리로 이동해보자. 안에 libs 디렉토리가 있는데 libs 디렉토리로 이동해보면, 내부에 jar파일이 생긴것을 볼 수 있다. 이 파일을 자바로 실행시키면.. 서버가 실행된다. 서버 배포할 때 이 파일 하나만 넣고 실행시키면 된다. 2023. 3. 18. ObjectMapper ObjectMapper를 알아보자.. restAPI를 이용할 때, 클라이언트가 보낸 JSON데이터는 자동으로 DTO로 변환되고, 서버에서 클라이언트로 데이터를 보낼때에도 DTO에서 JSON으로 자동으로 변환되었다. 어떻게 변환되는 것인지.. 그 동작을 살펴보자 @Test public void 자바_객체를_JSON으로_변환() throws JsonProcessingException { //준비 List ingredients = Arrays.asList("shrimp","beef","bread","tomato"); Burger burger = new Burger("burger",5500,ingredients); ObjectMapper objectMapper = new ObjectMapper(); //수행. .. 2023. 3. 14. AOP(Aspect Oriented Programming) 스프링 부트 AOP (Aspect-Oriented Programming)는 스프링 프레임워크에서 제공하는 기능으로, 비즈니스 로직과 같은 핵심 기능과 로깅, 보안, 트랜잭션 처리와 같은 부가 기능을 분리하여 개발할 수 있도록 지원합니다. 예를 들어, @Transactional //DB를 건들기때문에, 중간에 문제가 생기면 롤백되도록 트랜잭션으로 설정 public CommentDto create(Long articleId, CommentDto dto) { // log.info("input => {}",articleId); // log.info("input => {}",dto); //게시글조회 및 예외발생 Article article = articleRepository.findById(articleId) ... 2023. 3. 14. 댓글 수정, 삭제기능 추가하기 (API 호출, fetch) 수정기능 {{#commentsDtos}} {{nickname}} edit delete {{body}} {{/commentsDtos}} 수정버튼을 누르면 모달창이 뜨도록, 모달 트리거 버튼을 추가해준다. 안에 data-bs가 무더기로 있는것은.. 모달 트리거 버튼을 눌렀을 때 나오는 모달창으로 데이터를 전달하기 위함이다. Modal title nickname comment {{#article}} {{/article}} save 모달 코드도 추가해준다. 이 코드들은 부트스트랩에 있다.. let commentEditModal = document.querySelector("#comment-edit-modal"); commentEditModal.addEventListener('show.bs.modal',funct.. 2023. 3. 14. 자바스크립트 fetch로 REST API 호출하기 (댓글등록) 댓글 폼에 댓글내용을 작성하고 전송버튼을 클릭. 해당 버튼의 이벤트리스너를 추가해 클릭을 감지하고 클릭시에 fetch를 통해 RestAPI를 호출해보자.. nickname comment {{#article}} {{/article}} save 뷰페이지에는 새 댓글의 정보를 입력할 폼이 있다. nickname, body를 입력할 란이 있고, 각 란은 id값을 지정해놓았다. 또한, 현재 글의 article_id 정보를 함께 전달하기 위해 hidden타입의 input에 article_id값을 넣어두었다. addEventListner를 이용해 전송버튼의 클릭을 감지하고, 폼에 입력된 정보를 이용해 JS 객체 comment를 생성한다. 그리고 fetch메소드를 이용하여 RestAPI를 호출하는데, fetch() 메.. 2023. 3. 13. 댓글 REST API 완성하기 Comment의 controller와 service를 만들어 REST API를 완성해보자. @RestController public class CommentApiController { @Autowired private CommentService commentService; //댓글 목록 조회 @GetMapping("/api/articles/{articleId}/comments") public ResponseEntity comments(@PathVariable Long articleId){ List dtos = commentService.comments(articleId); return ResponseEntity.status(HttpStatus.OK).body(dtos); } //댓글 생성 @PostMap.. 2023. 3. 13. Comment 엔티티와 리파지터리 만들기 Article과 Comment 관계는 일대다 관계(One-to-many)이다. (하나의 글에 여러개의 댓글이 있으니) 이러한 데이터는 DB에 어떻게 저장될까? 댓글의 경우, [자신의 id/댓글내용/닉네임/글id] 등으로 저장될 것이다. 이 때, 글id를 저장함으로써 어떤 글의 댓글인지 알 수 있다. 데이터 자신을 대표하는 id는 PK(Primary Key)라고하고, 대상을 가리키는 id는 FK(foreign key)라고 한다. 여기서는 자신의id가 PK, 글 id가 FK가 되는것이다. 댓글을 위한 리파지터리는 JpaRepository를 상속받아 사용할건데, 기존에 ArticleRepository를 위해 상속받았던 CrudRepository에 추가적으로 일정 페이지의 데이터 조회, 정렬 등의 기능을 쓸 수.. 2023. 3. 11. 테스트코드 작성하기 테스트코드 작성하기 Service의 메소드들을 테스트해보자 Service에 들어가서 우클릭->generate->Test를 누르면 이러한 창이 뜨는데, 테스트할 메소드들을 아래에서 체크해 OK를 누르면 된다. 그럼 이렇게 해당 메소드의 테스트메소드가 생긴다. 이 메소드들을 감싸고있는 부모클래스 ServiceTest클래스에 @SpringBootTest 어노테이션을 붙여, 스프링부트와 연동되게 한다. 그리고 테스트가 아닌, 실제 service도 사용해야하기 때문에 ArticleService(내가만든 서비스)를 선언하고 Autowired 해주었다. @Test void index() { //예상 시나리오 Article a = new Article(1L,"gagaa","111content"); Article b =.. 2023. 3. 11. Service와 Transaction 서비스는 Controller와 Repository 사이에서 동작한다. 서비스를 추가함으로써 -컨트롤러는 클라이언트로부터 요청을 받고 응답처리만 하고, -서비스는 컨트롤러로부터 전달받은 요청을 처리한다. -필요한 데이터는 리파지토리를 이용해 가져올 수 있다. 서비스는 비즈니스 로직을 처리하고, 처리결과를 컨트롤러로 보낸다. @Service 어노테이션을 붙여 사용할 수 있다. Post요청을 처리하는 과정을 예시로 적어보았다. 1. 컨트롤러에서 Post요청을 받고, 서비스 create(data)를 호출 2. 서비스는 적절하게 데이터를 가공하고 요청에 맞는 비즈니스 로직을 처리함. DB접근이 필요하다면 리파지토리를 호출 3. 리파지토리는 DB에서 데이터를 빼거나 저장하는 역할을 수행 4. 서비스에서 처리결과를 .. 2023. 3. 11. 이전 1 2 다음 728x90 반응형
