본문 바로가기

국비과정/Vue

(18)
20231016 _[90일차]_01. 기업 교육(4일차) 오늘 할 거 1. GIT / GITHUB 2. Morpheus 프로젝트 아이콘 적용 3. Vue 3 4. 이미지 업로드 모피어스 $ touch text.txt => text.txt 파일생성 깃헙에서 새로운 repository (git-study)만들어주고 연결해서 파일을 올려준다. 위처럼 충돌이 나면 pull 하고 다시 push를 하면 된다. reset 은 말그대로 리셋 revert 는 새로운 commit을 만들면서 되돌아가는거. git undo => push 전에 commit했던걸 되돌릴수 있음. git stash => 작업이 다시 초기화되면서 메모리영역에 저장. () git pull origin main 으로 충돌 잡아주고 git stash pop => 메모리 영역에 저장된게 다시 꺼내진다. 이때 발..
20231011 _[87일차]_01. 기업 교육(1일차) 클라이언트가 도메인 주소를 브라우저에 입력 => ip주소를 찾아서 server에 접속 dns 서버에 질의 (window에 이 dns를 질의하기 위한 프로그램이 설치되어 있다.) host 파일에 매핑되는 도메인이 있다면 그 ip주소를 server에 요청하게 된다. (이때 고유한 식별이 필요) 컴퓨터의 로컬 DNS 서비스에서 사용되는 텍스트 파일로, IP 주소와 호스트 이름(도메인 이름) 간의 매핑 정보를 저장하는데 사용 예를들어 NAVER 들어가려고 한다면 https://www.naver.com/ 검색하게 되는데 위의 도메인주소를 통해 IP주소를 찾아서 서버에 접속해야 한다. 따라서 DNS를 질의합니다. DNS는 도메인 네임 시스템이라고 해서 실제 IP주소가 있는지 찾고요. 1. IP를 호스트파일로 질의합..
20231010 _[86일차]_01. Vue _vuetify 활용 ( pdf 7차 참고 ) Vuetify : Vue에서 사용할 수 있는 Bootstrap 설치부터 하자 vs code 터미널에서 설치명령> npm install --save vuetify   ( pdf에는 npm 대신 vue라고 잘못 써져있다**)Get started with Vuetify 3 — Vuetify (vuetifyjs.com) Get started with Vuetify 3 — VuetifyDetails for v3 release - faq, changes, and upgrading.vuetifyjs.commain.js 에 vuetify import 추가이렇게 하면 err가 난다. import 문 다시 수정. vuetifyjs.com Vuetify — A Vue Component Framewo..
[Vue] Node.js, 렌더링방식 [ Node.js ] JavaScript 런타임 환경으로, 서버 측에서 JavaScript를 실행할 수 있는 환경을 제공. (Java의 JVM처럼) 서버 사이드 렌더링(SSR), API 서버 개발, 파일 업로드, 데이터베이스 연동 등 다양한 서버 측 작업을 수행. * 웹 애플리케이션의 렌더링 방식 * [ 클라이언트 사이드 렌더링 (Client-Side Rendering) ] _ CSR 렌더링 위치: CSR에서는 웹 애플리케이션의 초기 HTML은 비어 있거나 미리 정의된 고정 템플릿을 포함하고 있다. 이후 브라우저에서 JavaScript가 로드되고 실행되면, JavaScript가 동적으로 화면을 생성하고 업데이트. 서버 역할: 서버는 주로 데이터 API를 제공하며, 클라이언트는 이 API를 사용하여 데이터..
[Vue] Router 설치 및 초기설정 Vue.js 프로젝트 생성 터미널 / cmd에서 해당 프로젝트 디렉터리까지 이동 후 router 설치 명령 > npm install vue-router Vs Code에 src 디렉토리 내에 router.js 파일을 생성, 기본적인 Vue Router 설정 // src/router.js import { createRouter, createWebHistory } from 'vue-router'; import indexPage from "@/views/IndexPage.vue" import boardList from "@/views/BoardList.vue" const routes = [ {path: '/', name:'index', component: indexPage}, {path: '/boardList'..
[Vue] v-for 반복문 사용 [ 반복문으로 배열값 출력 ] Hello 배열은 : {{ arr }} 로 출력하고, 배열속성값은 {{ arr[0] }}, {{ arr[1] }} ... 로 출력. export default { name: 'HelloWorld', data(){ return{ arr: [1, 2, 3, 4, 5, 6, 7] }; }, }; 아래처럼 출력된다. Hello {{ arr[n] }} {{ arr[index] }} 아래처럼 출력된다. 배열 index는 0부터지만 v-for 반복문은 1부터 센다. :key 속성 중복되지 않고 고유한 값이어야 하며, 보통은 아이템의 고유한 식별자인 고유한 키 값을 사용 * 위처럼 배열의 index를 :key속성으로 줄 수도 있지만 배열요소가 추가되거나 삭제될 때 문제가 발생할 수 있으므..
[Vue] 문법정리 {{데이터바인딩}} JS데이터를 HTML에 꽂아넣는 문법 데이터바인딩 하는 이유 _ 이걸 왜, 언제쓰냐가 중요** 1. HTML에 하드코딩해놓으면 나중에 변경 어려움 (가변적인 데이터들은 변수화 해두면 좋음) 2. Vue의 실시간 자동 렌더링 기능을 쓰기위해 HTML속성도 데이터바인딩 가능 : 속성="데이터이름" * 단방향 데이터 바인딩 _ 데이터 => UI(사용자 인터페이스) 데이터가 변경되면 UI에 반영되지만 UI에서의 변경은 데이터에 반영되지 않는다. 따라서, 주로 데이터를 읽고 표시할 때 사용 ( v-text ) * 양방향 데이터 바인딩 _ 데이터 => UI(사용자 인터페이스) 데이터의 변경은 UI에 반영되고, UI에서의 변경은 데이터에도 반영된다. 따라서, 사용자 입력을 받거나 사용자가 UI를 ..
20231006 _[85일차]_01. Vue _ 로그인 이어서 아이디 & 패스워드 입력 유효성검사 해보자. LoginPage.vue에 div 추가하고 data에서는 각각 idInputCheck 와 pwInputCheck 를 거짓으로 설정해줬다. data와 methods 사이에 watch {} 를 넣어준다. // Vue 인스턴스의 데이터 변경을 관찰 / 반응 watch:{ userId(){ this.idInputCheck = true; } }, userId는 아래처럼 input창에서 v-model로 지정해줬었다 아이디 입력창에 값을 입력하면 idIInputCheck가 true가 되면서 지정한 문구(div)가 뜬다. 비밀번호도 4글자 이하면 문구가 뜨도록 설정해준다. watch:{ userId(){ this.idInputCheck = true; }, userPasswo..