사이먼's 코딩노트

[앵커 이동 기능 추가]현재까지 구현된 SBB 프로그램에서 답변을 작성하거나 수정하면 자동으로 페이지 상단으로 스크롤이 이동해서 자신이 작성한 답변을 확인하려면 다시 스크롤을 내려서 확인해야 되는 문제점이 있다.해당 문제는 답변을 추천한 경우에도 발생하는데, 우리는 a태그를 활용하여 답변 등록, 수정, 추천 시 앵커 태그를 이용하여 원하는 위치로 이동시킬 수 있다.먼저 question_detaill.html 템플릿에서 아래와 같이 답변이 반복되는 구간에서 반복문이 들어간 div태그의 코드를 수정한다.앵커 태그의 id 속성은 반드시 유일한 값이어야 하므로 답변의 id값을 사용했다.앵커 태그의 id 속성이 유일하지 않고 중복된 값이 존재한다면 맨 처음 한 개를 제외한 나머지 앵커는 제대로 동작하지 않게된다...

[질문 추천 기능 구현하기]보통 SNS에서 마음에 드는 게시물이나 컨텐츠에 '좋아요'와 같은 표시를 남기기 마련이다.SBB 프로그램에도 '좋아요' 버튼을 통해 질문이나 답변을 본 다른 사용자들이 반응을 남길 수 있도록 추천 기능을 구현해봅시다.질문에서 추천 기능을 구현하려면 질문을 추천한 사용자가 DB에 저장될 수 있도록 관련된 속성을 Question 엔티티에 추가해야 한다.Question 엔티티에 추천인을 저장하기 위한 voters라는 이름의 속성을 추가해봅시다.@ManyToManySet voters = new LinkedHashSet();public void addVoter(SiteUser voter) { voters.add(voter);}@ManyToMany 어노테이션을 사용한 이유는 한 명의..

[답변 수정하기]답변을 작성한 다음 해당 글을 수정할 수 있어야한다.수정하는 기능을 추가하기 전, 답변이 언제 수정되었는 지 확인할 수 있도록 Answer.java 엔티티에 수정일시를 의미하는 modifyDate 속성을 하나 추가해봅시다.아래는 Answer.java 클래스에서 추가된 코드이다.private LocalDateTime modifyDate; [question_detail.html 템플릿 수정]사용자가 질문 상세 화면에서 답변 목록이 표시되는 부분에 '수정' 버튼을 클릭하면 답변을 수정할 수 있는 화면으로 진입할 수 있도록 아래와 같이 question_detail.html 템플릿에 버튼을 추가해봅시다. ..

[질문 수정하기]질문을 작성한 다음 해당 글을 수정할 수 있어야한다.수정하는 기능을 추가하기 전, 질문이 언제 수정되었는지 확인할 수 있도록 Question.java 엔티티에 수정일시를 의미하는 modifyDate 속성을 하나 추가해봅시다.아래는 Question.java 클래스에서 추가된 코드이다.private LocalDateTime modifyDate; [question_detail.html 템플릿 수정]사용자가 질문 상세 화면에서 '수정' 버튼을 클릭하면 수정할 수 있는 화면으로 진입할 수 있도록 아래와 같이 question_detail.html 템플릿에 버튼을 추가해봅시다. ..

[로그아웃 구현하기]로그인 기능까지 구현이 완료되어 로그인 화면을 통해 이미 가입되어 있는 사용자 ID와 비밀번호를 입력했을 때, 로그인이 정상적으로 수행되고 메인 화면인 localhost:8090/question/list 페이지로 이동하게 된다.하지만 로그인이 된 후에도 내비게이션 바에는 여전히 '로그인' 이라는 이름으로 링크가 표시되는 것을 확인할 수 있다.상식적으로 로그인한 상태라면 해당 링크는 '로그아웃' 링크로 바뀌는 것이 맞기 때문에 해당 기능을 추가해봅시다.먼저, 스프링 시큐리티의 타임리프 확장 기능을 사용하여 사용자의 로그인 상태를 확인해야 한다.아래는 navbar.html 템플릿에서 수정된 코드이다. 로그인 로그아웃 로그인, 로그아웃 버튼이 구현된 li > a 태그에서 추..

