2주 프로젝트 - 2일차
글을 작성할 때 부족한 점이 많지만 기록을 하기위해 적었습니다. 수정해야할 부분이 있다면 추후 수정할 예정입니다.
2주 프로젝트 - 2일차
어제 했던 부분 그대로 진행
생각을 해보니 수정해야할 부분이 생겨 수정 하고 다시 진행 하고 있다.
일단 DB에서 추가해야할 부분과 나눠야할 부분을 정하였다.
유저 테이블, 보드 테이블로 나누고 해시태그, 파일업로드, 댓글, 대댓글을 따로 테이블을 정하였다.
왜냐하면 따로 테이블을 잡으면 버벅거리지 않고 빠르게 값을 가져온다고 하였다.
논리 ERD 수정 (틀린부분있으면 수정 예정)
>> 테이블 명이 길어서 짧게 수정함
테이블 Like 수정, MySQL에 글자찾는게 Like라 겹쳐서 bLike로 수정함
논리 ERD 를 수정 하고 틀린부분이 있으면 수정하였다.
그리고 각자의 역할을 정해서 맡았고, 나는 메인페이지 부분을 맡았다.
일단 그전부터 배웠던 부분을 참고하고, 모르는 부분들은 구글링도 하고, 다른 팀원들 등 물어보면서 하였다.
어제했던 부분까지 메인에서 업데이트를하고
그 이후 내 브랜치에 올리면서 진행 하였다.
HTML - 메인페이지 작성, 푸터, 헤더, 레이아웃, 등 (테스트)
페이지를 보기위해 BoardController를 만들어 작성 하였고, 그 이후 html 작성하였음
Footer.html
Hader.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:fragment="header">
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #66BB6A;">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/">놀러와요~<br><h3>대나무숲</h3></a>
<div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo03">
<ul class="navbar-nav">
<li class="nav-item" sec:authorize="isAnonymous()">
<a class="nav-link " href="/members/login">로그인</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/members/logout">로그아웃</a>
</li>
</ul>
</div>
</nav>
</div>
</html>
main.html
메인 페이지를 화면설계했던 것과 비슷하게 만들기 위해서 계속 만들고 수정하고 반복하면서 작성....ㅜㅜ
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout1}">
<!-- 검색창 부분 -->
<div layout:fragment="content" class="text-center" style="margin-top: 50px;">
<form class="form-inline justify-content-center">
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
정렬</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">제목</a>
<a class="dropdown-item" href="#">본문</a>
</div>
</div>
<input name="searchQuery" class="form-control mr-sm-2"
type="search" placeholder="검색어를 입력하세요." aria-label="Search"
style="width: 450px;">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">검색</button>
</div>
</form>
<!-- 테이블 부분 -->
<div class="table-responsive" style="margin-top: 50px;">
<table class="table table-striped">
<thead>
<tr>
<th>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
번호
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<a class="dropdown-item" href="#">오름차순</a>
<a class="dropdown-item" href="#">내림차순</a>
</div>
</div>
</th>
<th><div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
제목
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" href="#">오름차순</a>
<a class="dropdown-item" href="#">내림차순</a>
</div>
</div></th>
<th>조회수</th>
<th>좋아요</th>
<th>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
생성일
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<a class="dropdown-item" href="#">오름차순</a>
<a class="dropdown-item" href="#">내림차순</a>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>테스트 제목1</td>
<td>10</td>
<td>5</td>
<td>2022-04-01</td>
</tr>
<tr>
<td>2</td>
<td>테스트 제목2</td>
<td>15</td>
<td>3</td>
<td>2022-04-02</td>
</tr>
<tr>
<td>3</td>
<td>테스트 제목3</td>
<td>20</td>
<td>7</td>
<td>2022-04-03</td>
</tr>
</tbody>
</table>
</div>
<!-- 페이징 -->
<div class="pagination">
<button class="page-btn">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<button class="page-btn">4</button>
</div>
<script>
var tableRows = document.querySelectorAll('.table tbody tr');
var pageBtns = document.querySelectorAll('.page-btn');
function showPage(pageNum) {
// pageNum에 해당하는 데이터를 보여줍니다.
var start = (pageNum - 1) * 3;
var end = start + 3;
for (var i = 0; i < tableRows.length; i++) {
if (i >= start && i < end) {
tableRows[i].style.display = 'table-row';
} else {
tableRows[i].style.display = 'none';
}
}
// 현재 페이지에 active 클래스를 추가합니다.
for (var i = 0; i < pageBtns.length; i++) {
if (i === pageNum - 1) {
pageBtns[i].classList.add('active');
} else {
pageBtns[i].classList.remove('active');
}
}
}
// 초기 페이지를 설정합니다.
showPage(1);
// 페이지 버튼을 클릭했을 때 해당 페이지로 이동합니다.
for (var i = 0; i < pageBtns.length; i++) {
pageBtns[i].addEventListener('click', function() {
showPage(parseInt(this.innerHTML));
});
}
</script>
</div>
</html>
지금 까지 했던 부분이고, 아직 미흡한 부분 마음에 안드는 부분이 많기 떄문에 계속 수정할 것이다.
조원들은 각자의 역할을 열심히 잘 수행 중이다. 모르는 것과 아는게 있으면 서로 서로 가르쳐주고 배워가면서 진행 하고 있다.
남아서 진행하였고, 페이징 처리를 하려고 했지만... 오류가 생기고 수정한 부분이 많아서 다 날렸다.
다시 페이징처리를 제대로 할 예정입니다...
오늘의 최종... ㅜㅜ 부족한 부분이 너무 많다.
프로젝트 2일차 느낀점
(마음대로 적고 싶은말 적었습니다 ㅎㅎ)
2주 프로젝트중 아직 2일차이다. 시간 상으로는 우리가 순서대로 원할하게 진행이 되고 있다고 생각한다. 하지만 이전에 3일짜리 프로젝트를 해보았지만 마음 한켠에는 오류가 뜨다보면 진행이 더뎌지고 오류가 해결이 안될 때가 있다. 그래서 좀 조바심이 생기게 되고 2주안에 프로젝트를 마무리를 할 수 있을까 라는 생각이 든다.. 하지만 우리는 순서대로, 진행 하였고 조금은 앞서고 있다고는 생각한다. 근데 마음이 불편하긴하다..ㅋㅋ.. 얼른 해결해서 오류를 수정하고 결과물을 얼른 만들고싶다.. 오늘도 남아서 기능 구현 페이징 처리를 해보려고 코드를 끄적이고 구글링과 책을 찾아보면서 따라 해보고 해보았지만 잘 되지 않았다. 어제는 깃허브에서 브랜치 하는것을 찾아보고 했었지만 결과적으로 해결을 하였다. 오늘은 html 만들면서 보여지는 화면에서 점점 나타나는 모습을 보면서 뿌듯해 하면서 화면을 만들어 나갔다. 기능을 얼른 구현하고 빨리 만들어 보고싶다..
공부할 때는 이해하려고 해도 빠르게 이해가 되지 않았고 프로젝트를 하면서 공부할겸 내가 직접 만들어보려고 노력했다.
수업을 들으며 배울 때는 코드를 써보면서 배웠는데 프로젝트를 하면 할 수 있을 것같았다. ㅋㅋ 마음은 이미 구현을 다한 상태이다.
그래도 내가 이렇게 프로젝트를 하면서 조원들과 같이 머리를 쓰면서 하고 있는게 뿌듯하고 너무 재미있다. 수업을 할때는 내가 할 수 있을까 했는데 3일짜리 프로젝트를 해보고 2주짜리 프로젝트를 하니까 뭔가 프로젝트를 해보아서 조금은 더 편한 느낌이 든다.
한번 경험 해보는 것이 좋은 수확인거 같다.. 아직 기능 구현하는게 어렵지만 만들어가는 화면, Run을 했을때 실행되는 것을 보면 진짜 짜릿 한 것 같다. 나는 아직도 앞으로 나아 가는중이다. 더뎌지고 넘어져도 다시 일어서서 끝까지 하는 모습을 보여줄 것이고, 포기하지 않는 사람이 될 것이다. 열심히 해서 좋은 결과를 만들 것이다. 나는 할 수 있다.!
