Development

Using React Query install react-query먼저 react-query를 설치하기 위해서 아래 명령어를 터미널에 입력해야 합니다.npm install @tanstack/react-query Create queryClient & QueryClientProvider QueryClient 생성자로 쿼리와 캐시를 관리하는 Query Client를 생성하고  컴포넌트를 통해 생성한 Query Client를 하위 컴포넌트들이 접근할 수 있도록 최상위 컴포넌트로 감싸주어야 합니다.모든 하위 컴포넌트들은 Query Client가 갖고 있는 캐시와 모든 기본 옵션을 사용할 수 있게 됩니다.참고로 은 React의 Context API를 사용하여 생성된 queryClient를 제공합니다.import {..

Client State vs Server State Client State란 클라이언트가 자체적으로 생성한 상태로 사용자의 input 값이나 UI 변경을 담당하는 부분으로 볼 수 있습니다. 예를 들어, 모달창을 열고 닫는 상태나 사용자가 입력한 값 같은 것들을 의미합니다.즉, 서버에서 일어나는 일과는 아무 관련이 없는 상태들을 의미합니다. 반면 Server State란 클라이언트에 표시하는 데 필요한 서버 데이터를 의미합니다. 예를 들어, DB에 존재하는 데이터들을 의미합니다. React Query는 React 애플리케이션에서 서버 응답에 대한 상태인 fetch, caching, update와 같은 동작을 쉽게 다룰 수 있도록 하며, Client State와 Server State를 명확하게 분리하여 관..

Next.js는 SSR(Server Side Rendering)을 쉽게 구현할 수 있는 개발 환경을 제공하는 React의 프레임워크이다.  NextJS가 등장한 이유는 이전 브라우저의 동작방식을 보면 알수있다. 과거의 대부분 웹사이트들은 SSR과 MPA(Multi Page Application) 방식으로 동작해왔었다  하지만  페이지 이동 시에 깜빡거리는 현상과 같은 문제들로 인해 사용자 경험이 좋지 못했고 스마트폰의 시대가 도래하면서 앱과 같은 사용성 측면에서 수요가 커져갔다. 이런 시기에 AJAX와 jQuery가 등장했고 커뮤니티에서도 많이 사용되면서 클라이언트에서 비동기적으로 JSON 형태의 데이터만을 서버에 요청하고 받아와서 사용자에게 데이터와 함께 웹 페이지를 보여주는 방식이 대세가 되었다. 하..

Next 13 이후에 바뀐 점app router / pages router 두 가지로 구성되어 있다.app router 도입 이유pages router의 구조상 기존 문제를 개선할 수 없었기에 새로 도입디렉토리 기능공통 레이아웃 기능페이지별 권한 체크 (어드민/로그인 유저 등) → app router 미들 웨어로 가능react 18 버전 사용 → 서버 컴포넌트 적극 활용 서버 컴포넌트란?next 서버에서 리액트를 미리 렌더링해서 프론트 혹은 브라우저, 클라언트로 데이터를 보내줄 때 완성된 HTML을 미리 보내주는 것 장점 HTML 로딩 시간, JS 용량 감소단점 Next 서버 자체의 부담 증가 → 이에 따라 ‘캐시’ 적극 활용 Nextjs란?React 위에서 돌아가는 프레임워크React는 라이브러리로써 ..

ReactNative를 시작하기에 앞서 환경설정을 진행해야 합니다. MACOS를 기준으로 설명을 진행하려고 합니다.  1. mac terminal 실행2. "brew install node" :  node 설치3. "brew install watchman" : watchman 설치 4.  https://apps.apple.com/us/app/xcode/id497799835?mt=12 다음의 링크에서 xcode를 설치5. https://cocoapods.org/ 해당 경로로 접속후 "sudo gem install cocoapods" 를 터미널에 입력하여 설치

시맨틱 웹(Semantic Web)이 뭔가요? 시멘틱 웹에 대해서 알기 이전에 시맨틱 웹이 등장한 배경에 대해 이해하면 좋습니다. 인터넷이 등장하고 인터넷이 활성화 되기 시작하면서 웹의 사용이 폭발적으로 늘어나게 되었습니다. 그에 따라 웹상에 축정된 정보가 지나치게 많아짐에 따라 여러 문제에 봉착하게 되었습니다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드(Keyword)에 의한 정보접근만을 허용하고 있어, 정보 검색 시 무수히 많은 불필요한 정보가 처리되어 정보의 홍수를 가중시켰습니다. 또한 검색 시 컴퓨터가 필요한 정보를 추출, 해석, 가공 할수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리해야하는 문제가 생겼습니다. 위와 같은 문제를 해결하기 위해 웹 기술의 비전으로 시맨틱 웹(S..

서버과부화란? 서버 과부화 (Server Overload)는 서버가 처리할 수 있는 트래픽 또는 부하보다 더 많은 요청이 들어오는 상황을 가리킵니다. 이러한 상황은 서버의 성능 저하, 응답 지연, 서비스 중단 또는 서버 다운의 원인이 될 수 있으며, 이로 인해 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 대규모 트래픽으로 인한 서버 과부하를 해결하기 위한 방법은 다음과 같습니다: 1. 부하 분산 (Load Balancing): 부하 분산은 서버 과부하를 완화하는 핵심적인 방법 중 하나입니다. 로드 밸런서를 사용하여 트래픽을 여러 서버로 분산시키고 각 서버에 동등하게 분배합니다. 이를 통해 각 서버에 가해지는 부하를 분산시키고 서버 응답 시간을 최적화할 수 있습니다. 2. 자동 확장 (Auto Sca..

L2 스위치 (Layer 2 Switch): 역할: L2 스위치는 데이터 링크 계층에서 동작하며, 주로 이더넷 프레임을 스위칭하여 로컬 네트워크 내에서 데이터를 전달하는 역할을 합니다. 이더넷 스위치라고도 불립니다. MAC 주소 기반 스위칭: L2 스위치는 MAC 주소를 기반으로 프레임을 전달합니다. 스위치가 각 포트에 연결된 디바이스의 MAC 주소를 학습하고, 이 정보를 사용하여 프레임을 해당 디바이스로 전달합니다. 스위칭 테이블: L2 스위치는 스위칭 테이블을 유지하여 MAC 주소와 해당 포트를 매핑합니다. 이를 통해 프레임이 목적지로 직접 전달되므로 네트워크 트래픽을 효율적으로 관리합니다. 로컬 영역 네트워크: L2 스위치는 주로 로컬 네트워크 내에서 사용되며, LAN에서 서로 다른 디바이스 간의 ..

인터넷 계층(Internet Layer)에서 네트워크를 이루는 장치 중 가장 중요한 역할을 하는 것 중 하나는 라우터(Router)입니다. 라우터는 데이터 패킷을 받아서 최적의 경로를 선택하여 목적지로 전달하는 장치로, 인터넷과 다양한 네트워크 간의 연결을 관리하며 데이터 흐름을 제어합니다. 라우터의 주요 특징과 역할: 패킷 전달 및 라우팅: 라우터는 패킷(데이터 단위)을 받아서 목적지 IP 주소를 기반으로 최적의 경로를 선택하고 패킷을 전달합니다. 이로써 데이터는 출발지에서 목적지까지 안정적으로 전달됩니다. 다중 네트워크 연결: 라우터는 여러 네트워크 간의 연결을 관리하며, 다양한 종류의 네트워크를 연결하는 역할을 합니다. 예를 들어, 로컬 네트워크(LAN)와 외부 인터넷 간의 연결을 제공합니다. 패킷..

L7 스위치는 애플리케이션 계층(Application Layer)에서 네트워크를 이루는 장치 중 하나로, 네트워크 트래픽을 애플리케이션 수준에서 관리하고 제어하는 역할을 합니다. 이 장치는 레이어 7로 부터 데이터를 해석하고, 트래픽을 분석하여 다양한 기능을 수행합니다. L7 스위치의 주요 특징 및 기능: 애플리케이션 수준 로드 밸런싱: L7 스위치는 클라이언트 요청을 여러 서버로 분산시키는 로드 밸런싱 기능을 제공합니다. 이 때, 스위치는 애플리케이션 프로토콜을 이해하고 트래픽 패턴을 분석하여 최적의 서버로 요청을 전달합니다. 예를 들어, 웹 트래픽의 경우 HTTP 헤더 및 URL 정보를 기반으로 로드 밸런싱을 수행할 수 있습니다. 인증과 보안: L7 스위치는 클라이언트의 인증 및 보안 요구 사항을 처..

1. PUT 메서드: 특징: 역할: PUT 메서드는 클라이언트에서 서버로 데이터를 업데이트 또는 수정할 때 사용됩니다. 즉, 해당 리소스를 완전히 교체하는 데 사용됩니다. 데이터 전송 방식: PUT 요청은 클라이언트가 업데이트하려는 리소스의 전체 데이터를 제공합니다. 이전 데이터는 완전히 대체됩니다. 멱등성: PUT은 멱등성(idempotent)을 가집니다. 동일한 PUT 요청을 여러 번 보내더라도 동일한 상태로 변경됩니다. 예시: 파일 업로드, 레코드의 전체 업데이트 등에 사용될 수 있습니다. 2. PATCH 메서드: 특징: 역할: PATCH 메서드는 클라이언트에서 서버로 데이터의 부분적인 수정을 요청할 때 사용됩니다. 리소스의 일부를 변경하고자 할 때 유용합니다. 데이터 전송 방식: PATCH 요청은..

1. GET 메서드: 특징: 데이터 전송 방식: GET 메서드는 클라이언트(웹 브라우저)에서 서버로 데이터를 요청할 때 사용됩니다. 이 때, 데이터는 URL의 쿼리 문자열(query string)에 포함되어 전송됩니다. 데이터 노출: GET은 URL에 데이터를 노출시키므로, 전송하는 데이터가 URL에 노출됩니다. 이로 인해 보안에 취약할 수 있습니다. 또한 URL의 길이에 제한이 있으므로 큰 양의 데이터를 전송하기에는 적합하지 않습니다. 캐싱 가능: GET 요청은 캐싱이 가능하며, 동일한 요청이 반복되어도 서버에 동일한 요청을 보내지 않고 캐시된 응답을 사용할 수 있습니다. 멱등성: GET 요청은 멱등성(idempotent)을 가집니다. 즉, 동일한 요청을 여러 번 보내도 항상 동일한 결과를 얻을 수 있..