본문 바로가기

코린이공부목록

 (73)
[뉴스 타임즈] 반복된 코드 정리 코드는 거의 다 짰는데.. 너무 중복된 코드가 많죠? 그래서 중복된 코드를 간결하게 만들어주는 작업을 할것입니다용 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' : '..
자바스크립트의 동작 원리 자바스크립의 동작 원리는 무엇일깡? 먼저 저는 이론을 좋아하지 않기때문에 예제를 들면서 보겠습니다. console.log(1) setTimeout(()=>{ console.log(2) }, 2000) console.log(3) 자 이렇게 작성을 하면, 어떻게 결과가 나올 것 같나요? 1 다음 3 나오고 2초 뒤에 2가 나오게 됩니다 이걸 이해하려면 자바스크립트의 동작원리에 대해 이해해야합니다요 자 이걸 보면서 봐보자구용 먼저 내가 요청한 코드가 위에서 적은 코드라고 생각하고.. 자바스크립트는 하나의 Stack 밖에 없서요 이때 Stack 이 멍미? 하시겠죠? 자바스크립트 코드가 실행되면 스택 프레임이 쌓이는 장소 스택에 새로운 코드(프레임)이 들어오고 실행이 완료되면 나간다. 처음에 들어간 것이 제일 마..
[뉴스 타임즈] 뉴스 API 불러오기 api 를 불러오기 전에 api-key 를 받아옵시다! quick start 메뉴 클릭! 그리고 옆에 나오는 주소로 갑시다요 그리고 계정을 만들고 나면, 이메일 인증을 꼭!!!!!!! 해주셔야해요 ㅎㅎ 이러면 계정만들기는 끝. (계정 안만들면 key 못 받어) 그러고 이제 화면이 바뀌면서 요렇게 api 키가 받아진 모습을 볼 수가 있습니당. 프로젝트를 만드는 동안에 많이 쓸거니까 복사해서 메모장에 붙여넣기 ~ 근데 이 api 잘 되는지 안되는지 확인할 수 있는 방법이 머야? 바로 테스트 해볼 수 있는 프로그램이 있땅! 그건 바로 postman browser 이라는 크롬 프로그램입니당 구글에 검색하시고 크롬 다운로드 하면 될듯싶네요 ㅎㅎ 그리고 앱을 실행하시면 로그인 하시면 됩니다 (저는 구글로 로그인!)..

티스토리툴바