📝[ESTsoft 백엔드 개발자 부트캠프] 첫 번째 프로젝트 회고➰(GitHub Repo)

@Project-Repo
안녕하세요, 오늘은 첫 번째 프론트 프로젝트 관련하여
총 9일이라는 시간 동안 개발하는 과정에서
어떻게 진행하였는지 readme 파일과 배포 페이지로
발표하는 시간을 가져보았는데요.

강사님께 피드백을 받고 어떤 문제가 있는지 확인해보았습니다.
우선, 미처 발견하지 못한 부분을 캐치해주시고
엄청나게 꼼꼼한 피드백을 듣고
역시 전문가는 다르구나!를 느꼈습니다🥹

📌 피드백

1️⃣ 메뉴, 모달창 열릴 때 스크롤 비활성화 및 외부 클릭 시 창 닫힘 처리

👉🏻 스크롤 비활성화는 body에 ‘overflow:hidden’을 이용하여 모달창 자바스크립트에 해당 기능이 작동할 수 있도록 추가해주었습니다.

📎 구현 코드

/* 모달창 표시 */
function showModal(event) {
    event.preventDefault(); // 기본 동작 방지
    if (emailCheck()) {
        document.getElementById('modal').style.display = 'flex';
        document.body.style.overflow = 'hidden'; // 스크롤 막기
    }
}

/* 모달창 닫힘 */
function closeModal(event) {
    event.preventDefault(); // 기본 동작 방지
    document.getElementById('modal').style.display = 'none';
    document.body.style.overflow = ''; // 스크롤 막기 해제
}

2️⃣ 상단 스크롤 탑 버튼이 호버 시 보이지 않도록 설정

👉🏻 이건 상상도 못한 오점이었습니다🫢
화면에서 최상단으로 위치했을 때 스크롤 버튼이 안 보여서 몰랐는데 빈 화면 위에 마우스를 올리니 호버로 인해 보이는 현상이 있었습니다.
👉🏻 오퍼시티 값이 이상한 곳에 있는 걸 확인하고 고쳐주었습니다.

3️⃣ 내비게이션 커서 포인터 추가

'cursor: pointer'
👉🏻 이건 단순히 제가 바보였습니다.
앞으로는 커서 속성도 빠짐없이 체크해야겠다고 느꼈습니다.

4️⃣ 다운로드 버튼 앵커 -> 버튼 태그로 변경

👉🏻 구글에서 찾아보았을 때 파일을 내려받는 버튼 같은 경우는 앵커 태그를 사용하면 좋다고 해서 넣었는데 이 부분은 수정은 했지만 조금 더 찾아봐야겠습니다.

⚠️ background, background-image 이미지 경로 오류

👉🏻 로컬에서는 위 이미지 내 스타일 태그를 CSS 파일로 분리해도 잘 보이는데 배포 페이지에서는 경로가 잘못되어 보이지 않는 현상이 생겼습니다.

찾아보니 GitHub 배포 페이지가 정적 페이지만 배포가 가능하다••• 뭐 이런 거여서 파일 경로를 잘 못 찾는거라네요! 경로를 잘 써주었는데도 해결을 하지 못했습니다.

스타일시트나 자바스크립트 파일 등은 경로가 맞는데 스타일 시트 안에 생성한 이미지 속성만 안되네요😭

끗⭐️