내맘대로 개발일지

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"Nuxt 에서 utils 함수를 만들어놓고 사용하려고 만들고 있는데카카오 주소 검색을 통해 데이터를 가져오기 위한 함수를 만들고 있었다.공식 문서에 적힌대로 따라하면 문제가 없을 것이란 생각에 열심히 하는데daum.Postcode({ ...})공식문서는 js 로 작성되어있다보니 ts 로 했다가 daum 에서 에러가 발생한다.실행이안되는건 아니지만 파일명이 빨갛고 .. 에러가 떠있으면 매우 몹시 불편하니까제일 좋은 방법은 해당 타입을 명시해주는거지만 개발을 빠르게 진행해야하는 상황속에서하나하나 정의하기가 힘들것 같아서 해당 타입을 일단 무시하게 해놓고 추후 수정하기로 했다.ㅇㅣ 과정속에서 사용한..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"Select 를 만들때 이제 초기에 보여야하는 값이 있고그게 목록에는 안보이게 하고싶은 경우가 있었다. 선택 이라는게 처음에 보이고ㅇㅣ제 필요한 값들이 드롭다운이 나왔을 때 선택은 안보이게 하고싶었는데hidden 옵션을 사용하면 됐다. 방법은 다음과같다. 선택option> 1 2 3 4

📱테스트 환경"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 · ..