react7 [Develog] D-day와 옵저버 D-day 기능 구현과 옵저버 유저 피드백을 받으면서 D-day가 생겼다. 마감일을 기준으로 프로젝트 모집이 며칠이나 남았는지 보였으면 좋겠다는 피드백이었다. 처음 짠 코드는 이랬다. //디데이 계산 export const getDays = (milliseconds: number) => { const date = new Date(milliseconds); const day = `${date.getDate() - 1}`.padStart(2); return `${day}`; }; 생략 const day = Number(getDays(deadline - today)); return( {isRecruiting && day >= 0 && ( // 현재 모집 중이고 남은 일자가 0일 이상이면 {day === 0 ?.. 2023. 3. 9. [React] useQuery의 onMutate 옵션 onMutate 속성은 useQuery 또는 useMutation 훅에서 제공하는 옵션 중 하나로, 쿼리 실행 중 mutation이 발생했을 때 수행되는 콜백 함수를 설정하는 역할을 한다. 보통 useMutation 훅을 사용하여 mutation을 처리할 때, optimistic update를 수행하거나, 캐시 업데이트를 수행하거나, 에러 발생 시 처리 등을 수행한다. 이 때, useQuery 훅에서 제공하는 onMutate 속성을 사용하면 mutation 전에 수행할 작업을 정의할 수 있다. onMutate 속성에 전달할 수 있는 값은 함수이다. 이 함수는 다음과 같은 형태를 가진다. onMutate?: (variables: TVariables) => Promise | R | undefined; 여기서.. 2023. 3. 8. [React] Next.js란 무엇이고 왜 사용하는가 Overview Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 **서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)**과 같은 다양하고 풍부한 기능을 제공합니다. 서버사이드 렌더링(SSR)을 함으로써 얻는 이득은? 로딩- 클라이언트 사이드 렌더링(CSR)의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게되는데 이때까지 사용자는 많은 시간을 대기해야 하는데, 서버사이드 렌더링은 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어들게 됨 SEO- 클라이언트 .. 2023. 2. 7. [Error] 타입스크립트 라우터 오류 'Page'은(는) JSX 구성 요소로 사용할 수 없습니다. 해당 반환 형식 'Promise<Element>'은(는) 유효한 JSX 요소가 아닙니다. Promise값 리스트로 변환하기 오류내용 'Page'은(는) JSX 구성 요소로 사용할 수 없습니다. 해당 반환 형식 'Promise'은(는) 유효한 JSX 요소가 아닙니다. 'Promise' 형식에 'ReactElement' 형식의 type, props, key 속성이 없습니다. 타입스크립트 라우터에서 발생하는 오류메세지이다. 트러블 슈팅 순서 문제 정의 사실 수집 원인 추론 조치 및 방안 검토 결과관찰 (만약 문제가 다시발생한다면 4번으로 다시) 1. 문제 정의 난 이 페이지에서 자바스크립트처럼 비동기 async / await를 쓰고 싶어서 아래 이미지 처럼 async 키워드를 써주면 Router페이지에서 이렇게 오류가 빵빵 터진다. 2. 사실 수집 오류 메세지를 잘 살펴보자. 'DashboardPage'은(는) JSX 구성 요소로.. 2023. 1. 28. [React] Redux, React-router-dom으로 TodoList만들기 1. 구현모습 1) 메인 페이지 2) 상세 페이지 2. 시나리오 1) 메인페이지에서 input창에 내용 입력하여 버튼 클릭 시 dispatch를 통해 setTodo에 새로운 데이터를 payload로 전송 → 전송된 데이터를 useSelector를 통해 가져온 데이터 리스트를 화면에 뿌림 2) 체크버튼 클릭 시 상태 변경 : 완료↔진행중, dispatch를 통해 isDone 상태 변경내용 전달 3) Todo 제목 클릭 시 상세 페이지로 이동 4) 상세페이지에서는 id, title, contents를 보여줌 5) 수정 버튼 클릭 시 제목, 내용 수정 화면이 나타나고 버튼명은 완료로 변경됨 6) 삭제버튼 클릭 시 해당 todo는 삭제되고 navigate를 통해 메인페이지로 넘어감 7) Home 버튼 클릭시 메.. 2022. 12. 15. [React] 리액트로 todo리스트 만들기 컴포넌트: Todo, Button 추가기능: 가로스크롤 id를 Date.now()로 지정해 id 겹침현상 제거 완료된 모습 App.js import React, { useState } from 'react'; import './App.css'; import Todo from './components/Todo'; import CustomBtn from './components/CustomBtn'; function App() { const [todo, setTodo] = useState([ { id: Date.now(), title: 'todotest', contents: '리액트기초를 공부해봅시다.', }, { id: Date.now() + 1, title: 'todotest222', contents: '.. 2022. 12. 7. [React] 리액트 기초 개념 컴포넌트/JSX/Props/State 리액트를 공부하는 첫 날이다! 기대된다. 1. 컴포넌트란? 재사용할수 있는 조립 블록. 화면에 나타나는 UI 요소라고 생각하면 이해하기 쉽다. 단순히 UI 역할 뿐만 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 리액트는 데이터와 UI 요소의 집합체라고 할 수 있는 컴포넌트를 이용하여 화면을 구성하게 된다. 2. JSX 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용된다. JSX는 가독성이 높고 작성하기도 쉬우며 XML과 유사하다는 점에서 중첩된 구조를 잘 나타낼 수 있다는 장점이 있다. *JSX에서 여러개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야한다. 위와 같이 작.. 2022. 12. 5. 이전 1 다음
