FrontEnd

Immutability (불변성) 에 대한 정리 - 4

Immutability (불변성) 포스팅 리스트 - Immutability (불변성) 에 대한 정리 - 1 - Immutability (불변성) 에 대한 정리 - 2 - Immutability (불변성) 에 대한 정리 - 3 - Immutability (불변성) 에 대한 정리 - 4 서두 지난 포스팅 에서는 객체와 함수가 만났을때 발생하는 문제점에 대해 다뤄보았습니다. 이번 포스팅에선 Object.freeze 에 대해서 알아보겠습니다. Object.freeze Object.freeze 는 객체를 동결하는 역할을 합니다. Object.freeze 구문 Object.freeze(obj) const f1 = { name: "Kim" }; const f2 = f1; Object.freeze(f1); f1.nam..

Immutability (불변성) 에 대한 정리 - 3

Immutability (불변성) 포스팅 리스트 - Immutability (불변성) 에 대한 정리 - 1 - Immutability (불변성) 에 대한 정리 - 2 - Immutability (불변성) 에 대한 정리 - 3 서두 지난 포스팅 immutability 에 대한 정리 2편 에서는 Object Data type 같은 경우 어떻게 하면 immutability (불변성) 을 지킬수 있는지 방법을 알아보았고 함수 Object.assign, Array.prototype.concat 에 대해 알아보았고 Nested Object (중복 객체) 의 경우 어떻게 대처하면 되는지에 대해 알아보았습니다. 이번 포스팅에서는 함수 와 관련된 immutability (불변성) 에 대해 알아보겠습니다. 함수와 객체가 ..

Immutability (불변성) 에 대한 정리 - 2

Immutability (불변성) 포스팅 리스트 - Immutability (불변성) 에 대한 정리- 1 - Immutability (불변성) 에 대한 정리 - 2 - Immutability (불변성) 에 대한 정리 - 3 서두 지난 포스트 ( Immutability (불변성)에 대한 고찰 - 1 ) 에서 immutability란 무엇인가? let 그리고 const에 대해 무엇인가? Data Type 인 Primitive Type과 Object Type에 대해서 알아보았습니다. 이번 2편 포스팅에서는 Object Type에서 불변성을 가지려면 어떻게 할 수 있는지에 대해 생각해보는 시간을 가지도록 하겠습니다. Object.assign immutability (불변성) 은 원본 데이터를 건드리지 않아야 합..

Immutability (불변성) 에 대한 정리 - 1

Immutability (불변성) 포스팅 리스트 - Immutability (불변성) 에 대한 정리 - 1 - Immutability (불변성) 에 대한 정리 - 2 - Immutability (불변성) 에 대한 정리 - 3 서두 한달전 쯤 Shallow Copy Deep Copy 에 대해 공부하고 정리하여 포스팅 한적이 있습니다. 생활코딩을 보며 Redux를 공부를 할려다 immutability 에 대해 아는것이 좋다고 하길래, immutability 즉 불변성에 대해 개발하며 자주 들어봤지만 크게 관심을 가지지 않았던터라 이번에 공부를 해두는게 좋다고 하여 이렇게 정리하게 되었습니다. Immutability 이란 무엇인가? imutability란 불변성 이라고 불립니다. 어원을 한번 따라가봅시당 mu..

Input - Date, DatePicker library 📅

react에서 date를 처리하는 것은 여간 까다로운 작업이 아닐 수 없습니다. format을 다 처리해야 하기 때문이죠. react에서 input을 생성하고 type을 date를 줍니다. date input value의 date format은 YYYY-MM-DD입니다. const [date, setDate] = useState(new Date()); const getStringDate = (date) => { let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); if (month < 10) { month = `0${month}`; } if (day < 10) { day = `0${day}`; } ..

[ Optimize ] useCallback

useMemo 에 이어서 useCallback 에 대해서 알아봅시다. 이번에도 Dingdong Ditch(띵똥 벨튀) component를 뜯어서 개조를 해볼것입니다. 전 포스팅에서도 말했지만 useMemo, useCallback 서로비슷합니다. useMemo 기반에서 추가된게 useCallback 이니까영 Memoization 이란? 주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장을 의미합니다. useMemo: memoization 된 값을 반환 합니다. useCallback: memoization 된 함수를 반환 합니다. useCallback의 간단한 예시를 들자면 1. useCallback(() => fn, [deps]); // deps의 데이터가 변하..

[ Optimize ] useMemo

useMemo useMemo에 대해 공부를 하였지만 어떤 예제를 들어야 할지 애매모호 해서 상당히 골치 아팠습니다. 그러다 어제 올린 React.memo 에서 띵똥 벨튀 예제를 가져와서 쓰면 괜찮을것 같아서 DindongDitch를 개조해 보았습니다. useMemo 를 공부하면 useCallback 은 필연으로 공부를 하게 됩니다. 두가지 비슷하지만 확연히 차이가 있습니다. Memoization 이란? 주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장을 의미합니다. useMemo: memoization 된 값을 반환 합니다. useCallback: memoization 된 함수를 반환 합니다. useMemo의 간단한 예시를 들자면 1. useMemo(() =..

[ Optimize ] React.memo

React 최적화를 하기 위해 useMemo, React.memo, useCallback 세가지를 보통 이용 합니다 (제가 아직 배운게 이것밖에 없어서) 그중에서 React.memo에 대해 공부하며 예제를 간단히 만들어보며 연구를 했는데 괜찮은 예제가 떠올라서 이렇게 공부한걸 올리는 겸 예제를 공유 해봅니다. React.memo를 배우기전에 Memoized에 대해서 알아야하는데 Memoized는 주어진 입력값에 대한 결과를 저장함으로써 같은 입력 값에 대해 함수가 한 번만 실행되는 것을 보장하는것을 의미합니다. ( 알고리즘 방식이기도 합니다. ) React.memo는 Component의 결과값을 Memoized를 합니다 한국에서 어릴때 유행했던 벨튀(DingDong Ditch) 를 바탕으로 Compone..

[ JS ] Shallow Copy (얕은 복사) Deep Copy (깊은 복사)

COPY 프로그래밍을 공부하다보면 shallow copy(얕은 복사) deep copy(깊은 복사)를 경험하신적이 있으실것입니다. c언어 에서는 포인터, java에서는 reference variable 등등 을 관리하고 데이터 처리를 할때 많이 만나게 됩니다. 대표적인 예를 javascript 에서 확인해보겠습니다. Example ) Shallow Copy - 1 // A 라는 사람이 메모장을 쓴다고 했을때 가정을 해봅시다. const memoA = { author: 'Person A', content: 'plan to make a coffee' }; // 그리고 B 라는 사람이 A 라는 사람의 메모장을 복사하여 받은 뒤 수정한다고 해봅시다. const memoB = memoA; // B라는 사람은 au..

[ JS ] Date 함수를 사용하여 이번 주간, 월간 데이터 구하기

Monthly Weekly Date 월간 주간 구하는 코드를 한번 짜보도록 합시당 JS에서 Date 먼저 받아오기 let today = new Date(); // Fri Apr 01 2022 22:39:17 GMT+0900 (한국 표준시) new Date() 함수 호출을 통해 간단하게 날짜를 받아올수있습니다. Honey Tip ( 꿀팁 ) today.getTime(); // 1648820357030 이러한 형식으로 getTime(); 함수를 호출하게 되면 지정된 날짜의 시간에 해당하는 숫자 값(밀리 초)을 반환하게 됩니다. let anyDay = new Date(2022, 3, 1) // 2022.04.01 00:00:00 anyDay = new Date(2022, 3, 1, 23, 59, 59) // ..