항해를 본격적으로 시작하는 1일
웹 페이지 정하기
팀원들과 어떤 웹 페이지를 만들어 볼까?? 생각을 하던 중 공통 관심사가 리그 오브 레전드라는 게임이라서 롤 게임을 하면서 듀오를 하고싶은 사람들을 위한 웹 페이지를 만들자라고 의견이 일치하게 되었다.
항해99가 요구한 웹 페이지 기능 중 필수 포함 사항
-
inja2 템플릿 엔진을 이용한 서버사이드 렌더링 (어떤 장점이 있을까?)
-
JWT 인증 방식으로 로그인 구현하기 (쿠키/세션 방식에 비해 어떤 장점이 있을까?)
**최종 제출(5/12 18:00 까지)
기획 멘토링
팀원분들과 같이 웹 페이지를 기획한 것을 권오빈 기술 매니저님께 멘토링을 받는 시간이였다.
내가 맡은 기능들
- 메인 페이지 구성
- 게시판 목록 구성
- 게시판 상세 페이지 이동 구현
와이어 프레임
https://www.figma.com/file/WoTw7uiVjnDXnlUNUyOkV7/%EB%93%80%EC%98%A4%EA%B5%AC%ED%95%A8?node-id=0%3A1
와이어 프레임 구성
웹 브라우저 상단 부분
<body>
<header class="header">
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<h1 onclick="window.location.href='/'">듀오 구함</h1>
<div class="right">
{% if id %}
<h2 style="color:white">{{ nickname }}님 환영합니다!</h2>
<button class="btn btn-light" onclick="logout()">로그아웃</button>
{% else %}
<button class="btn btn-light" onclick="window.location.href='/login'">로그인</button>
{% endif %}
</div>
</div>
</nav>
</header>
게시판 등록시 나오는 박스형 게시물
<tbody id="tbody-box">
{% for border in borders %}
<div class="box" id="{{ border.id }}">
<div id="border-list" class="box-list" onclick=window.location.href="/board/{{ border.id }}">
<h1 style="text-align: center"><strong>듀오해듀오</strong></h1>
<div class="name">
<p><strong>{{ border.duo_date }}</strong></p>
</div>
<div class="tier">
<p><strong>{{ border.tier }}</strong></p>
<p><strong>{{ border.content }}</strong></p>
</div>
</div>
</div>
{% endfor %}첫날이라 그런지 결국 해당 페이지의 HTML과 CSS만 구현하였다.
I want to be programmer