도룩이의 개발일기

joshua1988.github.io/web-development/javascript/javascript-basic-summary/#this-%EB%B0%94%EC%9D%B8%EB%94%A9 간단히 훑어보는 자바스크립트 기본기 다지기 (기본) 자바스크립트 입문자부터 숙련자까지 간단히 보기 좋은 요약본 joshua1988.github.io

preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 1번은 직관적이니까 예시는 생략하고 2번을 예시로 들자면 예시 이러한 구구단의 정답을 받는 form 이 있고, 거기에 EventListener 를 추가해주었습니다. 정답 form 밑에는 resultDiv 가 있어서 정답 여부를 출력하게끔 하였습니다. 이 함수를 실행하면 밑에 정답! 혹은 땡! 이..

방법 1. function 함수이름 {} function fun1() { return true; } function fun1(a,b) { return a+b; } 파싱하는 단계에서 함수가 정의된다. 방법 2. var a = 함수 (익명함수) var fun2_1 = function() { return true; } var fun2_2 = function(a,b) { return a+b; } 변수에 함수를 할당한다. 런타임 단계에서 함수가 정의된다. 그렇기 때문에, 방법 1과 다르게 함수 선언 순서에 따라 함수가 잘 작동하지 않을 수 있다! 방법3. Function을 이용한 객체로서의 선언 var fun3 = new Function("a", "b", "a+b"); 잘 안쓰인다고 한다. 방법4. 화살표함수 v..

화살표함수(Arrow function)는 ES6부터 쓸 수 있는 일종의 익명 함수이다. 일반적인 화살표함수의 모습은 이러하다. const fun1 = () => { return true; } 화살표 함수와 기존 함수의 차이점은? 왜 화살표 함수가 생겼을까? 1. this의 차이. 기존 함수는 this 가 호출시에 동적으로 결정되고, 화살표함수는 선언시에 정적으로 this가 결정된다. 기존 함수 (동적인 this) var obj = { state: 0, addState: function(){ btn.addEventListener('click', function(){ this.state += 1; }); } }; 화살표 함수 (정적인 this) var obj = { state: 0, addState: fun..

weather.js openweathermap.org에서 weather API KEY를 받아야 함. then은 이전 자바스크립트 코드가 완전히 실행돼서 데이터가 완전히 넘어왔을 때만 실행된다. 만약, 여기서 then을 쓰지 않으면, 아직 API 데이터가 넘어오지 않았는데 실행되어 에러가 날 수 있음! const weather = document.querySelector(".js-weather"); const API_KEY = "38cb84355b7ad3bb3676b3b9e6b11d39"; const COORDS = "coords"; // 여기서 fetch 함수는 requests 함수와 같은 역할. function getWeather(lat, lng){ fetch( `https://api.openweath..

https://uxgjs.tistory.com/150 VScode Code Formater 인 Prettier 완벽 적용하기 VSCode 익스텐션 중에 코드를 정렬해 주는 Formatter는 크게 Prettier과 Beautify가 있습니다. VScode에서는 2가지의 Formatter가 가장 많이 사용되는데 2가지는 약간 다른 특징이 있습니다. Prettier가 코드를 강 ux.stories.pe.kr

https://www.youtube.com/watch?v=EVxCdenPbFs https://shjz.tistory.com/32 Visual Studio 유용한 단축키 정리 (feat.자동정렬) 코딩에 관심 있는 사람이라면 한 번씩 쓸법한 유용한 비주얼 스튜디오 단축키를 정리해 보았다. 그중 내가 유용하다고 생각될만한 단축키는 강조 처리했으니 참고하면 될 것 같다. Ctrl-K, Ctrl-H : shjz.tistory.com

Document document도 윈도우 객체의 속성이기 때문에 window.document 이렇게 접근해야합니다. 하지만 window는 생략 가능(전역 객체)하기 때문에 그냥 document로 접근하면 되겠습니다. 역시 콘솔에 document하고 점을 쳐보면 수 많은 속성과 메소드들을 보실 수 있습니다. window 객체 때 했던 것처럼 document 객체에서도 자주 쓰이는 것만 집어드리겠습니다. document는 html에 관한 것들을 담당하는 객체이니만큼 대부분의 것들이 태그를 선택하고 조작하는 데 사용됩니다. document.getElementById(아이디) html에서 해당 아이디를 가진 태그를 선택합니다. document.getElementById('app-root'); // ... doc..