Web14 [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. GSON & Ajax 비교 Google에서 만든 오픈 라이브러리로 JSON파일을 쉽게 읽고, 만들 수 있는 메소드를 제공한다 toJSON(Object, Appendable) - 매개변수 Object를 JSON으로 변환하여 Appendable에 연결된 출력스트림으로 출력하는 메소드이다. - 기존 JSON방식으로 변환하기 번거로웠던 List, Map객체를 toJson()메소드 하나로 쉽게 JSON으로 변환 가능하다. - List, Map 뿐만 아니라 모든 Object 변환 가능하다. GSON 라이브러리를 사용하기 위해서 mpn repository에 접속해서 GSON을 검색해서 gson-2.8.5 jar를 설치했다. 그리고 이클립스에 있는 해당 프로젝트의 lib에 복사해서 넣어줬다. 먼저 json방식으로 List를 줄 때 어떤 부분이 .. 2021. 8. 26. Ajax란? Ajax - Asynchronous JavaScript and XML 의 약자 - javaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는 (통신)방식 - 데이터 형식은 Text, HTML, JSON 등 사용 가능하다. 비동기식 데이터 통신 : 클라이언트가 서버로 데이터 요청 후 응답을 기다리지 않고, 다른 작업 수행 가능 추후 요청이 오면 응답에 관련된 작업을 진행한다. 1. Ajax 장점 1) 상단의 url 변경되지 않는다. 2) 페이지 전체를 갱신하지 않고 필요한 부분만 업데이트 가능하다. 필요한 부분만 쿼리스트링으로 클라이언트가 요청한다. 3) AxtveX나 플러그인 프로그램 설치없이 이용가능 4) Javascript, jQuery 방식 2. Ajax 단점 1) J.. 2021. 8. 25. [Servlet] get, post방식 사용자로부터 입력받으려면 먼저 입력 form을 제공해야 한다. form 안에는 입력을 받는 input과 전달하는 submit이 있다. 그리고 이 form을 통해 사용자로부터 받은 값을 처리할 uri로 보낼때는 get방식과 post방식으로 보내게 된다. 전체적인 흐름및 두 방식의 차이점에 대해 알아보자. get방식인 경우 action 속성에 사용자로부터 받은 값을 처리할 uri을 작성을해주면, 이 uri로 name(키)과 cnt(값) 가지고 쿼리스트링으로 값을 넘겨주게 되는 것이다. 하지만 post방식의 경우 get처럼 정보가 드러나지 않는다. 그럼 action 속성으로 값을 처리해줄 url을 화면에 나타나게 할 수 있도록 servlet을 설정을 해줘야 할 것 같은 느낌이 들 것이다. 나는 아래와 같이 어.. 2021. 8. 21. [JSP] run server, javax.servlet import 오류 해결 오늘 처음으로 tomcat을 설치해서 자바로 웹서버를 연결했다. 수업때 강사님이 알려주시는 대로 따라했는데 늘 나는 오류가 나서 따라가느라 너무 힘들었지만 그래도 열심히 했다. 대상포진때문에 몸도 안좋고 신경통 약을 먹어서 몽롱해서 결국 조퇴를했지만 그래도 오류가 났던 부분 해결한 것은 적어놓으면 좋을 것 같아 정리해두려고 한다. 1. Run on Server 오류 처음에 run on Server 했을때는 잘 됐는데 갑자기 안된다고 해서 너무 당황했지만 자세히 보니 java version때문에 안되는 거였다. 나도 모르게 java가 업데이트가 됐었는지 15로 되는 바람에 안됐던 거여서 버전을 다 1.8로 바꿔줬다. 1) 프로젝트 jdk 버전 바꾸기 프로젝트 우클릭 > 맨아래 properties 클릭 > .. 2021. 8. 9. [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. 이전 1 2 다음
