2025. 2. 27. 13:00ㆍJavaScript
안녕하세요. 진득 코딩입니다.
이번 시간에는 지난 시간에 API로 가져온 데이터들을 화면에 보여주기 위해 UI를 설정해 보도록 하겠습니다.
HTML
먼저 HTML을 살펴보도록 하겠습니다.
head 부분은 bootstrap과 css 파일을 연결해주었습니다.
웹페이지의 tilte은 필자의 이름을 따서 jongsNews라고 지어줬습니다.
다음으로는 body 부분을 살펴보도록 하겠습니다.
hamburger-menu는 모바일 버전에서 나오는 메뉴로 직접 bar를 세 개 지정해서 표현해 주었습니다.
그 밑에 검색과 관련된 검색 이미지, input 박스, 버튼을 추가해 주었습니다.
웹 페이지의 제목 부분이라고 할 수 있는 사진은 NewYork Times의 웹페이지에 있는 사진을 가져왔습니다.
그 밑에 있는 menus에는 데스크톱 화면일 때 보이는 메뉴들을 구성해 두었습니다.
그 아래에 있는 <section> 태그에는 API로 받아온 데이터들을 표현해 주는 공간입니다.
그 밑에는 bootstrap과 JS 파일을 연결해 둔 코드가 위치하고 있습니다.
css
다음은 CSS을 살펴보도록 하겠습니다.
가장 먼저 나오는 스타일은 head-line 관련 스타일입니다.
justify-content를 이용해서 head-line을 중앙에 위치시키고 크기를 조절해 주었습니다.
menus에는 가로 정렬을 해주고 flex-wrap을 이용해서 화면이 작아졌을 때 반응형으로 메뉴들이 위치할 수 있도록 해주었습니다.
menus에 있는 버튼들은 깔끔한 스타일을 주었고 해당 버튼에 hover 효과를 주었습니다.
다음은 news 관련 스타일입니다.
해당 div는 HTML에서는 찾아볼 수 없는데 이는 render() 함수를 이용해서 기사를 표현해 줄 때 해당 기사를 감싸고 있는 div이기 때문입니다.
news에 border-bottom을 주어 각 기사마다 경계선을 그어주었고 기사 사진의 크기를 조절해 주었습니다.
다음은 search 관련 스타일입니다.
검색 이미지의 크기를 조절하고 hover 효과를 주었습니다.
검색 input 박스는 기본적으로 숨겨두었고 스타일을 주었습니다.
또한 focus 효과를 주어 검색을 위해 검색창을 클릭하면 테두리 색상이 바뀌도록 설정해 주었습니다.
검색 버튼도 기본적으로 숨겨두었고 스타일을 주고 hover 효과를 주었습니다.
다음으로 반응형 웹페이지를 위한 미디어쿼리를 살펴보도록 하겠습니다.
화면이 작아졌을 때 menus는 숨기고 hamberger-menu는 표시되도록 설정해 주었습니다.
모바일 메뉴를 눌렀을 때 menus에 있는 버튼이 나오는데 화면이 작아졌기 때문에 크기를 살짝 줄여주었습니다.
또한 hamberger-menu의 스타일을 조절해 주었습니다.
위 css 코드도 모바일 버전을 위한 미디어 쿼리에 있는 스타일들입니다.
화면이 작아졌기 때문에 사진이 위로 올라오고 글들이 아래로 내려가는데 이때 사진을 가운데 정렬해 주었습니다.
또한 기사 contents들을 세로로 정렬해 주고 가운데 정렬 해주었습니다.
search도 약간의 스타일 조절을 해주었습니다.
마지막으로 데스크톱 환경이 되었을 때 다시 hamburder-menu를 안 보이게 숨겨주기 위해 미디어 쿼리를 활용해 주었습니다.
getLatestNews() 함수에는 render() 함수를 추가해 주었습니다.
저 위치에서 코드가 실행되어야 API로 받아온 데이터를 활용할 수 있습니다.
다음은 이번 포스팅의 메인 함수인 render() 함수입니다.
newsHTML에 newsList로 받아온 데이터들을 map에 담아서 활용합니다.
위에 주석처리한 부분들은 예외 처리를 설정해 두었는데 API로 가져온 데이터들 중에서 예외 상황이 존재하지 않는 변수들을 테스트하기 위해 작성한 코드들입니다.
API에서 가져온 데이터들 중 예외 처리가 필요한 데이터들은 따로 함수에 담아서 if문으로 예외처리를 하고 본격적인 render() 함수가 실행되도록 하였습니다.
description 데이터에 경우 내용이 없는 경우에는 문자열을 출력해 주고 내용이 200자가 넘는 경우에는 200자까지만 출력하고 그 이후의 ...을 붙여 출력하도록 했습니다.
image의 경우 이미지가 없는 경우에는 assets 폴더에 있는 이미지로 대체하기 위해 코드를 작성하였습니다.
그런데 저대로 코드를 작성하면 큰따옴표가 없는 상태로 데이터가 들어가기 때문에 src가 인식하지 못해서 따옴표를 추가하는 코드를 따로 작성해 주었습니다.
예외처리가 끝나게 되면 return 하는 부분이 나오는데 이 부분이 바로 HTML에 보이게 되는 기사입니다.
img의 경우 링크 데이터를 받았지만 해당 링크 자체가 404 등 에러가 발생했을 때는 위에 있는 예외 처리로 처리할 수 없습니다.
따라서 <img> 태그에 onerror를 사용해서 받아온 링크에 문제가 생길 경우에 대체 이미지를 사용할 수 있도록 코드를 작성해 주었습니다.
위와 같이 return 한 코드를 getElementById를 이용해 news-board에 그려주도록 코드를 작성하였습니다.
다음은 timeAgo() 함수를 살펴보도록 하겠습니다.
해당 함수는 API에서 받아온 데이터를 ~ago 형태로 바꿔주는 함수입니다.
위 함수는 햄버거 메뉴를 눌렀을 때 나오는 메뉴를 따로 만들지 않고 원래 있던 버튼들을 출력될 수 있도록 해주는 함수입니다.
위 함수 덕분에 햄버거 메뉴를 위한 버튼들을 따로 만들지 않고 재사용이 가능해졌습니다.
다음은 search-icon을 클릭했을 때의 이벤트를 위한 함수입니다.
해당 함수를 누르게 되면 input 박스와 searchButton이 보이게 되고 다시 누르게 되면 숨겨지게 하는 역할을 하고 있습니다.
시연 영상
지금까지 구현한 웹페이지 데스크톱 버전입니다.
돋보기 아이콘을 누르게 되면 input 박스와 button이 나타났다가 숨겼다가 할 수 있습니다.
기사들이 화면에 출력된 것을 볼 수 있고 사진이 없는 기사는 대체 이미지가 출력되는 것을 확인할 수 있습니다.
다음은 모바일 버전의 화면입니다.
데스크톱 화면에서 메뉴가 사라지고 햄버거 메뉴가 생긴 것을 확인할 수 있습니다.
또한 기사의 사진이 위로 올라가고 기사는 아래로 위치하는 것을 확인할 수 있습니다.
이번 시간에는 저번 시간에 API를 통해 받아온 데이터를 출력하기 위해 UI 설정을 해주었습니다.
이제 기본적인 웹페이지의 구색은 갖추었고 자바스크립트를 이용해 여러 기능을 추가하는 일만 남게 되었습니다.
이번 포스팅은 여기까지입니다.
궁금하신 사항이나 문의하실 사항은 댓글로 남겨주시면 열심히 답글 달도록 하겠습니다.
끝까지 봐주셔서 감사합니다.😊
'JavaScript' 카테고리의 다른 글
| 자바스크립트 뉴스 웹페이지 예외 처리를 해보자 (2) | 2025.03.01 |
|---|---|
| 자바스크립트 뉴스 웹페이지에 검색 기능을 만들어보자 (2) | 2025.02.28 |
| 자바스크립트 동작 원리에 대해 알아보자 (0) | 2025.02.26 |
| API를 이용해서 뉴스 웹페이지를 만들어보자 (0) | 2025.02.26 |
| 자바스크립트 최신 기술에 대해 알아보자 (0) | 2025.02.24 |