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..

공지사항 페이지 기능 정리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. 상세 페이지에서 목록 페이지로 돌아갈 때 검색 & 페이지 복원..

안녕하세요 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 선언 ..

안녕하세요 ITRecipe 입니다!React로 miniProject를 진행해보려고 유튜브를 활용해강의를 들으며 학습을 하고 있습니다.학습한 내용을 꾸준히 학습도 하고,이해도를 높이고자 기록해두려 합니다.현직에 개발자로 계시는 지인분이 그러더라구요"너의 기억은 날아가지만 기록은 남으니 학습한 내용은 무조건 기록으로 남겨라!그것이 훗날 너의 자산이 될 것이다! "라고 해주셨습니다.개발자를 꿈꾸고 있는 취준생으로서 선배 개발자분의 명언을 새겨 듣도록 하겠습니다.그럼 오늘부터 다시 화이팅!!import './App.css';//모든 컴포넌트(함수)는 대문자로 시작한다.function App() { const name="Tom"; //이름을 받아올 변수 name 생성//네이버라는 객체를 생성 해준다. cons..

import World from "./World"//컴포넌트 생성방법-1/*const Hello = function() { Hello;}*///컴포넌트 생성방법-2/*const Hello = () => { //화살표 함수로 작성하는 방법 Hello}*///컴포넌트 생성방법-3export default function Hello() { let name = "Mike"; function changeName() { name = name === "Mike" ? "Jane" : "Mike"; } return ( Hello {/*여기서 p태그는 return을 해줘야 한다. */} ); //..

안녕하세요 ITRecipe 입니다.오늘은 리액트와 타입스크립를 사용하는 방법에 대해 간략하게 기술 해보고자 합니다.그럼 시작합니다!상위 슈퍼셋이므로 설치를 해야 합니다.npx로 아래 명령어를 입력하여 타입스크립트를 사용할 폴더와 템플릿을 받아줍니다.아래 ract_typescrpt_study는 폴더명 입니다! 그래서 사용하고자 하는 폴더명을적어주면 되는 부분이라 저와 똑같이 하지 않으셔도 무방합니다.