$$config title: [실습]? 점프 투 스프링부트 keywords: - IT - 스프링부트 $$ # 개요 - 본 프로젝트는 **점프 투 스프링부트** 인터넷서적의 커리큘럼을 토대로 구현했습니다. [점프 투 스프링부트 주소 - https://wikidocs.net/book/7601](https://wikidocs.net/book/7601) - 차이점 개발툴 : 책, STS => IntelliJ DBMS : 책, H2 => MariaDB 자바버전 : 책, 11 => 17 - 점프투스프링부트를 인텔리제이와 MariaDB 기반으로 진행하는 법 [참고 - 환경설정 https://slog.gg/p/5297](https://slog.gg/p/5297) [https://start.spring.io/](https://start.spring.io/) - 스프링부트에서 프로젝트에 적합한 설정과 의존성을 추가하고 저장한다. - 이후, 인텔리제이에서 프로젝트 오픈 # 프로젝트 세팅 [GIT 주소](https://github.com/donhyuck/SBB) ## 기본설정 - Gradle project, java Language, Spring boot 2.6.6버전, Packaging Jar, Java 17 - Spring Web, Spring Boot DevTools, Lombok - [블로그 - Intellij - error: invalid source release: 17 오류](https://binux.tistory.com/92) ## 추가설정 - DB생성, DB명 : sbb [LiveReload++ 다운로드](https://chrome.google.com/webstore/detail/livereload%2B%2B/ciehpookapcdlakedibajeccomagbfab/related) # JPA - 본 프로젝트는 질문과 답변을 다룬다. 데이터가 생겨나고 이 데이터를 저장, 조회, 수정, 삭제 등의 기능이 필요하다. - 웹서비스를 구현하기 위해서는 데이터베이스를 사용하게 된다.
- 데이터베이스에게 퀴리문을 작성하여 명령을 내린다. - 이때 ORM(Object Relational Mapping)을 이용하면 자바 문법만으로도 데이터베이스를 다룰 수 있다. - 즉, ORM을 이용하면 개발자가 쿼리를 직접 작성하지 않아도 데이터베이스의 데이터를 처리할 수 있다.
- JDBC로 쿼리문을 작성하던 점에서 JPA를 도입하여 구현되어있는 기능을 가져다 씀으로서 더 사람친화적으로 개발할 수 있다. $$uml 웹서비스 -> JPA : 요청 JPA -> JDBC : 요청 JDBC -> MariaDB : 요청 MariaDB -> JDBC : 응답 JDBC -> JPA : 응답 JPA -> 웹서비스 : 응답 $$ ## JPA 라이브러리 추가 - (mySQL을 쓰기 위해 설정) [참고 - JPA](https://wikidocs.net/161164) ```yml server: port: 8088 spring: datasource: driver-class-name: org.mariadb.jdbc.Driver url: jdbc:mariadb://localhost:3306/sbb?useUnicode=true&characterEncoding=utf8&autoReconnect=true&serverTimezone=Asia/Seoul&useOldAliasMetadataBehavior=true&zeroDateTimeNehavior=convertToNull username: sbsst password: sbs123414 jpa: properties: hibernate: show_sql: true format_sql: true use_sql_comments: true logging: level: org: hibernate: type: descriptor: sql: trace ``` [GIT](https://github.com/donhyuck/SBB/commit/b7b0e13c237c0c81f86e02fb55c1117c5f8a9d47) # 엔티티 생성 [참고 - https://wikidocs.net/161165](https://wikidocs.net/161165) - **질문, 답변 게시판을 위해 필요** - 엔티티는 데이터베이스 테이블과 매핑되는 자바 클래스를 말한다. SBB는 질문과 답변을 할 수 있는 게시판 서비스이다. - 따라서 SBB에는 질문과 답변에 해당하는 엔티티가 있어야 한다. ## 답변 구조 - 답변은 하나의 질문에 여러개가 달릴 수 있는 구조로써, Many(많은 것)가 되고 질문은 One(하나)이 된다. - 따라서 @ManyToOne은 N:1 관계라고 할 수 있다. - 이렇게 애너테이션을 설정하면 Answer 엔티티의 question 속성과 Question 엔티티가 서로 연결된다. (실제 데이터베이스에서는 ForeignKey 관계가 생성된다.) ## 질문 구조 - 질문과 답변은 1:N의 관계라고 할 수 있다. - Answer 엔티티 객체로 구성된 answerList를 속성으로 추가하고 @OneToMany 애너테이션을 설정했다. - 이제 질문 객체(예:question)에서 답변을 참조하려면 question.getAnswerList()를 호출하면 된다. - @OneToMany 애너테이션에 사용된 mappedBy는 참조 엔티티의 속성명을 의미한다. - 즉, Answer 엔티티에서 Question 엔티티를 참조한 속성명 question을 mappedBy에 전달해야 한다. [GIT](https://github.com/donhyuck/SBB/commit/74f996592e72773ad4426a002d51d40c5a491088) # 리포지터리 생성 [참고 - https://wikidocs.net/160890](https://wikidocs.net/160890) - 엔티티만으로는 데이터베이스에 데이터를 저장하거나 조회 할 수 없다. - 데이터 처리를 위해서는 실제 데이터베이스와 연동하는 JPA 리포지터리가 필요하다. ``` 리포지터리 란? - 엔티티에 의해 생성된 데이터베이스 테이블에 접근하는 메서드들(예: findAll, save 등)을 사용하기 위한 인터페이스이다. - 데이터 처리를 위해서는 테이블에 어떤 값을 넣거나 값을 조회하는 등의 CRUD(Create, Read, Update, Delete)가 필요하다. - 이 때 이러한 CRUD를 어떻게 처리할지 정의하는 계층이 바로 리포지터리이다. ``` [GIT](https://github.com/donhyuck/SBB/commit/f6b6bc1891b83e7592b2d369e1c9e7351efcac47) # 템플릿 구현 - 템플릿은 자바 코드를 삽입할 수 있는 HTML 형식의 파일이다. - 스프링부트에서 사용할수 있는 템플릿 엔진에는 Thymeleaf, Mustache, Groovy, Freemarker, Velocity 등이 있다. - 이 중 타임리프(Thymleaf) 템플릿 엔진을 사용할 것이다. [https://www.thymeleaf.org/](https://www.thymeleaf.org/) - build.gradle 에서 의존성을 추가하면 자동으로 해당 기능을 다운받아 사용할 수있게 된다. [GIT](https://github.com/donhyuck/SBB/commit/444f443b8a2b34c2d1571f0bbaf9c82103a18c8b) - 템플릿을 사용하기 때문에 기존에 사용했던 @ResponseBody 애너테이션은 필요없으므로 삭제할 수 있다. - 그리고 list 메서드에서 question_list.html 템플릿 파일의 이름인 "question_list"를 리턴한다. - 또한, 컨트롤러의 list 메서드에서 조회한 질문 목록 데이터를 "questionList"라는 이름으로 Model 객체에 저장했다. - 타임리프는 Model 객체에 저장된 값을 읽을 수 있으므로 템플릿에서 questionList를 사용할수 있게 되는 것이다. [GIT](https://github.com/donhyuck/SBB/commit/1b3b25ea662c628e2b1d9fd2f9cc058195e9b701) ## 템플릿 수정시 자동반영 [GIT](https://github.com/donhyuck/SBB/commit/b95c6b72310b97ab212f8bb6c2d222a2dc154550) # 서비스 - 서비스는 컨트롤러와 리포지터리의 중간자적인 입장에서 엔티티 객체와 DTO 객체를 서로 변환하여 양방향에 전달하는 역할을 한다. - 컨트롤러에서 리포지터리를 직접 호출하지 않고 중간에 서비스를 두어 데이터를 처리한다. - 서비스는 스프링에서 데이터 처리를 위해 작성하는 클래스이며 모듈화, 보안을 위해 필요하다. - 본 프로젝트에서 작성한 Question, Answer 클래스는 Entity 클래스이다. - 엔티티 클래스는 데이터베이스와 직접 맞닿아 있는 클래스이기 때문에 컨트롤러나 타임리프 같은 템플릿 엔진에 전달하여 사용하는 것은 좋지 않다. - 컨트롤러나 타임리프에서 사용하는 데이터 객체는 속성을 변경하여 비즈니스적인 요구를 처리해야 하는 경우가 많은데, - 엔티티를 직접 사용하여 속성을 변경한다면 테이블 컬럼이 변경되어 엉망이 될수도 있기 때문이다. [GIT](https://github.com/donhyuck/SBB/commit/bc26020e21becd5c7d3c32edbdab03123e2a850f) # 질문 상세보기 기능 추가 - detail메서드의 매개변수를 Integer로 설정한 이유는 만약 값이 없을 경우에 int는 오류가 나는 반면 Integer는 null값이 되기 때문이다. [GIT](https://github.com/donhyuck/SBB/commit/2df4c7ec632e3367782332208ce0fee125a69041) ```java @RequestMapping(value = "/question/detail/{id}") public String detail(Model model, @PathVariable("id") Integer id) { Question question = questionService.getQuestion(id); model.addAttribute("question", question); return "question_detail"; } ``` # 답변 등록 기능 추가 [GIT](https://github.com/donhyuck/SBB/commit/43d387483f38cebfddf75db4316e150ea29f5a0f) # 페이지 꾸미기 - 스타일 적용 style.css [GIT](https://github.com/donhyuck/SBB/commit/7998270fa9ce26048c2670fcec195263942bc0c9) - 부트스트랩 도입 ```html ``` - 폰트변경(지마켓 산스) ```css /* 지마켓 산스 불러오기 */ @font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; } /* 지마켓 산스 적용하기 */ html > body, html > body button, html > body select, html > body input { font-family: "GmarketSansMedium"; text-underline-position: under; } ``` - 질문목록(question_list.html)과 질문페이지(question_detail.html) 꾸미기 [GIT](https://github.com/donhyuck/SBB/commit/c441155625cc948931dab0d7e328523ba258fcae) # 템플릿 상속 - 부트스트랩 하단에 style.css를 위치시킨다. 그렇게 해야 부트스트랩이 처리한 파일을 수정할 여지가 생긴다. [GIT](https://github.com/donhyuck/SBB/commit/08f2387099f7fcc61d6b10b88a47574ceb1fa6c7) # 질문등록 ## 질문 등록 페이지 구현 [GIT](https://github.com/donhyuck/SBB/commit/cca7d8e625dfcaaf26b6523a2c0fda3c5b971358) - 테그 label, label과 연결된 id를 통해 클릭하면 포커싱되도록한다. ```java 제목 ``` ## 메서드 오버로딩 questionCreate - GET 방식으로 요청 / @GetMapping 애너테이션 사용 - question_list 의 질문등록 버튼으로 question_form 템플릿을 렌더링하여 출력 - POST 방식으로 요청 / @PostMapping 애너테이션 사용 - question_form 템플릿에서 입력받은 질문정보(subject,content) 저장 후 질문목록으로 리다이렉트 - 이를 처리하기 위해 @PostMapping 애너테이션을 지정한 questionCreate 메서드를 추가했다. - 메서드명은 @GetMapping시 사용했던 questionCreate 메서드명과 동일하게 사용할 수 있다. (단, 매개변수의 형태가 다른 경우에 가능하다. - 메서드 오버로딩) ## 스프링 벨리데이션 도입 Spring Boot Validation - Form (로그인폼, 개인정보수정폼, 회원가입폼, 아이디찾기폼. 글쓰기폼. 글수정폼, 댓글쓰기 폼 등등) - 이러한 폼을 확인, 화면에서 전달받은 입력 값을 검증하려면 Spring Boot Validation 라이브러리가 필요하다. ## 검증 - 필요한 정보가 입력이 안되면 메서드가 실행안되도록 기능적으로 막는다. - @Valid 애너테이션 QuestionForm 매개변수 앞에 @Valid 애너테이션을 적용했다. @Valid 애너테이션을 적용하면 QuestionForm의 @NotEmpty, @Size 등으로 설정한 검증 기능이 동작한다. 그리고 이어지는 BindingResult 매개변수는 @Valid 애너테이션으로 인해 검증이 수행된 결과를 의미하는 객체이다. - bindResult.hasErrors()를 호출하여 오류가 있는 경우에는 다시 폼을 작성하는 화면을 렌더링하게 했고 오류가 없을 경우에만 질문 등록이 진행되도록 했다. [GIT](https://github.com/donhyuck/SBB/commit/afd7b8f2ec57c6d1c58b814c7af9478560ba529b) ## 템플릿 개선 ### 오류 메세지 알림 (question_form.html) - 기능적으로 막더라도, 사용자로 하여금 어디에서 무슨 이유때문에 서비스를 이용못하는지 알려야한다. - 검증에 실패한 오류메시지를 보여주기 위해 템플릿 수정 - `th:if="${#fields.hasAnyErrors()}"`가 true인 경우는 QuestionForm 검증이 실패한 경우이다. - 또한, GetMapping으로 매핑한 questionCreate 메서드를 변경해야한다. - "질문 등록하기" 버튼을 통해 GET 방식으로 요청되더라도 th:object에 의해 QuestionForm 객체가 필요하기 때문이다. - 오류발생시 입력내용 유지하기 form테그에서 name="subject", name="content"와 같이 사용하던 부분 -> th:field 속성을 사용하도록 변경 [GIT](https://github.com/donhyuck/SBB/commit/bb252d64e98087fc85e0e9e3f3214db8a3e41dfb) # 답변등록 기능 개선 - 질문 등록과 유사 [GIT](https://github.com/donhyuck/SBB/commit/0c7dcfa6c1fda337a6839136dbbce50368ac4088) ### AnswerController, creataAnswer메서드 - 우선, 오류메세지를 위한 Answer.form 생성 - AnswerForm을 사용하기 위해 컨트롤러 변경 메서드에 @Valid와 BindingResult 도입 -> question_detail 템플릿 변경해야함 - 검증에 실패할 경우(bindingResult.hasErrors()) 다시 답변을 등록할 수 있는 question_detail 템플릿을 렌더링하게 했다. 이때, model 객체에 Question 객체를 저장한 후에 question_detail 템플릿을 렌더링 question_detail 템플릿은 Question 객체가 필요하기 때문임 ### QuestionController, detail 메서드 - question_detail 템플릿이 AnswerForm을 사용하기 때문 - 현재 question_detail 템플릿에서는 질문과 답변에 대한 정보와 답변작성에 대한 기능이 있다. ### question_detail.html ```html

