방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 전체 글673 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. HTML 캔버스에서 이미지 왜곡하기(canvas image warp, distorted) 캔버스에서 이미지를 왜곡하는 방법을 간단히 소개 합니다. 이미지를 왜곡하기 위해서는 "워핑(warping)" 이라는 방법이 필요한데, 영상과 관련된 기술에서 이미지 워핑(image warping)이라는 이름으로 이미 범용적으로 사용되는 기술 입니다. 해당 기능을 구현하기 위해서는 2가지의 접근법이 필요 합니다. 1. 위치 변환 함수를 통해 위치를 변환한다. 2. 위치 변환 함수를 이용해서 실제로 픽셀을 옮긴다. 먼저 캔버스에 이미지를 로딩 합니다. canvas0 아이디는 원본 이미지를 표현할 캔버스이며, canvas1 아이디는 왜곡할 캔버스 이미지 입니다. 위 코드를 실행하면 간단한 사진을 볼 수 있습니다. 이미지를 왜곡하기 위해서는 캔버스에 사용된 이미지 데이터를 가져와서 각 구간별로 색상값을 조정해 .. 2024. 1. 31. Flutter GetX GetView Widget 변경되지 않을 때 GetView를 상속받아 위젯을 만든 경우에 제네릭에 설정한 컨트롤러의 클래스의 값을 아무리 바꿔도 변경되지 않을 때가 있습니다. updat 또는 refresh 등으로 조치하면 된다는 글이 많은데.. 가장 1차원적으로 확인해야 될 부분이 GetView를 상속받은 클래스의 오버라이드한 함수인 build의 반환 위젯 값이 Obx인지 확인하여야 합니다. * 올바른 반환 모습 * 올바르지 않는 모습 GetView 클래스는 추상클래스이며 기본적으로 Stateless위젯을 상속받고 있습니다. 그렇기에 위젯의 변화를 아무리 주어도 내용이 바뀌지 않는 것 입니다. 플러터에서 GetX 패키지의 GetView를 상속받아서 사용 하는데 Widget 변경되지 않는다면 가장먼저 Obx를 사용하는지 안하는지 살펴보는 것이 좋습니다! 2023. 12. 20. [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. 이전 1 2 3 4 ··· 113 다음