본문 바로가기

Javascript

 (38)
[뉴스 타임즈] 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 이라는 크롬 프로그램입니당 구글에 검색하시고 크롬 다운로드 하면 될듯싶네요 ㅎㅎ 그리고 앱을 실행하시면 로그인 하시면 됩니다 (저는 구글로 로그인!)..
API (Application Programming Interface) api 자바스크립트 그리고 프론트엔드계의 꽃이라고도 불리우는 api 정말 중요한 부분이라는걸 알 수 있겠찌?! api는 무엇에 약자일까용? (영 알 못) Application Programming Interface 라고 합니다. 먼저 "웹사이트" 에 대해서 알아볼까요?! 웹사이트에는 프론트엔드와 백엔드 분야가 나뉘어져있어용! 간단히 설명하자묜 프론트엔드는 유저에게 보여지는 부분을 담당 백엔드는 프론트엔드가 보여줄 정보를 가져다주는 부분을 담당 이렇게 백엔드가 정보를 주고 프론트엔드가 받는 이 부분에서 사용되는게 바로 API 라는 말!!!! 근데 우리가 백엔드까지 해서 혼자 API 만들 수 있셔? 아니.. 난 불가능이여.. ㅠㅠ 그래서 남이 또는 기관에서 만든 API 를 쓸거란 말이조... ? ㅎㅎ api..
배열 함수 findIndex() findIndex() 얘는 find() 의 형제 find에서 찾은 아이템의 인덱스 번호를 알려줍니당. 빠르게 예시 보고 넘어가자구용 let names = [ "Steven Paul Jobs", "Bill Gates", "Mark Elliot Zuckerberg", "Elon Musk", "Jeff Bezos", "Warren Edward Buffett", "Larry Page", "Larry Ellison", "Tim Cook", "Lloyd Blankfein" ] let result1 = names.findIndex((item) => { return item.startsWith('L') }) console.log(result1) find() 했을 때 찾은 사람이 Larry Page 입니다 그 아이템의 ..
배열 함수 find() find() 얘는 filter() 함수와 비슷한 친구입니다. 같은 점은 조건을 붙히면 그 조건에 맞는 아이를 필터해주는 것인데.. fliter() 는 조건에 맞는 아이를 모두 배열에 담아서 준다면 find() 는 조건에 맞는 아이 중 하나만 string 타입으로 줍니당. 배열로 주지 않아!!!!!!! 예시 봅시다. let names = [ "Steven Paul Jobs", "Bill Gates", "Mark Elliot Zuckerberg", "Elon Musk", "Jeff Bezos", "Warren Edward Buffett", "Larry Page", "Larry Ellison", "Tim Cook", "Lloyd Blankfein" ] let result1 = names.find((item) ..

티스토리툴바