[React] 공지사항 게시판 만들기(4): update 공지사항 수정

[React] 공지사항 게시판 만들기(4): update 공지사항 수정

React 공지사항 수정 https://joygotohome.tistory.com/126공지사항 상세에서 이어지는 글입니다. 1. update 훅 만들기\features\notice\model\use-notice-update.tsimport { useNavigate, useParams } from 'react-router-dom';// useNavigate : 코드로 페이지를 이동시키는 훅// useParams : URL에서 파라미터를 꺼내는 훅 (/notice/update/:id → id 꺼냄)import { useQuery, useMutation } from '@tanstack/react-query';// useQuery → 데이터 가져올 때 (GET)// useMutation → 데이..

  • format_list_bulleted React
  • · 2026. 3. 24.
  • textsms
[React] 공지사항 게시판 만들기(3): detail 공지사항 상세페이지 조회

[React] 공지사항 게시판 만들기(3): detail 공지사항 상세페이지 조회

react 공지사항 게시판 상세페이지 조회 https://joygotohome.tistory.com/125이어지는 글입니다. 1. detail 훅 만들기\features\notice\model\use-notice-detail.tsimport { useNavigate, useParams } from 'react-router-dom';import { useQuery } from '@tanstack/react-query';import { getNoticeDetailRequest } from '../api/notice-api';export const useNoticeDetail = () => { const navigate = useNavigate(); const { id } = useParams(..

  • format_list_bulleted React
  • · 2026. 3. 23.
  • textsms
[React] 공지사항 게시판 만들기(2): create 공지사항 작성

[React] 공지사항 게시판 만들기(2): create 공지사항 작성

React를 활용한 공지사항 작성 https://joygotohome.tistory.com/124'공지사항 목록 조회' -> '공지사항 작성'으로 이어지는 글입니다. 1. create 훅 만들기\features\notice\model\use-notice-create.tsimport { useNavigate } from 'react-router-dom'import { useMutation } from '@tanstack/react-query';import { Form } from 'antd';import { createNotice } from '../api/notice-api';import { getCompanyId } from '@/shared/hooks/use-company-info';import..

  • format_list_bulleted React
  • · 2026. 3. 23.
  • textsms
[React] 공지사항 게시판 만들기(1): list 공지사항 목록 조회

[React] 공지사항 게시판 만들기(1): list 공지사항 목록 조회

React를 활용한 공지사항 제작 공지사항 기본 파일구조 공지사항 파일 플로어 다이어그램 1. 기본 파일 생성 하기App.tsx (라우터)import { NoticeListPage } from '@/pages/notice';import { NoticeWritePage } from '@/pages/notice';import { NoticeDetailPage } from '@/pages/notice';} />} />} /> pages/notice/ui/notice-list-page.tsximport React from 'react'export const NoticeListPage = () => { return ( 공지사항 목록 );}; pages/notice/ui/no..

  • format_list_bulleted React
  • · 2026. 3. 23.
  • textsms
[React] 프로젝트 생성방법 vite, CRA

[React] 프로젝트 생성방법 vite, CRA

Create React Aap React 프로젝트 생성방법React 프로젝트는 create react app 또는 vite를 이용한 생성방법과, NextJS를 통한 생성방법 2가지가 있습니다.이 글은 vite를 이용한 react 프로젝트 생성방법입니다. 1. Node.js 다운로드https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.orgNode.js 홈페이지에 접속하..

  • format_list_bulleted React
  • · 2026. 1. 7.
  • textsms
[React] NextJS 새로운 페이지 생성 및 연결 방법

[React] NextJS 새로운 페이지 생성 및 연결 방법

[React] NextJS 페이지 연결 방법 NextJS 신규 페이지 생성 및 연결 방법1. NextJS프로젝트-app 폴더안에 새로운 폴더를 생성합니다. 이름은 변경 가능, 전 bread라고 지었습니다.2. 새로 생성판 폴더 밑에 page.js 파일을 생성합니다. page.js 파일 이름 변경 불가능. 폴더명과 page.js파일이 합쳐져야 NextJS에서 신규 경로가 생성됩니다. page.js폴더 안 문법은 간단하게 글자만 반환하는 함수를 넣었습니다.컴포넌트 이름은 어떻게 지어도 상관없습니다. 개발서버를 띄운곳에가서 코드에서 만든 폴더명을 주소값으로 뒤에 넣으면 새로운 페이지가 완성되어 열리는것을 확인할 수 있습니다.

  • format_list_bulleted React
  • · 2026. 1. 7.
  • textsms