[로그인 구현하기]회원가입 기능을 구현하였다면, 이번에는 로그인 기능을 구현해봅시다.현재 DB에서 site_user라는 테이블에 회원 데이터가 저장되어 있고, 테이블에 저장된 ID와 비밀번호로 로그인을 진행한다.먼저 스프링 시큐리티가 적용된 SecurityConfig.java 클래스에 로그인을 위한 URL을 아래와 같이 설정한다.@BeanSecurityFilterChain filterChain(HttpSecurity http) throws Exception { http .authorizeHttpRequests( (authorizeHttpRequests) -> authorizeHttpRequests // 로그인 없..

[회원가입 구현하기]웹 프로그래밍의 꽃이기도 한 회원 가입 기능을 구현해봅시다.먼저 지금까지 구현된 코드의 패키징을 보면 질문을 관리하는 Question, 답변을 관리하는 Answer, 템플릿을 관리하는 templates, 스타일시트를 관리하는 static이 존재한다.회원 가입이나 뒤에 추가할 로그인/로그아웃을 구현하기 위해서는 회원과 관련된 데이터를 저장하고 관리하는 User 패키지를 새로 생성해야한다. [SiteUser 생성]가장 먼저 회원 정보와 관련된 데이터를 저장하는 엔티티가 필요하기 때문에 SiteUser.java 클래스를 하나 생성하여 아래와 같이 회원 엔티티를 작성한다.여기서 클래스 네임을 User.java가 아닌 SiteUser.java라 하는 이유는 스프링 시큐리티에 이미 User.ja..

[게시물 번호 정렬하기]현재 localhost:8090/question/list URL에 접속하게 되면 질문 데이터가 등록한 순서대로 표시가 된다.대부분의 게시판을 생각했을 때 최근에 작성한 게시물이 가장 위에 보이는 것이 일반적이기 때문에 해당 기능을 QuestionService.java 클래스에 코드를 수정하여 적용해봅시다.public Page getList(int page) { List sorts = new ArrayList(); sorts.add(Sort.Order.desc("createDate")); Pageable pageable = PageRequest.of(page, 10, Sort.by(sorts)); return this.questionRepository.findA..

[내비게이션 바 추가]지금까지 만든 SBB 프로그램은 질문 목록, 질문 상세 내용, 질문 등록, 답변 등록, 답변 목록 등 기능이 구현되어 있다.이제부터는 사용자가 해당 서비스를 좀 더 편리하게 사용할 수 있도록 다양한 기능을 구현해봅시다.먼저, 어떤 화면이 표출이되도 항상 메인 화면으로 돌아갈 수 있도록 내비게이션 바를 만들어 화면 상단에 고정해봅시다.내비게이션 바는 모든 화면 위쪽에 고정되어 있는 현재 적용된 부트스트랩의 컴포넌트 중 하나이다.모든 화면에 적용되어야 하기 때문에 공통 템플릿인 layout.html에 코드를 추가하는 것이 좋다.아래는 layout.html에 추가된 내비게이션 바 코드이다. 해당 코드는 부트스트랩에서 제공하는 html 코드를 그대로 참조하여 사용하였다. ..

[유효성 체크 및 에러 처리]질문 등록 시 제목이나 내용을 입력하지 않고 질문이 등록되는것을 방지하고자 폼 클래스를 통해 유효성 체크하는 기능을 추가하고 로컬 서버를 재실행하면 에러 메시지가 붉은 색으로 표시되는 것을 확인할 수 있다.하지만 여기서 한 가지 문제를 발견했다.예를 들어 제목을 입력하고 내용을 비워둔 채로 '저장하기' 버튼을 클릭하면 에러 메시지가 표시되면서 이미 입력했던 제목 텍스트가 사라진다는 점이다.이번에는 입력한 제목이나 내용의 텍스트가 남아있도록 에러 처리를 해봅시다.해당 에러를 처리하기 위해 아래는 question_form.html 템플릿에서 코드를 수정한 모습이다. 질문등록 제목 ..