FE

도메인 설정 (내도메인한국)https://xn--220b31d95hq8o.xn--3e0b707e/ 내도메인.한국 - 한글 무료 도메인 등록센터한글 무료 도메인 내도메인.한국, 웹포워딩, DNS 등 무료 도메인 기능 제공xn--220b31d95hq8o.xn--3e0b707e  등록하고 싶은 도메인을 검색해서 확인 후, 등록 가능한 도메인을 확인하고맘에 드는 도메인 오른쪽에 등록하기 클릭  고급 설정 (DNS) 부분에서IP 연결 체크 후 앞에 www를 입력해주고, 뒤에 서버의 IP 주소를 입력해준다.  등록한 도메인 주소로 들어가면 이전에 배포한 nginx가 뜨는 걸 확인할 수 있다.SSL 설정 (ZeroSSL)SSL이란?인터넷 상에서 데이터를 암호화하여 안전하게 전송하기 위한 프로토콜웹사이트와 사용자 간의..

dist 폴더 만들기(npm run build)npm run build   명령어 실행하면 dist 폴더가 만들어진다.윈도우에서 Ubuntu로 파일 옮기기 (Termius) ternius에서 SFTP 탭 클릭Select Host에 IP 주소를 입력해서 선택한다.  그럼 이렇게 폴더들이 보이는 걸 확인할 수 있음  윈도우 파일 탐색기를 열어서 dist 폴더 안에 파일들을 드래그 앤 드랍으로 다 옮겨준다. 서버 접속 후 root 계정으로 로그인 한 다음,/home/ubuntu 에서 확인해보면 파일들이 들어와있는 걸 확인할 수 있다. 여기서 mv 명령어로 파일 /var/www/html 로 옮겨주기mv assets /var/www/htmlmv index.html /var/www/htmlmv vite.svg /v..

AWS 인스턴스 생성오른쪽 상단에 국가를 '서울'로 바꿔야 한다. 안 바꾸면 과금 될 수도 있으니 조심 ..! 검색 탭에 EC2를 검색해서 선택한다.  클릭해서 들어가면 대시보드가 뜨는데, 여기서 인스턴스 클릭   인스턴스 탭에서 오른쪽 위에 인스턴스 시작    인스턴스 이름을 입력해준다.  애플리케이션 및 OS 이미지애플리케이션 및 OS 이미지 에서 우분투로 할 거니까 ubuntu 선택해주기지금까지 우분투 버전을 22.04 버전으로 했으니까 똑같이 Ubuntu Server 22.04 선택아키텍처는 64비트(x86) 를 선택해준다.   키 페어 생성키 페어 (로그인) 이게 중요한데, 여기서 발급 받은 키 페어로 서버에 연결하는 것!오른쪽에 새 키 페어 생성을 눌러준다.  키 페어 생성에서키 페어 이름을 ..

로그인 방식세션 로그인 방식백엔드 서버에 로그인했다는 정보를 저장토큰 로그인 방식클라이언트에 로그인했다는 정보를 저장 로그인 여부 확인 방법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 insatll 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" ..