React(29)
-
리액트 기초 정리
EditForm.jsimport { useState } from "react";const EditForm = ({user, updateUser}) => { const[formData, setFormData] = useState(user); //수정하기 전에 수정하고자 하는 유저 정보 담을 공간 작성const changeValue = (e) => { //이벤트가 발생하면 이벤트가 발생한 곳에 name(속성)과 value(속성)를 가져옴 const {name, value} = e.target; setFormData({...formData, [name] : value});}const submitUpdatedData = (e) => { e.preventDefault(); upda..
2024.08.05 -
React - SpringBoot 연결하기 (회원가입+todo리스트 만들기) 4
로그인 + 로그아웃 기능 추가하기 로그인 todo-mapper.xml 파일 구문 추가 SELECT * FROM TODO_MEMBER WHERE ID = #{id} AND PW = #{pw} TodoService 구문 추가//방법 1//TodoMember login(String id, String pw);//방법 2Map login(TodoMember todoMember);//두 가지 중 하나 추가 TodoServiceImpl 구문 추가/*방법 1@Overridepublic TodoMember login(String id, String pw) { return todoMapper.login(id, pw);}*///방법 2@Overridepublic Map login(TodoMember todoMe..
2024.07.16 -
React - SpringBoot 연결하기 (회원가입+todo리스트 만들기) 3
TodoServicepackage com.kh.service;import com.kh.dto.TodoMember;public interface TodoService { int idCheck(String id); int signup(TodoMember member);} TodoServiceImplpackage com.kh.service;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import com.kh.dto.TodoMember;import com.kh.mapper.TodoMapper;@Servicepublic class TodoServiceImpl imp..
2024.07.16 -
React - SpringBoot 연결하기 (회원가입+todo리스트 만들기) 2
mybatis-config.xml config.propertiesspring.datasource.hikari.driver-class-name=oracle.jdbc.OracleDriverspring.datasource.hikari.jdbc-url=jdbc:oracle:thin:@localhost:1521/xespring.datasource.hikari.username=kh_WORKBOOKspring.datasource.hikari.password=kh1234 spring.datasource.hikari.connection-timeout=30000spring.datasource.hikari.maximum-pool-size=5spring.datasource.hikari.idle-timeou..
2024.07.15 -
React - SpringBoot 연결하기 (회원가입+todo리스트 만들기) 1
Login.jsimport React, { useContext, useState } from "react";import LoginContext from "./LoginContext";const Login = () => { //App.js에 작성한 Context에서 loginMember와 LoginContext의 키가 일치하는 값을 가져와 대입 //만약 로그인한 값이 없으면 로그인 화면으로 이동 const {loginMember, setLoginMember} = useContext(LoginContext); //아이디, 비밀번호 상태 변수 const [id, setId] = useState(''); const [pw, setPw] = useState(''); //로그인..
2024.07.15 -
프로필 사진 넣기
파일은 복수라는 가정 하에 선택하기 떄문에 이미지 하나를 가져오려면 인덱스가 0인 사진을 가져오면 됨 ** setSelectedImg(reader.result); - set선택한이미지 = 읽어온 파일 데이터를 선택한 이미지에 연결- reader.result = 파일의 내용(컴퓨터 언어로 된 이미지코드를 주소값으로 변환(URL)) ** reader.readAsDataURL(file);readAsDataURL = 데이터 URL을 글자 취급해서 읽기 시작 => 주소는 String 문자열로 표현됨 import React, {useState} from 'react';import './R32_Profile.css';const Profile = () => { const [selectedImg, setSelec..
2024.07.12