Next Dev Gil

일단 시작! 시작이 반!한 사이트에서 프로젝트를 분리하고 Nginx 프록시를 통해 root 경로를 설정하다 보니, 절대 경로로 적용된 assets들이 올바른 경로를 찾지 못하는 문제가 발생했다. 웹사이트 볼륨이 커지면서 assets를 효율적으로 관리하기 위해 CDN을 도입할 필요가 생겼다. 개발 시에는 로컬의 assets들이 /assets/과 /public/을 바라본다신경쓸 부분 없이 잘 나온다.빌드 시 cdn을 바라보게 설정 시작Nuxt 공식문서에 나온 cdnURL 설정 적용https://nuxt.com/docs/api/nuxt-config#cdnurl Nuxt ConfigurationDiscover all the options you can use in your nuxt.config.ts file.n..

/assets/scss 파일 /public/css로 보내기 public폴더의 css, images 파일의 CDN적용을 위한 설정 public/css/ public/images/ 조건 :빌드 시점이 아닌 런타임 시에도 public폴더로 css가 컴파일 되면 좋겠음. npm 설치 sass가 설치되어있지 않으면 설치 npm install --save-dev sass package.json 수정 /* package.json */ "scripts": { // assts/scss 폴더 scss파일을 public/css 폴더 css파일로 "compile-scss": "sass assets/scss:public/css", // assts/scss 폴더 내 변경 감지 watch하기 public/css 로 보내기 "com..

Nuxt3 프로젝트에서 여러 도메인의 api를 호출할 때 설정 /server/middleware/proxy.ts export default defineEventHandler(async (event) => { let target // 요청 URL에 따라 target URL 설정 if (event.req.url?.startsWith('/api')) { //api url: https://api도메인1.com/api/test/apiData target = new URL(event.req.url.replace('/api', ''), 'https://api도메인1.com') } else if (event.req.url?.startsWith('/branapi')) { //api url: https://api도메인2...

Hydration Rendering Modes Universal Rendering definePageMeta navigateTo defineNuxtPlugin plugins/ utils/

Extensions 추천1 Vue, Nuxt, HTML and CSS Vue Language Features (Volar): Recommended for Vue3 and Nuxt3 Prettier - Code formatter Code formatter Stylelint CSS Linting Auto Close Tag Auto closing html tags Auto Rename Tag auto rename closing or opening tag axe Accessibility Linter: Give accessibility feedback right in the editor For CSS framework of your choice UnoCSS: Atomic CSS engine intellisense..

페이스북 - SNS공유하기 - 캐시 삭제 https://developers.facebook.com/tools/debug/ 트위터 - SNS공유하기 - 캐시 삭제 https://cards-dev.twitter.com/validator 라인 - OG이미지 캐시 삭제 https://poker.line.naver.jp/ 카카오 - OG이미지 캐시 삭제 https://developers.kakao.com/tool/debugger/sharing

ESLint와 Prettier ESLint란? 자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다. ESLint는 JavaScript 코드에서 발견된 문제를 식별하고 코드 스타일을 유지하도록 도와주는 오픈 소스 JavaScript 린트 도구이다. 코드를 분석하여 잠재적인 버그, 스타일 가이드 준수 여부, 코드 품질 등을 검사하여 개발자들이 더욱 효율적으로 코드를 작성하고 유지할 수 있도록 도와준다. ESLint는 다양한 규칙을 제공하며, 이러한 규칙을 설정하고 사용자 정의할 수 있어 팀 또는 프로젝트에 맞게 코드 스타일을 조정할 수 있습니다. 또한, 플러그인 시스템을 통해 다양한 환경에서 사용할 수 있도록 확장성을 가지고 있습니다. 보통 개발환경에서 ESLint는 개발자들이 ..

dangerouslySetInnerHTML dangerouslySetInnerHTML- 리액트 공식문서 dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다. function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } 바로..

복습을 위한 강의 키워드 methods - data() mounted() - props -- components v-if v-for $emit $event @input @input="month = $event.target.value" 두개는 같음 v-model="month" watch - 인풋 벨리데이터 lifecycle hook emitter vuex 호출 $store.state.키값 변경해줘 @click="$store.commit('changeName')" - mapState mitt setup(){ onMounted(()=>{ }); } ref([]);

Install package에 node-sass 와 sass-loader를 설치 npm install --save-dev node-sass sass-loader Usage main.js에 scss import - import "./assets/scss/common.scss"; //scss import import { createApp } from 'vue' import App from './App.vue' import mitt from 'mitt' let emitter = mitt(); let app = createApp(App) app.config.globalProperties.emitter = emitter; import store from './store.js' import './registerSe..