개발 프로젝트/스위트케어 15

React 상태 업데이트 반응 한 박자씩 늦는 문제 해결하기

반응이 한 박자씩 늦는다는 말은, 어떠한 동작을 했을 때 변경점이 바로바로 업데이트되지 않고 다음 동작을 했을 때에야 이전 변경점이 나타난다는 말이다. 시작 시간과 종료 시간을 입력하면 총 시간을 계산해서 보여주고자 했다. 그런데 자꾸 이렇게... 잘못된 값을 보여주는 것이다. 이것은 React의 state 관리 메커니즘과 관련이 있는 문제이다. 1. state가 변경됨 -> 렌더링이 트리거됨 2. 리액트의 state 업데이트는 비동기적 (안 기다림)으로 이루어지므로 렌더링 시 기존 state 값이 사용됨 3. 다음 state 변경이 발생하면, 현재의 변경 전 state 값인 1번에서 변경한 그 값을 이용해 렌더링됨 그래서 useEffect를 이용해 html 렌더링이 끝나고 브라우저에서 state를 업데..

Next.js에서 동적 라우팅 구현 시 403 에러 해결법

사용자가 등록한 데이터 수정을 위해 Next.js의 동적 라우팅을 사용하기로 했다. 이때, 해당 데이터의 고유번호를 이용해 URL을 구성하기로 결정했기 때문에 이를 위해 Next.js의 동적 라우팅 기능을 사용했다. URL을 만들 경로 아래에 [id].jsx 페이지를 만들고, useRouter 객체를 생성해 다음과 같이 설정했다. 그렇지만 자꾸 페이지를 찾을 수 없다는 오류가 났다. /addpatient/[id].js도 안 되고, /addpatient/[id]/index.js 도 안 됐다. 물론 Next.js 버전 (9.5.0 버전 이상이어야 동적 라우팅을 사용할 수 있다고 한다) 문제도 아니었다. 문제는 next.config.js의 리다이렉트 설정에 있었다. 백엔드 서버와의 통신을 위해 위와 같이 리다..

Next.js 프로젝트에서 Redirect 시키기

import { redirect } from 'next/navigation'; const FamilyManage = () => { redirect('/calendar'); return It should be redirect to calendar; }; export default FamilyManage; https://nextjs.org/docs/app/api-reference/functions/redirect Functions: redirect | Next.js API Reference for the redirect function. nextjs.org 그러나 오류.. 애초에 터미널에서부터 에러가 떠 있었다.. 대신 useRouter를 사용하기로.. import { useRouter } from 'nex..

캘린더 고도화 작업 진행 중

디자인을 예쁘게 변경했다. 그리고 각종 메시지와 컴포넌트를 커스텀했다. 풀캘린더와의 차이점은... 정말 모든 것이 수동이다... 이렇게까지 제공되는 기능이 없는 것도 신기하다 ㅋㅋㅋㅋ 이벤트 상세정보 팝업조차 직접 구현해야 하다니. 그만큼 커스터마이징이 비교적 자유로운(..자유로울 수밖에 없는!) 점은 좋긴 하다. 다음과 같은 기능을 추가했다. 1. CSS 수정 2. 컴포넌트 구성 변경 3. 이벤트 배경색이 정보값에 따라 바뀌는 기능 추가 4. 각 보기 페이지 헤더 포맷 변경

React-big-calendar 도입

JSP 시절에 fullcalendar를 썼는데 이번에 더 찾아보니 fullcalendar에서 영감받은 react-big-calendar가 있길래 써보기로 결정했다. https://github.com/jquense/react-big-calendar GitHub - jquense/react-big-calendar: gcal/outlook like calendar component gcal/outlook like calendar component. Contribute to jquense/react-big-calendar development by creating an account on GitHub. github.com yarn add를 통해 패키지 설치 후 기본 코드를 작성하면 이렇게 된다. import {..

리액트 템플릿 React Nice Resume 적용

예쁘게 디자인된 웹페이지 환경에서 기능 개발을 하고 싶어서 리액트 템플릿을 알아보았다. 35+ Free React templates and themes Free React resources are very difficult to find when searching for templates and themes on the Intern... dev.to 여기서 React Nice Resume가 스위트케어에 적용하기 딱이겠다 싶어서 가장 먼저 설치해 보았다. 그런데 설치부터가 난관이었다... 파일을 풀고 실행을 했더니 패키지가 없다고 오류가... 설치를 했더니 버전 호환성이 안 맞다고 오류가... 해결하고 실행했더니 스프링 시큐리티 로그인 프롬프트가 안 뜨질 않나... 서버에서 로그인하고 왔더니 Not Fou..