사이먼's 코딩노트

[질문 수정하기]질문을 작성한 다음 해당 글을 수정할 수 있어야한다.수정하는 기능을 추가하기 전, 질문이 언제 수정되었는지 확인할 수 있도록 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 템플릿에서 코드를 수정한 모습이다. 질문등록 제목 ..

[Question 등록]현재까지 제작된 SBB 프로그램의 기능은 전체 질문 리스트 조회(question/list), 질문 상세 내용보기(question/detail/{id}), 답변 등록(answer/create{id}) 및 보기가 포함되어 있다.이번에는 질문을 등록하는 버튼을 추가하고, 질문을 등록할 수 있는 화면 페이지를 만들어봅시다.아래는 Question 등록을 위해 question_list.html에서 버튼 코드를 추가한 모습이다.질문 등록하기기본 layout.html 템플릿이 상속된 html 태그 안에서 가장 하단에 위와 같은 코드를 추가한다.해당 버튼 역시 부트스트랩 클래스가 적용되어 있기 때문에 버튼에 디자인이 적용되어 있다.화면에 나타난 '질문 등록하기' 버튼을 지금 상태에서 클릭하게 된다..

[Bootstrop 및 폰트 적용]기본 스타일시트를 생성하였다면, 보다 아름다운 디자인을 위해 부트스트랩을 도입해봅시다.부트스트랩(Bootstrap)이란 프론트엔드 프레임워크로 웹 페이지를 쉽게 디자인할 수 있게 도와주고, 전에 포스팅을 했던 테일즈윈드 데이지UI와 같이 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 곳이다.부트스트랩은 트위터를 개발하면서 만들어졌으며, 현재 지속적으로 관리되고 있는 오픈소스 프로젝트로, 웹 디자이너의 도움 없이도 개발자 혼자서 상당히 괜찮은 수준의 웹 페이지를 만들 수 있게 도와준다는 것이 가장 큰 장점이다.직접 설치해서 부트스트랩을 적용하는 방법도 있지만, cdnjs에서 부트스트랩 링크를 복사하여 코드에 직접 추가하여 부트스트랩..

[Answer 저장 및 출력]답변을 저장하는 기능을 추가하기 위해 AnswerService.java 를 도입해봅시다.먼저 AnswerController.java 클래스에서 question_detail.html 템플릿을 통해 작성된 textarea의 content를 서비스로 보내주는 코드를 작성해야 한다.아래는 AnswerController.java 클래스에 추가 작성된 코드이다.package com.sbs.sbb.Answer;import com.sbs.sbb.Question.Question;import com.sbs.sbb.Question.QuestionRepository;import com.sbs.sbb.Question.QuestionService;import lombok.RequiredArgsCons..