링크 : https://leetcode.com/problems/number-of-islands/description/문제 설명더보기Given an m x n 2D binary grid grid which represents a map of '1's (land) and '0's (water), return the number of islands.An island is surrounded by water and is formed by connecting adjacent lands horizontally or vertically. You may assume all four edges of the grid are all surrounded by water.Example 1:Input: grid = [ ["1"..

링크 : https://leetcode.com/problems/valid-palindrome/description/문제 설명더보기A phrase is a palindrome if, after converting all uppercase letters into lowercase letters and removing all non-alphanumeric characters, it reads the same forward and backward. Alphanumeric characters include letters and numbers.Given a string s, return true if it is a palindrome, or false otherwise.Example 1:Input: s = "A m..

링크 : https://leetcode.com/problems/best-time-to-buy-and-sell-stock/description/문제 설명더보기You are given an array prices where prices[i] is the price of a given stock on the ith day.You want to maximize your profit by choosing a single day to buy one stock and choosing a different day in the future to sell that stock.Return the maximum profit you can achieve from this transaction. If you cannot achi..

개요의존성 목록을 설치하기위해 `npm install` 또는 `npm ci` 를 활용하여 의존성 목록을 설치한다.이번 글에서는 `npm install` / `npm ci`가 무엇이고 어떠한 차이점이 있는지 살펴볼 것이다.npm install`npm install`은 패키지를 설치하고 의존성 트리를 구성하는 가장 기본적인 명령어이다.동작 방식 : `package.json` 파일의 버전 범위를 확인하고, `package-lock.json`이 있다면 이를 참고하지만 필요에 따라 내용을 수정한다.용도 : 새로운 패키지를 추가하거나, 기존 패키지를 최신 버전으로 업데이트하고 싶을 때 사용특징 : 설치 과정에서 `package-lock.json`이 업데이트될 수 있고, `node_modules` 폴더를 삭제하지 않..

링크 : https://leetcode.com/problems/decode-ways/description/문제 설명더보기더보기더보기You have intercepted a secret message encoded as a string of numbers. The message is decoded via the following mapping:"1" -> 'A' "2" -> 'B' ... "25" -> 'Y' "26" -> 'Z'However, while decoding the message, you realize that there are many different ways you can decode the message because some codes are contained in other code..

링크 : https://leetcode.com/problems/triangle/description/문제 설명더보기Given a triangle array, return the minimum path sum from top to bottom.For each step, you may move to an adjacent number of the row below. More formally, if you are on index i on the current row, you may move to either index i or index i + 1 on the next row.Example 1:Input: triangle = [[2],[3,4],[6,5,7],[4,1,8,3]]Output: 11Explanati..

링크 : https://leetcode.com/problems/subsets-ii/description/문제 설명더보기Given an integer array nums that may contain duplicates, return all possible subsets (the power set).The solution set must not contain duplicate subsets. Return the solution in any order.Example 1:Input: nums = [1,2,2]Output: [[],[1],[1,2],[1,2,2],[2],[2,2]]Example 2:Input: nums = [0]Output: [[],[0]]Constraints:1 10 문제 풀이1. set 자료..

개요이전 글에서 불필요한 리렌더링, 불필요한 메모리 낭비 방지를 위해 `useCallback`, `React.memo`를 활용하여 개선을 진행하였다.하지만 추가/삭제/토글 버튼에 대해서 모든 todo가 리렌더링되는 문제가 계속 발생했다.이번 글에서는 `useCallback`의 설정 개선과 `React.memo`가 왜 제대로 동작하지 않았는지를 살펴보고 개선할 예정이다.useCallback 의존성 배열 설정의 문제리렌더링 시 함수 재생성을 방지하기 위해 `useCallback` 훅을 이용하여 설정을 해두었다.하지만 추가/삭제/토글 버튼을 클릭할 경우 todo가 바뀌면서 `useCallback`의 의존성 배열로 설정해둔 todo의 영향을 받아 함수가 다시 생성되는 문제가 발생되었던 것이다.즉, 함수가 재생성..

개요이전 글에서 간단한 Todo App을 만들어보았다. 하지만 이러한 앱은 성능상 많은 문제가 존재한다.이번 글에서는 이러한 문제들과 어떻게 해결할 수 있을지에 대해 다뤄볼 예정이다.기존 Todo App의 문제점1. 불필요한 리렌더링먼저 React의 특성상 state의 값이 변경되면 React가 변경을 감지하고 관련 컴포넌트를 리렌더링 하게 된다.즉, 최신 데이터 값으로 다시 화면을 그리게 된다. 현재 state값으로 설정되어있는 값은 `todos`, `newTodo` 두 개가 존재한다.또한 todos를 추가하거나 삭제, completed 값을 변경하기 위한 `addTodo`, `deleteTodo`, `toggleTodo` 세 개가 존재한다.위 함수는 `setTodos`를 통해 todos의 값을 변경하..

개요React를 이용하여 간단한 TodoList를 만들어보고 `useCallback`, `React.memo`, `함수형 업데이트` 등을 이용해 하나씩 개선해 볼 예정이다.TodoList 만들기 - 초기 세팅초기 React 앱을 만들기 위해 터미널에 아래와 같은 명령어를 통해 간단한 React App을 생성한다.npm create vite@latest my-todo-app -- --template react TodoList 정보는 아래 todos 정보를 이용할 예정이다.https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API{JSON} Placeholder Free fake and reliable API for testing a..