JavaScript

[NodeJS] request모듈의 qs에 Object.assign 사용하여 배열넣기

업무를 보던 도중 api를 통해 통신을 하려는데 글세 쿼리스트링에 배열을 넣어야하는 일이 있었다... 세상에,, get방식 쿼리스트링에 배열이라니 ㅠㅠ 쿼리스트링에 일단 대괄호를 넣는것부터 쉽지 않았다. 일부분만 보여주자면 api 문서에 따르면 ?id[]=1&id[]=2&id[]=3 이런식으로 전송을 해야했는데 이런식으로 전송을 하게 되면 대괄호가 인코딩 되어 전송이 되어서 그런지 통신이 제대로 되지 않았다. PostMan을 사용하여 전송해서 피들러로 데이터를 따보았을 때는 id[]=1 의형태로 URL이 잘 전송이 됐는데 노드를 통해 request를 쐈을때는 id%5B%5D=1 의 현태로 전송이 되는 것이엇다... url에 직접 입력하는 방식으로 사용해도 되지만 나의 경우는 그런식으로 사용할수가 없는 구..

[JavaScript]성격 유형 검사하기_자바스크립트(JS) / 프로그래머스(Programmers) 연습문제(level 1)

https://school.programmers.co.kr/learn/courses/30/lessons/118666 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 레벨1 문제치고는 이제 막 코딩테스트를 준비하는 분들에게는 고민이 조금 필요할수 있었던 문제였던것같습니다. 사실 뭐 저도 요새 코테준비 손놓고있다가 1년만에 문제를 보는거라... 바로 슥슥 풀리진 않고 고민을 조금 했습니다. 일단 문제를 보시면 MBTI를 구하는 문제라고 생각하시면 되는데 설명이 거창해서 겁을 지레 먹으실수도 있지만,,, 코드의 가독성이나 효율성의 차이지 많이 어렵지는 않은 문제..

[JavaScript] 백틱 `` 활용하기

우리가 흔히 코드를 작성하면서 변수와 변수를 혼합할때 + 연산자를 사용한다. 특히 문자열 속에 변수를 넣어야 하는 경우에는 코드가 상당히 지저분해질수가 있다. const name = 'Cine'; const age = 20; console.log('제 이름은 ' + name + '이고, 제 나이는 ' + age + '입니다.'); 대부분 이런식으로 작성을 해야하는데 상당히 번거롭다. 이럴때 백틱을 활용하면 편리하게 작성을 할 수 있다. 흔히 키보드에서 Tap키 위에 있고 1키 왼쪽에 있으면서 ~ 을 Shift키를 누르지 않고 누르면 ` 백틱이다. const name = 'Cine'; const age = 20; console.log(`제 이름은 ${name}이고, 제 나이는 ${age}입니다.`); 이런..

[JavaScript] Dom(태그 이동시키기)

문제1. test01 태그에 "dom test"라는 내용을 가진 div태그 생성하기 클릭 문제2. test01 태그 안에 생성된 div 태그들을 test02 태그 안으로 이동하기 클릭 *test01 *test02 ​ ​ ​ function addTest(){ var div = document.createElement("div"); div.textContent = "dom test" + (tmp++); document.getElementById("test01").appendChild(div); } 해당 함수는 태그를 생성하는 함수입니다. "dom test1"과 같은 텍스트를 포함하는 태그를 "test01"영역안에 생성합니다. (appendChild 자식이니까 안에 생성!) ​ ​ ​ function mov..

[JavaScript] DOM( 태그 추가하기 / 이동하기 )

태그 추가하기 appendChild insertBefore appendChild를 이용한 엘리먼트 이동 부모태그 div태그 ​ ​ ​ function addAppend(){ var fieldset = document.getElementById("addele"); var p = document.createElement("p"); p.textContent = "자식요소들 중 가장 마지막에 들어갑니다." + (count++); fieldset.appendChild(p); } appendChild버튼을 누르면 해당 함수가 실행됩니다. 해당 함수는 id가 addele인 태그 해당코드에서는 fieldset이 되겠네요. fieldset영영의 가장 마지막에 p.textContent = "자식요소들 중 가장 마지막에 들..

[JavaScript] DOM( 이미지 속성 변경 )

◀ ▶ ​ ​ ​ var anchs = document.querySelectorAll("a"); var img = document.querySelector("img"); var cnt = 1; anchs[0].onclick=function(){ var imgAlt = img.getAttribute("alt"); if (imgAlt == "img01") { cnt = 3; img.setAttribute("alt", "img0"+cnt); img.setAttribute("src", "resources/image/img0"+cnt+".png"); }else{ --cnt; img.setAttribute("alt", "img0"+cnt); img.setAttribute("src", "resources/image/..

[JavaScript] DOM( img바꾸기 )

img01 img02 img03 이미지 생성 이미지 삭제 ​ ​ ​ ​ ​ ​ function createImg(){ // 1. 이름이 rdoBtn인 요소들을 가지고 온다. var radioButton = document.getElementsByName("rdoBtn"); var radioVal = ""; // 2. 가져온 요소들을 반복하면서, 체크되어있는 라디오버튼의 value를 가지고온다. for(var i = 0; i < radioButton.length; i++){ if(radioButton[i].checked){ radioVal = radioButton[i].value; } } // 3. img 태그를 만들어서, "resources/image/"+라디오버튼.value를 널어주자. // img 태..

[JavaScript] DOM( createElement / createAttribute )

createElement("String tagName") -> 엘리먼트 객체 생성 createTextNode("String text") -> text 객체 생성 ​ createAttribute("String attrName") -> 속성(Attribute) 생성 setAttributeNode(Attribite attr) -> 속성 추가 ​ setAttribute("String attr", "String value") -> 위의 두줄을 하나로 ​ ​ 엘리먼트 생성하기 createElement는 태그를 생성하는 메소드입니다. createElement("div")는 를 생성합니다. 위의 코드에서는 주석처리 되어있지만 createAttribute는 태그에 속성을 추가합니다. div.setAttribute("st..

[JavaScript] DOM(parentNode / childNodes)

부모탐색, 자식탐색 child01 child02 child03 부모탐색 자식탐색 1. "test01을 포함하는 부모태그"의 배경색을 지정하자 2. "세번째 div 태그에 포함된 test04"의 폰트 크기를 20pt로 적용하자 test01 test02 test03 test04 ​ ​ ​ function searchPar(){ var child02 = document.getElementsByTagName("p")[1]; var parent = child02.parentNode; console.log(parent); alert(parent.nodeName); parent.style.backgroundColor='pink'; } 부모탐색 버튼을 누르면 해당 함수가 실행됩니다. child01 child02 chi..

[JavaScript] location(reload / href / assign / replace)

이동0 이동1 이동2 이동3 이동4 HTML에서는 페이지 이동을 위해 태그를 사용하였습니다. 이동0은 태그로 감싸져 있으며 누르게 되면 설정한 경로로 이동합니다. ​ function locationTest01(){ location.reload(); } 이동1 버튼을 클릭하면 해당 함수가 실행됩니다. 해당 함수는 새로고침과 같은 기능을 합니다. 현재 페이지 내에서는 아무런 변화가 없습니다. ​ function locationTest02(){ location.href="http://www.naver.com"; } 이동2 버튼을 클릭하면 location.href 명령이 수행됩니다. 태그와 비슷한 역할이며 해당 경로로 이동합니다. ​ function locationTest03(){ location.assign(..