프로젝트1_팀원소개하기_03

정소현·2024년 7월 17일
0

팀프로젝트

목록 보기
5/50

복기

  1. fetch를 사용한 컴포넌트화
  2. 원하는 위치로 페이지이동 & 스크롤 이동
  3. 마우스 hover 시 class add&remove
  4. grid를 사용한 카드만들기 + slider효과 주기
  5. nav 메뉴바 icon눌러서 보이게 한 후 화면 상단 오른쪽 위치 고정시키기
  6. css에서 scroll바 기능은 살리고 안 보이게 없애기
  7. 알게된 것 (window와 document차이!)

⭐️ 첫번째 고민했던 것! ⭐️

바닐라 js로 작업하다보니 공통적으로 반복되고 거의 수정이 없는 header, footer를 매 페이지마다 붙여넣는 것이 번거로웠다. 수정사항이 생겼을 때 개별적으로 들어가서 수정해야하는 것이 불편했다.
=> header와 footer를 컴포넌트화 하기로 결정!
이래서 리액트 써야하나보다 불편해!!!

🌟 해결한 방법

fetch사용!

fetch의 핸들링 방법

const res = fetch(url,[option]).then(response => [핸들링)

res.text() – 요청에 대한 응답을 text 형태로 반환한다.
res.json() – json 객체로 반환한다. 
res.formData() – 응답을 FormData 객체 형태로 반환한다.
res.blob() – 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환한다.
res.arrayBuffer() – 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환한다.
res.body() - 응답 본문을 청크 단위로 읽을 수 있다.

fetch 적용한 방법

  1. html 구조에 header라는 아이디를 가진 태그가 있다면 DOM으로 가져올 수 있도록 만든다.
  2. if(조건문)으로 fetch를 통해 공통되어 빼둔 header.html를 요청한다.
  3. 객체를 받고 then method로 res.text()로 변환시킨다.
  4. 변환시킨 텍스트를 DOM요소에 innerHTML 로 붙여준다.

작성한 코드

const headerFooterComponent = () => {
      const headerId = document.querySelector("#header");
      const footerId = document.querySelector("footer");

      if (headerId) {
        const header = fetch('/header.html');
        header
          .then((res) => res.text())
          .then((text) => {
            console.log(text)
            document.querySelector("#header").innerHTML = text;
          })
      }
    }

    headerFooterComponent()

💥 생긴 문제

연동을 하니 html은 적용이 됐는데 만들어두었던 css가 적용이 안됨.

찾은 이유 : link로 걸어둔 headerFooter.css는 내가 쓴 코드보다 이미 연동됐음. 시점의 차이로 인해 적용이 되지 않은 것

✨ 해결 방법

만든 함수 뒤에 아래 코드를 덧붙여 html을 불러온 후 css가 연동되게 하였다.

let style = document.createElement("link");
        style.href = "headerFooter.css";
        style.rel = "stylesheet";
        document.head.appendChild(style);
const headerFooterComponent = () => {
  const headerId = document.querySelector("#header");
  const footerId = document.querySelector("#footer");

  if (headerId) {
    const header = fetch("header.html");
    header
      .then((res) => res.text())
      .then((text) => {
        document.querySelector("#header").innerHTML = text;
      });
  }
  if (footerId) {
    const footer = fetch("footer.html");
    footer
      .then((res) => res.text())
      .then((text) => {
        document.querySelector("#footer").innerHTML = text;
        let style = document.createElement("link");
        style.href = "headerFooter.css";
        style.rel = "stylesheet";
        document.head.appendChild(style);
      });
  }
};
headerFooterComponent();

공통적으로 쓰이는 페이지들에 모두 붙여주었다!

⭐️ 두 번째 고민했던 것! ⭐️

header의 nav 메뉴바를 눌렀을 때 특정한 위치로 이동할 것

🌟 해결한 방법

  • a링크 부분에 이동하고 싶은 곳 위치의 아이디를 붙여 자바스크립트 코드를 짜서 연동했다.
  • offset()함수를 사용!
    html
<header>
    <a href="main.html">
        <h1>Do it Coding</h1>
    </a>
    <nav class="menu">
        <ul>
            <a href="#team-desc" class="scroll_move">
                <li id="category-1">팀 소개</li>
            </a>
            <a href="#member-desc" class="scroll_move">
                <li id="category-2">팀원 소개</li>
            </a>
            <a href="#gallery" class="scroll_move">
                <li id="category-3">갤러리</li>
            </a>
        </ul>
    </nav>
</header>
$(document).ready(function ($) {
  $(".scroll_move").click(function (event) {
    event.preventDefault();
    $("html,body").animate({ scrollTop: $(this.hash).offset().top }, 500);
  });
});

💥 생긴 문제

이동하고자 하는 페이지내에서는 메뉴바가 작동하는데 상세페이지에서는 이동되지 않았다.

찾은 이유 : 다른 페이지에서 연동시키기 위해서는 html 링크연동할 때 이동하고자하는 페이지.html도 같이 넣어줘야 한다!!

✨ 해결 방법

  • html 수정
<header>
    <a href="main.html">
        <h1>Do it Coding</h1>
    </a>
    <nav class="menu">
        <ul>
            <a href="/sparta_first/main.html#team-desc" class="scroll_move">
                <li id="category-1">팀 소개</li>
            </a>
            <a href="/sparta_first/main.html#member-desc" class="scroll_move">
                <li id="category-2">팀원 소개</li>
            </a>
            <a href="/sparta_first/main.html#gallery" class="scroll_move">
                <li id="category-3">갤러리</li>
            </a>
        </ul>
    </nav>
</header>

⭐️ 세 번째 고민했던 것! ⭐️

mouse hover 시 css opacity 변경

🌟 해결한 방법

  • jquery 라이브러리의 mouseover를 사용해 css opacity를 변경했다.
$(document).ready(function () {
      $("#after").mouseover(function () {
        $(".showP").css("opacity", "1");
      }) // 마우스가 올라갔을 때 
      $("#after").mouseout(function () {
        $(".showP").css("opacity", "0")
      }) // 마우스가 내려갔을 때
    })

💥 생긴 문제

맨 처음 페이지가 로딩했을 때 문구가 보인다 + 새로고침 했을 때도!

✨ 해결 방법

mhover 시 class 추가 및 제거

  • jquery 라이브러리의 hover 를 사용했다.

js

 $(document).ready(function () {
      $("#after").hover(function () {
        $(".showP").addClass("hoverEffect");
        // 마우스가 올라갔을 때 
      }, function () {
        $(function () {
          $(".showP").removeClass("hoverEffect");
          // 마우스가 내려갔을 때 
        })
      })

css

.showP {
  opacity: 0;
}
.hoverEffect {
  opacity: 1;
}

⭐️ 네 번째 고민했던 것! ⭐️

grid를 사용한 카드만들기 + slider효과 주기

하게 된 이유

  • 어제까지 작업했던 레이아웃이 애매하다고 느꼈고 더 예쁘게 바꾸고 싶었다!! 카드에 마우스를 올리면 내가 쓴 글이 보이도록 하고싶었다!
    grid-template-columns,grid-template-rows 는 이미 만들어둔 상태였기에 줄만 간단히 수정하였다.

🌟 해결한 방법

  1. css에서 :before를 이용하여 card복사본을 하나 더 만들어주었다. 내가 썼던 글이 완전히 가려져야 하기에 width, height, position, grid-column, grid-row를 똑같이 맞춰주었다. 그리고 background-image를 넣어 카드가 완전히 겹치도록 해주었다.
  2. :before는 css에 [content: "", display: block]을 꼭 넣어줘야만 한다! 그래야 inline-block으로 인식하지 않음!
  3. hover했을 때 옆으로 넘어간 :before이미지가 보이지 않았으면 해서 :before에 overflow:hidden 으로 넣어주었다.
  4. hover했을 시 위치가 변경 되도록 card마다 top, left 를 변경시켜주었다.

작업한 코드

.box2 {
  grid-column: 1/3;
  grid-row: 1/2;
  background-color: aliceblue;
}
.box2:before {
  background-image: url(./img/SUBIMG5.jpg);
  background-size: cover;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  grid-column: 1/3;
  grid-row: 1/2;
  transition-duration: 1s;
}
.box2:hover:before {
  top: -100%;

완성된 카드 그리드!!

hover시 나오는 링크!!

⭐️ 다섯번째 고민했던 것! ⭐️

nav바를 상단 위 아이콘에 hover하면 볼 수 있도록 변경하기+ 위치고정시키기

하게 된 이유

  • 팀원들과 상의 하면서 css디자인을 전체적으로 많이 변경하게되었다!
    컨셉이 좀 더 모던하고 간결한 느낌으로 바뀐만큼 header의 nav바가 많지 않기 때문에 깔끔하게 만드는 게 좋을 것 같다고 생각했다!
    팀원분의 아이디어로 아이콘을 상단 오른쪽에 고정시키기로 결정
    position을 활용하면 될 것 같았다!

🌟 해결한 방법

  1. header html에 이모티콘을 하나 더 추가 해주었다.
  2. position: "fixed"로 고정시키는 게 맞았고! hover도 함께 활용해 상단 바위에 아이콘에 hover 시 메뉴를 볼 수 있도록 만들었다!

완성된 코드
html

 <nav class="menu">
        <svg id="menuIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
            style="fill: rgba(0, 0, 0, 1);transform: msFilter;">
            <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path>
        </svg>
        <ul id="menus_show">
            <a href="/sparta_first/main.html#team-desc" class="scroll_move">
                <li id="category-1">팀 소개</li>
            </a>
            <a href="/sparta_first/main.html#member-desc" class="scroll_move">
                <li id="category-2">팀원 소개</li>
            </a>
            <a href="/sparta_first/main.html#gallery" class="scroll_move">
                <li id="category-3">갤러리</li>
            </a>
        </ul>
    </nav>

css

#menus_show {
  width: 80px;
  overflow: hidden;
  position: relative;
  right: 18px;
  padding: 10px 0px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  list-style-type: none;
  background-color: rgb(124, 124, 124);
  opacity: 0;
}
.menu:hover #menus_show {
  opacity: 1;
  transition-duration: 0.5s;
}

🔥 오늘까지의 완성된 사이트 사진


오늘 작업하면서 새롭게 알게 된 것

1.transition-duration이 display는 적용되지 않는 다는 것

처음에 hover시 display:block; hover가 없을 시 display:none; 으로 하고 transition-duration 을 주었는데 display는 transition-duration이 안 먹다는 것을 알게 됐다!!
그래서 opacity를 사용했다.

2. document와 window차이

  • window는 브라우저라는ost환경에서 동작하는 최상위 객체이며 브라우저 환경해서 동작하는 여러 API들의 가교 역할을 한다.
  • document는 window객체 안에 존재하고, document에는 잠재적으로 보여질 수 있는 dom에 대한 정보가 저장이 되어있다.
  • window객체와 document객체에서 수용 가능한 eventList가 달라서 같은 addEventListener이 있다고 해도 용도에 맞게 호출해야한다!

오늘의 후기🌝

중간중간에 막힐 때도 있었고 어떻게 해결해야 할 지 계속해서 구글링하며 하루종일 시간을 보냈다...!
앉아서 약 15시간이 뚝딱 지나가버렸는데 팀원들이랑 중간중간에 상의도 하고 너무 재밌게 작업한 것 같아서 행복한 하루였다 ㅎㅎㅎㅎ
앞으로도 물론 몇 시간동안이나 해결 안돼서 끙끙 앓는 시간들이 있겠지만 그래도 해결하고 나서의 행복함과 성취감을 생각하며 잘 견뎌봐야겠다!!

profile
정소현
so
이전 포스트

프로젝트1_팀원소개하기_02

다음 포스트

프로젝트2_영화페이지 빌드업_1

0개의 댓글