공부 기록일지📚

개인 프로젝트가 아닌 협업 프로젝트를 진행할 때, 코딩 스타일을 일치시키지 않는다면 코드를 합치거나 비교할 때 매우 불편할 것이다. 코딩 스타일은 팀의 자율에 따라 결정되지만 강제성이 없기 때문에 취약하다. 코드 리뷰나 작성을 할 때에도 의식하지 않으면 많은 에너지가 소모되므로 자동화될 수 없는 컨벤션은 최소화하고 필요한 경우에는 반드시 문서화시켜야 한다. 자동화 툴들이 아무것도 없이 시작하는 것보다 시간을 들여서라도 초기세팅에 공을 들여놓으면 지속적인 개발 생산성 향상에 도움을 주기 때문에 꼭 알아둬야 한다. ESLint & Prettier ESLint는 일관되고 버그를 피할 수 있는 코드를 짜기 위해서 만들어진 코드 분석 툴이다. 작성된 코드의 구문을 분석하여 버그가 발생할 여지가 있거나, 불필요한 ..

CRA로 프로젝트를 만들면 .svg 파일을 마치 리액트 컴포넌트처럼 import 하여 사용할 수 있다. import {ReactComponent as MySvg } from "../assets/mysvg.svg; const MyComponent = () => { return } 하지만, Vite로 리액트 프로젝트를 구성하고 있다면 추가 세팅이 필요하다. 세팅 방법은 간단한데, svg관련 라이브러리를 추가로 설치해준다. 1. vite-plugin-svgr yarn add vite-plugin-svgr #npm 대신 yarn을 애용하고 있다. 2. vite.config.ts 에 플러그인을 추가해주기 vite.config.ts import { defineConfig } from 'vite'; import re..

리액트에서 컴포넌트는 JSX를 리턴하는 함수이다. function Component(props) { // jsx를 계산하는 과정 return JSX; } render 란 간단히 말해서 `브라우저에 UI를 페인트하는 것`이다. Q. 그렇다면 리액트에서 render는 무엇일까? 컴포넌트를 호출하는 것 JSX를 리턴하는 것 JSX를 브라우저에 페인트하는 것이다. Q. 리액트에서 re-render는 무엇일까? 컴포넌트 렌더링처럼 컴포넌트를 호출(call)하는 것 => 다시 함수 호출 JSX를 리턴하는 것 이전 JSX와 현재 JSX를 비교해서 다른 점(difference)을 페인트하는 것 Q. re-render 발생 시점 state가 변했을 때 => state가 setState()로 값이 변경되면 이후에 컴포넌트..

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

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은 먼저 캐시(스테일)로부터 데이터를 반환한 후..

생활코딩 이고잉님의 유투브 `React 서버 통신에 회의가 든다면 - RTK Query`를 기반으로 작성하였습니다. Server Hook 사용법 ./app/api 의 api 객체를 이용하기 RTK Query로 서버와 통신 읽기: useGetCountQuery ({name}) 쓰기: userSetCountMutation() -첫번째 원소 함수({name, value}) 로 데이터 전송 RTK Query의 특징 1️⃣ use-Query는 읽기 전용(read-only) - 객체를 리턴 // {} - data, isFetching, isLoading 중요 isLoading은 state가 초기화되기 전(undefined)일때 첫번째 로딩시 isFetching은 loading시마다 실행 - 자동실행 2️⃣ use-..

Redux Toolkit Query (RTK Query)는 웹 어플리케이션에서 데이터를 로딩하는 흔한 케이스를 간단하게 하는 진보된 데이터 패칭, 캐싱 툴이다. RTK Query는 Redux Toolkit core의 위에서 작성되었고, RTK의 API들은 `createSlice`와 `createAsyncThunk`를 확장해서 만들어졌다. RTK Query는 `@reduxjs/toolkit` 패키지의 추가적인 애드온으로 포함되어져 있다. Redux Toolkit을 사용해도 RTK Query Api를 사용하지 않아도 되지만 RTK Query의 데이터 패칭과 캐싱이 많은 사용자들에게 혜택을 가져다 줄것이라고 예상한다. 즉, RTK Query는 강력한 data fetching, caching 툴이다. 웹 어플리..