[4기] 22일차 FE프로젝트 -호두 홈페이지 만들기5 -최종!

오늘 css 수정하고! 페이지 확인 하고! 최종적으로 완성!!!!

 

리드미에 따라 최종 설명 고고!!!

FE 프로젝트 - Hodu 홈페이지 만들기

피그마 디자인에 따라 Hodu 홈페이지 만들기

🎐 프로젝트 로고

목표

피그마 디자인을 토대로 똑같이 구현해보자!!

 

 

이렇게! 피그마를 통해 디자인을 참고하여 제작하였습니다 ㅎㅎ

⏰ 프로젝트 기간

2023.01.16 ~ 2023.01.23

🛠 기술스택

 

HODU (sohee99.github.io) 페이지 주소! ㅎㅎㅎ 열심히 만들었답니다! 

 

블로그에서는! 

 

사용한 코드에 대해 작성해볼려고 합니다!!!

 

자바스크립트 코드 보기 전, html, css에 대해 간략히 말해보자면!

 

 

일단 생각보다 너무어려웠어요 ㅠ

 

 

의미없는 div를 안쓰고 안묶을려니 부모요소가 필요하고,, 어쩔수없이 또 묶고 

묶고 묶고 ㅋㅋㅋㅋ.... 그냥 의미있는 div만들어주면 안되나...ㅋㅋㅋ 

 

 

최대한 안쓸려고 했지만 그게 힘들었달까요 ㅠ  🤣

 

또한, 처음 프로젝트를 하다보니 각각 로그인기능 회원가입기능 이렇게 만들어보았지

 

한번에 홈페이지를 만들려고 보니 어떤걸 묶고 구조에 관하여 고민을 많이하게되었다. 

 

직접 하나하나 적어가면서 작성하다보니 어느새 (div는 많지만) 작성을 완료하게되었다.

 

 

html보다 css가 더 생각이 많아져서 머엉---- 

 

몇번이고 말하지만 새삼 느낀다 flex position 다시하자 ㅋㅋㅋㅋㅋㅋㅋㅋ

 

 

위치가 진짜 내맘대로 조정이 안되는걸 깨달았고,

그래도 꾸역꾸역 나만의 길을 걷다보니 만들어져서 

 

너무 뿌듯했다 ㅎㅎㅎ 하나하나 완성한게 보여지니깐 이만큼 뿌듯한게 없는거같다!

 

이게 FE의 매력이지 ㅋㅋㅋㅋㅋㅋ

 

 

최대한 코드를 깔끔하기 위해서 마지막에 CSS를 다시한번 보고 겹치는건 최대한 붙일려고 노력했으나,

점점 깔끔을 떠나서 더러워지는거 같아 STOPㅋㅋㅋㅋ... 

 

그래도 처음 마진으로 위치 다 줬을 때는 찝찝해서 다시 다엎고 

센터로 보내서 갭으로 간격을 주었더니 나름 깔끔해졌다 ㅎㅎ

 

최대한 마진안쓰고 할려고 노력했다... 

사이간격을 비트윈으로 떨어뜨릴려고 했으나, 양쪽 마진을 줘야해서 다른 방법을 써보았다.

 

이게 더나았을려나? ㅋㅋㅎㅎ 뭐 다양한 방법으로 해보는거지 뭐~

 

 

그리고 마지막으로 자바스크립트!

 

 

1. 맨 위 스크롤 코드 

 

