Programming/Javascript, Typescript18 JSDoc C#의 처럼 javascript도 class나 function에 대한 설명을 표시할 수 있었다. 😮 아래와 같이 es5 class 구조를 만들고 있다. parameter에 대한 설명을 해당 format에 맞춰서 표시한다면 Visual Studio 2019에서 다음과 같이 preview를 볼 수 있다. 커서에 아까 주석에 적었던 해당 class의 설명이 표시된다. 이렇게 잘 설명을 적어놓으면 다른 사람이 기능을 사용할 때 큰 도움이 될 것 같다. 팀에도 제안해야겠다. Reference https://jsdoc.app/about-getting-started.html https://devhints.io/jsdoc 2021. 6. 10. #과 javascript:void(0);의 차이 href="#" 는 클릭 시 해당 페이지의 가장 상단으로 이동하게 된다. href="javascript:void(0); 는 아무일도 벌어지지 않는다. 아래 codepen에서 확인해보자 https://codepen.io/jaejoon/pen/VwpxNoW 아래에 있는 #을 누르면 가장 위로 이동하는 것을 알 수 있다. 반면 javascript:void(0);은 아무일도 일어나지 않는다. Reference https://codesource.io/vs-javascriptvoid0-which-one-is-the-best-attribute-for-empty-links/ 2021. 6. 7. HTML File Path HTML, javascript의 경로 표현에서 / 로 시작하면 루트 디렉토리에서 시작하는 경로를, ../ 로 시작하면 현재 페이지의 상위 경로를 나타낸다. 이번에 프로젝트의 모든 namespace를 정리하면서 폴더 구조가 바꼈다. 내가 예전에 이미지 파일 경로를 폴더 구조에 영향없도록 개발해놨는데 이미지가 깨졌다. 알고보니 C#의 Server.MapPath("~/images")의 ~/ 와 헷갈려서 ../ 를 사용해버린 것이다.😨 게다가 마침 해당 폴더의 상위폴더가 Root Directory여서 별다른 문제도 없었다.😥 다시 실수하지 않도록 정리해둔다. Reference https://www.w3schools.com/html/html_filepaths.asp 2021. 6. 6. data-* attribute data-* attribute에 저장된 데이터를 가져올때 jquery의 data() 는 - 다음에 오는 알파벳을 -를 제거하고 uppercase로 바꿔도 가져올 수 있다. 하지만, data- attribute 뒤에 오는 대문자도 data()로 가져오기 위해서는 lowercase로 가져와야 한다. 모든 attribute가 lower처리되고 -가 오면 -를 제거하고 바로 뒤에 오는 알파벳만 uppercase한다고 생각하면 된다. "data-productId" => "productid" "data-ProDUctId" => "productid" "data-product-id" => "productId" "data-PRODUCT-ID" => "productId" 반면에 getAttribute는 대소문자 구별 없이.. 2021. 6. 1. [Javascript] window.open left,top에 음수값 window.open(URL, name, specs, replace) specs parameter에 'height=600,width=1000,left=300,top=200' string으로 open 할 page의 width, height, left, top 등을 설정할 수 있습니다(w3schools 참고). 원하는 위치에 page를 open 하기 위해서 left와 top을 계산해서 설정하기도 합니다. 이때 주의할 점이 있습니다. window.open의 specs에 left, top은 음수가 들어갈 수 없다는 점입니다. 듀얼 모니터(더블 모니터) 사용 환경에서 main 모니터가 오른쪽이고, sub 모니터가 왼쪽일 때, 왼쪽 모니터의 띄워진 페이지의 screenLeft를 확인해보면 음수가 되는데 이때 win.. 2020. 1. 11. [Javascript] insertAdjacentHTML Element의 내용을 추가하여 입력할 때 항상 innerHTML을 이용했습니다. document.getElementById('div1').innerHTML += '[HTML string]'; 하지만 innerHTML의 경우 가끔 자식 Elements의 Event handler에 영향을 끼친다고합니다. 저의 경우에는 입력했던 HTML string 안에 element의 clientHeight, clientWidth이 0이 되는 문제가 발생했습니다. insertAdjacentHTML를 사용한다면, 다른 Element에 영향을 끼치는 것을 방지할 수 있습니다. document.getElementById('div1').insertAdjacentHTML('beforeend', '[HTML string]'); b.. 2019. 1. 6. [Javascript] Vanilla JS 팀 내에서 개발된 라이브러리로 신제품 개발을 시작했습니다.하지만 성능이 라이브러리를 사용하기 전보다 괜찮게 나오지 않았습니다.jQuery를 주로 사용하는 라이브러리였기 때문에 성능에 관련된 정보를 찾아 jQuery 홈페이지를 찾아봤습니다. jQuery 홈페이지 에서 성능을 향상 시킬 수 있는 몇가지 방법을 소개하고 있습니다.열심히 적용해 봤지만 Append 관련 정보는 꽤 효과가 있었지만 나머지는 미비한 성능 향상을 가져왔습니다. ㅜㅜ 그렇게 열심히 성능 향상을 위해 구글링하던 중 Vanilla JS 라는 프레임 워크를 알게 되었습니다 (Vanilla JS 홈페이지).Vanilla JS 홈페이지에 들어가보면 아래와 같이 다른 JS 라이브러리와 비교하며 엄청난 Performance를 가졌다는 것을 보여주고.. 2018. 12. 10. [JavaScript] Polyfill 사용하기(Feat. padStart()) 다른 팀원의 PC에서는 잘 동작하는 코드가 제 PC에서는 에러가 발생했습니다. 디버깅을 해보니 padStart()에서 에러가 발생하고 있었습니다. var binaryNum = '110'; var result = binaryNum.padStart(4, '0'); console.log(result); 저는 IE로, 팀원은 Chrome으로 디버깅을 하고있었기 때문에 금방 원인을 발견하지 못했습니다. IE에서는 지원하지 않는 Method 였습니다. Can I Use? 라는 홈페이지에서 브라우저 별로 지원하는 Method인지 확인할 수 있습니다. 위 링크를 클릭하면, padStart(), padEnd()는 IE에서 지원하지 않는다는 것을 확인할 수 있습니다. 이렇게 지원하지 않는 Method를 사용할 수 있도록 .. 2018. 11. 10. [JavaScript] JSON.parse 사용 시 Error 방지 문자열을 JSON.parse로 parsing해서 이용할때 Error 때문에 문제가 발생하는 경우가 있습니다. 그래서 사용하기 전에 JSON인지 확인하는 과정이 필요한 경우가 있습니다. function isJson(str) { try { JSON.parse(str); } catch (e) { return false; } return true; } 위와 같이 try{...} catch{...}를 이용하여 string을 parsing하기 전에 JSON string인지 확인하는 과정을 추가했습니다. 하지만 제가 몰랐던 한가지! isJson("123")도 true를 return한다는 사실.. 저는 String이 아닌 JSON만을 사용하고 싶었기 때문에 typeof를 이용해서 함수를 수정해서 해결했습니다. typ.. 2018. 11. 1. 이전 1 2 다음
