공부 기록일지📚

컴포넌트 기본 구조 컴포넌트 명의 폴더 ├─ index.tsx # 화면에 보여질 컴포넌트 ├─ styles.tsx # emotion(CSS in JS)으로 만들어진 UI 파일 프로젝트 폴더 구조 및 파일별 기능 설명 👩‍🦰 폴더 설명 components - 페이지를 구성하는 작은 단위의 컴포넌트를 모아놓은 폴더(기능 별 구분) contexts - 전역으로 공유되는 값들을 담은 context폴더 투두리스트 컨텍스트, 권한 컨텍스트 hooks - 커스텀 훅을 모아놓은 폴더 pages - 라우팅의 기준점이 되는 페이지 컴포넌트를 모아놓은 폴더 typings - 공유 타입들 정의 폴더 utils - 독립적인 기능을 모아놓은 폴더 axios 인스턴스, 유효성 검사 로직 👩‍🦰 구현 기능 라우팅 URL별 페이지 생..

websocket 하나의 TCP 접속에 전이중 통신 채널을 제공하는 컴퓨터 프로토콜, HTTP와 구별된다. 간단히 말하면 서버와 클라이언트 간의 메세지 교환을 위한 통신 규약(프로토콜) 웹 소켓의 특징 양방향 통신(full-duplex) 데이터 송수신을 동시에 처리할 수 있는 방법 통상적으로 HTTP 통신은 client 가 요청을 보내는 경우에만 Server가 응답을 하는 단방향 통신이지만, 웹 소켓은 양방향 통신이 가능하다. 실시간 네트워킹(Real Time Networking) 웹 환경에서 연속된 데이터를 빠르게 노출하는 것 e.g.) 채팅, 주식 소켓 이전의 통신 방식 1. Polling(폴링) 웹 소켓이 나오기 전의 통신 방식으로는 폴링(polling)방식을 사용하였다. [개념] 일정한 주기로 서..

🛠사용 스택: typescript + craco(웹팩 설정 override) + CRA 사용 🛠상세: 리액트 18 버전, 리액트 라우터 돔 6버전 이상, 타입스크립트 4버전 이상 🛠운영체제: 윈도우 [문제 상황] vercel로 github과 연동된 SPA프로젝트를 배포하려고 했다. 배포는 성공했으나 페이지 접속 시, 리액트 라우터로 url을 변경하면 동작이 되지 않았다. 예를 들어, 헤더에 포함된 Link to="/path" 가 동작하지 않았다는 것이다. 대신에 새로고침을 하면 해당 경로의 페이지가 렌더링됐었는데 이유를 짐작하기 어려웠다. [문제 원인 분석] 1. 타입스크립트가 JS로 변환되지 않아서 발생하는 문제일 것이다. 배포된 사이트의 소스를 확인해보니 JS로 컴파일된 형태가 아니라 TS문법으로된 ..

최근에 CRA없이 webpack을 직접 설정하거나 Vite를 사용했기 때문에 CRA의 경우는 따로 webpack 설정을 해본 적이 없다. 또한, CRA는 따로 보일러 플레이팅 작업을 하지 않아도 이미 세팅되어 있기 때문에 여기서 더 건들이는 것보단 있는 그대로 사용한 경우가 대다수였다. 이번에 원티드 사전 과제를 진행하면서 프로젝트 조건으로 CRA 사용이 있었고 여기서 나는 typescript를 적용했기 때문에 웹팩과 타입스크립트 config만 수정해주면 된다고 생각했다. 하지만, CRA를 사용하면서 웹팩의 config는 본적이 없다. 그 이유는 CRA에 설정파일이 숨겨져 있기 때문이다. CRA는 내부적으로 프로젝트 디렉토리를 간결하게 유지하기 위해 웹팩 설정(webpack config)나 script ..

이 문제로 3일을 소요했는데.. 차후에 강의를 보다보니 이 부분에 대해서 팁을 주는 부분이 있었다. 물론 강의에서 설명해주기 전에 직접 해결하여서 문제는 없었지만.. 시간을 너무 많이 소요한 거 같아서 분했다.⛏ [상황] 리액트로 만든 프로젝트에서 서버와 통신하는 도중에 값은 들어오는데 해당 값이 내가 원하던 JSON 객체가 아니라 HTML 문서가 304상태코드와 response 값으로 옴 [원인 분석] 1. 304상태 코드라면 브라우저의 캐시된 데이터를 쓰는 것이고 그렇다면 SWR의 데이터 캐시 문제일 것이다. (예상) 처음에는 SWR로 데이터가 undefined이면 화면에 컴포넌트를 띄우지 않는 것으로 처리해놨었는데 이상하게 값은 들어오는 것으로 확인되는데 화면에 컴포넌트에는 데이터가 뿌려지지 않는 ..

react router dom으로 중첩 라우팅을 하는 방법은 크게 2가지가 있다. 1. 페이지 단위 컴포넌트의 가장 바깥에 (wrapper처럼) 레이아웃 컴포넌트를 감싸서 해당 레이아웃 컴포넌트에서 children props으로 받는 방법 => 레이아웃 컴포넌트를 페이지 단위 컴포넌트 마다 import해줘야 한다. 🔺(번거롭다) 2. 레이아웃 컴포넌트에서 자체에서 판단하여 라우팅하는 하기 ✔ 해당 방법에서도 내부적으로 2가지 갈래로 중첩라우팅을 표현하는 방법이 다르다. 아래의 2-1, 2-2 에 자세한 내용을 확인할 수 있다. 레이아웃 컴포넌트: 부모 컴포넌트, 중첩시킬 라우터의 index에 해당 페이지 단위 컴포넌트: 자식 컴포넌트, 중첩된 라우터, index/something에 해당 2-1 Outle..

Suspense with React.lazy 서스펜스를 사용하면 컴포넌트의 렌더링을 어떤 작업이 끝날 때까지 잠시 중단시키고 다른 컴포넌트를 먼저 렌더링할 수 있다. 이 작업이 꼭 어떠한 작업이 되어야 한다는 특별한 제약사항은 없지만 REST API나 GraphQL을 호출하여 네트워크를 통해 비동기로 데이터를 가져오는 작업을 가장 먼저 떠오르게 한다. 서스펜스는 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비되지 않았다고 리액트에게 알려주는 새로운 매커니즘이다. 기본적으로 리액트는 JSX 코드 안에 들어있는 모든 컴포넌트를 즉시 호출하여 바로 렌더링을 진행한다. 하지만, 컴포넌트를 Suspense로 감싸주면 컴포넌트의 렌더링을 특정 작업 이후로 미루고 그 작업이 끝날 때까지는 fallback컴포넌트를 대..

SWR는 요청 보낸 데이터를 저장해준다. (보통은 GET요청의 데이터를 저장, POST요청을 저장못한다는 것은 아님) Next 팀에서 만들었으며 공식 홈페이지에서는 `데이터를 가져오기 위한 React Hooks`라고 설명하고 있다. react-query의 light version이라고 생각하면 될 거 같다. 상태관리가 주 목적이기보단 서버데이터패칭이 주 목적같다. 물론 둘 다 가능하다고 한다. SWR를 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게된다. 또한, UI는 항상 빠르고 반응적이다. 이름의 유래는 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 `stale-while-revalidate`에서 유래됐다. SWR은 먼저 캐시(스테일)로부터 데이터를 반환한 후..