WEB

🚨 문제 상황import {useMutation, useQueryClient} from '@tanstack/react-query';import {deleteMedication} from '@/apis/medication/deleteMedication';export const useDeleteMedication = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: deleteMedication, onSuccess: () => { queryClient.invalidateQueries(['medicationList']); }, onError: (error: Error) => { ..

🚨 문제 상황svgr을 쓰기 위해 환경세팅을 하고 있었다.  global.d.tsdeclare module '*.svg' { import * as React from 'react'; export const ReactComponent: React.FC>; const src: string; export default src;}  위 파일의 마지막 src 부분에서 계속 아래와 같은 에러가 뜬다.  이름을 계속 바꿔봤는데 계속 안된다..저기서 중복되었다는 client.d.ts로 들어가 봤다.C:\\S11P12A808\\front-end\\node_modules\\vite\\client.d.ts  여기서 이미 선언되었다고 나온다.global.d.ts 내용이 덮어 써지는 건 줄 알았는데 아닌가 보다..일단..

🚨 에러 발생Unhandled Runtime ErrorError: Text content does not match server-rendered HTML.See more info here:  🧨 문제 상황공식 문서: Text content does not match server-rendered HTML더보기Incorrect nesting of HTML tags nested in another  tag nested in a  tag or  nested in a  tagInteractive Content cannot be nested ( nested in a  tag,  nested in a  tag, etc.)Using checks like typeof window !== 'undefined' in y..

🚨 에러 발생Error: attribute height: Expected length, "auto". 🧨 문제 상황svg 파일에 width, height를 current로 설정해뒀는데 import하여 사용할 때 아래처럼 width에 값을 주고 height를 auto로 설정했더니 이런 에러가 떴다.// icon svg// component svg 파일에서 height를 auto로 바꿔보기도 했지만 문제는 여전했다.height를 auto로 설정해서 생긴 문제인데 아이콘이 정사각형인 경우면 height를 width와 똑같이 지정하면 되지만, 직사각형인 경우에는 width를 지정한 후에 height를 몇으로 줘야 할지 알 수 없었다. 🚔 해결 방법이전까지는 svg 파일에서 width, height를 커스..

🚨 문제 상황 🥁 해결 방법윈도우에서 PowerShell의 실행 정책 때문에 발생한 문제라고 한다.yarn.ps1 파일을 실행하려고 할 때, 시스템에서 스크립트 실행이 차단되고 있다. 1. PowerShell을 관리자 권한으로 실행 2. 실행 정책 확인Get-ExecutionPolicyRestricted로 설정되어 있었다. 이를 RemoteSigned로 변경해서 로컬에서 실행되는 스크립트는 허용하고, 원격에서 받은 스크립트는 서명이 필요하도록 설정한다. 3. 실행 정책 변경Set-ExecutionPolicy RemoteSigned -Scope CurrentUser위 명령어로 실행 정책을 RemoteSigned로 변경한다.3번을 완료하고 2번을 다시 해보면 RemoteSigned라고 뜬다. 이제 yar..

⚡ WebSocket서버와 클라이언트 간에 언제든 양방향 통신이 가능하도록 하는 기술 WebSocket 특징실시간, 양방향 및 지속적인 연결짧은 지연 시간의 데이터 교환실시간 채팅이나 게임에 적합HTML5 표준 기술로 최신 브라우저의 경우 웹소켓 지원미지원 브라우저도 존재 - WebSocket Emulation으로 대체 (socket.io, SockJS) WebSocket 통신 비교기본적인  HTTP 통신WebSocket단방향 통신양방향 통신클라이언트가 요청을 보내면 서버가 응답별도의 요청을 보내지 않고도 데이터 수신 기본적으로 HTTP 통신은 클라이언트가 요청(Request)을 보내면 서버가 응답(Response)하는 구조이다. 서버는 능동적으로 클라이언트에 먼저 데이터를 전송할 수 없기 때문에 클라이..

🔎 개발자 도구웹 페이지를 디버그, 수정, 성능 분석하기 위한 강력한 도구 모음이다. 개발자 도구를 활용하면 웹 개발의 생산성을 높일 수 있다.크롬에서 윈도우는 F12 또는 Ctrl + Shift + I, 맥은 Command + Option + I를 누르면 개발자 도구가 켜진다. 🧩 주요 패널Elementshtml/css 상태 확인ConsoleJavaScript 코드 실행 및 디버깅로그 확인오류 메시지 표시Sources페이지 소스 검사 및 디버깅break point 지정 및 변수 모니터링Network브라우저에서 발생하는 통신 상태네트워크 모니터링네트워크 요청 상세 정보 확인Performance성능 측정페이지 로드 및 상호작용 성능 분석타임라인 기록Application저장소, 쿠키, 캐시 등을 관리Se..

🚨 문제 상황심각: 경로 [/spring_ws_08_2]의 컨텍스트 내의 서블릿 [appServlet]을(를) 위한 Servlet.service() 호출이, 근본 원인(root cause)과 함께, 예외 [Request processing failed: java.lang.IllegalArgumentException: Name for argument of type [java.lang.String] not specified, and parameter name information not available via reflection. Ensure that the compiler uses the '-parameters' flag.]을(를) 발생시켰습니다.java.lang.IllegalArgumentExcept..