목록분류 전체보기 (39)
오늘도 코딩하나
기본적인 mysql 연동에 대한 내용은 하단 내용을 참고하길 바란다.https://coding-hana.tistory.com/49 [React] nodejs + mysql 연동(1) server 세팅npm init -ynpm install expressnpm install nodemonnpm install cors - server.jsconst express = require('express');const db = require('/database/db');const app = express();const path = require('path')const port = 8009;app.listen(port, functicoding-hana.tistory.com 1. 서버 설정- server.jsapp.ge..
(1) server 세팅npm init -ynpm install expressnpm install nodemonnpm install cors - server.jsconst express = require('express');const db = require('/database/db');const app = express();const path = require('path')const port = 8009;app.listen(port, function() { console.log(`listening on ${port}`);});app.use(express.json());var cors = require('cors');app.use(cors());app.use(express.static(path.join(_..
로그인 화면 만들기 일단 간단하게 아이디를 입력 후 로그인 버튼을 누르면 회원아이디 여부를 확인하는 로직만 만들었다. - server.jsapp.post('/loginCheck', function(req, res) { const userId = req.body.userId; const password = req.body.userPw; const sendData = { isLogin: "" }; if(userId && password) { db.query('SELECT * FROM USER WHERE USER_ID = ?', [userId], function(err, results, fields) { if(err) { con..
1. 일반적인 setState 사용 ▶ 단순 상태 업데이트 - 상태가 직접적으로 업데이트되는 경우 - 이전 상태에 의존하지 않고 상태를 완전히 새로 설정할 때 ( 상태를 덮어쓰는 경우) - 단순 값 설정이 필요한 경우 - 이전 상태와 무관한 로직으로 상태를 업데이트할 때 ▶ 외부 데이터로 상태 설정 - API 호출 결과를 기반으로 상태를 설정할 때const handleCheckAll = () => { setCheckedAll([])} ⇒ 이전 상태에 의존하지 않고 새 값을 설정const handleCheck = (id) => { setCheckedItems((prev) => prev.includes(id) ? prev.filter((itemId..
1. (issue) 문자열 선택초기값 세팅으로 0이 세팅된 후에도 selectText() 함수가 실행되어 문자열 전체 선택이 되야하는데, 안되넹 - 수정 후 소스const setInitial = (e, item) => { const today = new Date(); const date = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${today.getDate()}`; if(item.disabled) { const newData = tempData.map((i) => item.id === i.id ? { ...i, date, price1:0, price2:0, isDisabled..
지금까지 짠 코드에 대한 찜찜한 부분들이 많이 있었고,그에 따라 GPT에게 코드 리뷰를 맡겨보았다. [코드 리뷰 및 개선 사항] 1. 상태 업데이트 시 콜백 함수 사용 const handleUpdate = (id, key, event) => { let newItem = event.target.innerText; if(key === 'price1' || key === 'price2') { if(newItem.trim() === '') { newItem = 0; event.target.innerText = '0'; } } // 수정 전 소스 const newData = tempData.map((item) => item.id ==..
1. 추가입력란 disabledlet [disabledItems, setDisabledItems] = useState([]);// 입력란 추가 로직에 checkbox disabled 추가 useEffect(() => { const empty = tempData.filter((item) => item.date !== undefined && item.date !== ''); if(empty.length === tempData.length) { setTempData([...tempData, {id:tempData.length}]); setDisabledItems([...disabledItems, tempData.length]); } }, [tempData]) 2. 엔터를 ..
1. update React 공부를 하면서 update 해보기는 했지만항목 1~2개만 가지고 간단하게만 해봤었기 때문에 어떻게 해야할지 많이 헤맸다.const handleBlur = (id, key, event) => { const newItem = event.target.innerText; dispatch(updateItem({id, newData: { [key]: newItem } }));}return ( {payList.map((item,i) => ( handleCheck(item.id)} /> handleBlur(item.id, 'date', e)} onKeyDown={handleKeyDown} onClick={()=>handleDate(it..