혼자 적어보는 노트

이전 포스팅에서 다룬 React.memo와 함께 사용할 useCallback에 대해 적어보도록 하겠다. 함수를 재사용 한다고 하는데 무슨 의미인지 어떤 식으로 사용을 하는 것인지 알아보자 useCallback을 이해하기 위한 중요 개념은 함수는 일반 객체와 같은 비교 원칙을 따른다는 것이다. const func1 = () => 1 + 2; const func2 = () => 1 + 2; console.log(func1 === func2) // false; console.log(func1 === func1) // true; console.log(func2 === func2) // true; 같은 내용의 함수더라도 비교연산 시 false를 반환한다. 함수는 자기 자신 외의 다른 함수들에서는 false를 반환..

React로 프로젝트를 만들다보니 너무 많은 리렌더링을 하고 있는것 같다는 생각이 들 때가 있었다. 적절하게 사용 시 성능향상에 도움이 되는 React.memo() 에 대해 적어보겠다. 먼저 React에서 리렌더링이 되는 조건에 대하여 알아보자. React의 리렌더링 조건 1. state가 업데이트 되었을때 리액트에서는 state의 변경이 감지되면 리렌더링을 해주지만 setState가 아닌 직접 state변경을 하면 state변경을 감지하지 못해 리렌더링이 되지 않는다. 2. 전달 받은 props값이 업데이트 되었을 때. 하위컴포넌트에 props값을 전달 했을 때 그 값이 변경된다면 리렌더링이 된다. 2. 부모 컴포넌트가 리렌더링 되었을 때 부모컴포넌트가 리렌더링 되었을 때 자식컴포넌트 또한 리렌더링이 ..

Javascript에는 탐색하는 함수들이 여럿 존재한다. 그 중 배열에 관련된 Array.prototype에는 여러 메소드들이 존재하는데 Array.prototype.every는 모든 원소가 해당 함수를 만족한다면 true를 반환하고, 전체를 탐색하면서 하나라도 만족하지 않는 원소가 있다면 false를 반환한다. Array.prototype.some은 요소들 중에 하나라도 true가 있다면 배열 탐색을 종료하고 바로 true를 반환한다. Array.prototype.every const array = ["10", "20", "30", "40"]; const checkNumber = array.every((num) => num >= 20); console.log(checkNumber); // false c..

기한을 설정하는 페이지에서 지정한 날짜에 따라 오늘, 내일, 혹은 지난 날짜임을 알려주는 경우들을 본 적이 있는데 그 기능을 작업해 보려고 한다. 이번에 todo작업하면서 date관련된 부분을 자주 접하면서 익히게 되었는데 date값들로 계산을 해보면서 몇가지 알고 있으면 좋을 점을 적어보겠다. new Date에서 직접 날짜를 입력해서 새로운 Date를 생성할 때 month부분에 실제 입력할 월에 -1 을 해주어야 원하는 월을 얻을 수 있다. ( ex) 1월일 경우 0) const someDay = new Date(2022, 1, 18); console.log(someDay); // Fri Feb 18 2022 00:00:00 GMT+0900 (한국 표준시) const someDay2 = new Date..

지난번 포스팅에서 라이브러리 없이 달력 만들기를 했었는데 해당 달력을 토대로, 작업하고 있는 todo list에 기한을 추가하는 기능을 넣어보기로 했다. 구현사항은 1. 기한 설정 버튼을 누르면 달력이 나타난다. 2. 달력에 있는 날짜 선택 시 해당 날짜가 데이터에 담기며, 표시된다. 달력에 표시되어있는 지난 달, 다음 달의 날짜 데이터를 누를 경우 해당 달에 맞는 데이터가 담긴다. 3. 달력이 아닌 다른 영역을 클릭 했을 때 팝업으로 나타난 달력이 사라진다. 건드릴 component는 TodoAddForm과 Calendar이다. 1. 기한 설정 버튼을 누르면 달력이 나타난다. [TodoAddForm.js] const [dueDate, setDueDate] = useState(""); const [ope..

라이브러리 없이 캘린더 만들기에 도전 해보기로 했다. 여기저기 블로그를 돌아다니며 javascript로 만드는 방법들을 참고해서 react에 적용 해보았다. const [thisCalender, setThisCalender] = useState(null); const today = new Date(); const thisYear = today.getFullYear(); const thisMonth = today.getMonth(); 상단에 위와 같이 날짜정보를 담을 state, today, thisYear, thisMonth를 만들어준다. const calenderMaker = () => { const prevLast = new Date(thisYear, thisMonth, 0); // 지난 달의 마지막..

커밋을 엄청 뭉텅이로 하다가 git을 잘 다루어보자 라는 마음으로 커밋을 나누어서 하고 있던 도중 중복되는 커밋을 한 것 같아서 최근에 올렸던 두개의 커밋을 합치고 싶었다. git rebase -i HEAD~2 그런데 에러가 발생했다. error: cannot rebase: Your index contains uncommitted changes. error: Please commit or stash them. 커밋을 하지 않은 내용물들이 남아있으면 rebase가 안되는 모양이다. commit을 하거나 stash를 하라는데 status에 남아있는 파일들은 일부러 커밋을 안한 것들이였다. (커밋하기 싫은 것들!) 커밋을 하기 싫다면 stash를 사용하면 된다고 한다. git stash stash 명령어를 사..

https://jinist.tistory.com/92?category=930695 [React] Drag and Drop 이벤트 적용해보기 종종 사이트에서 드래그&드롭 이벤트가 보이길래 투두리스트를 작업하면서 나도 해당 기능을 적용해보기로 했다. 라이브러리를 사용해야 될 것만 같았는데 HTML 드래그앤 드롭 API가 jinist.tistory.com 이전에 시도했던 Drag and Drop이벤트. 맛보기로 감을 잡았으니 내 프로젝트에 적용할 응용버전을 만들어 보기로 했다. 하고싶은 기능의 구현사항 1. 리스트 드래그 시 클릭한 리스트 불투명처리 2. 리스트 드래그 시 들어갈 위치에 border 표시 3. 드롭 시 해당 위치에 해당 리스트 삽입 import React from "react"; import ..