``` - th:object 속성, th:object="${answerForm} createAnswer 매개변수가 AnswerForm를 받을 수 있도록 했다. - #fields.hasAnyErrors()와 #fields.allErrors()를 사용 검증이 실패할 경우 오류메시지를 표시하도록 했다. - th:field 속성 content 항목의 입력값을 사용하도록 name="content" 대체 form테그 내 th:object="${answerForm}" 가 있어서 th:field="*{content}" 로 쓸수있으며, answerForm.comtent와 동일한 의미 # 공통템플릿 구현 - formErrorsFragment 라는 이름 -> html안에서 구분짓기 위함, replace로 대신하여 들어감 ## form_errors.html - 오류표시를 위한 공통템플릿 - 질문등록과 질문상세 템플릿에 적용 [GIT](https://github.com/donhyuck/SBB/commit/c6c773c58d26946de5f482b424dadbd24112dafc) ## navbar.html - 반응형 웹 사이트로 구현( 로그인 메뉴와 햄버거 메뉴 ) - 네비게이션바 구현, Bootstrap JS 추가 [GIT](https://github.com/donhyuck/SBB/commit/c477086073eb7eca3ea9e8bc8db663c4eb961910) # 페이지 기능 구현 - 페이지 기능 추가 [GIT](https://github.com/donhyuck/SBB/commit/c04484ed88f05c7c697d3b4e4cda8b27c96eaa5a) - 템플릿에 페이지 이동 기능 적용, 페이지번호가 늘어서지 않도록 페이지 표시제한 ```html

