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

Array.prototype.flatMap()

array.map() 과 같은데 리턴값이 1 depth 벗어난 배열e.g.,arr1.map(aCallbackFunction) => \[1, 2]arr1.flatMap(aCallbackFunction) => 1, 2https://developer.mozilla.

2021년 12월 10일
·
0개의 댓글
post-thumbnail

Javascript && 와 ||

여태까지 react 또는 자바스크립트로 동적으로 컴포넌트를 렌더링 할 때(조건) && 컴포넌트(조건) ? 컴포넌트 : ''위 두가지 형태를 많이 사용했었다하지만 ||로도 가능하다는 것을 알게 되었다.앞||뒤 의 경우 앞 이 true 이면 바로 true를 return해서

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

javascript ??, !!

자주 사용하지 않는 연산자는 한번씩 찾아보게 되는 것 같다Nullish coalescing operator (??)?? 기준 좌변의 값이 null 또는 undefined일 경우에만 우변의 값을 전달 함e.g.어떤 변수 앞에 !!를 붙이면 그것에 대한 true, fals

2021년 11월 15일
·
0개의 댓글
post-thumbnail

javascript 함수의 매개 변수

함수의 parameter로 변수를 받아서 그것의 값을 변경해도 전달한 원래의 변수는 값이 변화되지 않는다.그런데 신기한점은 함수내에서 변수를 선언하지 않았고 단지 전달만 받은 변수가 계속 살아서 값이 누적될 수 있다.

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

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개의 댓글