본문 바로가기

전체 글

 (78)
스프링부트 ~26 | 역시 js로 댓글수정기능 추가 (+모달 사용!) Intro 댓글 수정 페이지뷰를 만들고 (이번에도) javascript의 이벤트 처리를 통해 댓글을 수정해보자. ∨ 미리 생각해보기 : 댓글생성때는 rest api를 호출하기 위해 fetch() 기능을 사용했다. 수정도 rest api 요청을 보내는 건 마찬가지니까 똑같이 fetch(url, {보낼내용}).then(response => {응답후행동}) 이런 코드를 사용하지 않을까 싶다!! 이 rest api 호출부를 수정버튼.클릭리스너 블록 안에 넣는것이 아닐까요로리링~!? + 새롭게 해볼 것들! ∨ 부트스트랩5가 제공하는 Modal 사용 ∨ 이를 제어하는 js코드 사용 먼저 가볍게 수정버튼 넣고 시쟉 ~~! 더보기 수정..기능..추가...니까.. 댓글 옆에 수정버튼 넣어야겠지.. 그냥.. 저번에 작성한..
스프링부트 ~25 | 댓글 등록 뷰페이지 (javascript 이용!) Intro 지난번에 article의 상세페이지에서 해당 article과 (FK로)연결된 comment를 보여주는 뷰페이지를 작성했다. 이제 남겨둔 것은.. 새 댓글을 등록하는 뷰페이지 만들기!! 또한 이번에는 js를 이용하여 댓글 등록 기능을 구현할 것이다. + 새 댓글을 등록한다는 것은 즉 http의 post 요청을 보낸다는 것이다. + 지금까지는 새 데이터를 추가할 때 form태그로 요청을 전달했었다 과거에는 form태그를 통핸 http 요청이 일반적이었지만, 요즘은 js를 통해 요청하는 것을 선호한다. 이거 궁금했는데 드뎌 실습해본다! 뷰페이지에서 javascript를 통해 rest api를 호출하여 새 댓글을 추가해볼 것이닷!! 댓글작성폼 만들고 => 전송버튼 클릭하면 => rest api 요청이..
스프링부트 ~24 | 댓글목록 뷰페이지 만들기 => 게시글 상세페이지에서 확인 Intro 지난번에 댓글 기능을 추가했다. 댓글 DB에는 PK(primary key 즉 id), nickname, body 그리고 FK인 article_id가 저장되는 형태였다. 그리고 댓글 CRUD 요청을 받는 컨트롤러와 그것을 처리하는 서비스를 REST API 방식으로 구현완료했다. 이번에는 댓글 데이터를 가져와 적절히 보여주는 뷰페이지를 만들어 볼 것이다. 그리고 이 뷰페이지는 해당 게시글 상세페이지에서 하단에서 볼 수 있게 해보자. 상세페이지에 댓글 레이아웃 추가하기 article 상세페이지 하단에 comment가 보이게 할 것이다. 즉 상세페이지 레이아웃에 댓글레이아웃을 추가해주자. 구현해둔 ArticleController에 가보자. 상세페이지 url 요청이 들어왔을 때 보여줄 화면, 즉 뷰페이..
Dto와 Entity Dto : 클라이언트가 이용하는 데이터 형식 Entity : DB가 이용하는 데이터 형식 . . 지금까지 서비스층에서는 Entity를 이용하다가 컨트롤러측에게 넘겨줄 때는 Dto 형식으로 넘겨줬다. 또한 컨트롤러에서 json이든 뭐든 데이터를 받아올 때도 Dto형식으로 받아왔다. 서버 외부와 소통할 때는 Dto로 왔다갔다 하는 것을 권장한다고 한다. Entity와 Dto 파일을 열어봐도 차이를 느낄 수 있다. Dto는 그냥 데이터 담아두는 그릇같지만, Entity는 DB 데이터로 관리된다. (DB 테이블과 매칭됨) 그래서 @Entity, @Column, @Id 어노테이션이 사용된다. . . Dto와 Entity를 구분하면 유연한 데이터 관리가 가능하다. - 뷰 계층과 DB 계층의 역할을 뚜렷하게 분리한다..
스프링부트 ~23 | 댓글 CRUD를 위한 Controller & Service (+ 댓글 Rest API 완성하기) Intro 지난 시간 : Comment Entity를 추가했다! 그리고 Repository까지 준비해뒀다. 이번 시간 : Comment CRUD를 위한 Controller와 Service를 추가해보자. 이로써 REST api가 완성된다 >v CommentDto.createCommentDto(comment)) .collect(Collectors.toList()); } 참고) 위 stream 문법은 다음 for문과 동일한 기능을 한다. 참고해서 이해하자. 더보기 // 조회: 댓글 목록 List comments = commentRepository.findByArticleId(articleId); // 변환: 엔티티 -> DTO List dtos = new ArrayList(); for (int i = 0; i..
스프링부트 ~22 | 댓글 CRUD를 위한 Entity, Repository & Test 각 Article에는 Comment가 달리기 마련이다. 이 기능을 추가하기 위해서 Comment Entity와 Repository를 준비해보자. 이전에 Article Entity 작성했던 것을 떠올리면서, 어떤 데이터가 필요할지(:작성한대로 DB table이 생성됨)생각하며 Comment Entity를 구현하면 된다. 아래 내용들을 알고 들어가자 ∨ DB의 데이터는 id로 관리된다. - 데이터 자기 자신을 가리키는 id - 그리고 대상을 가리키는 id 이것이 즉 PK와 FK다. - PK : primary key - FK : foreign key ∨ 추가하려는 기능은 댓글 기능이다. 댓글과 게시글의 관계는? - 게시글 입장에서는 일대다 관계이고 @OneToMany - 댓글 입장에서는 다대일 관계이다 @Ma..
스프링부트 ~21 | 테스트코드 작성 관련 테스트 코드 작성 관련해서 슥슥 정리한다. 테스트 코드 작성은 현업에서 매우 중요하다고 익히 들어왔다. 더 익숙해지도록 자주 보고 실제 프로젝트 할 때 스스로 정성스럽게 작성해보자는 다짐을 하며.. 시 to the 쟉 ∨ 테스트 코드 작성 예상 시나리오대로 테스트 코드를 작성하여 결과를 검증한다. 성공 또는 실패 결과에 따라 코드를 수정하게 된다. * 다양한 상황에 맞춰 테스트 코드를 작성한다. 이것을 곧 테스트 케이스라고 한다. * 테스트케이스는 크게 성공과 실패로 나뉜다. 테스트 코드 성공 => 리팩터링하여 코드 개선 테스트 코드 실패 => 디버깅을 통해 코드 고치기 ∨ TDD 이전에 TDD에 대해 정리해뒀던 글이다 : 2022.07.14 - [web +a] - 테스트 주도 개발 (TDD) 테스트코드..
스프링부트 ~20 | 서비스 계층 추가 & 트랜잭션 처리 라섹 4일챠다~!! 넘 심심해서 눈에 무리 안가게 살포시 공부해봤다. Intro 지난시간 : Article을 CRUD하는 기능을 구현하는데, 특별히 REST api 구현 방식으로 구현했다. 요즘 백엔드 개발은 이러한 REST api 기반으로 개발한다 (∴일반 @Controller가 아닌 @RestController를 사용한다) 그러니까 잘 기억하며 공부하도록 하쟛~ 오늘 해볼 것 & 사전지식 server에 서비스계층을 새로 추가해 볼 것이다. ∨ 서비스 계층 : 컨트롤러와 리포지토리 사이에 있는 계층으로, 처리 업무의 순서를 총괄한다. : 일반적인 웹 서비스는 컨트롤러와 리포지토리 사이에 서비스 계층을 두어 역할을 나눈다. : 지금까지 실습한 건 하나의 컨트롤러 내에서 클라이언트 요청을 받고, 리포지토리..
다른 블로그

티스토리툴바