전체 글 검색 결과
456 개의 검색 결과가 있습니다.
내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

Nuxt 4 출시

nuxt-create-app 으로 새 프로젝트를 생성하는데, 4.0.3이 설치가 됐다.`npm run dev` 로 첫화면 띄워 보고서야 알았다. nuxt 4 부터는 디렉토리 구조가 변경됐다.components, composables, pages, layouts, middleware, plugins, utils 등등이 app/ 하위 디렉토리로 이동되었다.감사하게도 자동 마이그레이션 도구를 제공하긴 한다. $ npx nuxt upgrade# 또는$ npm install nuxt@^4.0.0# 이 구문을 실행하면 몇가지 질문과 함께 디렉토리들을 app/ 내부로 자동 이동 시켜준다.$ npx codemod@latest nuxt/4/migration-recipe pinia를 사용중이라면 nuxt 4에 맞는 버전으..

2025. 8. 12. 17:55
Online Emulation

Street Fighter 2 Macig

"> 승룡권=8파동

2025. 7. 2. 13:03
내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

vue3 + vite: 기본으로 잡혀야 할 태그 간 여백이 사라질 때

button 태그 등은 기본적으로 여러개가 배치되면 각 요소 사이에 여백이 생성되도록 되어있다.vite의 plugin-vue 에서는 이런 부분을 강제로 억제하는 설정이 기본으로 되어있다.bootstrap 템플릿을 다운받아 사용할 때면 한줄 배치된 버튼들이 다닥다닥 붙어 나오는 것은 이런 이유이다.이런 경우 vite의 vue 플러그인 옵션을 수정하여 해결할 수 있다.//beforeplugins: [vue()]//afterplugins: [ vue({ template: { compilerOptions: { whitespace: 'preserve', }, }, }),]

2024. 10. 8. 15:33
내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

vue3 typescript composition api 전역 함수 만들기

가장 단순하게 사용할 수 있는 console.log() 메서드를 $sendConsole() 이라는 이름으로 래핑해본다. helpers.tsimport type {App} from 'vue';const helpers = { $sendConsole(msg: string): void { console.log(msg); }};declare module '@vue/runtime-core' { interface ComponentCustomProperties { $sendConsole: (msg: string) => void; }}export default { install(Vue: App) { Vue.config.globlaProperties.$sendConsole = helpers..

2024. 5. 29. 15:06
마지막 업뎃이 언제였는지 기억 안나는 사진 이야기/Travel

하노이 6/8일차

퍼 지아 쭈웬 https://maps.app.goo.gl/LPk2bW99qBygUXDw8 하노이 구시가지에는 아침, 저녁에만 영업하는 쌀국수집이 있다. 이곳은 06~10, 18~20:30 동안에만 운영된다기에 일어나자마자 눈꼽만 떼고 달려가봤다. 그리 늦지 않은 시간임에도 가게는 현지인들로 북적대고 있었다. 음식도 직접 가져가야하고 자리도 알아서 찾아야 한다. 영어가 안통해서 눈치코치로 주문과 지불을 하고 현지인들 틈에 줄을 서 간간히 들려오는 한국어를 들으며 기다리다보니 어느새 차례가 왔다. 손이 빠른 주인아저씨가 뜨끈하게 삶아진 고기를 눈앞에서 직접 썰어 쌀국수에 얹어 내주었다. 빈 자리가 없어서 다른 테이블에 꼽사리 껴서 앉을수밖에 없었다. 이곳은 다행히 고향의 맛은 아니었다. 다만 전반적으로 단맛..

2024. 5. 8. 00:39
내가 자꾸 까먹어서 쓰는 개발 이야기/Vue.js

Vue 3 Composition API: route 가드 설정 전 인증 체크하기

상황은 이렇다. Laravel의 sanctum을 통해 토큰을 받는 인증 방식을 채택Pinia 스토어를 통해 인증 상태를 저장저장된 인증 상태를 확인하는 route guard 사용먼저 main.ts 에서 앱에 route가 주입되기 전에 인증 상태를 확인해야 한다.axios의 then 내부에서 app.use(router); 를 시도하니 오류가 발생했다.따라서 axios를 async로 호출하여 강제로 토큰 확인이 완료된 후에 진행되도록 했다.const authenticated = async (): Promise => { try { return axios.get('/user/me'); } catch (e) { return undefined; }};const auth: AxiosResponse |..

2024. 4. 26. 10:54