티스토리

믹아의 개발일기
검색하기

블로그 홈

믹아의 개발일기

mik-a.com/m

개인 공부 블로그

구독자
2
방명록 방문하기

주요 글 목록

  • [Typescript] A* 길찾기 알고리즘 구현 https://mika0203.github.io/Pathfinding-Algorithm/ 일단 구현 페이지.. 대충 이런 느낌으로 구현했다. 알고리즘 구현은 이 단계를 걸쳤다. A*의 자세한 알고리즘은 아래에 내가 참조한 사이트를 첨부할 예정. 즉 알고리즘 설명은 거의 없다 1. startPosition, targetPosition, obstacles 지정 2. currentNode 를 startPosition 으로 지정 3. currenNode 를 closeNodeList 에 추가, openNodeList 에서 제거 4. currentNode 에서 8방향으로 Node 를 생성하여 ( 여기서 closeNodeList 에 있는 노드는 제외한다) 생성된 Node 들을 openNodeList 에 저장 5. o.. 공감수 1 댓글수 10 2021. 4. 5.
  • [Javascipt] Blob, File 을 Base64 로 컨버팅 이미지 파일을 선택하면 이미지를 연결된 소켓에 뿌리는 작업을 하고 있었다. 파일을 선택하면 blob 형태로 만들어 뿌렸는데 이게 같은 디바이스에서는 제대로 동작했는데 다른 디바이스에선 제대로 안나오더라.. 그래서 생각해낸게 blob 을 base64 로 컨버팅해서 base64를 넘기는 형태로 변경 const reader = new FileReader(); const blob = ---; // blob or file reader.readAsDataURL(blob); reader.onloadend = () => { const base64data = reader.result; // base64 converted! console.log(base64data); } 샘플페이지 codepen.io/mika0203/pe.. 공감수 2 댓글수 8 2021. 3. 29.
  • [Javascript] bool 값으로 정렬하기 bool 값으로 정렬해보자. const booleanArray = [true,false,false,true,false,true,false,true]; booleanArray.sort((a,b) => a === b ? 0 : a? 1 : -1); // [false, false, false, false, true, true, true, true] booleanArray.sort((a,b) => a-b); // [false, false, false, false, true, true, true, true] // -------------------------------------------------------------------------- booleanArray.sort((a,b) => a === b ? 0.. 공감수 1 댓글수 19 2021. 3. 29.
  • [Javascript] Unity Mathf.PingPong 구현 요새 javascript 알고리즘 문제 풀고 있는 사이트에서 문제가 올라왔는데 min 값과 max 값의 사이를 오가는 숫자를 구하는 문제였다 yeu.kr/Ptkt6 코딩문제를 풀어보세요 미션: 토글카운터를 만들어보자 yeu.kr unity 에선 Mathf.PingPong(float, length) 함수로 쉽게 구할 수 있었는데 js에서는.. 아마 없는듯? 오르는 중인지 내려가는 중인지 bool 값으로 할 수 있었는데 그냥 구현해보고 싶었다 // value 를 넣으면 min, max 값을 오가는 값을 리턴 하는 함수 const pingpong = (min,max, value) => { // 0을 기준으로 값을 맞춰준다 const normalizeMin = 0; const normalizeMax = max .. 공감수 0 댓글수 17 2021. 3. 26.
  • [Javascript] Switch 문 안에서 const, let switch (foo) { case 1 : let bar = 1; break; case 2 : let bar = 2; break; } 위와 같이 작성하면 bar 가 이미 선언되었다고 오류가 날 것 이다. switch (foo) { case 1 : { let bar = 1; break; } case 2 : { let bar = 2; break; } } {} 로 감싸서 해결하자 공감수 1 댓글수 17 2021. 3. 2.
  • [Javascript] {(intermediate value)} is not a function nodejs 에서 즉시 실행 함수로 초기화 하려고 하는데 자꾸 TypeError: {(intermediate value)} is not a function 가 뜬다. 에러 라인도 자꾸 선언한 함수의 라인을 표시하니 내가 뭘 잘 못했지 계속 찾고있는데.. 해당 함수를 선언 한 윗 코드에 세미콜론을 안붙여서 뜨는 에러였다. let appData = { lastUpdatedTime: undefined } // 공감수 3 댓글수 19 2021. 2. 4.
  • [Javascript] input file 으로 비디오를 가져와 재생 input type='file' 로 비디오 파일을 선택해서 video 태그로 재생해보자 input 에 type 은 file로, accept 로 비디오 확장자로 설정했다. // Javascript const inputFile = document.getElementById("file"); const video = document.getElementById("video"); inputFile.addEventListener("change", function(){ const file = inputFile.files[0]; const videourl = URL.createObjectURL(file); video.setAttribute("src", videourl); video.play(); }) 일단 간단하게 이렇.. 공감수 1 댓글수 12 2020. 4. 14.
  • [Javascript] insertAdjacentHTML() element.insertAdjacentHTML(position, text); element 에 html 텍스트를 파싱하여 node를 추가한다. jQuery 의 append() 기능과 비슷하다고 생각하면 된다. position 엔 4가지가 있다. jquery 의 append(), prepend(), before(), after() 과 동일하다. node.insertAdjacentHTML("beforebegin", "beforebegin"); node.insertAdjacentHTML("afterbegin", "afterbegin"); node.insertAdjacentHTML("beforeend", "beforeend"); node.insertAdjacentHTML("afterend", "afterend.. 공감수 1 댓글수 10 2020. 4. 9.
  • [javascript] jQuery 의 document ready 대체 현재 jQuery코드를 javascript 로 옮기는 중 의문점.. document.addEventListener("DOMContentLoaded", function(event) { //do work }); https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery 공감수 1 댓글수 19 2020. 4. 7.
  • [Javascript] Math.random() 난수 생성하기 자바스크립트로 난수를 생성해보자. Math.random() 을 쓰면 된다. for (var i = 0; i < 10; i++) { console.log(Math.random()); } 0.25721506183081844 0.5823201981959083 0.1276669448208927 0.5631301578055086 0.17111868936942853 0.5330896617959899 0.8969996301883194 0.5037203939477015 0.6167480911555299 0.009640469869059975 Math.random() 은 0 이상, 1 미만의 값을 Return 한다. 만약 정수로 0이상 9이하 의 값을 구하고 싶다면? for (var i = 0; i < 10; i++) {.. 공감수 1 댓글수 21 2020. 4. 5.
  • [Javascript] XMLHttpRequest 로 GET 하기 평소에 jQuery 로 get, post 를 쓰다가 javascript 만 사용해서 get은 어떻게 사용하는지 궁금해서 찾아봤다. // jQuery $.get("/sampleURL", function(response){ console.log(response); }) jquery 였다면 이렇게 간단하게 구현가능한데.. // Javascript var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function(){ // request 했을 때 if(xmlhttp.readyState == XMLHttpRequest.DONE){ // request 가 완료 됐을 때 if(xmlhttp.status == 200){ // 성공 data = JSON... 공감수 2 댓글수 17 2020. 4. 2.
  • [Javascript] Name 으로 NodeList 가져와서 Event 걸기 Button이 여러개가 있다. a b c d e f g h 각 버튼을 눌렀을 때 id를 가져와보자 // javascript // Name 으로 button 들을 가져온다 var btns = document.getElementsByName("btn"); // 가져온 버튼들(NodeList)에 forEach 로 EventListener 를 추가해준다. btns.forEach(element => element.addEventListener('click', function(e){ // e는 클릭 이벤트, e.target 으로 클릭된 객체를 가져온다. console.log(e.target); console.log(e.target.id); // a 를 눌렀을 때 : // a // a })) var btns = do.. 공감수 2 댓글수 10 2020. 4. 2.
  • [Javascript] Input 엔터 키로 후 입력 값 받아오기 input 태그에서 엔터 입력시 input의 값을 얻어오는 방법이다. 공감수 0 댓글수 17 2020. 4. 1.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.