11 to 9, Day 1

11 to 9, Day 1

불규칙적이었던 생활 습관을 개선하고 프로그래밍 공부에 더 집중하고자, 오늘부터 체계적으로 공부 및 프로그래밍 시간을 정해놓고 취업을 준비하려고 한다. 백기선 선장님의 10to10에서 영감을 받아 지금 처럼은 안되겠다는 생각이 들어서 계획하게 되었다. 일단 초반은 선장님의 온라인 스터디 Live Study와 개인 토이 프로젝트에 집중할 계획이다.

우선 한달을 아래와 같이 진행해 볼 예정.

• 11:00 - 21:00, 10시간을 공부와 프로그래밍에 집중!
• 일요일을 제외한 매일
• 불가피하게 주중에 쉬게 되었을 경우 일요일로 변경
• 장소는 특정하지 않았으나 되도록 집중이 잘 되던 스터디 카페에서
• 매일 시작하는 한시간은 오늘 할 일을 정리하고 마무리하는 한시간은 다음날 할 일을 정리

Today, ToDoList

• 블로그 다이어리 페이지 세팅
• Toy Project - NGMA
  • 로그인, 로그아웃 설정
  • Schedule List 페이지

---

로그인, 로그아웃 설정

스프링 시큐리티에서 제공하는 디폴트 페이지를 그대로 사용!

대신, WebSecurityConfigurer에서 추가로 설정해주었다.

                .and().formLogin().defaultSuccessUrl("/") //로그인 성공 후 URL
                .and().logout().logoutSuccessUrl("/") //로그아웃 성공 후 URL

인덱스 페이지에서 인증 상태를 확인할 수 있도록 thymeleaf-extras-springsecurity5 를 추가하였다.

        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-springsecurity5</artifactId>
        </dependency>

xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5"

       <!-- 로그인 상태에 따라 버튼 다르게 표시 -->
          <span sec:authorize="isAuthenticated()">
            <li class="nav-item">
              <a class="nav-link" href="http://localhost:8080/logout">로그아웃</a>
            </li>
          </span>
          <span sec:authorize="!isAuthenticated()">
            <li class="nav-item">
              <a class="nav-link" href="http://localhost:8080/login">로그인</a>
            </li>
          </span>

---

Schedule List 페이지

index 페이지의 메인에 ajax를 통해 아래 코드 양식으로 삽입할 예정

<main class="flex-shrink-0" id="main">
  <div class="container" id="main_container">
  <main>
    <div class="py-5 text-center">
      <h2>일정</h2>
    </div>

    <div class="table table-hover">
       ...
    </div>
  </main>
</div>

table element의 table class는 bootstrap에서 제공하는 것을 사용했다. (table-hover는 마우스 커서 위치의 행 가르키기 옵션!)

Schedule Domain 확인

@Entity
@Getter
@Setter
public class Schedule {

    @Id @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "schedule_id")
    private Long id;

    @DateTimeFormat(pattern = "yyyy-MM-dd'T'HH:mm")
    private LocalDateTime dateTime = LocalDateTime.now();

    private String title;

    private String place;

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "owner_id")
    private Account owner;

    private boolean personal;

}

음.. 대충 시간, 장소, 제목, personal 순으로 확인하면 좋을듯?

일단 데모 데이터로 출력 확인!

      <table class="table table-hover">
        <thead>
          <tr>
            <th scope="col">When</th>
            <th scope="col">Where</th>
            <th scope="col">What</th>
            <th scope="col">Together or Alone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
           <td>2011-01-10</th>
           <td>안산</td>
           <td>치맥</td>
           <td>같이</td>
          </tr>
          <tr>
            <td>2011-01-30</th>
            <td>안산</td>
            <td>치맥</td>
            <td>혼자</td>
          </tr>
          <tr>
            <td>2011-02-25</th>
            <td>강남</td>
            <td>치맥</td>
            <td>같이</td>
          </tr>
        </tbody>
      </table>

오우 생각보다 깔끔하다.

이제 DB에서 쿼리한 결과를 가져올 수 있으면 되는데... 타임리프로 get 요청해서 가져와야겠지...? 우욱 두통무엇

일단 아래 ajax 함수로 비동기 데이터 불러오는 것까지 확인.

      function loadSchedules() {
        $.ajax({
          url : "http://localhost:8080/schedules",
          type : "GET",
          dataType : "json",
          success : function(data) {
            schedules = data;
          }
        });

        $.each(schedules, function (i, item) {
          var tr = $("tbody#schedule").append("<tr></tr>")
          $(tr).append("<td>"+item.dateTime+"</td>");
          $(tr).append("<td>"+item.place+"</td>");
          $(tr).append("<td>"+item.title+"</td>");
          $(tr).append("<td>"+item.personal+"</td>");
        })
      }

근데 문제는 페이지 로딩했을 때 딱 한순간만 보이고 사라짐...

그리고 로그인했을때 /error 페이지로 가는 문제도 해결해야함.

오늘은 여기까지~