javascript
-
로컬에서 CORS policy 관련 에러가 발생하는 이유Knowledge/Web 2023. 7. 4. 14:33
🚀 발단 위와 같은 html 파일을 로컬환경에서 크롬 브라우져로 실행시켰더니 Access to script at 'file:///C:/경로/js/module.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 이와 같은 에러 메세지가 발생하였습니다. 🛫 해결방안 비슷한 에러를 몇 번 겪어 봤기에 해결은 금방 했습니다. visual studio code 기준으로 설명해 보자면 방법은 아래와 같습니다. 먼저 터미널을 엽니다. http-server가 없다면 npm inst..
-
개발자 도구의 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 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..
-
데이터 바인딩을 도와주는 handlebars.js 사용법Knowledge/javascript 2019. 8. 26. 23:50
ajax로 가져온 데이터를 동적으로 추가해야 하는 상황은 상당히 자주 발생한다. Handlebars.js는 이런 상황을 좀 더 쉽게 처리할 수 있도록 도와주는 라이브러리.. 라는데 사실 익숙하지 않으면 되려 더 어렵다. 필자도 이번에 처음 써보면서 많이 헤맸는데 헤매면서 알게된, 진작 알았으면 좋았을 만한 것들을 정리해두려 한다. - 기본 사용법 기본사용법은 다음과 같다. 1. 템플레이팅할 html을 세팅한다. 이때 데이터 바인딩 시킬 부분은 {{바인딩시킬 데이터의 프로퍼티명}} 의 형태로 적는다. 2. htmlTemplate을 가져온후 Handlebars로 compile 한다. 3. 컴파일한 템플릿에 데이터를 집어넣는다. 이 때 리턴값은 html로 나온다. 4. 리턴받은 html을 target에 inn..