profile
움직이는 만큼 행복해진다

get Element by attribute using querySelector

value="값" => don't forget double quotation marks

2021년 10월 5일
·
0개의 댓글

javascript drag and drop 구현 시도와 시행착오

서론 이 간단해 보이는 drag and drop animation을 만들어 보려했지만 생각보다 쉽지 않았다. 개인적인 생각으론 인프런에서도 sortable js 라이브러리를 사용한 것으로 생각된다. 왜냐하면 선택 후 드래그로 움직임을 바꿀 때 현재 선택된 elemen

2021년 9월 11일
·
0개의 댓글

pagination and rendering

회사에서 자바스크립트만으로 웹을 개발하고 있다.라이브러리를 쓰지 않다보니 모든 UI와 로직을 전부 내가 생각한 대로 만들었는데 그러다보니 코드가 분리가 잘 안된부분도 많았다.버튼이 first, <<, <, 1, ..., 10, >, >>, last으로

2021년 9월 10일
·
0개의 댓글

Array.prototype.map.call

drag and drop 관련 코드를 찾아보던 중 못 보던 메소드가 있어서 찾아보았다.getElementsByClassName 또는 querySelectorAll은 Array가 아닌 NodeList를 return하기 때문에 Array의 method인 map을 사용할 수

2021년 9월 4일
·
0개의 댓글

High Order Function (HOF)

이번에 이벤트 리스너의 콜백함수에로 값을 전달해야 될때 HOF으로도 가능하다는 것을 알았다그 전엔 anonymous 함수를 그 자리에서 만들어서 값을 전달했었는데 더 섹시한 방법이 있는 걸 알게 되니 앞느로 이렇게 사용해야겠다는 생각이 든다그 전에 HOF가 무엇인지 명

2021년 9월 1일
·
0개의 댓글

Javascript array 변경

array를 변경할 때 splice를 이용하면 기존 데이터에 변경이 되므로 slice를 사용하거나기존 array를 복사해서 splice 사용하기둘 중에 더 편한 방법을 찾아서 정리삭제 뿐만 아니라 순서를 변경할 때는 어떤 방법을 사용하는 것이 좋을지 생각해보기

2021년 8월 31일
·
0개의 댓글

이벤트 위임(event delegation)

javascript 로 동적으로 넣은 HTML(DOM)은 미리 이벤트 리스너를 설정할 수 없다.Array를 받아서 카드형태로 리스트를 화면에 그릴 때 javascript로 HTML을 넣는데이때 이벤트리스너를 미리 설정해 놓을 수 없다.또 각각 이벤트 리스너를 지정하는

2021년 8월 24일
·
0개의 댓글

javascript 마지막 쉼표 자르기

str = str.slice(0, -1);참고 문헌https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/slicehttps://gent.tistory.c

2021년 8월 23일
·
0개의 댓글

javascript innerHTML의 단점

웹을 만들다 보니 innerHTML로 편하게 만들다가 치명적인 단점을 발견했다.innerHTML로 만든 DOM은 메모리 주소가 새로 할당된다는 것이다.innerHTML로 그리는 것이 끝난 후에 해당 DOM을 가져와야 제대로 가져올 수 있다.(그리기 전에 이벤트 리스너

2021년 8월 20일
·
0개의 댓글

forEach에서 continue대신 return

for문에서 조건에 따라 다르게 실행하기 위해 continue를 쓰곤 했다.Array.forEach 에선 사용이 불가능한데 forEach는 return을 사용하면 continue와 같은 효과를 볼 수 있다.https://developer.mozilla.org/

2021년 8월 20일
·
0개의 댓글

javascript Set, Map

(key, value 존재)object도 key, value로 저장하는데 무슨 차이가 있나?map의 key는 함수나 오브젝트 같은 어떤 것이든 가능return: Map은 Map을 리턴, object는 undefined참고 문헌https://im-designlo

2021년 8월 17일
·
0개의 댓글

javascript image resize and preview before upload to server

https://ysyapr91.tistory.com/3https://blog.naver.com/PostView.nhn?blogId=okskmk2&logNo=221763461417&parentCategoryNo=&categoryNo=148&viewDat

2021년 8월 17일
·
0개의 댓글

javascript get url param

참고 문헌https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parametershttps://electronic-moongchi.tistory.com/82

2021년 8월 17일
·
0개의 댓글

form data 전송

프론트에서 DB에 값을 저장하려 할 때 POST 방식으로 전송을 하게 된다.form으로 전송하는 경우,file이 포함되지 않았다면,enctype이 application/x-www-form-urlencodedfile이 포함되었다면,multipart/form-data로 지

2021년 8월 15일
·
0개의 댓글

기존 MVC 방식의 code splitting

사실 code splitting이 이미 되어 있다.각 페이지마다 하나의 html에 연결할 javascript 파일을 각각 선택하기 때문

2021년 8월 13일
·
0개의 댓글

callback 전달 시 주의 점

success에 콜백함수를 전달할 때() => successCallback(MagicSearch.$input, data, fieldsName) 가 아닌successCallback(MagicSearch.$input, data, fieldsName) 을 전달하면함수가 바로

2021년 8월 13일
·
0개의 댓글

javascript ++ 연산자, pagination 관련

currentPage++로 하면 안됨\++currentPage 로 해야 됨

2021년 8월 11일
·
0개의 댓글

javascript pagination

https://bourbonkk.tistory.com/70https://sjh010.tistory.com/1https://stackoverflow.com/questions/25434813/simple-pagination-in-javascrip

2021년 8월 10일
·
0개의 댓글

HTML data-* attribution

html tag를 구분하기 위해 data-\* 속성을 사용하기도 한다.예를 들어 data-id 처럼 사용하면 원하는 태그를 가져올 때 편한 것 같다.이것을 javascript에서 불러 오려면 다음과 같다.참고 문헌https://developer.mozilla.

2021년 8월 10일
·
0개의 댓글

javascript object dynamic key

참고 문헌https://stackoverflow.com/questions/2462800/how-do-i-create-a-dynamic-key-to-be-added-to-a-javascript-object-variable

2021년 8월 10일
·
0개의 댓글