안녕하세요. 진득 코딩입니다.  이번 시간에는 그동안 만들던 뉴스 웹페이지에 페이지네이션을 적용하고 마무리하는 시간을 가져보겠습니다.  페이지네이션   페이지네이션을 적용하기 전에 우선 API 문서부터 확인해 보도록 하겠습니다.  해당 문서에서 제공하는 정보를 살펴보면 pageSize는 20이 default 값으로 페이지 당 20개의 데이터가 오는 것을 확인할 수 있습니다.  또한 현재 보고 있는 페이지를 page로 알 수 있습니다.  위 문서에는 없지만 totalResults도 알 수 있습니다. HTML   먼저 HTML을 살펴보도록 하겠습니다.  HTML에 있는 부분은 거의 없습니다.  pagination이 들어갈 section이 추가되었습니다.   태그로 되어 있는 것은 pagination의 특성상..

안녕하세요. 진득 코딩입니다.  지금까지 뉴스 웹 페이지를 만드는 과정은 웹 페이지가 정상적으로 작동할 때만을 고려해서 만들었습니다.  에러가 생겼을 때 개발자는 개발자 툴을 통해서 에러 상황을 알 수 있지만 유저 입장에서는 이러한 상황을 알 수 없습니다.  이렇게 에러에 대해서 유저를 고려해서 필요한 것이 에러 핸들링입니다.  이번 시간에는 에러 핸들링하는 법에 대해 알아보도록 하겠습니다. try-catch문   에러 핸들링을 하는 방법으로 try-catch문이 있습니다.  try-catch문에 대해 알아보기 위해 에러가 발생하는 상황부터 알아보도록 하겠습니다.  위와 같이 그냥 문자열만 써놓으면 어떻게 될지 생각해 봅시다.   위와 같은 그냥 문자열만 써놓으면 당연히 에러가 발생하게 됩니다.   이때..

안녕하세요. 진득 코딩입니다.  저번 시간에는 API로 가져온 데이터를 화면에 출력하는 과정을 살펴보았습니다.  이번 시간에는 이렇게 가져온 데이터를 검색하는 기능을 만들어보도록 하겠습니다. API 문서 확인하기   먼저 만들어볼 기능은 카테고리 기능입니다.  이때 기능을 만들기 전에 해당 데이터를 카테고리 별로 API에서 제공해 주는지 먼저 확인해봐야 합니다.  API 문서를 확인해보면 category별로 데이터를 response할 수 있는 것을 확인할 수 있습니다.  하지만 해당 기능은 7가지 카테고리만을 제공하기 때문에 메뉴에 있는 버튼을 바꿀 필요가 있습니다.   API 문서에서 제공한다고 설명해주는 버튼만 남기고 다른 버튼들은 삭제해 주었습니다.  이렇게 API를 이용하기 위해서는 API가 제공..

안녕하세요. 진득 코딩입니다.  이번 시간에는 지난 시간에 API로 가져온 데이터들을 화면에 보여주기 위해 UI를 설정해 보도록 하겠습니다. HTML   먼저 HTML을 살펴보도록 하겠습니다.  head 부분은 bootstrap과 css 파일을 연결해주었습니다.  웹페이지의 tilte은 필자의 이름을 따서 jongsNews라고 지어줬습니다.   다음으로는 body 부분을 살펴보도록 하겠습니다.  hamburger-menu는 모바일 버전에서 나오는 메뉴로 직접 bar를 세 개 지정해서 표현해 주었습니다.  그 밑에 검색과 관련된 검색 이미지, input 박스, 버튼을 추가해 주었습니다.  웹 페이지의 제목 부분이라고 할 수 있는 사진은 NewYork Times의 웹페이지에 있는 사진을 가져왔습니다.  그 ..

안녕하세요. 진득 코딩입니다.  이번 시간에는 API를 이해하기 위한 필수 개념인 자바스크립트의 동작 원리에 대해 살펴보도록 하겠습니다.     위와 같은 코드가 있으면 어떤 결과가 나올지 예상하는 것은 쉽습니다.   예상한 대로 1, 2, 3이 순서대로 출력된 것을 확인할 수 있습니다.  이처럼 자바스크립트 코드는 위에서부터 아래로 차례대로 실행됩니다.  이를 동기적 프로그래밍이라고 합니다.   자바스크립트 엔진은 Memory Heap 영역과 Call Stack 영역으로 나뉩니다.  Memory Heap 영역은 변수와 같은 메모리들을 두서없이 저장해 놓는 메모리 공간입니다.  Call Stack은 실행하는 역할을 담당합니다.  stack은 자료형 중 한 종류로 LIFO(Last In First Out)..

안녕하세요. 진득코딩입니다.  프론트엔드의 꽃이라고 할 수 있는 API를 이용하면 백엔드와 소통을 할 수 있습니다.  프론트엔드의 역할을 간단하게 말하면 API를 요청하고 받은 데이터를 보여주는 역할을 합니다.  지금까지 자바스크립트 포스팅들은 이런 API를 잘 활용하기 위한 포스팅이라고 할 수도 있을 정도로 API의 중요도는 높습니다.  이번 시간에는 이 API에 대해 알아보고 이 API를 이용해서 뉴스 웹페이지 개발을 시작해 보도록 하겠습니다. API  API는 Application Programming Interface의 약자로 컴퓨터나 컴퓨터 프로그램 사이의 연결입니다.  한마디로 말해서 서버(백엔드)와 클라이언트(프론트엔드) 사이의 대화라고 이해해 주시면 됩니다.  하지만 현재 자바스크립트를 배..