신입개발자_장민기

App import MemberListFun from "./components/MemberListFun" export default function App(){ return ( App ) } MemberListFun import MemberFun from "./MemberFun" import { useState } from "react" export default function MemberListFun(){ const[memberData, setMemberData] = useState([]); const[inputs, setInputs] = useState({ username: '', age: '', address: '' }); const {username, age, address} = inputs; ..

App.js import GameBar from "./components/GameBar" export default function App(){ return ( ) } GameBar.js import "./GameBar.css" import { useState } from "react" const initialGameBoard = [ //게임 보드판 초기 상태(전부 공백) [null, null, null], [null, null, null], [null, null, null], ]; export default function GameBar(){ const [gameBoard, setGameBoard] = useState(initialGameBoard); function handleSelect(rowInd..

import { useState } from "react" export default function App(){ /* *****수정된 부분***** */ const [inputs, setInputs] = useState({userid: "", passwd: ""}); //userid와 passwd 초기값은 공백(JSON) function handleSubmit(event){ //페이지 이동 방지 event.preventDefault(); console.log(inputs); console.log(inputs.userid); console.log(inputs.passwd); } /* *****수정된 부분***** */ function handleChange(event){ //data의 값을 JSON에 저..

이날은 발표 전 마지막 정돈을 하던 날이다. 기능은 어느정도 다 구현이 되어있었기 때문에 이날은 자잘한 기능 추가, 조정, 정리 위주의 작업을 진행했다. 1. DTO 순서 조정 DTO가 DB 설계와 순서가 약간 달랐다. 작업할 때 일치되지 않으면 번거로운 부분이 있다고 팀원한테 들어서 수정했다. 2. 이름을 2글자 이상으로 제약 + 코드 정리 그리고 event.preventDefault랑 return false가 같이 쓰여 있는 경우가 있다. 이유는 간단하다.... 제대로 안 막혀서... 지금 생각해보면 처음에 코드를 작성할 때 코드가 바로 반영이 안 되니까 저렇게 했고 그걸 붙여 넣으면서 이상한 코드가 된 것 같다. 다 수정했다. 3. 네비게이션바 수정 문밤 Search 로그아웃 로그인

import { useState } from "react"; export default function App(){ const [num, setNum] = useState({n:0}); /* 1. 불변 변수가 아니기 때문에 화면 갱신이 안 됨 객체(배열)은 반드시 불변객체로 관리해야 함 배열 요소 값을 수정하는 방식이 아니라 배열 자체를 덮어쓰는 방식 */ function onIncrease() { /* 작동되지 않는 방식 */ // num.n = num.n + 1; // setNum(num); // console.log("onIncrease: " + num.n); setNum({...num, n: num.n + 1}); /* ...num: num객체 복사 기존 객체 const num = {n: 0} n..

App.js import { useState } from "react"; export default function App(){ const [isEditing, setIsEditing] = useState(true); /* 초기값은 true */ /* handleEvent() 내용 */ function handleEvent(){ /* 옛날 방식 */ //setIsEditing(!isEditing); /* 람다 방식 */ setIsEditing(() => !isEditing) /* handleEvent()를 발동시키면 isEditing이 False가 됨 */ console.log("이전상태는: " + isEditing); /* 이전값인 isEditing의 상태 확인 */ } /* 초기에 뿌려줄 내용 */ ..

export default function App(){ let number = 0; function onIncrease(){ number += 1; console.log(number) } function onDecrease(){ if(number == 0){ number = 0 } else { number -= 1; } console.log(number) } return ( {number} + - ) } 콘솔창에서는 증감이 보이나, 랜더링은 0에서 멈춰 있음 import {useState} from 'react'; //1. import {useState} from 'react' export default function App(){ /* state: 사용할 데이터가 변경되면 자동으로 재랜더링 */ /* ..

export default function App(){ function handleEvent(e){ console.log("handleEvent Click"); e.preventDefault(); } function parent(e){ console.log("parent: " + e); } function child(e){ console.log("child: " + e); e.stopPropagation(); //부모의 버블링 방지 } return( submit parent child ) }

App import ChildComponent from "./components/ChildComponent" export default function App(){ return( App ) } ChildComponent import SubChildComponent from "./SubChildComponent" export default function ChildComponent(props){ //props빠짐 function handelEvent(v){ console.log("handelEvent: "+ v) } return( ChildComponent handelEvent(e)}>ChildComponent에서 ) } SubChildComponent export default function SubCh..

몇 일째 이름짓기를 하고 있는지 모르겠다. 이 날은 서블릿 경로용 명칭을 변경했다. 추가적으로 jsp에서는 서블릿 앞에 jsp태그를 사용하여 를 사용하고 있다. 이를 통해 프로젝트 명칭을 다르게 사용하고 있는 팀원이 쓰더라도 문제없이 링크가 이동한다. 로그아웃 기능도 구현했다. 별로 어려운 건 아니니 간단하게 코드만.. package com.controller.member.login; import java.io.IOException; import java.util.List; import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import ..