스페이스 루미

key로 직접 접근할때 종종 만날수있는 타입에러 해결방법 1 : 애니추가 [key: string]: any; // 를 추가하거나, 해결방법 2 : key as key of let payload: TestDTO = {}; for (const key in data) { if (data[key]) { payload[key as keyof TestDTO] = data[key]; } } keyof는 객체의 속성 이름들 중 하나를 나타내는 문자열 유니온 타입을 생성한다.

다운그레이드 install 해준다 yarn add swiper@6.0.2 다운그레이드 안하면 별짓을해도 안되니까 다운그레이드하자. index.tsx에 스타일을 박아준다 import "swiper/components/navigation/navigation.scss"; import "swiper/components/pagination/pagination.scss"; import "swiper/swiper.scss"; // core Swiper 나는 navigation이랑 pagination을 쓸거기때문에 이렇게 적었다 import 컴포넌트에 사용할 것들을 임포트 해주고 import SwiperCore, { Navigation, Pagination, Parallax } from "swiper"; import ..

메모이제이션 useMemo 맨 처음 계산한 값을 메모리에 저장(캐싱)해서, 필요할때 꺼내서 쓴다. 함수로써의 기능도 충분히 가능하지만, useMemo의 의도된 설계가 아니며 지연된 연산을 통해 "값"을 기억하는 게 주된 목적이다. useMemo는 인자를 전달할수없다. (함수의 응답값을 메모할 필요가 없는것이고, 리액트의 useMemo 설계 의도와 어긋난다) 매개변수로 하여금 값을 뽑아내고 싶다면, useCallback 훅을 사용한다. 하지만 이 함수의 응답은 memoize될 수 없다. * 함수는 렌더링이되면 모든 내부변수가 초기화되고, 재할당 과정을 거친다. * 함수형 컴포넌트또한 함수이므로 재렌더링 시 컴포넌트 내 선언된 변수가 초기화되는 과정을 거친다. * state가 변경되면, 함수는 재랜더링 되고..

나는 분명 자식 컴포넌트에서 type정의를 제대로 한것같은데 왜 부모에서 에러가 뜨는걸까??? Type '{ images: MediaFile[] | undefined; }' is not assignable to type 'IntrinsicAttributes & MediaFile[]'. type Props를 따로 정의를 해줬다. type Props = { images?: Array; } const GoodsImagesList = ({images}:Props) => { ... } images:MediaFile[] 로 바로 정의할때는 안되었는데.. 따로 Props 타입들을 정의 해주니 해결되었다. 잘 생각해보니, Props는 디스트럭쳐링 형태로 뽑아써야한다는걸 이해했다. (props.images 이렇게..) ..

아웃룩이 string으로 통 html을 넘겨줘서 이걸 잘 그려야 했는데, 어떻게 파싱해야되지?? iframe으로 해야하나 고민하고 있었다. 그러던 와중 멘토님이 html-react-parser 라는게 있으니 참고하라고 알려주셨다. How to render HTML string in react? how to pick body contents html-react-parser? 등 어떻게 html 안에 또 html을 뿌려주냐 고민하다가 아 어차피 string인데.. 안쪽만 추출해서 파싱해주면 되겠다 싶어서 string을 자르는방법을 선택했다. 좋은방법인지는 모르겠으나 react의 dangerouslySetInnerHTML 보다는 낫다는 판단이다. import parse from 'html-react-parse..

react-query 리액트 쿼리의 useQuery를 공부해보자. what is query? 쿼리란 무엇이냐.. 쿼리는 데이터베이스 테이블 or 테이블 조합의 데이터 or 정보에 대한 요청이다. 설치 및 세팅 리액트쿼리와 devtools를 설치해준다 yarn add @tanstack/react-query yarn add @tanstack/react-query-devtools QueryClientProvider로 라우터를 감싸주고, 안에 ReactQueryDevtools를 넣어준다. import { BrowserRouter } from "react-router-dom"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; im..

리액트 라우터 설정법을 알아보자 일단 react-router-dom v6를 설치해준다 yarn add react-router-dom v6 App.tsx의 BrowserRouter에 basename을 정해준다.(optional) basename은 url의 prefix를 설정한다. (/rumi-space로 지정하면 모든 router list의 url 앞에 /rumi-space가 붙는다.) import { BrowserRouter } from 'react-router-dom'; import Layout from 'pages/Layout'; import './App.css'; function App() { return ( ); } export default App; 네비게이션이나 header, footer를 고..

