Javascript (38) 썸네일형 리스트형 Call , Apply, Bind 함수 호출 방식과 관계없이 this 를 지정할 수 있는 메소드 function.prototype 객체의 메소드 apply, call : 함수를 호출하는 역할 대표적으로 유사 배열 객체에 배열 메소드를 사용하는 경우에 활용 bind : this 로 사용할 객체만 전달 메소드의 this 와 메소드 내부의 중첩 함수 또는 콜백 함수의 this 가 불일치하는 문제를 해결하기 위해 사용 첫번째 인자를 this 에 바인딩하지만 함수를 실행하지 않고, 새로운 함수를 반환함 기존 함수 호출과의 차이점 - 해당 메소드를 사용해 함수를 "실행" 하면 함수의 첫 번째 인자로 전달하는 객체에 this 를 바인딩 할 수 있다는 것 바인딩 - bind : 결속시키다, 묶다 - 메서드와 객체를 묶어놓는 것 - 함수 또는 메소드를 .. this this 함수를 호출할 때 생성되는 실행 컨텍스트 객체 실행 컨텍스트 - 자바스크립트의 코드들이 실행되기 위해서 변수객체, 스코프체인, this 정보들을 담고 있는 곳 this 의 값은 함수를 호출하는 방법에 의해 결정된다. 상황별 this 의미 전역 공간 에서의 this 메서드로써 호출 할 때 내부에서의 this 함수로써 호출 할 때 내부에서의 this 콜백 함수 호출 시 내부에서의 this 생성자 함수 내부에서의 this 전역 공간에서의 this 전역 공간에서 this 는 전역 객체 (window) 를 가리킴 console.log(this) // {alert: f(), atob: f(), blur: f(), ...} console.log(window) // {alert: f(), atob: f(),.. 이벤트 버블링, 이벤트 캡쳐링과 이벤트 위임 이벤트 버블링이란? 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작 -> 부모 요소의 핸들러 동작 -> 최상단 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상 이벤트 버블링을 막는 방법 event.stopPropagation() 사용 이벤트의 전파를 원하지 않을 경우 사용하는 메소드 이벤트 버블링이 되지 않길 바라는 타겟에게 이벤트 리스너를 줘서, 이 메소드를 사용하면 됨. 예제 target.addEventListener("click", function(e){ e.stopPropagation(); }); 이벤트 캡쳐링이란? 이벤트 버블링과 반대로, 브라우저로부터 이벤트가 발생한 .. [뉴스 타임즈] API 에러 발생시 UI 보여주기 유저가 입력한 검색 키워드에 대한 데이터가 없을 때, 화면에선 어떻게 보일까요? 아무것도 실행이 되지 않습니다. 물론 콘솔창을 보면 오류가 나오겠지만 user 들은 콘솔 창을 보지 않아요... ㅠㅠ 그래서 저희는 이 오류 상태를 user 에게 ui 로 보여줘야한답니당. 그럼 어떻게 보여줄까요? 먼저 저희가 만들어놓은 공통 api 불러오는 함수 있죠? getNews() 라는 함수입니다. 거기에서 에러핸들링을 사용할 것입니당. (에러 핸들링 모르시는 분들은 응용+예제에 적어놨으니까 봐주셔요!) // api 호출 함수 const getNews = async() => { // 에러 코드 try{ }catch(error){ console.log('잡힌 에러는' , error.message) } let respon.. 에러 핸들링(error handling) 에러핸들링 하는 방법! try{} - catch(){} 사용 방법은? try{ // 소스코드를 쓴다 // 이 안에서 에러가 발생하면 catch로 간다. }catch(){ //catch 가 에러를 잡아준다. } 이런 구조로 이루어져있어요! 시도했는데 에러 발생? 그럼 catch 가 잡아준다! 라는 느낌입니다. ㅋㅋ 영어 해석하심 편할듯 근데 catch 가 어디서 에러를 받아오죠? try 에서 받아오죠?? 그래서 catch 는 자연스럽게 error 라는 아이를 매개변수로 받아요. try{ // 소스코드를 쓴다 // 이 안에서 에러가 발생하면 catch로 간다. }catch(error){ //catch 가 에러를 잡아준다. } 요렇게! 그래서 응용 예제를 들자면 try{ // 소스코드를 쓴다 // 이 안에서 .. [뉴스 타임즈] 반복된 코드 정리 코드는 거의 다 짰는데.. 너무 중복된 코드가 많죠? 그래서 중복된 코드를 간결하게 만들어주는 작업을 할것입니다용 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 아래에 만들어주겠습니다요. 그리고 콘솔로그로 잘 가져왔는지 꼭 체크!!!!! 이제 이 카테고리메뉴들에게 클릭 이벤트를 줘야겠죠? 클릭을 해야 카테고리 별로 .. 이전 1 2 3 4 5 다음
