DEV/react
-
React redux (toolkit) 간단 사용법DEV/react 2025. 1. 22. 16:04
1. installnpm install redux react-redux @reduxjs/toolkit 2. src > redux 폴더 생성 > store.js 생성 (src/redux/store.js)import React from 'react';import { configureStore } from '@reduxjs/toolkit';export default configureStore({ reducer: {},}); 3. index.js (파일명은 다를 수 있으나 리엑트의 시작점 파일을 찾아가자)을 로 감싸주자.import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import './index.css'import..
-
React Three Fiber (react-three) 메모장 1DEV/react 2024. 10. 7. 16:09
app.js/** * @fiber : Three.js를 React 스타일로 쉽게 사용할 수 있도록 해주는 라이브러리 * ㄴ @Canvas : Three.js의 캔버스 (3D 객체 렌더링 담당) * @Experience : (사용자 지정 컴포넌트) * @Physics : 충돌, 중력 등 물리 효과를 구현하기 위해 사용 * @Suspense : 비동기적인 데이터 로딩을 처리할 때 사용, * 3D 모델이나 리소스를 로딩하는 동안 랜더링을 지연시켜 로딩이 끝나기 전까지 앱이 중단되지 않도록 도와줌 */import { Canvas } from "@react-three/fiber";import { Physics } from "@react-three/rapier";import { Experience } from ..
-
React Error : autoprefixer: start/end value has mixed support, consider using flex-start/end insteadDEV/react 2024. 4. 18. 11:16
// start -> flex-start로 변경 하라고 한다. autoprefixer: start value has mixed support, consider using flex-start instead // 본인 css의 "justify-content: start" 와 "align-items: start" 를 찾아서 변경해주자 // "justify-content: start" 를 하단 css로 변경 justify-content: flex-start // "align-items: start" 를 하단 css로 변경 align-items: flex-start // end -> flex-end 변경 하라고 한다. autoprefixer: end value has mixed support, consider u..
-
React 전역 변수를 사용하자 (부모-자식 컴포넌트 접근, Context)DEV/react 2024. 2. 21. 16:57
React를 사용하면 Component로 화면을 분리하여 사용하게 된다. 물론 Props을 통해 변수나 함수를 던지고 사용할 수 있지만 나처럼 멍청한 사람은 React의 특징을 이해하지도 못한채 router로 페이지를 나눠버리고 그 안에서도 여러 depth의 Component를 구성하게 되는 경우도 있다. API 통신을 통해 가져온 Token을 전역 변수로 설정하려고 했는데 로그인 페이지와 접속 이후 페이지가 React router로 나눠버리는 바람에 Props로 던지기가 힘들었다. 그래서 전역 변수로 사용하는 법을 찾게 되었고 그 방법에 대해 설명하려고 한다. 1. tkContext.js 생성 index.js의 Router render 부분을 감싸줄 Provider를 만들어야 했다. 나는 토큰을 저장하..
-