``` - disabled기능이 작동안하도록 붙여주는데, 양끝단에 페이지가 위치할 경우에만 있어야한다. 즉, 1~N-1일때는 disabled이 없다. [GIT](https://github.com/donhyuck/SBB/commit/f4e823b03d5346774ec92de59285f3839e786d67) - 페이지 시작0에서 1부터 나타내도록, 최신게시물이 상단에 노출 [GIT](https://github.com/donhyuck/SBB/commit/25c433758ee1d3323ae315a008902d35a3f5dc95) - 게시물 일련번호 추가 [GIT](https://github.com/donhyuck/SBB/commit/c4c4e201592126683366873ee84bc3b0e4c1a775) # 스프링 시큐리티 - build.gradle 추가 ``` implementation 'org.springframework.boot:spring-boot-starter-security' implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5' ``` - 스프링 시큐리티는 스프링 기반 애플리케이션의 인증과 권한을 담당하는 스프링의 하위 프레임워크이다. 인증(Authenticate)은 로그인을 의미한다. 인증이 안된 회원(비로그인)이 특정 페이지로 접근을 막는다. 권한(Authorize)은 인증된 사용자가 어떤 것을 할 수 있는지를 의미한다. 로그인 상태에서 이 게시글의 주인인지 확인하는 일련의 행위 [GIT](https://github.com/donhyuck/SBB/commit/cb8e820429923eefac2e24f98cc7987a3945f04f) # 회원가입 기능 추가 - 회원정보를 위한 엔티티 추가 [GIT](https://github.com/donhyuck/SBB/commit/320957b37fd54bd247e4ead342a3181bc704132c) - User 리포지터리와 서비스, 비밀번호 암호화(BCrypt 암호화) [GIT](https://github.com/donhyuck/SBB/commit/3dfefc854f15a9bb60ff56af51bf68f4d45b5965) - User 컨트롤러 회원가입 기능 추가, 회원가입템플릿 생성, 네비게인션 바에 회원가입 구현 [GIT](https://github.com/donhyuck/SBB/commit/e4b8ffdf471c069226ae1f152169e60462584ef2) - 중복 회원가입 방지 회원가입 오류처리 -> 오류가 발생할 것으로 보여짐, try catch로 오류메시지를 사용자에게 알린다. [GIT](https://github.com/donhyuck/SBB/commit/332151125abc603d39156dc27ceb5595a95cfab7) # 로그인, 로그아웃 - 스프링시큐리티는 회원과 관련된 서비스 담당하며, 이를 위해서는 중간다리가 필요하다. 그 역할을 UserDetailsService하며, 다양한 메서드 중 loadUserByUsername가 필요하다. - 스프링 시큐리티에 로그인 URL을 등록,컨트롤러에 매핑, 로그인 템플릿 구현 ```java .and() .formLogin() .loginPage("/user/login") .defaultSuccessUrl("/"); ``` [GIT](https://github.com/donhyuck/SBB/commit/1ee1ff094ca8acc884c74812a20ace2c6af2f3f6) - UserRepository, UserRole, UserSecurityService 추가 [GIT](https://github.com/donhyuck/SBB/commit/76777903880bd143f58ab8347a8f8f8a87385ff3) - 스프링 시큐리티에 UserSecurityService를 등록, navbar에 로그인 링크연결 [GIT](https://github.com/donhyuck/SBB/commit/650ba61fca6dc05b13ab16c18905fba9a3539f18) - 로그아웃 기능 추가, 로그인 / 로그아웃 링크 ```java .and() .logout() .logoutRequestMatcher(new AntPathRequestMatcher("/user/logout")) .logoutSuccessUrl("/") .invalidateHttpSession(true); ``` [GIT](https://github.com/donhyuck/SBB/commit/1517d429991ab28730601a957b32745feb0be0b3) - 현재 사용자의 로그인 상태를 체크하는 속성 sec:authorize="isAnonymous()" - 현재 로그아웃 상태 sec:authorize="isAuthenticated()" - 현재 로그인 상태 [GIT](https://github.com/donhyuck/SBB/commit/3de8ec5a7e7947cc887ad9936b38e9abf5209c73) # 작성자 표시 - th:text="${question.author.username} ``` th:if="${question.author != null and #authentication.getPrincipal().getUsername() == question.author.username}" 작성자의 이름과 로그인한 사람의 이름이 동일한가? ``` [GIT](https://github.com/donhyuck/SBB/commit/24e1a26ba0ae4044c9174f61a79015f845e6a17d) - 로그인 상태에 따라 disabled, getUser 메서드, 작성자 객체에서 이름 정보 가져오기 [GIT](https://github.com/donhyuck/SBB/commit/34fdbee4c77eb912d6556a6943f54c06652a1078) # 질문 수정, 삭제 기능 - 로그인, 로그아웃 확인 만약 @PreAuthorize("isAuthenticated()") 애너테이션이 적용된 메서드가 로그아웃 상태에서 호출되면 로그인 페이지로 이동된다. 로그인 상태가 아닌 경우 textarea 태그에 disabled 속성을 적용하여 입력을 못하게 만들었다. - `_csrf.token` 토큰, 해킹을 막아준다. 작성에도 쓰이고, 수정에도 쓰인다. 그러니 action으로 고정시키지 않는다. 그러니 th:action="@{/question/create}" 제거 ## 질문 수정 - 수정일시 칼럼 추가 [GIT](https://github.com/donhyuck/SBB/commit/40296f6e00d6fc479acaa1af91f7a42f6021b8de) - 수정 기능 추가 throw 오류나면 기능자체가 멈추고 오류페이지 [GIT](https://github.com/donhyuck/SBB/commit/548ad26dd041e953897c256dbb4d5aadc7310572) ## 질문 삭제 - 다른 방법으로 삭제 여부 재확인하기 ` onclick="if ( !(confirm('삭제하시겠습니까?') ) return false;" (생략..) ` - 레이아웃에는 content script 두개의 빈칸이 있다. 기본 content가 다 실행되고 난 이후에 스크립트가 실행되도록 마지막에 넣는다. - question_detail의 스크립트로, delete란 이름의 클래스를 대상으로 삭제여부를 확인 즉, 삭제버튼에는 class="delete"가 있어야함 - 질문 삭제 기능 추가 [GIT](https://github.com/donhyuck/SBB/commit/28283859dae9e3d5bdfee76b88c5cf4faec8a9cd) # 답변 수정, 삭제 - 질문 수정, 삭제와 유사 - 답변 작성은 질문 상세페이지에서 이루어지고, 수정은 별도의 페이지를 통해서 기능을 수행한다. - 답변 수정 [GIT](https://github.com/donhyuck/SBB/commit/c62380eb9ac52b5e0969b30f66e1f5ce2fa72c51) - 답변 삭제 [GIT](https://github.com/donhyuck/SBB/commit/6cf1b7b9e5db519c26ab93183ef4df338e8bd361) # 질문과 답변 수정일자 표시 `th:if="${answer.modifyDate != null}"` - modify_date속성은 null값에서 노출이 안되고, 수정사항이 생기면 노출된다. [GIT](https://github.com/donhyuck/SBB/commit/4f7a9e8d79be6bfd8d38c3785cde1c0cb1be0983) # 추천 - N:M관계 하나의 질문에 여러사람이 추천할 수 있고 한 사람이 여러 개의 질문을 추천할 수 있다. - voter 속성 Set voter 처럼 추천인(voter)을 @ManyToMany 관계로 추가했다. List가 아닌 Set으로 한 이유는 추천인은 중복되면 안되기 때문이다. - 추천인 스키마 추가 create_data는 오류를 발생시켜서 제외 ```sql # 질문추천인 테이블 추가 CREATE TABLE question_voter ( id BIGINT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, question_id BIGINT UNSIGNED NOT NULL, voter_id BIGINT UNSIGNED NOT NULL ); # 답변추천인 테이블 추가 CREATE TABLE answer_voter ( id BIGINT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, answer_id BIGINT UNSIGNED NOT NULL, voter_id BIGINT UNSIGNED NOT NULL ); ``` - 질문 추천 기능 [GIT](https://github.com/donhyuck/SBB/commit/d1f5a75ab759dee4c4fec5593dfddb1f487af6fa) - 답변 추천 기능 [GIT](https://github.com/donhyuck/SBB/commit/4fb0c31a966bcc229852b810413932895b9b158e) # 마크다운 적용 - utext 자유도가 높지만 보안은 낮다 text 보안이 높지만 자유도가 낮다 - 질문 내용, 답변 내용 작성시 마크다운 문법을 적용할 수 있다. - build 추가, CommonUtil 구현 및 적용 `implementation 'org.commonmark:commonmark:0.18.2'` [GIT](https://github.com/donhyuck/SBB/commit/15de71400ce76882e820148e8b04b1366e4bc766) # 앵커 - HTML 중간에 `` 라는 앵커 태그가 있다면 이 HTML을 호출하는 URL 뒤에 #test 라고 붙여주면 해당 페이지가 호출되면서 해당 앵커로 스크롤이 이동된다. - 예시 `http://localhost:8088/question/detail/1#answer_5` - 등록, 수정 작업을 할때 해당 페이지로 이동할 뿐만 아니라 해당 위치로 스크롤을 위치시킨다. [GIT](https://github.com/donhyuck/SBB/commit/c281099bd60356207eb8c19af296300357a16ea7)