sharingStorage

React 커스텀훅 what ? 컴포넌트간의 hook 로직을 공유하기 위해 사용하는 사용자가 커스텀한 hook입니다. 다음은 공식문서에서 발췌한 예시 코드입니다. import { useState, useEffect } from 'react'; export default function StatusBar() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEve..

쿠키를 사용한 상태관리 HTTP는 stateless 프로토콜이기 때문에 과거에 교환했던 리퀘스트와 리스폰스의 상태를 관리하지 않습니다. 이는 과거 상태를 근거로 한 현재 리퀘스트 처리는 어렵다는 것을 뜻합니다. 쿠키 이러한 stateless한 특성으로 인해 발생하는 문제를 해결하기 위해 도입된 시스템. 리퀘스트와 리스폰스에 쿠키 정보를 추가해서 클라이언트 상태를 파악하기 위한 시스템 서버에서 리스폰스로 보내진 Set-Cookie라는 헤더 필드에 쿠키를 클라이언트에 보존하고 다음 리퀘스트 요청에 자동으로 쿠키 값을 넣어서 송신 이로 인해 서버는 클라언트가 보낸 쿠키를 확인하여 어느 클라이언트가 접속했는지나 서버상의 기록을 확인할 수 있다. 쿠키 추가 공부 쿠키는 브라우저에 저장되는 작은 크기의 문자열로, ..

이 글은 그림으로 배우는 HTTP & Network를 읽고 참고한 것과 추가로 공부해본 것들로 작성되었습니다. HTTP는 클라이언트와 서버 간에 통신을 한다 TCP/IP에 있는 다른 많은 프로토콜과 마찬가지로 HTTP도 클라이언트와 서버간에 통신을 합니다. 리소스가 필요하다고 요구하는 쪽을 클라이언트, 리소스를 제공하는 쪽이 서버가 됩니다. HTTP 통신의 경우 반드시 어느 한쪽은 클라이언트, 다른 한쪽은 서버가 됩니다. 리퀘스트와 리스폰스를 교환 HTTP는 클라이언트로부터 Request가 송신되며 그 결과가 서버의 Response(리스폰스)로 되돌아옵니다. 반드시 클라이언트로 부터 통신이 시작되고 Request 리퀘스트 메세지는 메소드, URI, 프로토콜 버전, 옵션 리퀘스트 헤더필드와 엔티티로 구성되..

1대로 멀티 도메인을 가능하게 하는 가상 호스트 HTTP/1.1에서는 하나의 HTTP서버에 여러 개의 웹사이트를 실행할 수 있습니다. 이를 위해 사용하는 것이 가상호스트라는 기능인데 가상 호스트 기능을 사용하면 물리적으로는 서버가 1대지만 가상으로는 여러대가 있는 것처럼 설정이 가능합니다. 이는 HTTP1.1 호스트 헤더를 이용해서 가상 호스트를 제공하는 기능과 동일합니다. HTTP를 사용해서 클라이언트가 서버에 액세스할 때는 www.hackr.jp와 같은 호스트 명이나 도메인 명이 자주 사용됩니다. 인터넷 도메인명은 DNS에 의해서 IP주소로 변환되고나서 액세스되고, 리퀘스트가 서버에 도착한 시점에는 IP주소를 기준으로 액세스하게 됩니다. 이 때 1대의 서버 안에 두개의 도메인이 있을 경우 어느 쪽에 ..

상태코드는 서버로부터 리퀘스트 결과를 전달. 상태 코드의 역할 클라이언트가 서버를 향해 리퀘스트를 보낼 때 서버에서 그 결과가 어떻게 처리되었는지 알려주는 것. 상태 코드 클래스 클래스 설명 1xx Information 리퀘스트를 받아들여 처리중 2xx Success 리퀘스트를 정상적으로 처리 3xx Redirection 리퀘스트를 완료하기 위해 추가 동작 필요 4xx Client Error 서버는 리퀘스트 이해 불가능 5xx Server Error 서버 리퀘스트 처리 실패 2xx 성공 2xx 리스폰스는 리퀘스트가 정상 처리되었음을 나타냅니다. 200 OK 200 리스폰스는 리퀘스트가 정상 처리되었음을 나타냅니다. GET메소드의 경우 리퀘스트된 리소스에 대응하는 엔티티가 리스폰스로 보내지고 HEAD메소드..