타입설정과 useState list들의 타입을 정해주고, map 돌릴 list state와 새로 추가할 newTodo state를 만들어준다. type Lists = { id:number, title:string, checked:boolean, } ... const [list, setList] = useState([]); const [newTodo, setNewTodo] = useState({ id: new Date().getTime(), title: "", checked: false, }); Mark up 볼만하게 커스터마이징을 해준다. 추가 {list.map((item, index) => { return ( onCheckboxClick(index)} /> {item.title} removeList(i..

[2022.01.05] 훅 정리 다시 하면서 한번더 정리해보는 useEffect useEffect(()=>{ 함수() }) // 렌더링 될 때마다 함수 실행 useEffect(()=>{ 함수() },[]) // 처음 렌더링 될때만 함수 실행 useEffect(()=>{ 함수() },[함수]) // 디펜던시 값이 변경될 때마다 실행 useEffect(()=>{ return()=>{ // clean up(정리) // 해당 컴포넌트가 unMount 될때, 다음 렌더링 될 useEffect가 실행되기 전에 실행 } },[]) clean up 예제 function App(){ ... return ( {state && } ) } ... function Interver(props){ useEffect(()=>{ co..

리스트를 추가하고 클릭시 제거하는 UI를 만들어보자. (TODO LIST를 만들어보자~~!) useState 현재 책 리스트를 담을 books Array와, 새로운 book Object를 초기값으로 넣어준다. id는 유니크한 값으로 넣어준다. Book은 id, title, author을 가지고있다. const [books, setBooks] = useState([ { id: 1, title: "1984", author: "George Orwell" }, { id: 2, title: "Lord of the Flies", author: "William Golding" }, { id: 3, title: "Catcher in the Rye", author: "J.D Salinger" }, ]); const [b..

useState 안에는 초기값을 적어준다. (객체, 원시타입 등이 올 수 있다.) setter함수를 사용하여 객체를 변경할때는 임시의 복사본을 만들어 새로운 객체를 넣어준다. Hook const [form, setForm] = useState({ nickname: "", description: "", }); const onChangeInputForm = (e: React.ChangeEvent) => { const { name } = e.target; const formTemp = { ...form, [name]: e.target.value }; setForm(formTemp); }; 두개의 인풋을 하나의 함수로 변경하기위해 각각의 input에 name attribute를 지정해준 뒤, e.target에서..

context api를 사용해 로딩화면을 간단하게 구현해보자. context폴더에 LoadingContext 파일을 생성한다. context/LoadingContext.tsx import { createContext, useState } from "react"; type LoadingState = { setVisible: (value: boolean) => void; }; export const LoadingContext = createContext({ setVisible: (value: boolean) => {}, }); export function LoadingContextProvider({ children }: { children: React.ReactNode }) { const [visible, ..

설치하고 Import 하기 yarn add swiper import { Swiper, SwiperSlide } from "swiper/react"; import SwiperCore, { Navigation, Pagination } from "swiper"; import "swiper/swiper.min.css"; import "swiper/components/pagination/pagination.min.css"; 헤맨 점 공식문서 임포트 스타일대로 하니 안된다. import "swiper/css" 이런식으로 하라고 되어있다. (하다하다 하도 안되서 노드모듈 스와이퍼 폴더에 css파일이 있긴한건가 하고 찾아봤는데 있긴하더라..) import swiper css ~~등등 파워 구글링을 했는데 다행히 방법을..

넥스트에서 scss 사용설정 및 레이아웃 구조 짜기 sass를 설치한다. yarn add sass or npm i sass next.config.js 파일을 수정한다. prependData에는 들어갈 scss파일은, 모든 파일에서 사용할수있으므로 colors정의나 mixin 등을 넣어준다. public아래에 styles파일을 두었으므로 아래와 같이 경로를 설정해줬다. /** @type {import('next').NextConfig} */ const path = require('path') const nextConfig = { reactStrictMode: true, sassOptions: { includePaths: [path.join(__dirname, 'styles')], prependData: "..

어쩌다보니 써야 할 일이 생겨서 기록으로 남긴다. 물론 리액트 공식문서에도 사용법이 잘 나와있다. https://ko.reactjs.org/docs/react-without-jsx.html JSX 없이 사용하는 React – React A JavaScript library for building user interfaces ko.reactjs.org 코드 샘플 e('header', {className: 'custom-header'}, '타이틀'), e('article', {className:'custom-article'}, e('div', {className:'custom-div'}, e('span', {className:'custom-span'}, '샘플') )); e는 React.createEleme..

공용으로 사용할 커스텀 버튼 컴포넌트를 만들어보자. CustomButton.tsx (컴포넌트) import React from 'react'; type ButtonTypes = React.DetailedHTMLProps; export interface ButtonProps extends ButtonTypes { onClick: () => void; children: React.ReactNode; } const CustomButton = React.forwardRef( ({ onClick, className, children, ...props }, ref?: React.Ref) => { const classNames = [className, 'custom-btn'].filter(v => Boolean(v)..