목록Javascript/Nuxt (7)

내맘대로 개발일지

[Nuxt] Ant Design Date picker 사용하기

📱테스트 환경"nuxt": "^3.11.2""vue": "^3.4.21""vue-router": "^4.3.0"데이트피커를 넣으려고하는데 로 넣으니까 너무 몬생겼다 ..몬생겨도 너무 몬생겨서 디자인 프레임워크를 이용하고 싶었는데또 React 를 개발을 주로 하다보니 Antd 가 생각이 났다.하지만 Antd 가 아무래도 React UI 에 맞춰져서 가이드도 그렇게 되어있다보니Nuxt 에서 하려니까 좀 애를 먹고 있었다..https://2x.antdv.com/components/overview/일단 Nuxt 의 Antd 는 여기서 확인할 수 있고 DatePicker 를 사용하는 방법은 다음과 같다.// nuxt.config.tsexport default { ... modules: [ ... ..
Javascript/Nuxt 2024. 7. 2. 14:32
[Nuxt] Event Bubbling 막는 방법

📱테스트 환경"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..
Javascript/Nuxt 2024. 6. 17. 11:36
[Nuxt] keep-alive 사용방법과 주의점

📱테스트 환경"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에서 제거되지 않고 활성화될 때 이전 상태를 그대로 유지이렇게 좋은게 있다면 써야겠단 생각으로 다음과 같이..
Javascript/Nuxt 2024. 6. 3. 15:09
[Nuxt + Spring] formData에 image 배열 전송하기

📱테스트 환경"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; ..
Javascript/Nuxt 2024. 5. 28. 09:59
[Nuxt] 헤더 (title, meta script ... 등) 넣는 방법

📱테스트 환경"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: ..
Javascript/Nuxt 2024. 5. 16. 15:44
[Nuxt] Typescript 타입 무시 declare var

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