Knowledge/javascript
-
개발자 도구의 console에서 javascript를 사용할 수 있는 이유Knowledge/javascript 2023. 7. 4. 11:08
왜 되지? 위 스크린샷처럼 개발자 도구의 콘솔 탭을 열고 javascript 코드를 작성하면 잘 작동하는 모습을 볼 수 있습니다. 모든 프로그래밍 언어가 그렇듯 javascript도 실행되려면 프로그래머가 작성한 javascript 코드를 기계가 해석할 수 있게 만드는 과정을 거쳐야 할텐데 브라우저에서 이게 왜 바로 실행되는걸까요? javascript 엔진 정답부터 말씀드리자면 브라우저에 javscript 엔진이 내장되어 있기 때문입니다. 파싱과 JIT 컴파일이 가능한 머신을 제공하는 javascript 엔진은 여러 종류가 있는데 각 브라우저에 내장되어 있는 javascript 엔진의 목록은 아래와 같습니다. Chrome - Google v8 넷스케이프 - Spider Monkey Edge - Chakr..
-
Cannot use import statement outside a module 에러 해결Knowledge/javascript 2022. 1. 6. 15:48
발생한 문제 기존에 index.js에 쭉 작성했던, 잘 동작하던 코드를 다른 js파일로 옮겨서 module로 import 해 사용하도록 했습니다. 글로 쓰니까 뭔가 장황한데 그냥 이 지경이었던 index.js 파일을 이렇게 정리했다는 얘기입니다. 그런데 그 후 start를 했더니 Cannot use import statement outside a module 위와 같은 에러메시지와 함께 에러가 발생했습니다. 해결 검색해보니 해결 방법은 간단했습니다. package.json 파일에 위와 같이 "type": "module" 부분을 추가하고 실행하니 이전과 같이 잘 실행되었습니다. 원인 결론부터 말하자면 require를 사용하는 commonjs 방식에서 import를 사용하려 했기 때문에 발생한 에러였습니다...
-
map을 사용했는데 의도하지 않은 쉼표가 출력된다면?Knowledge/javascript 2022. 1. 6. 13:37
발생한 문제 redux를 공부하던 중 의도하지 않은 상황이 발생했습니다 1 2 3 4 5 6 7 8 9 10 var state = store.getState(); document.querySelector('#toc').innerHTML = ` ${state.content.map(item => ( `${item.title}` ) )} 위와 같이 store에서 state를 가져온 다음 그 내부의 content 배열을 map함수를 활용해 순회하며 각 item의 id와 title을 template literals을 활용해 작성해 둔 html 태그와 결합, 출력하는 코드를 작성했는데 이처럼 의도하지 않은 쉼표 (,) 도 함께 출력되었습니다. 원인 검색해보니 map 함수가 문자열 형태로 값을 리턴할 때는 (temp..
-
자바스크립트 모듈(Module) 학습 내용 간단 요약Knowledge/javascript 2020. 5. 3. 22:31
모듈(Module)이란? 자바스크립트 코드의 크기가 갈수록 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 코드 전체를 기능 단위의 코드 뭉치로 분해하고 필요에 따라 결합할 수 있도록 하는 시스템의 도입을 고민했습니다. 그 결과 도입된 것이 Module System입니다. 이 때 사용되는 코드 뭉치 각각을 Module이라고 합니다. 모듈 활용법 모듈을 내보낼 때는 export를, 가져올 때는 import를 활용합니다. 1. named export 모듈을 내보내는 가장 쉬운 방법은 내보내려는 항목 앞에 export 지시자를 배치하는 것입니다. 그 항목이 변수인지, 함수인지, 클래스인지는 상관없습니다. 최상위 항목이기만 하다면 이 방법으로 모두 내보낼 수 있습니다. 이런 방법을 named export라고 합..
-
Javascript ES6 에 추가된 기능 간단 정리Knowledge/javascript 2019. 11. 15. 23:01
ES6에서 추가된 기능 ( String Literal, 객체 비구조화 ( Object Destructuring ), 객체 리터럴 ( Object Literal ), for .. of, Spread Operator, Rest Parameter, Arrow Function, Default Params, includes, let & const, import & export, Classes , Trailing Commas, Map & Set, Async & Await ) 에 대해 공부하고 최대한 간단히 볼 수 있도록 짧게 정리했습니다. 예제 코드에서 주석처리한 부분은 출력 결과고 예제 실습은 https://es6console.com/ 에서 진행할 수 있습니다 - String Literal ES6의 String ..
-
자바스크립트에서 이미지 파일( form data ) 을 ajax로 넘기는 방법!Knowledge/javascript 2019. 9. 18. 19:41
단순히 text value만 넘긴다고 하면 form data를 굳이 ajax로 넘겨야 할 필요는 없다. 그러나 파일을 ajax로 넘겨야할 때는 form data 전체를 넘기는 것 외엔 다른 방법이 없다. 이 때는 formData 객체를 활용하면 된다. 방법은 쉽다. 함정이 좀 있지만.. ㅋ 일단 코드를 보자! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Document 전송 var fileInput = document.querySelector("#fileInput"); var sendButton = document.querySelector("#sendButton"); sendButton.addEventListe..
-
javascript this와 bindKnowledge/javascript 2019. 9. 15. 13:46
생성자 패턴을 활용하다 보면 javascript의 this가 내 맘 같지 않은 상황을 자주 마주 한다. 예를 들자면 이런 것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 function promotionObj(id) { this.registerEvents(id); } promotionObj.prototype = { // 등록 이벤트 registerEvents : function(id){ // 뒤로 가기 버튼 var backBtn = document.querySelector(".btn_back"); backBtn.addEventListener("click",function(){ this.ba..
-
javascript 객체 리터럴 패턴과 생성자 패턴, prototypeKnowledge/javascript 2019. 9. 9. 23:10
객체 리터럴 패턴을 활용하면 javscript 코드를 비슷한 기능끼리 묶을 수 있습니다. 예를 들어 promotion과 관련된 기능만을 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var promotionObj = { // 프로모션 템플릿 붙일 타겟 imageTarget : document.querySelector(".visual_img"), // 프로모션 이미지 템플릿 imageTemplate : document.querySelector("#imageTemplate").innerText, // 이미지 세팅 setImage : function(productDetail){ var imageBindTemplate = Handlebars.compile(this.imageTemplate..