공부 기록일지📚

이 문제로 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..

원격 저장소에 push하지않고(공유된 커밋x) 내 로컬에서만 관리되던 커밋을 기준으로 되돌리는 법을 작성하였습니다. 커밋을 변경하는 방법(git commit --amend) 해당 방법은 가장 최신의 커밋을 변경하는 방법이다. 이미 커밋한 내용을 수정하거나 커밋 메세지를 변경할 수 있다. 텍스트 편집기(vim)이 열리고, 수정할 수 있는 커밋 메세지가 표시된다. 원하는 대로 수정한 후 저장하면 커밋이 변경된다. 이전 커밋으로 돌아가는 방법(git revert 또는 git reset) git revert HEAD #가장 최근 커밋을 스테이징 상태로 되돌린 후 vim(텍스트에디터)가 자동 실행된다. git reset HEAD^ #포인터와 함께 가장최근 커밋을 언스테이징 상태로 되돌린다. 이미 커밋한 내용을 삭..

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

회원가입 컴포넌트를 만들면서 input 태그에 들어가는 state들이 많아져서 공통되는 부분을 커스텀 훅으로 분리할 때, 생긴 이슈에 대해서 정리한다. 우선 타입스크립트는 변수(e.g. const hello)는 명시적으로 타입을 지정해주지 않아도 잘 추론한다. 하지만, 매개변수나 리턴값의 경우 추론을 내가 원하는 대로 해주지 못하는 경우가 많기 때문에 이때 명시적으로 써주는 것이 필요하다. 보통은 코드를 작성하다가 TS가 에러를 뱉어내며 스스로 추론하지 못할 때 그 때 타입을 선언해주면 된다. src>hooks>useInput.ts import { useCallback, useState, SetStateAction, Dispatch } from 'react'; type Handler = (e: React..

이전 세팅하기 1에서 빌드하는 방법을 배웠다. 하지만 이 번들된 js파일은 변경 사항이 생기면 다시 빌드를 해야 변경 사항이 적용된다. CRA로 react 프로젝트를 만들었을 때는 hot reloading(변경 사항을 바로 반영하여 dev환경에서 바로 확인가능한 기능)세팅이 이미 되어있어 따로 처리할 필요가 없었는데 수동으로 할 경우엔 webpack.config에 추가해줘야 한다. webpack-dev-server :hot reloading 을 위해서 추가로 설치해야하는 웹팩 라이브러리 🔺공식 홈페이지에서 global 설치보다는 -D 를 권장하여 local로 사용하길 바란다고 써있다. 웹팩 컨피그를 수정하기 전에 위의 라이브러리를 dev 환경에 설치해준다. yarn add -D webpack-dev-se..

사용 패키지 매니저: yarn 우선 기본적으로 사용해야할 라이브러리를 설치해준다. D 는 yarn add -D 옵션으로 dev dependency를 의미한다. react react-dom typescript // TS적용시 eslint (D) //문법체킹 prettier eslint-plugin-prettier eslint-config-prettier (D) //코드 포맷체킹과 eslint 과 연동을 위한 플러그인 웹팩의 동작원리 웹팩은 Node.js 환경에서 실행되는 JS어플리케이션의 일종으로, 복잡한 의존성 관계들을 가지는 여러 정적 파일(JS, CSS, Sass 등)들을 번들링하여 적은 정적 파일들을 만들어내는 모듈 번들러이다. tsx파일을 TS로 변환해주고 그 다음 webpack이 babel로 처..