React 길잡이

계속 업데이트 中

pnpm, Learna + npm workspace✔️ 설치✔️ 사용법pnpm create vite {프로젝트명} -- --template reactpnpm installpnpm add axiospnpm dev \`\`\`

pnpm add -D vite-tsconfig-paths

🗂️ providers provider를 따로 관리하고자 providers 폴더를 만들어주었다. 📁 FSD-project-setting/src/app/providers 💠 react-error-boundary 📁 FSD-project-setting/src/a

📁 package.jsonnpm 프로젝트 설정 파일. 프로젝트에 대한 메타데이터와 프로젝트에서 사용하는 의존성 및 스트립트가 정의되어 있다.스크립트 ex) 프로젝트의 실행, 빌드 등을 처리하는 명령어 "dev": "vite" , "build": "vite build"

장애가 발생하면 인프라, 데이터, 프론트엔드, 백엔드 중 어디에서 문제가 발생했는지 알 수 없으므로, 우선 장애의 원인을 파악하는 것이 중요하다.✔️ 프론트엔드에서의 오류데이터 영역 / 화면 영역 / 외부요인 / 런타임예상할 수 없는 네트워크 이슈, 특정 브라우저 버전

기존의 에러 처리는 axios interceptor의 reject callback으로 처리했다.✔️ axios interceptor의 불편한 점에러 화면을 보여주려면 라우터 이동으로 처리 or 해당 API를 호출하는 쪽의 코드에서 일일히 발생 여부를 판단하고 에러를 표

Suspense : React Component 내부에서 비동기적으로 다른 요소를 불러올 때 해당 요소가 불러와질 때까지 Component의 렌더링을 잠시 멈추는 용도로 사용할 수 있는 컴포넌트lazy : 코드 분할을 구현하는 방법으로, 컴포넌트를 동적으로 불러올 수

https://sentry.io 사이트에서 회원가입 > Project 탭 > 프로젝트 생성Next.js 프로젝트 터미널로 이동하여 npx @sentry/wizard@latest -i nextjs --saas --org jinii9 --project wms를 입

next-auth를 사용해서 /src/auth.ts에서 api 연동을 통해 서버에서 받아온 값을 클라이언트 컴포넌트에 보내는 코드를 작성하였다. 성공 시 로그인 성공으로 처리하여 redirect 해주고, 에러 발생 시 서버에서 보내준 status에 따라 다르게 화면을

auth.ts 파일의 NextAuth의 authorize 함수로그인 api 실행는 서버 사이드에서 실행된다.서버 사이드에서 받은 Set-Cookie 헤더서버가 발급해준 http-only JSESSIONID 쿠키가 클라이언트(브라우저)까지 전달되지 않아 문제가 된다.📁

Web Vitals 선택한 프로젝트에 대한 페이지 로드 및 상호 작용 성능에 대한 개요를 제공한다. 어떤 페이지가 웹 성능에 가장 큰 영향을 미치는지 더 잘 이해할 수 있다. 이러한 지표는 어떤 Web Vital페이지에 가장 많은 주의를 기울여야 하는지 우선순위를 정하

최적화 우선순위를 Average Duration으로 잡았다. Average Duration이 높은 파일순으로 정렬하여 진행하였다.📺 Sentry-Assets 첫페이지📺 Next.js의 이미지 assets에 대한 상세 분석 화면동일한 이미지(background.png

SSE(Server-Sent Events)의 특성상 CONNECTING(0) 상태와 연결 재시도는 정상적인 동작의 일부입니다.일반적인 SSE 생명주기:초기 연결 시도 (CONNECTING = 0)연결 성공 (OPEN = 1)연결 끊김 (일시적인 네트워크 문제 등으로)자

Stat size : Minification, Uglify 등의 변형이 일어나기 전의 크기Parsed size : Minification, Uglify 등의 변형이 일어난 후의 크기(최적화 후), 브라우저에서 파싱 후, 실행할 크기Gzipped size : Gzip 알

"포토카드 영화리뷰 플랫폼" 프로젝트에서 담당하여 진행했던 TensorFlow.js/BodyPix를 이용한 인물, 배경 합성 촬영 개발을 지금이나마 간단하게 기록하고자 한다.포토카드를 만들기 위해서는 1\. 영화 포스터 이미지 실시간 바꾸기2\. 선택한 이미지를 배경으

리액트의 가상 DOM과 실제 DOM의 비교, 리액트 컴포넌트가 렌더링할지를 판단하는 방법, 변수나 함수의 메모제이션 등 모든 작업은 JS의 동등 비교를 기반으로 한다.✐ 원시 타입boolean : true1, false0null : 아직 값이 없거나 비어 있는 값을 표

ECMAScript : 자바스크립트 표준바벨 : JS의 최신 문법을 다양한 브라우저에서도 일괄적으로 지원할 수 있도록 코드를 트랜스파일한다. ES5배열 또는 객체의 값을 분해해 개별 변수에 즉시 할당한다.객체배열 구조 분해 할당은 사용하는 쪽에서 원하는 이름을 변경하는

JS 표준 코드가 아닌 페이스북이 임의로 만든 새로운 문법 > 트랜스파일러를 거쳐서 JS 코드로 변환해야 한다.HTML이나 XML을 자바스크립트 내부에 표현 가능JS 코드 내부에 HTML과 같은 트리 구조를 가진 컴포넌트를 표현 가능✔️ React 컴포넌트는 반드시 대

상태를 관리할 수 있게 해주는 훅초깃값이 없을 경우, 초깃값은 undefined✔️ useState 사용 X > 동작하지 X는 코드1 : 일반 변수 사용그냥 메모리에서만 바뀌고, React는 그걸 모르기 때문에 화면은 그대로 'hello'를 보여주게 된다. 리렌더링 발