전체 글 (134) 썸네일형 리스트형 [JavaScript] Uncaught ReferenceError: fn is not defined at HTML Element onclick 원인 이유과 해결 방법 Uncaught ReferenceError: FuncName is not defined at HTML Element onclick 에러 메세지를 해석하자면 이렇다 "A 함수를 실행하라고 했는데 A 함수가 어딨는지 모르겠다." 간단히 말하자면 함수를 못 찾고 있다는 뜻이다. 함수를 찾지 못하는 이유는 여러 가지가 있을 수 있다. 에러가 나는 원인을 하나씩 알아보고 디버깅 방법을 알아보자. 1. 함수 이름에 오타가 있는 경우 아마 이 경우가 가장 흔하고 많을 것 같다. 개발자의 원수, 바로 오-탈자다. 예를 들어 내가 실행하라고 했던 함수는 ABC()인데 내가 만들어 놓은 함수는 ABc()인 경우다. > 함수 이름을 x() / z() 처럼 간단한 이름으로 바꿔보자. > 아니면 함수를 정의하는 곳과 부르는 곳.. [JavaScript] 팝업창에서 닫기 버튼이 작동하지 않을 때 제목을 클릭하면 팝업이 하나 뜬다. 팝업 안에는 'X'표 버튼이 있다. 해당 팝업을 닫는 버튼이다. X 팝업 안에는 a 태그도 있다. 이 a 태그를 클릭하면 또 다른 팝업이 뜬다. 팝업 위에 팝업이 뜨는 구조다. 이상한 점이 있다. 처음 팝업을 열고 나서 바로 닫기 버튼을 클릭하면 이때는 팝업이 잘 닫힌다. 그런데 첫 번째 팝업을 열고 두 번째 팝업까지 띄운 후에 팝업을 모두 닫으려고 하면 작동이 잘 안 됐다. 나중에 열었던 팝업은 닫아지지만 처음에 열었던 팝업은 닫아지질 않았다. 닫기 버튼이 제대로 작동하지 않았다. X 함수가 작동하는지 확인하려고 alert를 띄워 봤다. 첫 번째 팝업만 열고 닫으면 'hello'와 'world'가 모두 떴다. 그런데 두 번째 팝업까지 열고 나서 닫으면 'world'만.. [JavaScript] onclick="window['funcName']" 의미와 뜻, 원리 간혹 이렇게 생긴 이벤트 핸들러를 본다. run 내가 알던 보통 모양새는 이렇다. run 이 둘은 차이가 뭘까? window['displayFruits'](); 이건 뭐하자는 뜻일까? 스크립트 태그 안에 아래와 같은 배열을 각각 변수 안에 넣어두자. 크롬을 실행하고 개발자 도구를 열어서 콘솔에 window를 출력해 보자. 그 안을 펼쳐 보면 window가 들고 있는 여러 가지 데이터들을 들여다볼 수 있다. 자세히 찾아 보면 window 가 'fruitList' 는 들고 있고, 'colorList' 는 들고 있지 않다는 걸 알 수 있다. 그럼 이 fruitList 에 접하는 방법은 window 안에서 'fruitList'라는 key로 value 를 받아오면 될 거라고 짐작할 수 있다. window['fru.. 초보 개발자가 가져야 하는 개발 방법론, 접근법, 우선순위, 마음가짐 우리는 실력이 없으면 무엇을 자꾸 덧붙이려고 한다. 기술이 부족하다고 느끼니까 이 기술도 배워야 할 것 같고 저 기술도 배워야 할 것 같다. 제대로 전달이 되지 않은 것 같으니까 이 말도 덧붙여야 할 것 같고 저 표현도 넣어야 할 것 같다. 맛이 어딘가 부족한 것 같으니까 이 양념을 좀 더 넣어야 할 것 같고 저 재료도 더 추가해야 할 것 같다. 이처럼 자꾸만 무언가를 덧붙일수록 본질은 흐려지고 정체성은 흔들린다. 경지에 오를수록 '무엇을 더할지'가 아니라 '무엇을 뺄지'를 고민한다. 이것도 걷어내고, 저것도 걷어내다 보면 더 이상 빼 버릴 수 없는 뼈대만 남는다. 그것이 핵심이다. 핵심은 더 이상 깎아낼 수 없는 뼈대다. 단팥빵에 단팥이 없거나, 치즈케익에 치즈를 빠뜨릴 수 있을까. 어렵다. 그때부터는.. React 시작하기 - 09 - textarea, input, select 등 폼 form 태그 다루기 사용자로부터 값을 입력받는 form 태그는 자주 사용한다. textarea, input select 등 여러 태그가 있다. 리액트에서는 이러한 form 태그를 쉽게 다룰 수 있도록 만들어 놓았다. 특히 value 를 번거롭게 다루지 않고 손쉽게 다룰 수 있도록 해 두었다. - 220601 참고자료 - https://ko.reactjs.org/docs/forms.html React 시작하기 - 08 - 리스트 반복문으로 엘리먼트 만들기, key 개념 리스트 안에 있는 요소들을 하나씩 가지고와서 리액트 엘리먼트를 만들 수 있다. 리액트라고 해서 전혀 새로운 문법을 사용하지는 않는다. 우리가 기존에 JavaScript에서 쓰던 작동 방식을 거의 그대로 사용한다. forEach문 같은 느낌이다. 또 반복문을 돌리면서 생성된 리액트 엘리먼트들을 하나하나 식별할 수 있도록 유니크한 값을 만들어 줘야 하는데, 그것이 key다. 아래에서 자세히 알아보자. - 220530 참고자료 - https://ko.reactjs.org/docs/lists-and-keys.html React 시작하기 - 07 - 조건부 렌더링, 조건에 따라 다른 요소 렌더링 특정 값이 조건식에 따라서 엘리먼트를 보여주거나 안 보여줄 수 있다. 또는 이 엘리먼트를 보여주거나 저 엘리먼트를 보여줘야 할 때도 있다. 리액트에서는 이러한 조건부 렌더링을 어떻게 처리할까. - 220529 참고자료 - https://ko.reactjs.org/docs/conditional-rendering.html React 시작하기 - 06 - 이벤트 핸들링하기, this 바인딩 해주기, e 합성 이벤트 리액트에서 엘리먼트를 만들 때 event 처리를 해줄 수 있다. 이는 DOM에서 onclick, onchange 등과 비슷하게 사용할 수 있다. 그러나 다른 점도 몇 가지 있다. 일단 리액트에서 사용하는 e는 합성 이벤트다. DOM의 이벤트 객체와 비슷하지만 조금 다른 부분도 있다. 또한 함수를 부르는 위치에 따라 this 가 위치에 따라 바뀌기 때문에 bind를 따로 해주어야 한다. - 220527 참고자료 - https://ko.reactjs.org/docs/handling-events.html 이전 1 ··· 3 4 5 6 7 8 9 ··· 17 다음
