[내일배움캠프 4일차] _ 캠프(개인 페이지 구현 완료, Github 웹 배포)

개인 소개 페이지 구현을 완료했다.
깃허브로 페이지 배포를 해봤다.

[오늘의 학습 키워드]

#프로젝트 개발 #깃 배포

---

[학습 내용 정리]

1. Github 배포 페이지 만들기

Settings - Pages로 이동한다.
Branch의 항목을 main, root로 설정하면 된다.
Actions에서 배포의 성공 여부를 확인할 수 있다.

아래는 배포 페이지 링크이다.
https://crocusia.github.io/sparta_spring6-team16-_week1/

우리 XVI팀을 소개해요

 (아니 내 얼굴 이렇게 적나라하게 보이는거였냐고... 왜죠?)

2. 개인 소개 페이지

처음에는 간단하게 만들었다.
그런데 팀원이 만든 페이지를 보고 자극을 받아서 제대로 만들었다.

주요 소개	이력서에 기입하는 내용
포트폴리오	포트폴리오에 대한 내용을 디테일하게 설명하는 포트폴리오
TMI	개인적인 모습을 확인할 수 있는 TMI 영역

 

주요 소개 영역

타이핑 효과 : 이전 TIL에서 설명

포트폴리오 영역

포트폴리오 설명을 직접 작성하지 않고 데이터 베이스에 있는 내용을 가져와 Experience와 포트폴리오 영역에 기입했다.

• 파이어 베이스에 TimeStamp로 저장되어있는 데이터를 toDate 함수를 사용해 Date 객체로 변경하였다.
• toLocaleDateString()로 날짜를 년도와 월까지만 표시되도록 가공했다.

        let formattedDate = "날짜 없음";
        if (data.date && data.date.toDate) {
            const dateObj = data.date.toDate();
            formattedDate = dateObj.toLocaleDateString("ko-KR", { year: "numeric", month: "2-digit" });
        }

TMI 영역

• 콘텐츠의 y축 위치를 변경하여 플로팅 효과 적용
• 콘텐츠 위에 Hover 시, 내용 노출
• TMI 영역에 진입 시, 사이드바 배경 색 및 프로필 사진 변경
  Intersection Observer API를 사용해 화면에 해당 영역이 어느 정도 보이는 지를 감시,
  설정한 조건을 만족할 정도로 TMI 영역이 화면을 차지하게 되면 특정 요소를 변경하고
  조건을 만족하지 않는 경우 다시 기존 설정으로 돌아간다.
  
  

const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 설정 영역이 화면에 보이면 변경
            } else {
                // 설정 영역에서 벗어나면 원래대로
            }
        });
    }, { threshold: 0.3 }); //얼마나 차지하는 것을 인식할 것인가

 

일단 이 정도로 구현했는데 개선해야 할 점도 많다.

개선해야 할 점

1. 디바이스에 따른 CSS 설정
화면 크기가 달라지면 flex들의 내용이 변경되서 디자인이 변경된다.
디바이스 별 화면을 고려해서 콘텐츠를 구성하는 것

2. 화면 축소 시, 영역 인식 문제 이슈 해결
화면 크기가 작아지면서 Intersection Observer API가 영역을 제대로 인식하지 못해
TMI 영역에 위치하고 있음에도 기존 설정으로 돌아간다.

---

[학습하며 겪었던 문제점] 

1. 깃허브 배포 페이지 만들기

배포 페이지 제출을 위해 깃허브 배포를 시도했다.
index.html이 루트 페이지에 있으면 만들어진다고 했는데 안 만들어졌다.

오류 메시지를 기반으로 검색을 통해 이것저것 시도를 해봤지만 잘 되지 않았다.

여러 번의 시도 끝에 아무것도 안 했는데 겨우 성공했다
(너무 많은 걸 시도해서 이게 왜 되는 건지 감도 잡히지 않았다.)

추측하건대, 
한 팀원이 소리 소문 없이 기능 추가 및 이것저것 변경한게 fetch가 안 돼서 그런 것 같다.
pull을 한 번 하고 난 후의 시도에서 성공한 걸로 봐선 타이밍상 이게 맞는 것 같다.

캠프에서 Git으로 고생 한 번 해봐야 한다고, main branch만 사용하라고 해서 일부러 그렇게 했는데
이게 내 발목을 잡을 줄은 몰랐다.
다음 프로젝트에는 main branch만 쓰는 짓은 하지 않을 것이다.

---

[ 내일 학습할 것 ]

1. 그동안 프로젝트 개발하면서 자주 헷갈렸던 내용, 궁금했던 내용 정리