그린그린티라떼

window.location.reload()를 사용하면 전체 어플리케이션이 리로드 되면서 모든 상태가 초기화된다즉 리액트에서 해주는 모든 상태 관리가 무의미해진다.로그인 상태를 관리하려면 useState, useContext, Redux를 이용해 로그인 상태 관리가 가능하다. 잘못 사용하면 코드가 아래와 같다.function LoginPage() { const [user, setUser] = useState(null); const login = async () => { const userData = await fakeLoginAPI(); // 가짜 로그인 API 호출 setUser(userData); window.location.reload(); // 😡 이렇게 하면 상태 관리가 무..

useMemo란?useMemo는 React에서 컴포넌트 성능 최적화를 위해 제공하는 훅입니다. 특정 값이 재계산될 필요가 없을 때 이전 계산 값을 재사용하여 불필요한 계산을 방지합니다.const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 1. 불필요한 계산 방지- 복잡한 계산(비용이 많이 드는 함수 호출 등)의 결과를 캐싱합니다.- 종속성 배열([])의 값이 변경될 때만 재계산이 일어납니다. 2. 참조 유지- 이전에 계산된 값을 재사용하므로 매번 새로운 값 생성이 방지됩니다.- 이는 React에서 props 전달 시 메모이제이션된 객체나 배열의 참조를 유지하는 데도 유용합니다. 예시1. 비용이 큰 계산 로직 - items가 변..

Before문제점1. 불필요한 useState 사용 - name은 부모로부터 제공되는 props입니다. 변경될 일이 없으므로 상태 관리가 필요하지 않습니다.2. 중복된 상태 관리 - props 자체를 관리하는 useState는 불필요한 복잡성을 늘립니다.3. 직관적이지 않음 - state와 props 사이의 관계를 혼동할 수 있습니다.import React, { useState } from 'react';function Greeting({ name }) { // props를 useState로 저장 const [greetingName, setGreetingName] = useState(name); return Hello, {greetingName}!;}export default Greeting; Af..

리팩토링 전문제점: log 객체가 렌더링 될 때마다 새로 생성되기 때문에 내부의 상태 변화가 유지되지 않습니다.import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); // 초기 객체 선언 const log = { update: 0, }; const handleIncrement = () => { setCount((prev) => { log.update += 1; // 업데이트가 제대로 되지 않음 console.log(log); return prev + 1; }); }; return ( Count: {count} ..

useState 훅은 컴포넌트 안에서 상태(state)를 관리할 수 있게 해주는 훅상태란 컴포넌트의 현재 데이터나 값을 저장하고 추적하는 것 useState를 사용하면 두 가지 값을 반환해요:1. 상태 값 (current state): 현재 상태의 값을 가져옵니다.2. 상태 업데이트 함수(set function): 상태를 새 값으로 업데이터하는 함수입니다. import { useState } from 'react';function Counter() { const [count, setCount] = useState(0); // 초기값은 0 return ( 현재 카운트: {count} setCount(count + 1)}>+1 );} 1. useState(0)은 상태의..

단순하게 integer을 거꾸로 뒤집는 문제js 문자열 함수 등을 활용해서 풀면 된다근데 범위를 넘어가지 않아야해서 체크해주는 로직이 필요하다/** * @param {number} x * @return {number} */// 시간복잡도 O(N), 공간복잡도 O(N)var reverse = function (x) { // 32비트 정수의 범위 const MIN = -Math.pow(2, 31); // -2147483648 const MAX = Math.pow(2, 31) - 1; // 2147483647 let isMinus = false; if (x MAX) { return 0; } return num;};console.log(reverse(-123)); 시간 복잡도가 상당해서 gp..

초록이가 아니라 빨강이로 바뀌었다빨강이로 바뀌니까 더 빈약해보이는 내 잔디 현황분발해야지! 아쟈쟈

RateLimitError: 429 You exceeded your current quota, please check your plan and billing details. For more information on this error, read the docs: https://platform.openai.com/docs/guides/error-codes/api-errors. 두둥ㅎㅎ이 에러는 할당된 요청량을 초과했을 때 뜨는 에러이다.요금제와 결제 정보를 확인해보자.저는 무료 플랜을 사용하고 있었습니다.결제를 위한 신용카드를 등록해보겠습니다.현재 당당하게 Free trial그러니까 되는 기능이 없지!$10를 결제했는데 $11달러가 결제되었다토큰을 채웠으니 다시 코드를 돌려보면~!무언가 정상적으로 출력되..

npm outdated​npm prune npm prune을 사용하면 프로젝트에서 사용되지 않는 패키지를 제거할 수 있다.package.json파일에 명시되지 않은 패키지들을 삭제해준다. npm prune --production--production 또는 -P 옵션을 사용하면 devDependencies에 있는 패키지들을 제거해준다. npm prune --dry-run--dry-run 또는 -d 옵션을 사용하면 패키지를 제거하지 않고 제거되야 하는 패키지 목록을 알려준다. npm prune 명령어를 주면 package-lock.json 파일도 같이 업데이트 된다는 점을 잊지 않기!오래된 패키지 정리 및 프로젝트 경량화에 도움을 주기 위한 명령어이다.위의 명령어를 사용해서 의존성 충돌을 줄여보자 npm o..

npm init 을 하고 모든 옵션에 엔터를 쳐주면 기본 값으로 package.json이 생성된다.이 과정 전에 nodeJS 설치를 해줘야 한다.npm init -y 로 -y 옵션을 주면 바로 기본 옵션으로 파일이 생성된다.npm view uuiduuid 패키지에 대한 정보를 얻을 수 있음 더 많은 npm package에 대한 정보를 얻으려면 https://www.npmjs.com/ npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript developmen..