스톤헤드 부수기

리액트를 이용하여(공부X) 개인 프로젝트를 진행하는데 로그인 기능을 구현해야 했습니다.복잡한 로그인이 아닌 단순히 로그인 버튼을 누르면 로그인을 성공시키는 구조입니다.요구 사항은 아래와 같습니다. 헤더에 로그인 정보 표시로그인 버튼을 누르면 바로 로그인이 됨로그인되면 로그아웃 버튼으로 변경이 됨로그아웃 버튼을 누르면 바로 로그아웃이 됨새로 고침을 해도 로그인 정보가 남아 있음 로그인 정보는 Context API를 이용하여 각 Component에서 유저 정보에 접근 가능하도록 했습니다.로그인을 위한 검증 및 유저 정보는 나중에 정의하기로 하여, 현재 시각을 간단하게 버튼에 넣기로 합니다. 새로 고침을 해도 로그인 정보가 유지되려면 LocalStorage에 로그인 정보를 저장합니다.페이지가 이동하거나 새로 ..

글 작성하는 페이지를 추가하고 여기저기 버튼을 추가해 편의성을 높여보겠습니다. API 추가 @GetMapping("/anonymous-posts/write") public ModelAndView getAnonymousPostsWrite() { ModelAndView mav = new ModelAndView(); mav.setViewName("/anonymous_board/write_post"); return mav; } 글 작성을 하기 위한 페이지를 조회하는 API를 생성합니다. 참고로 글을 작성하고 DB에 저장하는 API는 이미 만들어져 있습니다. 2022.11.27 - [웹/Spring] - Spring Boot로 게시판 만들기 (게시물 생성, 조회) Spring Boot로 게시판 만들기 (게시물 생..

Mustache를 이용하여 화면을 그리던 중 날짜를 표시할 일이 있어서 {{anonymousPost.createdAt}}로 날짜를 표현했습니다. 날짜 기본 포맷으로 화면에 나타나기 때문에 보기 이쁘지도 않고 누가 봐도 이상한 형식으로 나오는 것을 확인할 수 있습니다. "2022-11-27T11:42:54Z" ... 이쁜 것 외에도 화면을 그리다 보면 데이터 포맷을 임의로 설정해야 할 때가 있는데요. 그 때 이용하면 되는 설정입니다. 코드를 자세히 까보지 않아서 정확한 설명은 불가한데요. 대략적으로 스프링 부트를 실행시켜서 서버를 띄울 때, Mustache 설정을 가져옵니다. 이 때 Mustache Formatter를 가져오고 화면 그릴 때 custom하게 추가한 Formatter를 타고 데이터를 내보내도..

기본적인 API와 동작을 만들었으니 화면에 그려보겠습니다. Mustache 사용 준비하기 Mustache는 build.gradle에 의존성 추가를 하고 implementation 'org.springframework.boot:spring-boot-starter-mustache' IDE(IntelliJ)에 Mustache 플러그인을 설치한다면 쉽게 이용할 수 있습니다. Mustache 문법 공식 문서(영어) http://mustache.github.io/mustache.5.html mustache(5) - Logic-less templates. mustache(5) Mustache Manual mustache(5) NAME mustache - Logic-less templates. SYNOPSIS A ty..

게시물을 생성하고 조회할 수 있는 API를 먼저 만들겠습니다. 만들 API는 총 3개이며 (1) 모든 게시물 조회 (2) 특정 게시물 조회 (3) 게시물 생성 입니다. 위처럼 Controller, Service를 작성했습니다. Controller Controller에서는 ModelAndView를 반환하고 있습니다. 이 부분은 나중에 작성할 거지만 간단하게 설명드리면 어떤 mustache를 이용해 어떤 값을 전달할지를 담습니다. mav.setViewName("/anonymous_board/post"); mav.addObject("anonymousPost", anonymousService.getAnonymousPost(postId)); 위 코드에서 setViewName()을 통해 mustache 경로를 작성..

MySQL Workbench에서 테이블의 ERD 보는 방법을 알아보겠습니다. 먼저 Database > Reverse Enigneer 를 클릭합니다. 데이터베이스 계정 정보를 입력하고 ERD를 조회할 데이터베이스를 선택합니다. 저는 post 데이터베이스의 테이블을 볼 거라서 post를 선택했습니다. post에는 4개의 테이블이 있는데요. 그 중 쓸 데 없는 테이블 제외하겠습니다. 보고 싶은 테이블 2개만 남겼습니다. ERD를 볼 수 있습니다. 버전입니다.

익명 게시판은 연습용 게시판으로 단순한 게시판 기능만을 사용할 예정입니다. 게시글 작성, 게시글 수정, 게시글 조회, 게시글 삭제(는 미정)까지 지원할 예정이므로 간단한 값을 가지는 테이블 설계를 해보았습니다. 게시글 번호(id), 공지 여부(is_notice), 작성자(writer), 제목(title), 본문(body), 작성일자(created_at), 수정일자(updated_at) 위 컬럼을 가지는 객체를 생성했고, 이 중 본문은 따로 테이블을 만들어서 저장했습니다. 그래서 id, body를 가지는 anonymous_post_data 테이블과 그 외의 값을 가지는 anonymous_post_info 테이블을 생성했습니다. +) ERD 추가 컬럼은 추가, 수정될 수 있습니다. 당장 떠오르는 것은 sta..

mustache를 통해 화면을 그릴 수 있고, 요청을 정상적으로 처리한다는 것을 확인했으니 DB와 연결을 테스트 해보겠습니다. JPA는 처음이라 다른 블로그 참고하여 따라 하기 식으로 설정을 했습니다. 좀 더 공부하면서 세부 설정 등 변경해 볼 예정입니다. 우선 model에 TestModel, TestModelRepository를 추가했습니다. 그리고 TestService를 추가하여 Controller가 호출하고 CRUD를 할 수 있게 했습니다. 값을 확인하기 위해 간단한 mustache 파일도 생성했습니다. 우선 application.yml에 설정을 추가합니다. spring: datasource: url: jdbc:mysql://localhost:3306/test_schema?serverTimezone..