나의 서브페이지를 코딩하였다.
팀원들의 html이 문제있는지 보고 수정했다.
팀원들의 서브페이지를 받아서 index에 링크 연결과 뒤로가기버튼과 함께
위로 올라가기 TOP 버튼도 만들었다.
희찬님이 파이어베이스 연결하신걸 토대로 index에 넣었다.
id 값을 실수로 안바꿔서 작동이 안되서 다시 해봐서 되었다.
[내 서브 페이지]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=1920">
<link rel="stylesheet" href="css/sub_style.css">
<title>새싹의 반란</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<div class="nextdirection">
<a href="index.html"><img src="images/nextbutton.png"></a>
</div>
<div class="updirection btn_top">
<img src="images/updirection.png">
</div>
<div class="oneContent">
<div class="leftContent">
<img class="firstheart" src="images/heart.png" alt="profile">
<div class="tag">
<div>#INFP</div>
<div>#키덜트</div>
<div>#한우물전문가</div>
</div>
<h1>이다원이에요</h1>
<div class="information">
<div>1991년 9월 4일</div>
<div>블로그 주소: <a href="https://velog.io/@dawnrose" target="_blank">https://velog.io/@dawnrose</a>
</div>
</div>
</div>
<div class="rightContent">
<img class="myimage" src="images/image_3.png" alt="card">
</div>
</div>
<div class="line"></div>
<div class="twoContent">
<h1>저의 <span>'MBTI'</span> 이에요</h1>
<div class="mbtiContent">
<span>INFP</span>
<div><p>호기심이 많고 공감을 잘해요</p><p>불타는 열정과 창의적이에요</p><p>상상력이 뛰어나요</p></div>
</div>
</div>
<section id="my_point">
<h2>저의 <span>‘장점’</span> 이에요</h2>
<div class="point_big_box">
<div class="point_box">
<!-- <p class="box_gray"> </p> -->
<p>책임감</p>
<p>문제해결</p>
<p>목표달성</p>
<!-- <p class="box_gray"> </p> -->
</div>
<div class="point_box">
<!-- <p class="box_gray"> </p> -->
<p>완벽주의</p>
<p>한우물전문가</p>
<p>창의력만점</p>
<!-- <p class="box_gray"> </p> -->
</div>
</div>
<p class="point_txt">호기심이 많고 창의적이고 열정적인 개발자가 될 거에요!</p>
<p class="point_txt">저는 목표가 있으면 책임감 있게 꼼꼼하게 완수하려고 해요.</p>
<p class="point_txt">흥미가 있다면 한우물 깊게 파는 한우물 전문가에요!</p>
</section>
<div class="fourContent">
<h1>저는 이렇게 <span>'협업'</span> 하고 싶어요</h1>
<div>
<p>함께 의논하는</p>
<p>'소통전문가'</p>
</div>
<div class="index"><p>함께 최선의 결과를 내도록 소통하는 것이 중요하다고 생각해요.</p>
</div>
</div>
<div class="last">
<img src="images/Wheart.png">
<span>새싹의 반란</span>
</div>
<script>
$('.btn_top').click(function(){
event.preventDefault();
$("html,body").stop().animate({scrollTop:0});
});
</script>
</body>
</html>[index.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=1920">
<title>새싹의 반란</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<div id="wrap">
<header id="header" class="d-flex justify-content-center py-3 bg-success" style="display: none !important;">
<ul class="nav nav-pills">
<li class="nav-item "><a href="index.html" class="nav-link text-white" aria-current="page">홈으로</a></li>
<li class="nav-item"><a href="sub_heechan.html" class="nav-link text-white">김희찬</a></li>
<li class="nav-item"><a href="sub_injun.html" class="nav-link text-white">여인준</a></li>
<li class="nav-item"><a href="sub_dawon.html" class="nav-link text-white">이다원</a></li>
<li class="nav-item"><a href="sub_youngho.html" class="nav-link text-white">진영호</a></li>
</ul>
</header>
<section id="main">
<div class="main_box">
<p class="main_img"><img src="images/Union.png"> <img src="images/Union_2.png"></p>
<h1>새싹의 반란</h1>
</div>
<div class="main_txt">
<div class="scroll_icon">
<a href="#team_info"></a>
<p class="scroll_down">아래로 스크롤 해주세요 :)</p>
<p class="scroll_down"><img src="images/mouse.png"></p>
</div>
</div>
</section>
<section id="team_info">
<p><img src="images/team_logo.png"></p>
<p class="main_tit">새싹의 반란</p>
<p class="team_info_txt">우리 ‘새싹의 반란’은 코딩 교육생으로 새싹이지만</p>
<p class="team_info_txt">새싹의 반란으로 일취월장 성장해 개발자로 취업에 성공한다는 의미를 담았어요</p>
</section>
<section id="team_promiss">
<div class="youngho">
<div>
<h2>우리<span class="team">'팀'</span>은요!</h2>
<div id="distance">총<span id="num">4</span>명이예요</div>
</div>
<div class="team_promiss_txt">
<h2>우리<span class="team">'팀'</span>의 약속은요!</h2>
<div class="promiss-area" style="background-color: skyblue;">
<div class="left-width"></div>
<div class="left-length"></div>
<div class="right-width"></div>
<div class="right-length"></div>
<p id="promiss">지각하지 않기<br>
해야하는일은 꼭 해결하기 <br>
포기하지 말고 팀원에게 SOS</p>
</div>
</div>
</div>
</section>
<section id="team_member">
<div class="container marketing">
<!--<div class="row featurette">
<div class="col-md-7 align-self-center">
<div class="team_member_box_right">
<h2 class="my_title">"미래의 떳떳한 개발자가 될"</h2>
<p class="my_name">김희찬이에요</p>
<button class="mybutton">프로필 자세히 보기</button>
</div>
</div>
<div class="col-md-5 my_content">
<img src="images/image_1.png" class="my_image">
</div>
</div> -->
<div class="row featurette">
<div class="col-md-7 order-md-2 align-self-center my_content">
<div class="team_member_box">
<h2 class="my_title">"미래의 떳떳한 개발자가 될"</h2>
<p class="my_name">김희찬이에요</p>
<button class="mybutton"><a href="sub_heechan.html">프로필 자세히 보기</a></button>
</div>
</div>
<div class="col-md-5 order-md-1">
<img src="images/image_1.png" class="my_image" alt="...">
</div>
</div>
<div class="row featurette">
<div class="col-md-7 align-self-center my_content">
<div class="team_member_box_right">
<h2 class="my_title">"미래의 떳떳한 개발자가 될"</h2>
<p class="my_name">여인준이에요</p>
<button class="mybutton"><a href="sub_injun.html">프로필 자세히 보기</a></button>
</div>
</div>
<div class="col-md-5">
<img src="images/image_2.png" class="my_image">
</div>
</div>
<div class="row featurette">
<div class="col-md-7 order-md-2 align-self-center my_content">
<div class="team_member_box">
<h2 class="my_title">"미래의 떳떳한 개발자가 될"</h2>
<p class="my_name">이다원이에요</p>
<button class="mybutton"><a href="sub_dawon.html">프로필 자세히 보기</a></button>
</div>
</div>
<div class="col-md-5 order-md-1">
<img src="images/image_3.png" class="my_image">
</div>
</div>
<div class="row featurette">
<div class="col-md-7 align-self-center">
<div class="team_member_box_right">
<h2 class="my_title">"미래의 떳떳한 개발자가 될"</h2>
<p class="my_name">진영호이에요</p>
<button class="mybutton"><a href="sub_youngho.html">프로필 자세히 보기</a></button>
</div>
</div>
<div class="col-md-5 my_content">
<img src="images/image_4.png" class="my_image">
</div>
</div>
</div>
</section>
<section id="team_cheer">
<h2>저희를 응원해주세요!👍🏻</h2>
<div class="team_cheer_box">
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="formControl" id="comment" placeholder="응원의 한 마디">
<label for="floatingInput"></label>
</div>
<button id="postingbtn" type="button">기록하기</button>
</div>
<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-3 g-4 ">
</div>
</div>
</div>
</section>
<footer>
<img src="images/Wheart.png">
<span>새싹의 반란</span>
</footer>
<div class="updirection btn_top" id="btn_top">
<img src="images/updirection.png">
</div>
<script>
//위로가기 버튼 클릭하면 위로 올라가게 하기
$('.btn_top').click(function(){
event.preventDefault();
$("html,body").stop().animate({scrollTop:0});
});
// 위로 특정 부분에서 보이게 하고 특정부분에서 보이지 않게 하기
$(window).scroll(function(){
if ($(document).scrollTop() >= 1134 && $(document).scrollTop() <= 20000){
$('#btn_top').fadeIn();
}
else {
$('#btn_top').fadeOut();
}
})//window scroll
</script>
<script type="module">
// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyB7t1qKHUjDWbnN3vs8oDIalQyZpWkxQPs",
authDomain: "sparta-4434f.firebaseapp.com",
projectId: "sparta-4434f",
storageBucket: "sparta-4434f.appspot.com",
messagingSenderId: "729932088012",
appId: "1:729932088012:web:6a89d4fcbdc7aa6e47f869",
measurementId: "G-EZ3P5NVH4M"
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
$("#postingbtn").click(async function () {
let comment = $("#comment").val();
let doc = {
'comment': comment
};
await addDoc(collection(db, "comment"), doc);
alert('저장 완료!');
window.location.reload();
})
let docs = await getDocs(collection(db, "comment"));
docs.forEach((doc) => {
let row = doc.data();
let comment = row['comment']
let temp_html = `<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">${comment}</h5>
</div>
</div>
</div>`
$('#card').append(temp_html);
})
</script>
</body>
</html>류명한 튜터님께 API 명세와 파워쉘에 대해 여쭤보았다.
CS지식의 부족함을 깨달았다.
메소드는 http의 명령에 해당한다.
클라이언트가 서버에 데이터를 요청할땐 Get으로, 클라이언트에서 서버로 회신할땐 post를 사용한다.
responss는 어떻게 응답하는지에 대해서, request는 어떤 내용을 담을지 대해서 적는다.
귀여운 걸 좋아하고 흥미가 있으면 불타오릅니다💙 최근엔 코딩이 흥미가 많아요🥰