ITRecipe

1. 검색 조건 누락 원인 및 해결문제: API 호출 시 q 값이 전송되지 않음원인: 내부의 input, select 등에 name 속성이 누락되어 있었음해결: 모든 입력 요소에 name 속성 명시 2. ImageDatePicker 초기화 문제문제: ImageDatePicker 사용 시 외부 상태 변경으로 초기화되지 않음원인: 컴포넌트 내부에서 useState로 날짜를 자체 보관 중이며, 외부 props가 반영되지 않는 구조해결 불가 조건: 내부 로직 수정 없이는 초기화 불가능 (controlled input 아님)대안: 일반 사용 권장3. API URL 경로 오류문제: 백엔드에서 No static resource admin/notice/find-list 에러 발생원인: API 요청 시 /api/ p..

[2025년 6월 20일 트러블 슈팅 내역 정리]1. 전체 구조 설계와 인식 변화상태 관리 흐름에 대한 인지가 부족하여 초기화 및 중첩 form 구조에서 문제 발생key는 리렌더링 최적화 및 상태 감지를 위한 핵심 요소전역 CSS는 _app.tsx에서 @/_styles/공통ui.css를 import하여 적용 중 2. 초기화 이슈 해결 const handleAllReset = () => { setSearchKeywordType("all"); setSearchKeywordValue(""); setIsSearch(false); setSelectedGroupCodePk(""); setGroupCodeCurrentPage(1); setCodeCurrentPage(1); setListCode([])..

안녕하세요 ITRecipe 입니다.SpringBoot3 & Next.js 환경에서 지리정보 시스템 관리자 페이지 작업중에정리 해놓으면 유용하게 쓰일것 같아 정리하러 왔습니다.그럼 아래에 간단히 정리해 보도록 하겠습니다.{/* 줄바꿈 및 행 띄우기 처리 적용하는 방법 */}{row.noticeContent?.split("\n").map((line, idx) => ( {line || }))}{/* 줄바꿈 및 행 띄우기 처리 적용하는 방법 (위 코드와 같은 의미 => 축약형) 하지만 이 방법은 리액트에서 사용할 수 있는 방법은 아님 */}{data.noticeContent.replaceAll("\n", "")}위 코드를 어디다 활용하냐면 게시판 상세 페이지에상세 정보를 뿌리는 영역에 내용란이존재하는 경우, ..

공통 코드 그룹 검색 기능 구현 정리1. 프론트엔드 작업 정리검색 폼 구성 검색 항목 선택 드롭다운 (searchKeywordType) 검색어 입력 필드 (searchKeywordValue) onSubmit 이벤트를 통해 검색 시 handleSearch 호출const handleSearch = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); setIsSearch(true); setCodeGroupCurrentPage(1);};상태 변수 isSearch: 검색 시도 여부 표시 searchKeywordType, searchKeywordValue: 입력된 검색값 저장검색 조건 직렬화const q = serialize..

목표 관리자 페이지 상단의 <select> 박스를 통해 선택한 메뉴로 페이지 이동 기존 하드코딩된 옵션을 동적 메뉴 데이터로 대체적용 코드 (Next.js 기준)import { useRouter } from "next/navigation";const AdminTitle = ({ user }: any) => { const router = useRouter(); const pathName = ""; // 현재 페이지 경로 설정 필요 const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => { const selectedUrl = e.target.value; if (selectedUrl) { ro..

문제상황프로젝트 중 input에 한 글자씩 입력할 때마다 포커스가 풀리고 입력이 끊기는 현상을 겪었습니다.처음엔 렌더링 문제인가, 디바운싱? 이슈인가 했는데...원인은 key 속성이 입력 도중 계속 바뀌고 있었던 것이었습니다.문제였던 코드<tr key={`${code.codeParentFk}-${code.codePk + index}`}> <td className="tac"> <input type="text" value={code.codePk} onChange={(e) => handleChange(index, "codePk", e.target.value)} /> </td></tr>문제 포인트: codePk..

공지사항 페이지 기능 정리1. 검색 조건(q) 및 현재 페이지(page) 유지 처리 상세 페이지 진입 시 URL에 다음 파라미터를 포함: noticeSeqno: 글 번호 page: 현재 페이지 q: 검색 조건(JSON 직렬화 후 encodeURIComponent 처리) 예시: router.push( `/user/notice/detail?noticeSeqno=${row.noticeSeqno}&page=${currentPage}&q=${encodeURIComponent(JSON.stringify(serializeSearchFormToJson(searchFormRef)))}`); 2. 상세 페이지에서 목록 페이지로 돌아갈 때 검색 & 페이지 복원..

{/* 테이블 내용 */} {list.length > 0 ? list.map((row, i) => ( {총개수 - ((현재페이지 - 1) * 페이지행 + i)} // 페이징 처리 및 리스트 역순 출력 {row.권한인증받은사람id} {row.권한명} {row.권한인증받은회원id} {row.등록한사람id} {row.등록날짜와시간} 삭제모달열기이벤트(r..

안녕하세요 itrecipe 입니다.현생이 바빠 오랜만에 포스팅 합니다.토이 프로젝트를 진행하면서 마주한 문제에 대한어려움과 해결법을 간략히 남기고자 합니다.그럼 시작하겠습니다.[ListContainer.jsx] : 기존 문제 발생 코드import BoardList from "../../components/board/BoardListForm";import * as boards from '../../apis/boards'import { useEffect, useState } from "react";import { useLocation } from "react-router-dom";const ListContainer = () => { // TODO: boardlist state 선언 // state 선언 ..

내가 뭐를 쓰고 있는지는 알아야 하기에 간단히 정리하는 npm과 npx 개념 및 차이npm: 패키지 매니저 (관리 도구)npx: 직접 설치가 아닌, 한번 쓰고 마는 일회용,필요한 코드를 설치없이 바로 설치할 수 있는 도구 router: 라우트를 이동시킬 컨트롤 or "도구"route: 각각의 화면, URL or "요소"