DEV/react
-
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를 만들어야 했다. 나는 토큰을 저장하..
-
-
React Component 가변적으로 생성/추가하기, 제거하기 (Alert 가변 생성 예시 포함)DEV/react 2024. 2. 19. 11:00
* 컴포넌트 동적으로 생성/추가(가변적으로 생성)하는 코드만 필요한 경우 앞 Alert 코드는 넘어가도록 하자. 회원가입 및 로그인 기능을 구현하다 보니 로그인, 회원가입에 대한 Alert이 필요했다. (성공, 실패 여부. 에러 및 실패에 대한 사유 등 알림을 띄워주기 위해 필요.) Alert Component를 하나 만들고 로그인 및 회원가입 API Response에 따라 Alert을 가변적으로 생성하려고 한다. 우선 Alert 코드를 다음과 같이 생성하였다. Alert.js import style from '../../style/component/Alert.module.css' import React, { useRef, useEffect } from 'react'; /** * [Alert] * @pa..