FE

vue vite로 구현하고 배포했는데 이미지 파일이 쿠버네티스 환경에 올라가지 않는 에러 발생증상src 폴더에 파일은 있다. 이 파일을 코드에서 사용 중이다. 근데 배포 환경에 올리면 이미지가 배포 환경에 업로드되지 않는다. 아래 사진처럼 이미지 로드되지 않음 ㅠㅠ 쿠버네티스 파드에서 ls 명령어로 확인해봐도 나오지 않는다. 원인Vite는 기본적으로 JS/TS/CSS에서 참조된 static 파일만 빌드 결과물에 포함한다.그러나 아래처럼 JS 코드가 아닌 :style="..." 내부에서 문자열 조합으로 URL을 만들면, Vite는 이 파일을 사용한다고 판단하지 못하고 무시해버린다. 즉, 이 default_profile.png는 "정적 리소스로 인식되지 않음". 해결 방법public 폴더에 ..

로그인 방식세션 로그인 방식백엔드 서버에 로그인했다는 정보를 저장토큰 로그인 방식클라이언트에 로그인했다는 정보를 저장 로그인 여부 확인 방법1. 서버로 쿠키를 주고 받는다. (백엔드를 통해서 확인)장점: 클라이언트가 조작하기 어려움단점: 백엔드 부하 증가 2. 웹 브라우저에서 HttpOnly가 아닌 일반 쿠키 또는 스토리지에 로그인 했다는 정보를 저장한다.장점: 백엔드에게 물어보지 않아도 바로 로그인 여부 확인 가능, 백엔드 부하 감소단점: 클라이언트가 조작하기 어려움 Vue Router 접근 권한 설정라우터 파일을 통해 접근 권한을 설정한다.접근 권한을 설정하고 싶은 경로에 beforeEnter: 함수 를 넣어준다. { path: "/a", component: A, beforeEnter: checkLo..

Postman - Mock Server 사용법Mock 데이터를 받아와서 프론트엔드 통신 테스트 할 때 사용 1. Create workspace서버를 만들어줄 workspace를 만든다. 2. workspace 이름 지정 후 접근 권한 설정 -> Create일단 나만 쓸 거라서 Only me로 했다.  3. 사이드바에 Mock Server 등록왼쪽 맨 아래 버튼 누르기 ->  Mock servers 토글 켜기  4. Mock Server 만들기Mock servers 클릭 -> Create mock server   Request URL에 데이터를 받아올 주소 입력 -> Next  Mock Server 이름 지정 후 Create Mock Server  5. request - example 생성Collectio..

Pinia상태 관리 라이브러리https://pinia.vuejs.kr/ Pinia | The intuitive store for Vue.jsIntuitive, type safe, light and flexible Store for Vuepinia.vuejs.org  여러 컴포넌트에서 동일한 값을 가져다 써야 할 때 필요한 곳에서 import를 해서 쓴다. 여러 곳에서 많이 쓴다면 상태를 쓰는 컴포넌트마다 import를 해줘야 하기 때문에보통 main.js에서 import 한 후 사용한다. Pinia 설치npm install pinia  Pinia 사용import { createPinia } from "pinia";const pinia = createPinia(); main.jsimport { create..

Props부모가 자식한테 넘겨주는 데이터Emit자식이 부모한테 넘겨주는 데이터 PropsdefineProps 를 사용해서 자식 컴포넌트와 데이터를 주고 받는다. App.vue   Parents.vue 부모 컴포넌트 부모가 작성한 메시지: {{ toChild }}   Child.vue 자식 컴포넌트 부모로부터 받은 메시지: {{ message }}    반복문을 통해 데이터 전달Parents.vue 부모 컴포넌트   Child.vue 자식 컴포넌트 {{ product.name }} {{ product.price }}  EmitdefineEmits 를 통해 데이터를 주고 받는다. Parents.vue 부모 컴포넌트 자식에게 전달받은 메시지: {{ fromChild }} ..

ref, reactive?와 연동되어 JS의 값이 바뀌면 바로 에서 보여지는 내용도 바뀌는 변수= 데이터 바인딩 (JS 코드와 HTML 태그를 연결해주는 것) ref : 숫자나 문자열 같은 기본형 변수reactive : 객체나 배열 같은 참조형 변수 ref 기본 타입의 값을 이용해  반응성을 가진 데이터를 생성할 때 사용 ref 변수 생성import { ref } from 'vue';const message = ref('안녕하세요');const x = ref(10);  ref 값 변경값을 변경하는 함수를 만들어준다.const x = ref(10);const changeValue = () => { x.value = x.value + 1;} 버튼을 클릭 시 함수가 실행될 수 있게 등록해준다. {{ mess..

Vue Router란?https://router.vuejs.org/ Vue Router | The official Router for Vue.jsThe official Router for Vue.jsrouter.vuejs.org vue.js 공식 라우터 라이브러리SPA를 손쉽게 만들 수 있도록 도와준다. Vue Router가 제공하는 기능컴포넌트 기반의 라우팅을 구현할 수 있다.Vue.js의 전환 효과(Transition)를 적용할 수 있다.Vue Router 사용vue router 설치npm install vue-router@4  router js 파일 생성src > router 폴더 생성 > index.js 파일 생성 routes 배열 안에 원하는 경로와 해당 경로에 띄울 컴포넌트를 넣어준다.// r..

자주 사용하는 snippet을 설정하기 위해 검색해서 찾아보았다. 1. 사용할 템플릿 만들기script를 위로 올려서 사용할 것이기 때문에 script를 위로 올렸다.   2. vue.json 수정Ctrl + Shift + P 로 명령창을 열어서 Code Snippet 검색 Configure Snippets 선택 후 vue 검색 후 엔터 위에서 만든 템플릿을 문자열로 변환해야 한다.개행은 \n, 탭은 \t를 넣어준다.\n\n\n\t\n\n\n{ "vue-init": { "prefix": "vue-init", "body": [ "\n\n\n\t\n\n\n" ], "description": "vue.js init snippet" ..

Vue.js란?웹 페이지를 만들기 위한 자바스크립트 기반 프론트엔드 프레임워크React의 가상 DOM을 활용한 성능 최적화의 장점과 Angular의 데이터 바인딩을 쉽게 처리할 수 있는 템플릿 기능의 장점을 따온 프레임워크Vue.js의 특징선언적 렌더링(Declarative Rendering)Vue는 표준 HTML을 템플릿 문법으로 확장하여 JS 상태(State)를 기반으로 화면에 출력될 HTML 을 선언적으로 확장할 수 있다.반응성Vue는 JS 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행가상 DOM이란?일반적인 DOM 하나의 태그를 변경하는 경우 브라우저는 parsing -> style -> layout -> paint -> composite의..

웹 브라우저에서 알림 기능을 지원하는지 확인if('Notification' in window) { console.log('지원함');} else { console.log('지원 안 함함')}알림 권한 요청// 알림 기능을 브라우저에서 지원하면, 권한을 요청Notification.requestPermission().then(permission => {console.log(permission);}) 알림 띄우기버튼 알림 내용 수정 (이미지 띄우기)const noti = document.querySelector('#noti');noti.addEventListener('click', () => { console.log('실행'); const notification = new Notification('제목..