내맘대로 개발일지

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"햐 .. Vue 를 거의 3년만에 쓰다보니까 .. 햇갈려서 너무 어렵다 ㅠ내가원하는 건 조건에 따라서 버튼이 보였다 안보였다 하고 싶었는데React 에서는 중괄호 안에 조건을 태워서 사용하면 됐는데 ..Vue 에서는 그게 안돼고 v-if 라는걸 사용했어야 했다 ㅠ 삭제 이런식으로 v-if 에 boolean 값을 주고 view 를 조작하는구조이다. 삭제 취소 이런식으로 if else 에 따라서 보여줄 수 있도록 ? : 구조도 이런식으로표현해 줄 수 있다.vue 는 쓸때마다 v-for 도 그렇고 .. 뭔가 다른거에비해 복잡한것..

📱테스트 환경"react": "18.2.0""react-dom": "18.2.0""typescript": "^4.9.5"Ant Design Table 을 가져다가 쓰려고 하는데 ..Warning: Each child in a list should have a unique "key" prop.에러가 발생했다.페이지가 멈춰버린다거나 안되는 건 따로 없었지만 불편했고나는 map 을 사용하지도 않았거니와 ..테이블에 dataSource 에 데이터를 전달했기때문에내가 따로 한게 없어서 왜나는지 이해할 수가 없었는데찾아보니까 rowKey 를 이용해서 해결 할 수 있다고 한다. { return row.user_id; }}/>Antd Table 에서 데이터소스를 map 돌리면서키를 설정해주지 않으니까 그..

📱테스트 환경"react": "18.2.0""react-dom": "18.2.0""typescript": "^4.9.5"  GitHub - zenoamaro/react-quill: A Quill component for React.A Quill component for React. Contribute to zenoamaro/react-quill development by creating an account on GitHub.github.comReact-Quill 를 이용해서 에디터를 이용하고있는데사용방법은 아주 간단하니까 공식 페이지만 참고해도 누구나 따라할 수 있었을 것이다.근데 이제 code-block 를 사용하려고 보면 이게 다른곳에서 보던것처럼색상구분이없다 보니까 뭔가뭔가 어색한 ..그래서 찾아..

📱테스트 환경"react": "18.2.0""react-dom": "18.2.0""typescript": "^4.9.5"와! 오늘 진짜 엄청난걸 알아버렸다.ㅇㅣ제 선택값 유지를 위해서 URL Params 를 이용하려고 하는데Nextjs 개발을 할때는 router.push({...}) 를 통해서 현재 URL 에 파람만 추가해줬었는데React 에서 하려고 하니까 좀 .. 햇갈렸다고 해야하나 쉽지않았다.[ 첫번째방법 : 추천 x ]const searchParams = new URLSearchParams(location.search);searchParams.set('newParam', 'value');navigate(`${location.pathname}?${searchParams.toString()}`, {..

📱테스트 환경"express": "^4.18.2""typescript": "^5.3.3"Mysql 이 8시간동안 아무런 작업이없으면 연결이 자동으로 끊킨다고 한다.그래도 Mysql 을 사용한지 꽤 오래됐는데 .. 지금까지 몰랐다 ...!!유저가 많다면 상관없겠지만 유저가 없거나 혹시라도 연결이 끊켜서 에러페이지를보여줄 순 없으니 .. 연결이 끊키지 않도록 해야하는데 Spring  에는 autoReconnect 라는게 있다고 하더라.근데 Express 에는 이런게 없어서 .. 찾아보다 보니까 비슷한 성능을 낼 수 있는 Pool 이라는게 있다고 한다.const poolConfig = { host: "", port: , user: "", password: "", database: "", waitF..

📱테스트 환경"react": "18.2.0""react-dom": "18.2.0""typescript": "^4.9.5"디자인 작업을 Styled-components 로 작업하고있는데이제 조건부 스타일을 위해서 타입을 전달해 줘서 적용을 하고 있다.Warning: React does not recognize the `selectItem` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `selectitem` instead. If you accidentally passed it from a parent component, remove it fr..

📱테스트 환경"react": "18.2.0""react-dom": "18.2.0""typescript": "^4.9.5"댓글쓰는 창을 만들고 있는데 입력 창에서 탭 눌렀을 때버튼으로 이동됐으면 좋겠다고 했어서 Ref 로 해결하려고 했더니focus 를 줘도 안돼더라 .. 그래서 이거어떻게해야하는거여 .. 싶어서못하겠다 싶었는데 tabIndex 를 이용해서 할 수 있더라 ? { if (e.key === "Enter") { onSubComment(v.article_id, i); } }} onClick={async () => { onSubComment(v.article_id, i); }} > 댓글남기기이런식으로 tabIndex 에 숫자를 넣으면 Tab..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"하 .. 이게 한 언어를 잘하면다른언어를 배울 때 쉽다고 하는데 나는 너무 어렵다 ..그 언어마다 다 방식이 다른데 어떻게 하라는건지 ... ㅠ 개린이는 웁니다 ...Nuxt 에서 페이지를 이동시키는 방법은 navigateTo 를 사용하는 것이다.navigateTo("/");공식문서를 먼저 찾아보기전에 다른 블로그에서 찾았을 때는$router.push ? 를 이용하는 방법을 찾았었는데 당연하게도 안됐고그냥 공식홈페이지 가서 찾아보니까 이런방법이 있어서 사용하고있다.https://nuxt.com/docs/getting-started/routing Routing · ..

📱테스트 환경 "react": "18.2.0" "react-dom": "18.2.0" "typescript": "^4.9.5" [Express] Mysql Html Tag 걸러내기 📱테스트 환경 "express": "^4.18.2" "typescript": "^5.3.3" Front 에서 ReactQuill 라이브러리를 이용해서 텍스트 입력을 받고 있었다. 이렇게 하니까 백앤드에서 데이터를 저장할 때 html 코드 그대로 저장해야 8735.tistory.com 이전에 Express Mysql 을 사용하면서 Html 태그를 걸러내는 작업을 했었는데 프론트 React 에서도 해당 작업이 필요했다. 이유를 찾아보자면 이건 홈에서 보이는 타이틀과 해당 게시글의 내용이다. 보면 h3, p span 등 html 코..

📱테스트 환경"express": "^4.18.2""typescript": "^5.3.3"Mysql 을 연결하기 위해서 일단 해당 모듈을 설치한다.npm install mysql2그리고 DB 연결을 위한 설정을 진행한다.import mysql2 from "mysql2/promise";const mysql2Connection = mysql2.createConnection({ host: "", user: "", password: "", database: "",});export default mysql2Connection;설정이 완료되면 다음과 같이 호출하여 사용할 수 있다.const mysqlConnect = await mysql2Connection;const qu..