방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰/뷰(Vuejs)20 [VUEJS] Nuxtjs에서 캐싱 환경에서 호이스팅 그리고 세션 쿠키 자바스크립트에서의 기본 특성 중 호이스팅(hoisiting)이 있습니다.해당 기능은 변수나 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특성을 말합니다. 이는 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 메모리에 저장하는 방식 때문에 발생합니다.마찬가지로 nuxtjs환경에서의 개발도 이러한 호이스팅 기능에 의해 영향을 받습니다. SSR 환경으로 nuxtjs를 동작시키게 되는 경우 일반적으로 세션 쿠키를 주로 사용하게 됩니다.마찬가지로 상태 관리 라이브러리인 pinia 또한 persist값을 사용하게 되는 경우 세션 쿠키를 사용 합니다. 넉스트(nuxtjs) 환경에서 개발을 하면서 조금 특별하고 잊지 말아야할 부분이 있어서 기록을 해 봅니다.1. 캐싱 환경에서의 호이스팅아래와 .. 2024. 12. 12. [VUEJS] Nuxtjs 3 프록시와 미들웨어 nuxtjs 환경에서 프록시를 설정하여 API 서버와 서로 데이터를 주고받는 설정방법은 다양하게 존재 합니다.조금 아쉬운 것은 nuxtjs 3버전의 자세한 설명이 매번 찾을 때 마다 어려웠었던 거 같습니다.* 이래서 레퍼런스가 적고 사용자마저 적은 프레임워크는 안쓰.. 1. @nuxt-alt/proxy 모듈 사용일반적으로 nuxtjs를 사용할 때 "@nuxt-alt/proxy" 모듈을 추가해서 사용하는 방법이 있습니다.해당 설정은 매우 간단하고 직관적 입니다.아래는 설정파일 부분의 일부분 입니다.* 파일 : nuxt.config.ts{ //기타 설정 생략... modules: [ "@nuxt-alt/proxy", //프록시 모듈 ], proxy: { proxies: { "/교.. 2024. 12. 3. [VUEJS3] 뷰 환경에서 URL은 바뀌었지만 실제 라우팅이 안될 때 뷰 개발환경에서 URL이 바뀌었지만 실제 라우팅이 되지 않을 때가 있습니다. "중첩 라우팅" 인 환경에서 "단일 라우팅" 환경으로 동작 했다가 다시 "중첩 라우팅" 인 환경으로 이동한 경우 발생하는 케이스라 생각 됩니다. 이때 문제가 발생하는 구간은 중첩 라우팅에서 파라미터를 포함된 요청이 발생하는 경우 입니다. 여기서 눈 여겨 보아야 하는 구간은 name 입니다. name을 사용하게 되면 모든 필요한 파라미터를 명시적으로 전달해야 합니다. 부모 라우트에서 필요로 하는 파라미터가 자식 라우트에서 누락되면, Vue Router가 정확한 라우트를 식별하지 못해 이동을 수행하지 않을 수 있습니다. 반면, path를 사용하면 URL이 명확하게 지정되므로 이런 문제가 발생하지 않습니다. name을 사용하게되면 좀.. 2024. 4. 5. [Vite] 타입스크립트 환경에서의 뷰(Vue) 컴파일 비트(vite) 번들러와 타입스크립트 기반으로 뷰(vuejs) 프로젝트를 생성하면 추가적인 설정 없이도 편리하게 타입스크립트기반의 프로젝트를 구성 할 수 있습니다. 타입스크립트(Typescript)는 타입에 대한 체크를 해 주기 때 문에 데이터의 엄격함을 유지할 수 있습니다. 위 사진처럼 데이터의 다른 타입이 들어오게 되면 오류 메시지가 나타 납니다. 그런데..이상한 점은 dev 모드나 빌드(build)할 때 뷰(vue) 파일에 저런 오류가 있음에도 불구하고 그냥 빌드(build) 가 되어 버린다는 점 입니다. 타입스크립트 설정 파일(tsconfig.json)을 생성하여 각종 옵션을 추가하고 넣어 보아도 뷰 파일(*.vue)에 대한 현상은 동일하게 나타 납니다. 타입스크립트 형식(*.ts) 만 빼고 저러.. 2024. 2. 8. [Vuejs] props 바인딩 watch, watchEffect vuejs 3버전에서는 기존의 vuejs에서 제공한 것과 마찬가지로 "상위 > 하위" 컴포넌트로 프로퍼티를 전달할 수 있습니다. 아래는 일반적으로 프로퍼티를 전달하는 모습의 샘플코드 입니다. * 부모 컴포넌트.vue 이렇게 전달된 프로퍼티는 자식 컴포넌트에서는 defineProps 함수를 통해서 바인딩하여 쓸 수 있습니다. * 자식 컴포넌트.vue {{data}} 사실 여기까지는 문제되는 것이 없는 코드 입니다. 그런데 해당 데이터를 감시(구독)하는 기능을 붙일 때 문제가 발생 합니다. * 자식 컴포넌트.vue {{data}} 위 코드는 "data" 의 내용이 바뀌면 감시(watch) 하여 콘솔에 출력해주는 코드 입니다. 실제로 부모 컴포넌트나 자식 컴포넌트에서 data 값을 바꾸 더라도 watchEff.. 2023. 12. 19. [Vuejs] Mock 적용하기(vite) vite 환경에서 mock 환경을 구성하여 보았습니다. * 타입스크립트를 사용하지 않았습니다. 필요한 모듈은 2개 입니다. yarn add mockjs yarn add vite-plugin-mock 먼저 응답에 사용될 함수를 만들어 줍니다. 함수는 익명함수로 만들되, 배열형태의 값을 반환하면 됩니다. 만약, 타입스크립트를 사용 한 다면 타입제한을 붙일 수 있습니다(MockMethod 타입 등) * 파일이름 : index.js //URL 목록 export default function () { return [ { url: '/api/get', //get 방식 method: 'get', response: ({ query }) => { console.log(query) return { code: 0, data.. 2023. 11. 21. 이전 1 2 3 4 다음
