방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 전체 글675 [VUEJS] Nuxtjs 3 적용 후기 오랜만에 여유가 있어서 포스팅을 하나 남겨봅니다! SSR 기능을 제공하는 넉스트(nuxt) 프레임 워크를 적용 하여 보았습니다.확실히..뷰가 리엑트에 비해 사용하는 사람이 적고, next보다 레퍼런스가 훨씬 적어서인지 기존 공식사이트에 나온 방법이 적용되지 않는 부분이 여러군데 있었던 거 같습니다.버전을 올리고나서 홈페이지 업데이트가 안되었나 싶기도 합니다만, 간단하게 nuxtjs를 사용하는 것은 매우 좋다고 생각 하지만 가령 nuxt-auth 같은 조금 더 정형화된 프레임 워크를 사용하는 것에 대해서는 많은 고민을 해 보아야 할 거 같았습니다.nuxt-auth 같은 경우에는 nuxtjs버전 2에서만 사용이 가능하고, nuxt3 버전에서 이러한 권한 라이브러리를 사용 하려면 "@sidebase/nuxt-.. 2024. 10. 15. [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. 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. 이전 1 2 3 4 ··· 113 다음
