삽질블로그 삽질블로그

vue nuxt path param 라우터 구조 /survey/:id/question/:questionId 문제상황 /survey/58/question/1 -> /survey/58/question/2 으로 라우터가 넘어가야한다. 시도 우선은 nuxt 에서 path param 이 있을 시 자동으로 route name 이 "survey-id-question-questionNumber" 이런식으로 만들어진다고 한다. (참조 https://nuxtjs.org/docs/features/file-system-routing/) 따라서 일부 path parameter 변경 시에 split('/') 사용할 필요 없이 다음과 같이 할 수 있다. const pathParam = { ...this.$route.params, ..

vue nuxt 에서 layout 을 custom 하게 작성하는법 vue nuxt 의 /layout/default.vue 에 정의되는 내용대로 default layout 이 지정된다. 이때, default layout 이외의 다른 layout 을 사용해야하는 경우나 header 가 없는 페이지를 작성해야하는 경우가 있다. layout 아래에 custom layout 생성 ex) /layout/login.vue 생성 실제 화면에서 layout 을 프로퍼티로 정의 /pages/login/login.vue에서

React 로 빌드하기 위해 고려해야하는 사항들 webpack 과 같은 번들러를 사용하여 번들링 되고 babel 과 같은 컴파일러 사용하여 변환 코드 분할과 같은 production 최적화 성능 및 seo 를 위해 일부 페이지를 정적으로 사전렌더링 할 수 있다 -> serverside rendering, client side rendering 둘다 가능 React 앱을 data store에 연결하기 위해 서버측 코드를 작성해야할 수 있다. Next.js 위에 언급한 문제들에 대한 솔루션 제공 직관적인 페이지 기반 라우팅 시스템 pre-rendering, static-site-generation(정적 생성 ssg), server-side-rendering 자동 코드분할 (페이지 로드 속도 up) 최적화된 ..

프로젝트를 노드 패키지 관리자로 관리하기 위한 과정 (with next) 1. package.json 생성 2. $ npm install react react-dom next 3. html 에 있는 태그, react 에서 모듈을 가져오겠다는 "React.", id가 app 인 태그, html, body 모두 react 에서 생성해주므로 필요없다. 결과 (index.jsx) import {useState} from 'react'; function Header({title}) { return {title}; } function HomePage() { const [likes, setLikes] = useState(0); function handleClick(){ //console.log( "increment ..

참고문헌: https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs * 사용용어 사용자 인터페이스 - 사용자가 애플리케이션을 사용하고 상호 작용하는 방법입니다. 라우팅 - 사용자가 애플리케이션의 다른 부분 사이를 탐색하는 방법입니다. 데이터 가져오기 - 데이터가 있는 위치와 가져오는 방법. 렌더링 - 정적 또는 동적 콘텐츠를 렌더링하는 시기와 위치입니다. 통합 - 사용하는 타사 서비스(CMS, 인증, 결제 등) 및 연결 방법. 인프라 - 애플리케이션 코드(서버리스, CDN, Edge 등)를 배포, 저장 및 실행하는 곳입니다. 성능 - 최종 사용자를 위해 애플리케이션을 최적화하는 방법. 확장성 - 팀, 데이터 및 트래픽이 증가함에 따라 애플리케이션..

사용중인 프레임워크: vue3 검색 시에 쿼리스트링으로 검색내용들을 저장해놓고페이지가 새로고침 되었을 때 쿼리스트링에 담겨있는 내용을 가져와 검색 객체에 set 해주는 기능을 구현하는데type 관련 문제가 있었다.route.query 에서 반환하는 타입이 string 이 아닐 수 있다는 이유로 다음과 같은 에러가 발생한다.검색객체의 interface 에 LocationQueryValue 타입을 추가해주는 방법도 있지만 사실 값은 실제로 number 아니면 String 이어야만 하기 때문에 불필요한 타입을 추가하는게 마음에 걸렸다.그래서 다음과 같이 객체에 초기화되어있는 값의 type을 체크해서 무조건 String 또는 Number 로 타입을 변환하는 작업을 추가했다. const makeParamBy..

기존에 이렇게 정의되어있었다.const isExistTargetId = (target: Customer | Course, selectedTargets: Customer[] | Course[]) => { const found = Array.prototype.find.call( selectedTargets, (selectedTarget: Customer | Course) => selectedTarget.id === target.id, ); return !!found?.id; }; Array 함수를 이용하는데 call 을 사용한 이유는  다음과 같이 This expression is not callable 이라는 에러가 발생했기 때문이다.분명히 sele..

vue2-google-map을 사용할 때 map에서 제공하는 함수들을 사용하는 방법 this.$refs.gmap.$mapPromise.then((map) => { map.setZoom(18) }) 이 promise 에서 map에 담아주는 객체는 google.maps.Map 에서 제공하는 객체이므로 이 객체를 google map api 문서 (https://developers.google.com/maps/documentation/javascript/reference/map) 에 써져있는 그대로 사용할 수 있다. * 기본세팅방법 import vue2-google-maps import Vue from "vue"; import * as VueGoogleMaps from 'vue2-google-maps'; imp..