Web/Frontend10 [JS] 모던 자바스크립트 딥다이브 15장- var,let,const 키워드 ES5까지는 var 키워드만 사용하여 변수를 선언했지만, ES6에서는 var키워드의 단점을 보완하기 위해 let과 const 키워드를 사용해 변수를 선언할 수 있게 되었다. 먼저 var와 let 키워드의 차이점을 중점으로 살펴보자. var & let 1. 변수 중복 선언 허용 1) var var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; var x = 100; var y; console.log(x); //100 console.log(y); //1 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하고(var x = 100;), 초기화문이 없는 변수 선언문(var y;)은 무시된다. 이처럼 변수의 중복 선언이 허용되는 경우, .. 2023. 8. 19. [JS] setTimeout에서 delay는 무슨 의미일까? console.log('1'); console.log('2'); setTimeout(()=> console.log('hi~'), 0) console.log('3'); console.log('4'); 위 코드는 콘솔에 [ 1 2 3 4 hi~ ] 으로 나타난다. [ 1 2 hi~ 3 4 ] 일 것 같았지만 다르게 출력된다. 이유가 뭘까? 자바스크립트 동작 원리부터 알아보자. 🧊 자바스크립트 동작 원리 먼저 자바스크립트코드를 실행시키기 위해서는 자바스크립트 엔진이 필요하다. 자바스크립트 엔진은 Call stack(실행컨텍스트 스택) 과 Heap으로 이루어져 있는데, 콜스택은 싱글스레드이므로 한 번에 하나의 작업만 처리하는 동기적 방식으로 처리하게 된다. 자바스크립트 코드에서 코드를 실행할 때, 함수를 호출하.. 2023. 7. 28. [JS] VSCode에서 디버깅 VSCode에서 디버깅(단축키: F5)을 하면 아래와 같이 오류가 났다. 검색해보니 아래 오류의 경우 원인으로 네트워크 오류가 주로 많아 보였다. 그래서 나도 크롬 개발자도구에서 network를 살펴봤으나 문제가 없었다. localhost:8080 에 접속 시도를 하기 때문에 오류가 나는 것으로 생각하고, 그에 관련된 설정을 수정하는 방향으로 검색하니 해결할 수 있었다. 해결방법 launch.json 파일을 수정하면 된다. 기존 파일에서 url 설정이 위와 같이 되어있었는데 수정하지 않으면 계속 저 url로 접속을 시도하기 때문에 주석처리해줘야한다. 그리고 webRoot도 주석처리하고 파일경로를 적어주면 된다. type도 "pwa-chorme"으로 하니 "chrome"으로 대신 사용을 권장하여 바꿔줬다... 2022. 11. 16. [JavaScript] Uncaught SyntaxError: Unexpected token 자바스크립트 함수 안에서 스크립틀릿 문자열을 비교하려면 따옴표를 써야한다. 익숙한 느낌이 드는데 다음에는 잊지말자... 문제해결에 도움받은 글 1. https://javacatcher.tistory.com/49 2022. 6. 29. 웹 페이지 실행순서 1. https://docu94.tistory.com/37 2. https://www.w3schools.com/js/js_htmldom.asp 3. https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dssh87&logNo=222023739537 https://defacto-standard.tistory.com/entry/java-jstl-html-javascript-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A1%9C%EB%94%A9-%EC%88%9C%EC%84%9C-JSTL%EA%B3%BC-EL-%EA%B0%99%EC%9D%B4-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 4. https://na.. 2022. 6. 29. [javascript/jquery] Uncaught Error: Syntax error, unrecognized expression 오류 해결 syntaxerror는 문법적으로 틀린 구문일 경우 발생하는 오류이다. checkbox[id=VERSIONilos4.3.00] 에서 어디가 틀렸다는 건지 알 수 없었는데 찾아보니 싱글쿼테이션, 더블쿼테이션을 확인해보라는 블로그 글이 있었다. 기존 코드는 아래와 같고 여기서 오류가 나는 것 같아 확인해봤다. $("input:checkbox[id=VERSION" + rd.VERSION + "]").prop("checked", true); 이 오류가 나는 코드와 동일한 방식인 아래 코드는 전혀 문제를 일으키지 않았다. $("input:checkbox[id=SE_FLAG_" + rd.SE_FLAG + "]").prop("checked", true); 그래서 더 해결에 오랜 시간이 걸렸다.ㅠㅠㅠ 혹시나 하는 맘에.. 2022. 5. 19. [Vue] Project 구조 오늘 처음으로 Vue Project를 생성해보았다. npm install이 안되서 정말 애먹었지만 일단 마무리는 할 수 있었다. Vue project생성하는 cli 명령어들은 노션에 정리를 해두었고 블로그에서는 project 구조에 대해서 정리해볼까 한다. Vue Project를 생성하면 프로젝트에 필요한 여러가지 파일 및 폴더들을 자동으로 생성해준다. 하지만 막상 열어보니 어느 파일에서부터 시작하는지 어떻게 연결이 되어있는 건지 알기가 어려워서 검색을 통해 알아보았고 순서 및 부연 설명들은 아래에서 볼 수 있다. 1. index.html 제일 먼저 index.html에서 시작한다. index.html 에 있는 는 root dom node로 이 노드 안에 오는 모든 것들이 vue에 의해 관리가 된다. r.. 2021. 8. 6. [Javascript] 함수 자바스크립트에서 함수는 소스코드의 집합으로 메소드, 모듈, 기능, 프로시저 등을 말하며, 자바스크립트에서는 function 자료형이다. 함수는 인자/매개변수, 리턴값을 가질 수 있다. function 키워드에 함수명을 작성하여 사용하는방법(선언적함수)과 function에 함수명 작성하지않고 변수에대입하는방법(익명함수), 그리고 호출없이 바로 사용하는 스스로 동작하는 함수가 있다. 1. 함수 선언 1) 선언적 함수 function 함수명([매개변수]){ 처리로직; [return 되돌려줄값;] } 2) 익명함수 이벤트 핸들러에서 주로 사용된다. varf1 = function ([매개변수]){ 처리로직; [return 되돌려줄값;] } 실행확인 버튼의 요소를 받아서 btn2에 저장하고 .onclick메소드로 .. 2021. 7. 24. [Javascript] 배열 자바스크립트에서 자료형 지정을 해주지 않기 때문에 모든 자료형을 보관하는 변수의 모음을 배열로 취급한다. 1. 배열 생성하는 4가지 방법 배열 선언시 배열의 크기를 지정하지 않아도 배열이 생성된다. 값을 바로 넣어서 배열을 생성할 수도 있다. var arr1 = new Array(); var arr2 = new Array(5); var arr3 = []; var arr4 = ['유재석', 20, true, [1,2,3,4]]; arr2 배열은 크기가 5인데 만약 6개의 값을 넣는다면 넣을 수 있을까? 자바에서는 절대 안되지만 자바스크립트의 배열에서는 가능하다. 이런 점은 자바에서 arraylist와 비슷한 것 같다. 2. 배열 객체의 메소드 배열 객체의 메소드는 굉장히 많지만 몇 개만 다뤄보도록 하자. .. 2021. 7. 24. [Javascript] 변수형과 자료형 1. 지역변수, 전역변수 전역변수 : window 내에서 어디에서든 사용가능 지역변수 : 해당 함수에서만 사용 가능 (1) 함수 밖에서 var 변수명; 으로 선언한 변수는 전역변수이다. (2) 함수 안에서 변수명; 으로 선언한 변수는 지역변수이다. (3) 지역변수가 우선권을 가지기 때문에 지역변수가 출력된다. (4) 전역변수 사용시 window.변수명 또는 this.변수명 으로 표현 2. var, let, const var : 선언된 위치 내부의 블록 전체에서 사용할 수 있는 범위의 변수 선언 블록 내부에서 재선언하여도 새로운 변수가 생성되지 않는다. let : 선언된 블록 영역만 사용할 수 있는 제한 범위 변수 값 재할당 가능 재선언X const : let과 같이 블록 범위에서만 사용할 수 있음 상수의.. 2021. 7. 22. 이전 1 다음
