그린그린티라떼

한 줄 요약 ▎ GET처럼 안전하고 idempotent하지만, POST처럼 요청 본문(body)에 쿼리 내용을 담을 수 있는 새로운 HTTP ▎ 메서드 --- 왜 만들었나? 기존 문제 GET 방식으로 검색할 때 보통 이렇게 씁니다: GET /feed?q=foo&limit=10&sort=-published 근데 검색 조건이 복잡해지면 문제가 생깁니다: - URL 길이 제한에 걸림 (보통 8000자 언저리) - 민감한 검색어가 URL에 노출되어 서버 로그에 남음 - 복잡한 데이터(JSON, SQL 등)를 URL로 표현하기 어색함 그래서 많은 서비스가 POST로 검색을 구현해왔습니다: POST /feed Content-Type: application/x-www-form-urlencod..

https://jake-seo-dev.tistory.com/348 자바스크립트의 Object 와 Map 의 차이점에 대해서 얘기해보세요.Object 와 Map 비교 Object 는 이전부터 존재했다. 여러 필드와 그에 맞는 데이터, 메서드를 가진 '객체' 로서 사용되기 위해 만들어졌다. Map 은 ES6 에서 새롭게 도입되었다. key 와 value 쌍을 가진 데이jake-seo-dev.tistory.com

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달러가 결제되었다토큰을 채웠으니 다시 코드를 돌려보면~!무언가 정상적으로 출력되..