도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요 상훈입니다. ✔ 목표 Nuxt.js 3 - Vue.js3 에서 routing 하기 (페이지 전환) ✔ 환경 Nuxt.js3, Vue.js3 ✔ 하는방법(결론) - 결론부터 말하기 // app.vue Main Login Register /app.vue (루트 경로) 에서 NuxtLink와 NuxtPage를 사용하기. // /pages/index.vue this is index view from pages /pages/index.vue 라는 파일이 있을 때 app.vue의 NuxtPage 가 /pages/index.vue 가 되는 것 입니다. ✔ Vue.js3 와 Nuxt.js 의 차이점 일반 Vue 프로젝트에서..

FrontEnd/Vue.js 2023. 1. 12. 23:24

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다. 안녕하세요 상훈입니다. Vue.js3 composition API (scirpt setup) 에서 버튼(button)을 클릭 시 원하는 링크를 클립보드에 복사가 되게하는 기능을 구현하려고 합니다. (Optional 도 가능합니다! - 문서 참조 부탁드립니다) ✅ 바쁘신 분들을 위한 결과만! npm i vue-clipboard3 1) npm으로 위 vue-clipboard3 를 설치해주세요. 2) 아래의 코드를 사용해주시면 됩니다! 3) 저 자세한건 npm 링크를 남겨놓도록 하겠습니다. 1) reactive value(ref) 로 text 값을 선언 (변경할 수 있게 input으로 v-model 처리 가능) 2) useC..

FrontEnd/Vue.js 2023. 1. 8. 13:32

[2023.01.07 의 기록] 안녕하세요 상훈입니다. ✅ 에러 발생 환경 1) Node.js : 18.13.0 2) Vue.js : @vue/cli 4.5.15 Vue.js3 프로젝트에서 프로젝트를 git에서 pull 받아 npm i 를 통해 package.json 내부 내용을 다운로드 하였을 때 발생한 오류입니다. npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/eslint-config-standard@6.1.0 npm ERR! Found: eslint-plugin-vue@8.7.1 npm ERR! node_modules/eslint-plugin-vue npm ERR! de..

FrontEnd/Vue.js 2023. 1. 7. 20:50

안녕하세요 상훈입니다. Vue.js 혹은 React.js (프론트 프레임워크) 에서 카카오로그인을 구현하려고 합니다. 그런데 401 에러가 자꾸 뜨면서 코드 값을 줬는데도 토큰을 내뱉지 않더라구요. 그래서 찾아보다가 KakaoDeveloper 에서 작성된 내용중에 저와 같은 케이스가 있는지 여러 사례들을 확인할 수 있었습니다. + 어떤 블로그를 보면서 진행하고있었는데, 거기서는 code만 보내는 걸로 해서 계속 나오는 에러였습니다. + axios를 사용하고있었는데, 지속적인 오류가 출력되어 성공하지 못하고 fetch 방식으로 변경하였습니다. ✔ 사전 환경 체크! - Backend(Spring)을 거치지 않고 JS 프론트 프레임워크 (Vue.js, React.js) 에서 전부 처리하려고 합니다. - 현재는..

FrontEnd/Vue.js 2022. 12. 29. 10:53

안녕하세요 상훈입니다. React-Remix 프로젝트에서 개별 css 파일(스타일 적용)을 삽입하는 방법에 대해 포스팅하겠습니다. app ㄴcomponents ㄴNewNote.css ㄴNewNote.jsx ㄴroutes ㄴindex.jsx ㄴnotes.jsx ㄴstyles ㄴhome.css ㄴmain.css 파일 트리가 이렇게 되어져 있을 경우, 1. 기본 형태 2. Surfacing Styles 두 가지를 작성하도록 하겠습니다. 1. 기본 형태 ✔ routes/index.jsx 의 경로에서 스타일(css)을 삽입해보도록 하겠습니다. 2가지만 적용해주시면 됩니다. 1️⃣ import 2️⃣ function declare // 1 import homeStyles from '~/styles/home.css'..

FrontEnd/React.js 2022. 12. 25. 18:32

안녕하세요, 상훈입니다. React.js + remix + typeScript 에서 data를 load 하는 내용을 포스팅 (이라 쓰고 기록을 한다.)을 하도록 하겠습니다. 태그에 관한 내용을 반복문 map을 이용하여 목록으로 표시하려고합니다. 전체적인 설명은 아래 이미지있는 곳에서 하도록하겠습니다. 전체코드1. import type { LoaderFunction } from '@remix-run/node'; import { json } from '@remix-run/node' import { Link, useLoaderData } from '@remix-run/react' import { getLists, getPosts } from "~/models/posts.server" //type 선언 type..

FrontEnd/React.js 2022. 12. 24. 20:05

안녕하세요 상훈입니다. Nuxt 3 (+Vue 3) 와 Tailwindcss, typeScript로 프로젝트 생성시 정상적으로 안되는 경우가 있어 정상구동을 확인한 간단한 기초 내용을 포스팅하려고 합니다. 1) Nuxt.js 3 2) Vue.js 3 3) TailwindCss 4) TypeScript 5) Vue Router 6) Vuex 7) gh-pages 를 기본적으로 사용하려고 합니다. ( *5,6,7 은 선택사항 입니다.) 1. 디렉터리 구조 2. nuxt.config.ts //nuxt.config.ts export default defineNuxtConfig({ css: ["~/assets/css/tailwind.css"], postcss: { plugins: { tailwindcss: {},..

FrontEnd/Vue.js 2022. 12. 8. 09:00

안녕하세요 상훈입니다. Nuxt.js 프로젝트를 생성하고 구동시키려는데, 아래와 같은 오류가 출력되면서 정상동작하지 않았습니다. Error:0308010C:digital envelope routines::unsupported 그래서 확인을 해보니 Node 명령어를 변경하여 처리하라고 작성되어있더군요. 결과는 실패. 그래서 Node.js의 버전 자체를 낮추어 구동시키는 방법이 있다고 합니다. 현재 버전과 바꿀 버전은 아래와 같습니다. 현재는 18.12.1 버전을 사용하고있습니다. (2022-11-11 기준 안정(최신) 버전) 16버전에서만 Nuxt가 정상적으로 돌아간다는 말도 있었거든요. 처음에는 14버전도 깔아서 구동해보니 정상동작하였습니다. 아무튼 16버전으로 깔도록하겠습니다. 아래의 사이트에서 Rel..

FrontEnd 2022. 11. 11. 13:52