본문 바로가기
728x90

분류 전체보기52

화면 단위에서 리액트와 제이쿼리 써먹기 안녕하세요. 원더제이입니다.이번 포스팅에서는 리액트 프로젝트를 만드는게 아닌 화면단위에서 리액트와 jQuery를 사용해보려고 합니다. 리액트는 대부분 create-react-app으로 프로젝트를 만들어서 사용합니다.하지만 이미 만들어놓은 화면들을 리액트로 다시 다 만들기는 어렵겠죠.리액트의 JSX 문법을 통해 html과 javascript를 한 번에 사용하는 방식으로 간단하게 실습해보도록 하겠습니다. 기본적인 javascript와 jquery, react 사용법을 알고계셔야 이해하기가 쉽습니다. # 화면파일 구성 리액트 공식 사이트 설치하기의 하단 로컬 환경에서 React 시도하기 내용에 추가로 jquery 3버전을 포함하였습니다.   위의 내용을 index.html로 저장하고 실.. 2025. 1. 13.
[Spring] 코틀린 Springboot 3.0에서 Querydsl 설정 plugins { id("org.springframework.boot") version "3.1.0" id("io.spring.dependency-management") version "1.1.0" kotlin("jvm") version "1.8.21" kotlin("plugin.spring") version "1.8.21" kotlin("plugin.jpa") version "1.8.21" kotlin("plugin.allopen") version "1.8.21" kotlin("kapt") version "1.8.21" idea } allOpen { // Spring Boot 3.0.0 annotation("jakarta.persistence.Entity") annotation("jakarta.pers.. 2023. 6. 14.
[React] 리액트 게시판 만들기 #6 - 페이징과 검색 안녕하세요. 원더제이입니다. 이번 포스팅에서는 게시글 목록의 페이징과 검색 기능을 구현해보도록 하겠습니다. 페이징과 검색 기능 추가 이전 포스팅에서 게시글 목록을 가져올때 pagination 정보도 같이 가지고 오게 작업했습니다. 페이징과 검색을 사용할 수 있도록 소스를 수정합니다. import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { Link, useNavigate } from 'react-router-dom'; const BoardList = () => { const navigate = useNavigate(); const [boardList, setBoardList] = useState([]); .. 2023. 5. 8.
[React] 리액트 게시판 만들기 #5 - 게시글 등록, 수정, 삭제 안녕하세요. 원더제이입니다. 지난 포스팅까지 게시판 목록을 조회해서 화면에 출력하는 부분까지 개발했습니다. 이번 포스팅에서는 게시글을 등록하고 수정, 삭제하는 부분을 개발하도록 하겠습니다. 게시글 등록 우선 게시글 목록에서 글쓰기 화면으로 이동할 수 있게 버튼을 추가합니다. /* BoardList.js */ import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { Link, useNavigate } from 'react-router-dom'; const BoardList = () => { const navigate = useNavigate(); const [boardList, setBoardList] = .. 2023. 4. 24.
728x90