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

Array vs. Object 성능 비교

주로 리스트를 렌더링하고 CRUD 하는 데 Array를 사용했었다이번에 강의를 통해 Object hash map 형태로 객체를 만들어서 렌더링 할땐 Object.entries 로 할 수 있고데이터를 삭제할 땐 delete 연산자를 이용해서 삭제할 수 있다는 것을 알게

2022년 9월 12일
·
0개의 댓글
·

moment 주 계산

moment 라이브러리로 해당년도의 몇주차 인지 구할 때week 메서드와 format 메서드의 시작 지점이 다르다week() 메서드를 사용하면 해당 년도 1일이 포함된 주가 1주차 이지만format('YYYY-W') 으로 주차를 구하는 경우월요일이 포함되는 주가 1주차

2022년 6월 21일
·
0개의 댓글
·

new Promise

new Promise로 인스턴스를 만들 때 를 전달해야 된다await은 resolve에 전달한 것이 return 된다then으로 받는 것과 같다

2022년 4월 30일
·
0개의 댓글
·

Date

Date 객체에 대해 공부를 해봤다빌트인 객체에 대해 다시 한번 상기하는 시간을 가질 수 있어서 좋았다공부 내용 : https://github.com/Metacognition-Polymath/javascript-deep-dive/commit/3ee96ddcf5

2022년 4월 6일
·
0개의 댓글
·

모달창에서 body scroll 막기

모달창에서 외부 스크롤 막기

2022년 3월 29일
·
0개의 댓글
·

axios 와 비동기 통신 에러처리

then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다.sentry 같이 에러가 발생했을 때 로그를 남기고 싶다면 instance의 interceptor를 이용하면 좋다이때 주의해야 되는 것은 반드시 error처리 함수의 return은 Promise.

2022년 3월 15일
·
0개의 댓글
·

typescript arguments

javascript의 함수 선언문 방식엔 arguments라는 프로퍼티가 존재한다.함수로 전달되는 모든 매개변수(argument)를 arguments라는 배열 비슷한 이 프로퍼티를 통해 불러올 수도 있다.하지만 이는 어떤 타입이 들어올지 몰라서 전혀 안전하지 않다.실제

2022년 3월 9일
·
0개의 댓글
·

배정밀도 64비트 부동소수점

배정밀도는 64비트단정밀도는 32비트라고 한다.부동소수점은 소수점이 고정되어 있지 않고고정소수점은 소수점이 고정되어 있다.배정밀도는 정확하지만 더 느리다.https://gigglehd.com/gg/hard/5427559부동 소수점 vs 고정 소수점고정 소수점

2022년 3월 3일
·
0개의 댓글
·

Symbol

ES6의 Symbol은 유일무이한 값을 만든다고 한다.문득 react의 key로 사용하면 좋을 것 같아서 찾아보니 react key는 Symbol을 지원하지 않는다.자바스크립트 딥 다이브 33장 읽을 때 다시 자세히 보겠지만아직까지 필요성을 잘 모르겠다.

2022년 3월 3일
·
0개의 댓글
·

Promise.all

프론트(리액트)에서 데이터를 처리할 때 서버에서 리소스 베이스로 API가 열려있다 보니 배열을 돌면서 각 id로 특정 데이터를 조회하고 그것을 가공하는 로직이 필요했다.이럴 때 Promise.all 을 사용하면 편리한 것 같다.예제 코드는 좋은 예는 아니지만 생각나는대

2022년 3월 3일
·
0개의 댓글
·

트리구조 검사 O(n^2) 개선하기

list\[] 와 listAchildren\[] 중 하나라도 겹치는 부분이 있는지 검사하는 것을 개선listAchildren의 parentId(listA의 id)를 list\[] 컴포넌트에 전달해서 list\[] 의 아이템들의 parentId가 listA의 id와 같은

2022년 2월 23일
·
0개의 댓글
·

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