개인프로젝트 API와 연결할 간단한 웹페이지 만들기(1)- 와이어프레임, 프론트 백엔드 연결
2024. 11. 27. 19:13ㆍTIL
API와 연결할 간단한 웹페이지를 HTML과 CSS를 이용해서 만들어보자
일단 전체적인 도면을 그리기 위해 FIGMA로 와이어프레임을 그려보았다.
https://www.figma.com/design/mWEBF54vyH7iuLlBxTdnzp/PLANNER?node-id=0-1&t=y3WinJFjbGGEyUCG-1
Figma
Created with Figma
www.figma.com
메인페이지
작성하기 페이지, 일정 수정,확인 페이지
대충 이런식으로 웹사이트를 만들어서 적용할 생각이다. 메인페이지의 금일 진행률과 금주 진행률은 오늘,이번주 할일 목록에서 완료한 %를 나타낼 예정이라 추후에 API에 추가해야한다.
초간단 ver 웹페이지
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<link rel="icon" href="../img/체크-표시.svg" type="image/svg+xml">
<link rel="stylesheet" href="../css/destyle.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gaegu&family=Irish+Grover&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/planner.css">
<title> HJP Planner Main page </title>
</head>
<body>
<header>
<div class="image-wrapper">
<img src="../img/green.jpg" alt="header 이미지">
<h1> Planner </h1>
</div>
<nav>
<ul>
<li><a href="일정 작성하기 링크 들어가야함">일정 작성하기</a></li>
<li><a href="일정 보러가기">일정 보러가기</a></li>
<li><a href="https://hjpkotlin2024.tistory.com/" target="_blank">블로그 바로가기</a></li>
</ul>
</nav>
</header>
<main>
<div id="planner">
<div class="row">
<section id="today_plan">
<h3> 오늘 일정</h3>
<p>
1. ~ <br>
2.~ <br>
</p>
</section>
<section id="week_plan">
<h3> 이번주 일정</h3>
<p>
1. ~ <br>
2.~ <br>
</p>
</section>
</div>
<div class="row">
<section id="month_plan">
<h3> 이번 달 일정</h3>
<p>
1. ~ <br>
2.~ <br>
</p>
</section>
<section id="year_plan">
<h3> 이번년도 일정</h3>
<p>
1. ~ <br>
2.~ <br>
</p>
</section>
</div>
</div>
</main>
<footer>
<p><small> Made by HJP Contact us :https://hjpkotlin2024.tistory.com/ </small></p>
</footer>
</body>
</html>
이제 각 일정에 나오는 목록들과 api를 연결해보자.
로컬 환경에서 API와 HTML파일을 연동하기 위해서 HTML파일을 로컬 웹서버에서 서빙해야한다. 따라서 NODE.JS를 설치하여 Express 서버를 사용할 것이다.
server.js 작성
// server.js
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
app.listen(port, () => {
console.log(`Frontend server is running on http://localhost:${port}`);
});
server.js가 있는 위치로 이동
cd (server.js가 있는 위치로 이동)
package.js파일 생성
npm init -yexpress 서버 설치
npm install express
실행
node server.js
localhost:3000접속
디렉토리를 보면 front\public하위에 있어야하는것으로 보인다.
수정후 다시 접속
html을 서버에 띄우는 것은 성공하였다.
'TIL' 카테고리의 다른 글
| 개인프로젝트 API와 연결할 간단한 웹페이지 만들기(3)-일정 작성하기 페이지 (0) | 2024.11.29 |
|---|---|
| 개인프로젝트 API와 연결할 간단한 웹페이지 만들기(2) -메인페이지 (1) | 2024.11.28 |
| 간단한 css 애니메이션 구현하기 (0) | 2024.11.26 |
| 간단한 초대 사이트 만들기 (2) | 2024.11.25 |
| 간단한 블로그 만들기(다듬기) (0) | 2024.11.24 |