이 글은 그림으로 배우는 Http&Network Basic을 읽고 추가로 알고 싶은 내용과 함께 정리한 글입니다. 웹은 HTTP로 나타낸다. 웹 브라우저는 웹 브라우저 주소 입력란에 지정된 URL에 의지해서 웹 서버로부터 리소스라고 불리는 파일 등의 정보를 얻고있습니다. 이 때, 서버에 의뢰하는 웹 브라우저 등을 클라이언트라고 부릅니다. 이렇게 클라이언트에서 서버까지 일련의 흐름을 결정하고 있는 것을 웹에서 HTTP(HyperText Transfer Protocol)이라 불리는 프로토콜입니다. 프로토콜이라는 의미는 “약속”이며, 즉 웹은 HTTP라는 약속을 사용한 통신으로 이루어져 있습니다. HTTP 버전 HTTP/0.9 HTTP가 정식 사양서가 아니였을 때입니다. 1.0 버전 이전이라는 의미에서 0.9..

문제요약 상근이가 가지고 있는 숫자카드 N, 숫자를 M개 입력받은 후 입력받은 숫자와 같은 카드를 상근이가 몇개 가지고 있는지 구하는 문제 접근 입력을 받을 때 마다 0으로 초기화한 배열에 입력받은 수의 배열값에 +1을 한다. 음수도 입력받아야 하므로 인덱스는 입력받은 수 + 0으로 만들 수 있는 최대수 (10,000,000)으로 설정한다. 그리고 M개의 숫자를 입력받고 그에 해당하는 배열 값을 출력한다. #define _CRT_SECURE_NO_WARNINGS #include #include #include #include #include using namespace std; vector v; int N, M; int sum; int convertNum[20000001] = { 0 }; int nega..

vite + yarn 환경에서 배포 전 모바일로 개발환경을 보고싶을 때의 방법을 기록해두려고 합니다. 많은 참고 링크가 있었지만 결국 너무 기초적인 부분을 해결을 안했어서 이 글이 누군가에게 도움이 되길 바라며,,, 0. 데스크탑과 모바일 같은 와이파이 연결 우선 기본적으로 모바일과 데스크탑이 같은 와이파이에 연결돼있어야 합니다. 제일 먼저 yarn dev로 로컬환경을 실행했을 때 이렇게 나오는데 이걸 무시하고 별짓을 다하고 돌아보니 --host 옵션을 사용해야 한다는 것이였습니다. 아마 이걸 놓치지 않았다면 아래에 과정들을 아무것도 안해도 됐을텐데 오히려 좋네요 1. yarn dev --host 명령어 사용 2. cmd 창을 켜서 ipconfig 명령어 사용 3. 모바일로 IPv4 주소 + :5173 ..

styled-components를 사용하다보면 너무 많은 컴포넌트가 생성하면서 아래와같이 classname으로 구분이 힘들어질 때가 생깁니다. 이때마다 안의 CSS 내용을 보고 파일을 찾아갔었는데 그래서 좋은 방법이 없을까 하고 찾아보다가 이에 해당하는 bable plugin이 존재한다는 것을 찾게 되었고 적용하는 방법을 기록해볼까 합니다. Create-react-app 환경 create-react-app에는 다음과 같이 import하면 끝 import styled from 'styled-components/macro'; 이번에 vite를 사용하며 초기세팅해본 결과 cra와는 다르게 vite.config에도 동시에 설정해야되는 것이 많음 (ex: tsconfig baseUrl ) 설정과정 vite-plu..

들어가며 현재 모던 프론트엔드에서 대부분의 리액트 코드는 서버와의 통신 상태에 따라 View를 나누어 보여주어야하기 때문에 아래와 같이 작성하는 경우가 빈번합니다. /** React */ return ( {isLoading && } {apiError && } {data && } ) 기본적으로 React 17에서의 Suspense는 Data Fetching을 위한 Pending Handler가 아니라, 기존의 워터폴 방식으로 이루어져있는 Render방식을 개선해주는 역할이기때문에, 위의 상황에서 활용하기에는 문제가 있으나, React-Query나 Recoil에서 React 18부터 정식 릴리즈되는 Suspense를 활용해 명령형이 아닌 선언형으로 서버와의 통신 상태에 따라 View를 나누어 보여줄 수 있게..