document.addEventListener('DOMContentLoaded', function () {
const scroll_top = document.getElementById('scroll_top');

scroll_top.addEventListener('click', () => {

window.scrollTo({
top: 0,
behavior: 'smooth'

 

1. DOMContentLoaded 를 통해 이벤트가 발생할 때까지 기다리는 이벤트 리스너를 추가!

 

2. # id 인 scroll_top 을 검색하여 변수 scroll_top 에 할당한다.

 

3. scroll_top 요소에 클릭이라는 이벤트 리스너를 추가한다.

 

4. 클릭 이벤트 시, 콜백 함수 내의 코드를 실행! 

 

5. 페이지를 맨위로 올리는 top:0을 실행하고 

 

behavior :smooth 을 이용하여 부드럽게 스크롤이 되는 코드!

 

버튼 누를 시, 맨위로 스크롤되며, 부드럽게 올라간다!

 

 

2.   무한스크롤 코드

// <!--무한스크롤 자바스크립트 시작!-->

    const imgGrid = document.getElementById('img_grid');
    let pageToFetch = 1;

    async function fetchImages(pageNum) {
    try {
    const response = await fetch('https://picsum.photos/v2/list?page=' + pageNum + '&limit=6');
    if (!response.ok) {
    throw new Error('네트워크 응답에 문제가 있습니다.');
}

    const datas = await response.json();
    console.log(datas);

    showImages(datas);

} catch (error) {
    console.error('데이터를 가져오는데 문제가 발생했습니다 :', error);
}
}

    function showImages(datas) {
    datas.forEach((item) => {
        const imgElement = document.createElement('img');
        imgElement.src = item.download_url;
        imgElement.alt = '';
        imgGrid.appendChild(imgElement);
    });
}

    const showMoreButton = document.querySelector('.click');
    showMoreButton.addEventListener('click', () => {
    fetchImages(pageToFetch++);
});
// <!--무한스크롤 자바스크립트 완료!-->

 

- API 에서 이미지를 가져와 img_grid인 HTML 요소에 표시하는 코드 !

 

1. id 가 imgGrid 인 html 요소를 검색하여 변수 imgGrid에 할당

 

2.  pageToFetch = 1을 통해 값1로 초기화하고 api에서 가져올 페이지 번호 추적!

 

3. 'fetchImages' 는 pageNum 매개변수를 사용하여 페이지번호를 기반으로 api에서 이미지를 가져온다! 

 

4. await 를 이용하여 api 페이지번호와 페이지 6개의 이미지 제한 지정 

( + 무한정으로 나와 고민하였으나, await을 통해 6개를 제한하고 사이트 밑까지 내릴 수 있게 하였다.  )

 

5. 만약 응답이 정상이 아닌경우, 오류 발생

 

6. 정상인경우, JSON 데이터 추출

 

7. showImages(datas) 이미지 데이터 배열 > datas 매개변수 사용하여

HTML img요소생성!

 

function showImages(datas) {
datas.forEach((item) => {
    const imgElement = document.createElement('img');
    imgElement.src = item.download_url;
    imgElement.alt = '';
    imgGrid.appendChild(imgElement);
});

 

- 배열의 각 항목에 대해 img 요소가 생성 > src속성에서 download_url 속성으로 설정 - 생성된 'img' 요소는 img_grid에 추가한다!

 

const showMoreButton = document.querySelector('.click');
    showMoreButton.addEventListener('click', () => {
    fetchImages(pageToFetch++);
});

 

querySelector 로 클래스 click를 선택하고 변수 showMoreButton에 할당한다.

showMoreButton에 클릭 이벤트리스너를 추가한다.

버튼 클릭 시, fetchImages 함수를 호출하고 pageToFetch 를 증가시키는 화살표 함수를 실행!

 

: 코드는 picsum api에서 이미지를 가져와서 html에 표시 / click 클래스가 있는 버튼 클릭 시, 실행

 

클릭할 때 마다 await 제한한 숫자 6개씩 이미지가 나온다.

 

3.   모달창 코드

document.addEventListener('DOMContentLoaded', function () {
    const modal = document.getElementById('modal');
    const btn_open_modal = document.querySelector('.click2');
    const btn_close_modal = document.querySelector('.btn_close_modal');

    btn_open_modal.addEventListener('click', () => {
    modal.classList.remove('hidden');
});

    btn_close_modal.addEventListener('click', () => {
    modal.classList.add('hidden');
});
});

 

1.  DOMContentLoaded 를 통해 이벤트가 발생할 때까지 기다리는 이벤트 리스너를 추가!

 

2. id 인 modal 을 검색하여 변수 modal에 할당한다.

 

3. 클래스 click2을 검색하여 변수  btn_open_modal  에 할당한다.

 

4. 클래스 btn_close_modal 을 검색하여 변수  btn_close_modal  에 할당한다.

 

5.  btn_open_modal 에 클릭 이벤트리스너를 추가한다. 

버튼클릭 시, 모달의 hidden이 제거된다.

 

6.  btn_close_modal 에 클릭 이벤트 리스너를 추가한다. 

닫는 버튼 클릭 시, hidden을 모달에 다시 추가하여 숨긴다.

 

: 버튼 클릭 시, 모달에 적용되어있던 hidden을 제거하고 

닫기 버튼 클릭 시, hidden을 모달에 다시 추가하여 숨김으로서 

 

효과적으로 모달을 완성할 수 있었다! 

 

 

 

 

이렇게! 자바스크립트를 적용해보았는데, 

 

생각하는걸 함수에 적용하는것도 힘들었고, 내가 구현하고 싶은 것을 하려면 

어떤 함수를 써야할까,,, 많은 고민을 한 시간이였다.

 

 

이번 과제에서 제일어려웠던 부분은 무한스크롤 부분이였다. 

 

 

( 배운걸 최대한 써먹을려고했는데 새로운 함수를 찾고 찾고 찾고 

 

비록 내가 처음 생각한대로 배운것을 위주로 사용하지는 않았지만, 

 

그래도 새로운 방향도 알게 되어 공부가 되는 계기가 되었다! )

 

 

내일 프로젝트 코드리뷰 할 때, 다른 사람들은 어떻게 코드를 작성하였는지 확인 후

 

다시 한번 더 자바스크립트를 다시 짜야겠다!

 

 

이렇게 이번 프로젝트를 잘 마무리 했고!!!!

 

프로젝트를 통해 확실히 나의 실력에 대해 다시한번 생각해보는 시간이였고 배움이 많은 시간이였다!

 

혼자 한번 홈페이지 만들어봐야징~~~~~~~

 

 

 

오늘은 이렇게 코드 설명으로 공부 완료!!!!! ㅎㅎㅎ

 

오늘 생각보다 일찍 끝나서 

 

빨리 블로그 작성을 하였는데엽 ㅎㅎ 블로그작성하면서 한번 더 코드 보기 좋았고~ 

 

내일 공부도 파이팅!!!!!