Ch.Covelope

react-query 란 React Query는 React 에서 원격 및 비동기 데이터를 관리하기 위한 라이브러리이다. API와 같은 다양한 데이터 소스에서 데이터를 더 쉽게 가져오고, 캐시하고, 동기화하고, 업데이트할 수 있는 일련의 훅 및 유틸리티를 제공한다. 설치 및 설정 NPM $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query CDN 설치되면 다음과 같이 컴포넌트에서 react-query를 가져와서 사용할 수 있다. import { QueryClient, QueryClientProvider, useQuery } from 'react-query'; const q..

OSI 7 Layer란 OSI 7 Layer는 네트워크 프로토콜과 통신을 표준화하기 위해 개발된 ISO(국제 표준화 기구)의 OSI(Open Systems Interconnection) 모델이다. 이 모델은 7개의 계층으로 구성되어 있으며, 각 계층이 서로 상호 작용하여 전체 네트워크 통신 프로세스를 지원한다. 1.응용 계층 (Application Layer): 이 계층은 사용자와 직접적으로 상호작용하는 소프트웨어 애플리케이션을 제공. 이메일, 파일 전송, 웹 브라우저 등과 같은 애플리케이션을 제공한다. 사용자 인터페이스 및 응용 프로그램을 처리 이메일, 웹 브라우저, FTP 클라이언트 등 다양한 프로토콜이 포함 2.표현 계층 (Presentation Layer): 이 계층은 데이터의 표현 방법을 정의...

자바스크립트에는 동기식과 비동기식이 있다. 동기식(Synchronous) 이란단순하게 순서대로 실행되는데 1번이 실행되고 1번이 끝이 나면 2번이 실행되고 끝나면 그다음 작업들이 이런 과정으로 처리되는 것이다. 실행 순서가 보장되자만 한 번에 하나씩 처리 되기 때문에 한번에 여러 개의 작업이 불가능하다. 비동기식(Asynchronous) 이란동기식과 다르게 먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음작업을 시작할 수 있다. 한 번에 여러 일을 처리 할수 있다. 한번에 여러 가지 작업을 처리할 수 있지만 작업 순서가 보장되지 않는다.   JavaScript 는 동기식 언어이다? 자바스크립트는 단일 스레드(싱글) 이다 . 메인 스레드인 이벤트 루프가 싱글 스레드 이기 때문이다.하지만 이벤트 루프만 독..

※콘솔로 jsx 찍어보고 궁금증이 생겨서 정리하기 JSX 란 JSX는 별도의 언어가 아니라 개발자가 JavaScript 파일에 HTML과 유사한 코드를 작성할 수 있도록 하는 구문 확장이다. UI 구성 요소를 설명하는 더 읽기 쉽고 표현적인 방법을 제공하므로 코드를 더 쉽게 이해하고 유지 관리할 수 있다. JSX 코드는 HTML처럼 보이지만 실제로는 Babel과 같은 도구에 의해 일반 JavaScript로 변환되는 구문이다. 결과 코드는 UI 구성 요소를 만들고 조작하는 JavaScript 함수 호출 집합이다. JSX 코드는 HTML과 유사한 태그와 JavaScript 표현식을 모두 포함할 수 있으므로 개발자가 동적 데이터를 UI 구성 요소에 쉽게 포함할 수 있다. 콘솔을 찍어보고 생긴 궁금증 배열에 J..

자료구조란 자료 구조는 데이터 값의 모임, 또 데이터 간의 관계, 그리고 데이터에 적용할 수 있는 함수나 명령을 의미한다. 자료구조는 서비스나 어플리케이션에서 필요한 데이터를 메모리에 어떻게 구조적으로 잘 정리해서 담아두고 관리하고 최종적으로 가장 효율적인 방식으로 필요한 데이터를 빠르게 접근하고 필요한 수정/삽입/삭제 를 할 수 있도록 도와준다. 한정적인 자원에서 메모리를 효율적으로 사용하기 위해서 필요하다 모든 목적에 부합하는 자료구조는 없으며 필요 목적에서 효율적인 자료 구조를 선택하여 효율을 높일 수 있다. 자료 구조는 알고리즘과 밀접한 관계 가 있는데 이유는 보통 자료구조가 선택되면 그에 적용할 알고리즘이 거의 명확해진다. 예) 배열이라면 반목문을 사용한 알고리즘 이라던지 즉 자료 구조가 효율적..

