# nuxt3
.png)
nuxt3, aws s3 signedURL
기존 프로젝트에서 aws s3에 이미지 업로드 방식을 aws lambda 방식을 사용하고 있었어요큰 이미지를 업로드 하거나 영상을 업로드 할때 413 payload too large 에러가 발생 해서 다른 방식을 찾던중 s3 signed URL 방식을 찾게 되었습니다.
nuxt3+vuetify 세팅
1-1. npx nuxi init 워킹스페이스 폴더명1-2. nuxt.config.ts -> nuxt.config.js로 확장자 변경1-3. npm uninstall --save-dev @nuxt/typescript-build2\.
Nuxt에서 Jest 설정 및 사용해 보기
nuxt프로젝트를 cli로 만들때 단위테스트를 선택하는 부분이 있는데 선택하면 자동으로 설치해줍니다.저는 프로젝트 생성시에 선택하지 않아서 수동으로 설치해 줬습니다.Nuxt프로젝트 생성수동으로 선택해서 프로젝트 생성시npm init nuxt-app 기본설정으로 프로젝트
[Nuxt3] API Key 없이 iframe으로 구글 지도 넣기
frameborder: 테두리 없애기!!!!!scrolling: no로 설정하여 쓸데없는 스크롤 없애기margin: 말 그대로 여백의 미src: 구글 지도에 좌표 찍으면 나오는데 대충 위도 경도 기타 등등이 들어있어요.구글 행님이 도움을 주면 다 가능하다아아구글 지도에
[Nuxt3] 정보를 담아두는 meta 태그(타이틀, 링크 썸네일 등)
meta는 Most Effective Tactics Available의 약자문서 정보인 메타데이터를 정의HTML에서는 항상 <head> 태그 안에 있어야 함name 혹은 http-equiv 속성이 있으면 content도 필수문자 인코딩 방식 정의UTF-8 이라고
[Nuxt3] pinia 변수들을 동적으로 만드는 storeToRefs
그냥 useStore()로 선언 시 첫 값만 가지고 옴stroeToRefs로 선언해야 vue에서 ref로 선언한 변수처럼 동적으로 작동store에서 변수는 storeToRefs로 선언하자!
[Nuxt3] defineProps에서 PropType으로 타입 지정해주기
type에서는 기존과 다르게 타입도 꼭 대문자로 시작해야함string, array로 쓰면 오류남...외부에서 받아온 interface를 직접 넣어도 오류남...default 안 써주면 노란줄 찍찍 그어서 경고 떠서 꼭 넣어주는데 여기에 as로 타입을 단언해줄 수 있음
[Nuxt3] 안 보이는 라이브러리 코드 전역 CSS로 스타일링 해보자!
tiptap 라이브러리를 이용해 글쓰기 창을 만들었는데 맘에 안 드는 굵직한 선이 보였다.더군다나 처음 글 쓸 때 글쓰기 창이 아닌 꼭 첫 줄을 클릭해야 커서가 찍히더라....스타일을 바꾸고 싶은데 코드에선 도저히 안 보인다고?개발자 도구를 이용합시다요!!코드에서 보이
eslint, prettier, tailwindcss Install guide for Nuxt3 release
nuxt3Nuxt3 정식 릴리즈 버전으로 typescript를 사용하고, eslint, prettier 등 개발에 필요한 모듈들과 VueJS, NuxtJS 개발에 필요한 기타 필수 요소 모듈들 적용해봅니다.node.js v16.16.0 (v16)npx를 설치합니다.np
[Nuxt3] 파일 업로드를 위한 FormData 작성 & URL.createObjectURL을 이용해 이미지 파일 미리보기
input의 type만 설정하면 되는 줄 알았는데 formData로 보내줘야함file 변수에 올린 파일들 미리 담아둠submit 버튼 눌렀을 때 new FormData 생성formData.append('이름', 값)으로 formData 값 설정다 담았으면 axios.p
[Nuxt3] route와 router / router.replace로 기록 남기지 않고 리다이렉트
슬래시(/) 뒷 부부분의 고유값들을 받음물음표(?) 뒷 부분의 값들을 받아옴쿼리는 url에서 &로 구분괄호 안에 url 그대로 삽입 가능중괄호 안에 path, params, query 구분해서 설정 가능push는 기록을 남기고 리다이렉트 / replace는 기록을 남기
[Nuxt3] defineProps의 type 및 default 설정(as, return 이용)
타입에 interface 형식 넣으니까 값으로 보는 거 실화인가...?그럼 props로 받은 객체 어쩔 거임~소문자로 적으면 값으로 인식해서 에러 니킥!배열이면 Array, 객체면 Object 그 외 기타 등등위 사진처럼 바로 오류 엘보우!!!!정 쓰고 싶으면 defa
[Nuxt3] defineExpose로 부모 컴포넌트로 함수 전달
자식 컴포넌트에서 만든 함수를 부모 컴포넌트에서 실행 가능ref로 선언한 변수도 부모 컴포넌트에서 변경 가능!!아니 이러면 완전 emit이 필요 없는 거 아니냐고\~\~~emit이 부모 컴포넌트의 변수에 할당해준다면 defineExpose는 자식 컴포넌트의 변수나 함수
[Nuxt3] defineEmits를 이용하여 부모 컴포넌트로 변경된 값 보내기(emit)
자식 컴포넌트에서 부모 컴포넌트로 값을 전달props의 반대 개념이라고 생각하면 편함emit 변수에 넘길 값들 선언기존 define들과 다르게 ({ })이 아닌 <{ }>( ) 으로 선언 후 즉시실행 함수처럼 괄호를 추가매개변수e: 부모 컴포넌트에서 @를 이용해
docker-compose, ELB를 활용한 Nuxt3 배포
Nuxt3 설치Nuxt3 설치$ npx nuxi init nuxt3-docker-app$ cd nuxt3-docker-app$ npm installNginx Proxy 폴더 및 파일을 생성합니다/docker/nginx-proxy/docker-compose.yml/do
Nuxt3 정리
삽질 끝Nuxt3 빌드 산출물은 Client + Server 폴더로 나뉜다페이지 진입 시 Server side에서 Rendering을 완료하여 브라우저로 내려주고, (Pre-redering) 이후 해당 페이지를 조작할 수 있는 JS Bundle을 추가로 내려준다 (Hy
