J.LOG J.LOG

React-Query는 React 애플리케이션에서 데이터 관리를 위한 라이브러리입니다. React-Query를 사용하면 서버에서 가져온 데이터를 캐싱하고, 상태 업데이트와 재요청 등을 자동으로 처리할 수 있습니다. React-Query를 사용하려면 다음과 같은 단계를 따릅니다. React-Query 설치 npm install react-query yarn add react-query Query 컴포넌트 작성 React-Query에서 제공하는 useQuery 훅을 사용하여 데이터를 가져옵니다. useQuery 훅은 data, isLoading, isError 등의 상태 값을 반환합니다. import { useQuery } from 'react-query'; function App() { const { da..

순수 함수(Pure Function)는 입력값(input)에 대해 항상 동일한 출력값(output)을 반환하며, 함수 외부의 어떤 상태도 변경하지 않는 함수를 말합니다. 즉, 함수가 외부에 영향을 미치는 부작용(side effect)이 없는 함수입니다. 순수 함수는 다음과 같은 특징을 가집니다. 동일한 입력에 대해서는 항상 동일한 출력을 반환합니다. 함수 외부의 어떤 상태도 변경하지 않습니다. 함수 내부에서 예측 불가능한 결과가 발생하지 않습니다. 예를 들어, 다음은 순수 함수의 예시입니다. function add(a, b) { return a + b; } function multiply(a, b) { return a * b; } function greet(name) { return "Hello, " +..

RESTful API를 알아보기 전에.. REST는 뭔데? REpresentational State Transfer - 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것 REST는 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미한다. Create : 데이터 생성(POST) Read : 데이터 조회(GET) Update : 데이터 수정(PUT) Delete : 데이터 삭제(DELETE) REST는 3가지로 구성이 되어 있다. 자원(Resource) : HTTP URI 자원에 대한 행위(V..

React에서 컴포넌트 렌더링을 수행하는 조건은 1. props가 변경되었을 때 2. state가 변경되었을 때 3. forceUpdate()를 실행하였을 때 4. 부모 컴포넌트가 렌더링 되었을 때 React 컴포넌트는 기본적으로 부모 컴포넌트가 렌더링 혹은 리렌더링되면 변경된 내용이 없더라도 자식 컴포넌트들도 리렌더링이 일어난다. 불필요한 렌더링이 발생하면 당연히 성능 저하, 손실이 발생하게 되는데 렌더링을 최적화하여 손실을 줄이는 방법을 알아보자! 1. state 선언 위치 렌더링 수행 조건으로 state 값의 변화가 있는데 state가 변경이 되면 그 state가 선언된 컴포넌트와 하위 컴포넌트들이 모두 리렌더링 된다. 그렇다면 state 선언 위치를 잘 설정해 주는 것만으로도 리렌더링 횟수를 줄일..

개발할 때 이벤트 핸들러 등록을 쉽게 또 자주 하는데 (클릭, 키보드 입력, 마우스 이동시 등등... 함수 호출) 그동안은 용어에 대한 숙지가 부족한 채로 사용만 한 것 같아 확실히 정리해보자!! 이벤트란 뭘까? 이벤트 = 행동. 브라우저 안에서 어떠한 함수가 호출될 행동을 하는 것을 이벤트라고 한다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 하고 브라우저에게 이벤트 핸들러 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 이벤트 타입이 200여 가지나 있다는데..(써본 게 별로 없는......;;) 이벤트 타입 상세 목록 확인 리액트 이벤트 핸들러 등록 import React from "react"; const Test = () => { return ( {console.log("안녕!"..

키(Key)에 데이터(Value)를 저장하는 데이터 구조 Key를 통해 데이터를 바로 받아올 수 있음 → 속도가 획기적으로 빨라짐 파이썬 딕셔너리(Dictionary) 타입이 해쉬 테이블의 예 - Key를 가지고 바로 데이터(Value)를 꺼냄 보통 배열로 미리 Hash Table 사이즈만큼 생성 후 사용(공간과 탐색 시간을 맞바꾸는 기법) 파이썬에서는 해쉬를 별도로 구현할 필요 없음 - 딕셔너리 타입을 사용하면 되기 때문 해쉬 테이블 시간 복잡도 일반적인 경우(Collision이 없는 경우)는 O(1) 최악의 경우(Collision이 모두 발생하는 경우)는 O(n)

스택(stack) 나중에 들어간 데이터를 먼저 빼내는 데이터 구조 (LIFO: Last In First Out) 파이썬에서는 list[]로 구현되어있다 자료구조 class stack: def __init__(self): # 스택 객체 생성 self.items = [] def push(self, item): # 스택 요소 추가 push(.append()) self.items.append(item) def pop(self): # 스택 요소 삭제 pop() return self.items.pop() def peek(self): # 스택 맨 앞 요소 리턴 return self[0] def isEmpty(self): # 스택이 비었는지 확인(비었으면 True 리턴) return not self.items a_li..

배열의 단점을 개선하기 위해 생긴 자료구조 연결 리스트 / Linked List는 C언어에서 중요한 데이터 구조였는데 파이썬은 리스트에서 연결 리스트의 모든 기능을 지원한다. Node: 데이터와 데이터 주소(Pointer)로 이루어져있다. Head: 시작 데이터 Tail: 마지막 데이터 Next = None(또는 Null): 다음 데이터가 없을 경우 데이터 주소(Pointer) 값이 None 또는 Null이다. 장점 배열은 미리 데이터 공간을 할당해야하는데 연결리스트는 미리 할당 할 필요가 없다. (유동적으로 데이터 추가 및 삭제가 가능) 연결 리스트 수정 시 시간복잡도 O(1)을 갖는다. (항상 일정한 속도) 단점 다음 데이터를 연결하기 위해선 주소(Pointer) 공간이 필요하다. (저장공간 효율이 ..