Javascript/이론+예제 (23) 썸네일형 리스트형 [ES6 문법] 템플릿 문자열 (template string) Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 템플릿 문자열이란 - 문자열 안에 변수와 연산식을 혼합하여 사용하는 문자열 리터널 - 작은 따옴표('') 혹은 큰 따옴표("") 대신 백틱 (`) 을 사용해 문자열을 표현함 - 특수 기호 ${} 를 사용해서 변수 또는 식을 포함할 수 있음 템플릿 문자열과 기존 자바스크립트의 문자열 차이 기존 자바스크립트의 문자열 const string1 = "안녕하세요"; const string2 = "어서오세요"; const greeting = string1 + " " + string2; 템플릿 문자열 const string1 = "안녕하세요"; const string2 = "어서오세요"; const greeting = `${strin.. 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(); }); 이벤트 캡쳐링이란? 이벤트 버블링과 반대로, 브라우저로부터 이벤트가 발생한 .. 에러 핸들링(error handling) 에러핸들링 하는 방법! try{} - catch(){} 사용 방법은? try{ // 소스코드를 쓴다 // 이 안에서 에러가 발생하면 catch로 간다. }catch(){ //catch 가 에러를 잡아준다. } 이런 구조로 이루어져있어요! 시도했는데 에러 발생? 그럼 catch 가 잡아준다! 라는 느낌입니다. ㅋㅋ 영어 해석하심 편할듯 근데 catch 가 어디서 에러를 받아오죠? try 에서 받아오죠?? 그래서 catch 는 자연스럽게 error 라는 아이를 매개변수로 받아요. try{ // 소스코드를 쓴다 // 이 안에서 에러가 발생하면 catch로 간다. }catch(error){ //catch 가 에러를 잡아준다. } 요렇게! 그래서 응용 예제를 들자면 try{ // 소스코드를 쓴다 // 이 안에서 .. 자바스크립트의 동작 원리 자바스크립의 동작 원리는 무엇일깡? 먼저 저는 이론을 좋아하지 않기때문에 예제를 들면서 보겠습니다. console.log(1) setTimeout(()=>{ console.log(2) }, 2000) console.log(3) 자 이렇게 작성을 하면, 어떻게 결과가 나올 것 같나요? 1 다음 3 나오고 2초 뒤에 2가 나오게 됩니다 이걸 이해하려면 자바스크립트의 동작원리에 대해 이해해야합니다요 자 이걸 보면서 봐보자구용 먼저 내가 요청한 코드가 위에서 적은 코드라고 생각하고.. 자바스크립트는 하나의 Stack 밖에 없서요 이때 Stack 이 멍미? 하시겠죠? 자바스크립트 코드가 실행되면 스택 프레임이 쌓이는 장소 스택에 새로운 코드(프레임)이 들어오고 실행이 완료되면 나간다. 처음에 들어간 것이 제일 마.. 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 입니다 그 아이템의 .. 이전 1 2 3 다음
