내맘대로 개발일지

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0" {{ index + 1 }} {{ item.title }} {{ item.regDt }} 간략하게 Click 이벤트가 상위에 있고 input checkbox 가 해당 태그 안에 있다.이럴때 checkbox 를 누르면 checkbox 도 되고 상위 detail 함수도 실행된다.ㅇㅣ런걸 이벤트 버블링이 발생했다고 하는데 막는 방법은 아주 간단하다.@click.stop 태그를 사용하는 방법이다. {{ index + 1 }} {{ i..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"Tap 이동을 위해 Tap 구조를 만들고 이동하고 있었지만Tap 을 이동할때마다 데이터를 다시불러오고 초기화면으로 돌아가는게 맘에 안들었다.이를 어떻게 하면 좋을까 생각하던 와중에 keep-alive 라는게 있다는 걸 알았다.// ChatGPTkeep-alive 는 Vue.js에서 제공하는 내장 컴포넌트로, 비활성화된 컴포넌트의 상태를 유지합니다.주로 탭 인터페이스나 라우터 뷰와 같이 컴포넌트를 자주 전환하는 경우에 사용됩니다. keep-alive 로 감싼 컴포넌트는 비활성화되더라도 DOM에서 제거되지 않고 활성화될 때 이전 상태를 그대로 유지이렇게 좋은게 있다면 써야겠단 생각으로 다음과 같이..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"const formData = new FormData();이런식으로 선언된 formData 에는 console.log 해봤자 데이터가 안보인다.그렇다. values 에 있을것만 같아서 열어봤자 없다.그래서 값을 확인하는 방법은 다음과 같다.for (const [key, value] of formData.entries()) { console.log(key, value);}값을 넣어줄 때는 key value 를 사용해서 값을 넣어주면 된다.number 는 안들어가니까 string 으로 변환해서 넣어줘야 한다.이 호출과 일치하는 오버로드가 없습니다.오버로드 1/3('(name: string, val..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"id 'org.springframework.boot' version '3.2.0'id 'io.spring.dependency-management' version '1.1.4' 와 이번건 .. 정말 오래걸렸다 .. :(일단 화면은 다음과 같은 화면이 있었고 ..파일 업로드를 누르면 File[] 배열을 서버에 전송해려고 했다.나는 Nuxt 프론트 작업을 하고 동료 분이 Spring Boots 서버 작업을 해주셨는데export interface Drive { id: number; name: string; image1: Images; image2: Images; image3: Images; ..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"테이블에 보이는 데이터들을 엑셀 다운로드 하는 기능이 필요해서 xlsxSheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 2 years ago. Start using xlsx in your project by running `npm i xlsx`. There are 4486 other projects in the npm registry using xlsx.www.npmjs.com해당 라이브러리를 사용하기로 했다.사용방법은 엄청 간단하지만 어디에선가 또 사용할 수도 있기 때문에함수로 만들어놓고 js..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"https://postcode.map.daum.net/guide Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net해당 가이드를 참고하여 만들었고나는 유저에게 따로 먼저 정보를 받지 않고 주소 검색한 정보를입력 포맷에 입력될 수 있도록 만들고 싶었다.1. 팝업을 통해 받은 정보를 등록할 수 있도록2. 함수로 만들어서 여러 곳에서 사용 할 수 있도록코드는 다음과 같다.// 타입스크립트 daum 무시 -> 나중에 수정..

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"기존에 React 나 Next 개발을 할 때는 index.html 파일에 를 넣을 수 있었는데Nuxt 는 html 파일이 없더라 .. 그래서 title 이나 meta 데이터나 외부 script 들을어디다가 넣어야하나 .. 하고 찾아봤는데 생각보다 정보가 없어서당황스러웠다.그리고 nuxt.config 파일에 head: { ... } 에 넣으면 된다는데 안되는게 아닌가 !!알고보니 이건 반쪽자리 답변 ? 또는 정보 부족이였고app 안에 head 안에 넣어주면 됐다.사용방법은 다음과같다.// nuxt.config.tsexport default { ... app: { head: ..

📱테스트 환경"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 도 그렇고 .. 뭔가 다른거에비해 복잡한것..