Javascript/응용프로젝트 (15) 썸네일형 리스트형 [뉴스 타임즈] 반복된 코드 정리 코드는 거의 다 짰는데.. 너무 중복된 코드가 많죠? 그래서 중복된 코드를 간결하게 만들어주는 작업을 할것입니다용 1. 각 함수에서 필요한 url 을 만든다. 2. api 호출 함수를 만든다. 이 2가지가 지금 여러 함수에서 겹치고 있는 코드라서 이 코드를 간결하게 묶어줄거에요! // 뉴스 Api 갖고 오기 let news = []; // articles 를 담아줄 변수 const h2 = document.querySelectorAll('#news_cont h2') const newsContents = document.getElementById('news_contents') // 각 함수에서 필요한 url , api 호출 함수 const getNews = async() => { let response =.. [뉴스 타임즈] 키워드 검색 이제 키워드를 검색하면 키워드에 대한 내용이 나올 수 있도록 해줄겁니당! 먼저 검색할 수 있는 html 이 필요하겠죠? 저는 미리 만들어놨습니당. 자 요렇게 만들어놨구용 이제 이 html 을 자바스크립트 에서 불러옵시당. //숨겨진 메뉴 카테고리 클릭 const menu2 = document.querySelectorAll('#h_menu li'); menu2.forEach((menu2Item) => { menu2Item.addEventListener('click', (event) => getNewsByTopic(event)); }) // 웹 메뉴 카테고리 클릭 menu.forEach((menuItem) => { menuItem.addEventListener('click', (event)=> getNews.. [뉴스 타임즈] 카테고리 별 데이터 보여주기 이제는 위에 카테고리 메뉴를 이용해봐야겠죠?? 괜히 힘들게 만들은게 아니랍니다 .. ㅠㅠ api 별로 무슨 카테고리를 제공하는지 먼저 체크하셔야해요! 먼저 메뉴 탭들을 모두 갖고와야겠죠? button 으로 만드셔도됩니당. 저는 ul 태그의 li를 사용해주었어요 저희 코드 맨 위에 버튼을 가져오는 코드를 입력하겠습니당. let news = []; // articles 를 담아줄 변수 const categoryMenu = document.querySelectorAll('#h_menu li'); console.log(categoryMenu) 변수 news 아래에 만들어주겠습니다요. 그리고 콘솔로그로 잘 가져왔는지 꼭 체크!!!!! 이제 이 카테고리메뉴들에게 클릭 이벤트를 줘야겠죠? 클릭을 해야 카테고리 별로 .. [뉴스 타임즈] API 에서 받아온 데이터를 UI에 보여주기 2 자 이번엔 무엇을 할꺼냐묜! 데이터를 받아오는 도중에 데이터가 null 일 경우나 비어있을 경우 참 난감하죠? 그럴 때 대체해줄 사진이나, 글을 입력해주는 것과 기사가 올라온 시간을 좀 더 트뤤디~ 스럽게 바꾸는 방법을 알려드릴게요 오홍홍 자 먼저 데이터가 null일 경우 어떻게 할랭?.. 어떻게 해야할까요? 먼저 당연히 map 안에서 반복하게끔 해야겠죠? ㅋㅋ 저는 모두 If 문을 해주었습니당. newsHTML = news.map((newsItem) => { if(newsItem.urlToImage === null){ newsItem.urlToImage = '../images/noimg_fac.gif' }; if(newsItem.title === null || newsItem.title === ""){.. [뉴스 타임즈] API 에서 받아온 데이터를 UI에 보여주기 1 먼저 api 데이터를 ui에 보여주기 전에! html 과 css 는 대충 마무리 한 상태입니당. css 는 반응형이 되도록 만들었어요.. (그래서 하루걸림..) ㅋㅋ 깃허브에 올려놓을테니 참고해주셔요... ㅎㅎ https://github.com/imsmallgirl/NewsTimes GitHub - imsmallgirl/NewsTimes Contribute to imsmallgirl/NewsTimes development by creating an account on GitHub. github.com 자 그럼, 저희가 받아온 데이터를 ui 에 보여주도록 해봅시당 ㅎㅎ 아 시작하기 전에 말씀 드릴 거! 전에 쓰던 api 는 요청을 너무 많이 해서 제한에 걸려서.. 다른 뉴스 api를 사용하게 되었어요 ㅠㅠ.. [뉴스 타임즈] 뉴스 API 불러오기 2 자바스크립트 동작 원리에 대해 알았으면 ! 이제 다시 불러오쟈구요? 이제 데이터를 보내야겠지?? 나 헤더에 내 api-key 쓸거궁~ 무슨 api url 인지도 보낼꼬야~~ 하려면 어떻게 해야할까? 데이터를 보내는 방법은 다양합니더! Ajax axios fetch (가장 심플하고 좋다고 합니다 정확하지 않고, 사람마다 다를 수 있다는 점.) 자 fetch 를 사용해서 보내볼까요? const getLatestNews = () => { let url = new URL(`https://api.newscatcherapi.com/v2/latest_headlines?countries=KR&topic=business&page_size=4`) let header = new Headers({ 'x-api-key' : '.. [뉴스 타임즈] 뉴스 API 불러오기 api 를 불러오기 전에 api-key 를 받아옵시다! quick start 메뉴 클릭! 그리고 옆에 나오는 주소로 갑시다요 그리고 계정을 만들고 나면, 이메일 인증을 꼭!!!!!!! 해주셔야해요 ㅎㅎ 이러면 계정만들기는 끝. (계정 안만들면 key 못 받어) 그러고 이제 화면이 바뀌면서 요렇게 api 키가 받아진 모습을 볼 수가 있습니당. 프로젝트를 만드는 동안에 많이 쓸거니까 복사해서 메모장에 붙여넣기 ~ 근데 이 api 잘 되는지 안되는지 확인할 수 있는 방법이 머야? 바로 테스트 해볼 수 있는 프로그램이 있땅! 그건 바로 postman browser 이라는 크롬 프로그램입니당 구글에 검색하시고 크롬 다운로드 하면 될듯싶네요 ㅎㅎ 그리고 앱을 실행하시면 로그인 하시면 됩니다 (저는 구글로 로그인!).. 이전 1 2 다음
