개발공작소
728x90
[JS] javascript : encodeURI/encodeURIComponent함수를 이용하여 인코딩을 해보자
FrontEnd/JavaScript 2022. 12. 12. 22:32

encodeURI와 encodeURIComponent 비교 공통점 1) 전역 함수로 어디서든지 호출가능함 2) URI 문자열을 파라메터로 받아 인코딩 된 문자열을 리턴함 차이점 encodeURI : :, ;, /, =, ?, & 등을 제외하고 인코딩 처리함 encodeURIComponent : 모든 문자를 인코딩 처리함 encodeURIComponent는 모든 문자를 인코딩 처리함으로써 encodeURI보다 더 많은 문자를 인코딩한다. - MDN 샘플코드 var uri = 'https://bongra.tistory.com/category/서버/Tomcat'; encodeURI('https://bongra.tistory.com/category/서버/Tomcat'); --결과 : 'https://bongra..

article thumbnail
[JS] Javascript에서 주석을 다는 3가지 방법 :: 한줄 주석, 여러줄 주석
FrontEnd/JavaScript 2022. 8. 25. 12:52

보통 자바스크립트에서 주석을 다는 방식이 3개가 있다. 다음과 어려운 게 아니라, 습관이 중요하니 그냥 바로바로 알아보자. javascript에서 주석을 다는 3가지 방식 1. 한줄 주석 // 한 줄 주석을 달때는 //를 사용함 2. 여러줄 주석 /* 여러 줄 주석을 달 때 *을 / 사이에 넣음 */ 3. 여러줄 주석 + 명세작성 /** * 여러 줄 주석을 달 때 * 함수나 클래스에 힌트(명세)를 달 수 있음 */ 위를 보면 한줄 주석은 //로, 여러줄 주석은 /* ... */ 로 작성한다. 근데 3번을 보면 /** ... */ 와 같이 작성하는데 뭐가 다를까? 함수 선언하는 부분의 바로 위에 3번과 같이 작성을 하면 실제로 해당 함수를 호출할 때 이 주석을 확인 할 수 있다. /** ... */와 같이..

article thumbnail
[JS] 문자열을 자바스크립트 코드로 사용하는 방법 / 문자열과 변수를 조합하여 자바스크립트 코드 만들기 :: window.Function
FrontEnd/JavaScript 2022. 8. 5. 12:58

얼마전에 문자열을 자바스크립트 코드로 사용하기 위해 eval 함수가 있다는 것을 정리했는데 보안상의 문제로 MDN에서 절대 사용하지 말라고 하였었다. 그렇다면 그림의 떡이라는 말인데.. 여기서 MDN이 다른 대안을 문서로 제공하고 있다. 바로 window.Function을 사용하는 것이다. 오늘은 이 window.Function에 대해 정리해보려고 한다. window.Function함수를 사용하여 문자열을 자바스크립트 코드로 변환해보자. 오늘은 이 window.Function을 통해 문자열을 자바스크립트로 변환하는 것만 알아볼 것이기 때문에 자세한 내용은 MDN문서를 참조하도록 하자 - MDN문서 참조 샘플변수 선언 //샘플 변수 선언 const originVar_1 = 'this_is_originVar..

[JS] 자바스크립트 :: 문자열 변수를 객체의 키값으로 사용하는 방법
FrontEnd/JavaScript 2022. 8. 2. 12:51

진짜 아무것도 아니긴 한데, 블로그에 정리가 안되어 있는 것 같아 정리해본다. 문자별 변수로 객체의 키값을 통해 value값 가져오기 이 방법이 어떨 때 주로 쓰이냐면, 같은 로직이라도 객체의 값이 변할 때 주로 쓰인다. ( 나는 그럴 때 씀.. ) 기본문법 그냥 객체에 해당 변수를 넣어만 주면 된다. 객체명[변수명] ex) obj[srh] 샘플코드 var obj = {}; var srh = ''; // true/false에 따라 obj값이 변하는 함수선언 const testFun = (bool) =>{ // bool이 true면 obj는 'one'이라는 키값을 가짐 if(bool==true){ obj = { 'one' : 'this is one', }; // 변수 srh에 'one'을 넣어줌 srh =..

article thumbnail
[JS] 자바스크립트 addEventListener :: 자식 elements들의 이벤트 전파 막는 방법
FrontEnd/JavaScript 2022. 8. 1. 21:31

addEventListener 웹API로 부모자식에게 이벤트를 추가하면 자식노드들에게도 해당 이벤트가 전파된다. 만약 나는 부모노드에만 클릭 이벤트를 추가하고 싶어서 addEventListener를 사용했는데, 자식 노드들을 클릭해도 같은 함수가 호출 된다면 당황스러울 것이다. 그래서 오늘은 addEventListener의 이벤트 전파를 막는 방법에 대해서 알아보자 addEventListener의 이벤트 전파 막는 방법 기본문법 // 여기서 item은 addEventListener로 이벤트를 추가하고자 하는 타겟을 의미함 if(item !== event.target) return; 어려울 것 없다. 그냥 addEventListener로 호출하고자 하는 함수안에 밑의 코드를 넣어주기만 하면 된다. 대충 보..

article thumbnail
[JS] javascript에서 XML 형식의 데이터를 JSON 형식으로 변환해보자. ( 순수 javascript 및 라이브러리 활용 )
FrontEnd/JavaScript 2022. 6. 27. 22:00

같이 일하던 선임이 Vanilla 스크립트를 가지고 XML을 JSON으로 변환하는 것을 보고 신기해서 나도 해보는 글.. 보통은 이런 작업은 라이브러리를 활용할 수 있으면 그게 베스트이다. 라이브러리를 사용할 수 있는 환경이라면 라이브러리를 사용하도록 하자. 오늘은 1. Vanilla 스크립트를 통해 XML을 JSON으로 변환하는 방법 2. 라이브러리를 활용하여 XML을 JSON으로 변환하는 방법 2가지에 대해 알아보도록 하자. 우선 XML데이터는 공공데이터포털 API를 통해 가져오도록 하겠다. 그리고 테스트 해 볼 사람은 공공데이터포털에서 인증키를 받아 아래 코드를 그대로 붙여놓고, 인증키값만 바꿔주도록 하자. 난 그냥 HTML에서 한거라, 따로 프록시서버를 태웠으니 그것도 생각하고 실행해보도록 하자...

728x90