방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰108 [VUEJS3] 뷰 환경에서 URL은 바뀌었지만 실제 라우팅이 안될 때 뷰 개발환경에서 URL이 바뀌었지만 실제 라우팅이 되지 않을 때가 있습니다. "중첩 라우팅" 인 환경에서 "단일 라우팅" 환경으로 동작 했다가 다시 "중첩 라우팅" 인 환경으로 이동한 경우 발생하는 케이스라 생각 됩니다. 이때 문제가 발생하는 구간은 중첩 라우팅에서 파라미터를 포함된 요청이 발생하는 경우 입니다. 여기서 눈 여겨 보아야 하는 구간은 name 입니다. name을 사용하게 되면 모든 필요한 파라미터를 명시적으로 전달해야 합니다. 부모 라우트에서 필요로 하는 파라미터가 자식 라우트에서 누락되면, Vue Router가 정확한 라우트를 식별하지 못해 이동을 수행하지 않을 수 있습니다. 반면, path를 사용하면 URL이 명확하게 지정되므로 이런 문제가 발생하지 않습니다. name을 사용하게되면 좀.. 2024. 4. 5. SPA 환경에서 배포가 이루어 졌을 때 새로 고침 방법 SPA 구성으로 된 웹 어플리케이션은 웹 서버로부터 1번의 정적 리소스를 받아와서 브라우저에서 구동하는 형태 입니다. 서버에서의 리소스를 1번만 받기 때 문에 부드러운 화면표현, 빠른 동작 등이 장점이라 할 수 있습니다. 그러나 어플리케이션의 규모가 커지게 되면(예 : 화면 200장 이상) SPA 구성으로만 동작시키게 되면 브라우저가 처음부터 많은 데이터를 받아야 하기 때 문에 오히려 더 성능이 느려질 수 있습니다. 그리하여 서버 렌더링을 어느정도 포함시킨 Next, Nuxt 같은 기술이 나오게 되었습니다. 운영중인 SPA 어플리케이션이 너무나 완벽한 기획과 개발에 의해 고칠 게 1도 없다면 배포(deployment)에 대해서 고민 할 필요가 없습니다. 그러나..개발자의 현실은 항상 애자일(Agile)과.. 2024. 2. 16. [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. 'ImportMeta' 형식에 'env' 속성이 없습니다. 타입스크립트(Typescript) 환경에서 env를 import 하는 경우에 발생하는 컴파일 단계에서의 오류 입니다. 가령 아래와 같은 코드를 사용하려 하는데.. 해당 오류를 만나는 경우가 있습니다. const mode : string = import.meta?.env?.MODE if(mode ==='development'){ console.log('개발모드 입니다') } else { console.log('운영모드 입니다') } 타입스크립트가 meta 이하의 env가 무엇인지 몰라 발생하는 오류이므로 해당 오류를 해결하기 위해서는 간단하게 파일 한개만 추가하여주면 됩니다. * 파일이름 : env.d.ts (경로는 최상위 src 디렉토리이여 합니다) //인터페이스를 통한 타입 추론 interface Im.. 2023. 12. 12. [Vite] Vite 개발 환경에서 타입스크립트(Typescript) 적용하기 vite 환경에서 타입스크립트(Typescript) 환경을 설정하는 방법입니다. 당황스럽게도 아무것도 하지 않아도(?) ts 파일이든 js 파일든지간에 vite는 훌륭하게 컴파일을 해 줍니다. 아무 생각없이 위 사진처럼 코드를 넣고 vite 명령어를 실행하면 그냥 컴파일된 내용이 나오는 걸 볼 수 있습니다. 그렇지만 이러한 경우 eslint에서 나오는 "Parsing error : Unexpected token" 또는 "빠른 수정을 사용할 수 없습니다" 같은 오류를 만나게 되므로 몇가지 추가 설정을 해 주어야 합니다. * 모듈 추가 yarn add @typescript-eslint/parser --dev 개발 모듈을 설치한 뒤에 tsconfig.json 파일을 루트 폴더에 생성하여 줍니다. * 파일 이름.. 2023. 12. 11. 이전 1 2 3 4 ··· 18 다음