1. httpHTTP란 Hypertext Transfer Protocol의 약자이다.HTTP 는 HTML 문서와 같은 리소스를 가져올 수 있도록 해주는 프로토콜인데HTTP 는 웹에서 이루어지는 모든 데이터 교환의 기초이며 클라이언트-서버 프로토콜이기도 하다무상태성(STATUSLESS)을 가지며 이는 단방향 통신을 의미한다.Method, Path, Version, Headers, Body 등을 가지고 있다. 요청이 있을 때만 서버가 응답 하여 해당 정보를 전송하고 연결을 종료한다.(단방향)  HTTP는 암호화가 되지 않은 평문 데이터를 전송하는 프로토콜로 보안에 취약하다.(비번등을 주고 받으면 제 3자가 정보를 조회가능) - 80 번 포트 사용 2.httpsHTTPS(Hyper Text Transfer P..

state. - 현재 컴포넌트에 렌더링에 영향을 미치는 객체 형태의 데이터 props. - 상위 컴포넌트에서 하위 컴포넌트로 객체 형태의 데이터를 전달 (읽기 전용) state 또는 props 업데이트 시 리렌더링된다. 리액트(react) 데이터 흐름 리액트는 기본적으로 단방향 데이터 흐름을 지닌다. 일반적으로 상위 컴포넌트에서 가진 데이터를 하위 컴포넌트로 props 객체를 통해서 전달하는데 이를 props drilling 이라고 한다. 하지만 함수를 통해서 하위 컴포넌트의 데이터를 상위 컴포넌트로 전달받아서 사용할 수도 있는데 상태 끌어올리기 state lifting 이라고 부른다. 예제 - 어떻게 전달되고 끌어 올려지는지 만 보면 된다. //App.js import NewExpense from '...

OOP - 객체지향 개념 정리 캡슐화 데이터와 데이터를 활용하는 함수를 캡슐 혹은 컨테이너 안에 두는 것을 의미하는데 이 경우 캡슐은 class를 의미한다. (함수와 데이터가 개념적으로 연관되어 있으면 캡슐화를 사용해서 코드를 개선할 수 있다.) 장점은 코드가 구조화되고 함수나 메서드가 인수를 취할 필요도 없다. (this키워드로 데이터에 직접 액세스 할 수 있기 때문) 캡슐화를 사용하여 표시할 클래스의 속성과 숨길 속성을 선택할 수 있다. 캡슐화는 어떻게 클래스 정보에 접근 혹은 수정하는지를 결정하는 권한을 제공한다. 캡슐화는 데이터 그리고 class 안에 있는 해당 데이터를 이용하는 함수를 잘 정리하는 방법론 상속 코드를 더 작은 단위로, class로 쪼개고 재사용할 수 있다. 클래스를 extends..

ES6 JavaScript - 요약 let & const Arrow Function Export & Imports Classes Spread & Rest Operator Destructuring Promises Default parameters Template Literals let & const let과 const 는 기본적으로 var 를 대체한다. 함수 스코프와 재선언 재할당이 가능한 var는 중복 선언이 가능하기 때문에 위에서 해당 변수를 선언하고 아래서 실수로 다시 사용할 경우 예상하지 못하는 전혀 다른 결과를 나타낼 수 있다. 그리고 함수 레벨 스코프로 인해서 for문을 예로 들면 for문이 함수 내부가 아닌 외부에서 돌아갈 경우 전역 변수로 역할을 하기 때문에 이 또한 예상치 못한 결과를 나올..

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1) 얼마 전에 리액트로 프로젝트 완성 후에 웹의 이론적인 부분하고 타입스크립트 그리고 뷰를 조금 공부하느라 리액트를 안 쓰다가 오랜만에 강의를 보면서 시작하려는데 기본 세팅에서 에러가 발생했다. npx create-react-app my-app 입력후 아래 처럼 에러 메세지가 나왔고 내용은 더 이상 글로벌(전역) 설치를 지원하지 않으니 글로벌 설치를 제거하라는 거였다. You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support ..