개발 공부하는 빙빙

https://opentutorials.org/course/3347/21185 Node.js MySQL 모듈의 기본 사용방법 - 생활코딩 수업소개 Node.js의 MySQL 모듈의 기본적인 사용방법을 알아봅니다. Node.js MySQL 모듈 바로가기 npm install -S mysql 강의 소스코드 nodejs/mysql.js var mysql = require('mysql'); // 비밀번호는 별도의 파일로 분리 opentutorials.org 생활코딩님 강의를 참고 하였다. npm install -save mysql 하고 connection을 하기 위해 mysql에 올라간 데이터베이스 정보(host,user,password,database)를 넣어주면 된다. var mysql = require('..

https://vuejsexamples.com/a-powerful-and-flexible-slider-and-carousel-for-vue-js/ A powerful and flexible slider and carousel for vue.js Vue Splide is the Splide component for Vue. vuejsexamples.com 이 사이트에서 option여러개 넣고 빼고 하면서 내가 원하는 슬라이드를 만들 수 있다! 사진 세개가 자동으로 슬라이드 되는거 만들었따! 결과화면 캡쳐본

https://v3.ko.vuejs.org/guide/migration/introduction.html 1.views 디렉토리는 src/ 하위 였는데 router/하위로 바뀜 layout/디렉토리가 별도로 존재한다 2.Teleport : DOM에서 HTML조각을 렌더링할 부모 엘리먼트를 제어할 수 있는 깔끔한 방법 제공. 모달버튼을 태그로 텔레포트해라 라는 식으로 렌더링 가능 3.태그 안에는 로 감싸야만 했는데 안해도된다. 하지만, 개발자가 속성을 상속해야하는 위치를 명시적으로 정의해야함 시작하기 | Vue.js 시작하기 INFO Vue.js의 새로운 기능에 대한 정보가 필요하신가요? 그렇다면 필수가이드를 확인하세요. 이번 가이드는 Vue 2 경험이 있으면서, Vue 3 변경사항 및 새로운 기능을 배우고..

DOM : 문서 객체 모델 XML이나 HTML의 문서에 접근하기 위한 일종의 인터페이스. 표준화된 접근/조작 방법을 제공한다. 돔은 html 트리와 같은 구조화된 형태로 js가 실행되어질 수 있는 환경 1. Core DOM : 모든 문서 타입을 위한 DOM 모델 2. HTML DOM : HTML 문서를 위한 DOM 모델 3. XML DOM : XML 문서를 위한 DOM 모델 Vue, React를 사용하면 속도 개선을 위한 Virtual DOM 방식으로 DOM을 제어하게 된다. Virtual DOM -> 변경된 부분만을 가상돔에서 가려내어 모든 DOM제어 이후 최종적으로 DOM에서 한 번만 렌더링을 수행하는 방법 원래 돔은 파싱,페이팅,렌더링 같은 작업을 업데이트가 20번 일어나면 해당 작업을 20번 반복..

CORS 교차 출처 자원 공유(동일출처: 프로토콜/호스트/포트) 추가적인 HTTP header를 이용하여 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS header를 포함한 응답을 반환 SOP(Single-origin policy) 동일 출처 정책(포트와 호스트가 모두 같아야 동일) 잠재적으로 해로울 수 있는 문서를 분리 -> 공격받을 수 있는 경로를 줄임

브라우저의 로컬 스토리지에 힘을 빌려서 저장이 됨 (유효기간은 1년정도?) 명령어 npm i vuex-persistedstate 등록을 해줘야 할 플러그인 index.js에 안에 작성해주기 import createPersistedState from "vuex-persistedstate" Vuex.Store 안에 작성해줄 것 export default new Vuex.Store({ plugins:[ createPersistedState(), ],

Emit & Props 각 컴포넌트는 개별적으로 데이터를 관리해야한다. 데이터는 단방향 흐름, 자식간에만 전달이 가능 장점: 데이터의 흐름이 직관적임 단점: 컴포넌트의 중첩이 많아질 경우 로직이 복잡,불편해짐 Vuex 프로젝트 규모가 커질 때 자연스럽게 사용한다. 상태관리 패턴 + 라이브러리 상태를 전역에서 관리하도록 하는 라이브러리 모든 컴포넌트에 대한 중앙 집중식 저장소 역할-> 규모가 큰 프로젝트에(컴포넌트 중첩이 많은) 좋음 Mutations가 State를 변경 시킨다 Vuex의 구성요소 State : 데이터의 역할.어플리케이션마다 하나의 저장소를 관리(data), State에 접근하는 방삭 : this.$store.state.data_name Actions : computed와 같은 역할. St..

Router라우터: 길을 만들어 주는 애 index.js 파일에 정의한 경로에 특정한 컴포넌트와 매핑 SPA등장 이후에 모든 요청에 대한 처리는 서버가 하지 않고 HTML 위에서 자바스크립트 코드를 활용해 진행된다. 서버는 index.html만 제공한다. Vue로 개발하는 SPA의 단점은 페이지의 이동이 없다라는 점을 개선하기위해 url는 바뀌지만 페이지는 실제로 이동하지 않는 방법. 브라우저의 history api를 이용하여 라우터가 동작을 한다. 명령어 vue add router

SFC( Single File Component) vue의 컴포넌트 기반 개발의 핵심 특징 화면의 특정 영역에 대한 여러 코드를 하나의 파일(.vue)에서 관리 component: 재사용 가능한 코드를 캡슐화 하는데 도움을 줌 Vue 인스턴스 === Vue 컴포넌트 Vue CLI를 사용하기 위해서 Node.js설치가 필요하다. Node.js: 자바스크립트를 브라우저에서만 사용하는게 아닌 SSR에서도 사용 가능하도록 함 python 에서 pip가 있다면 node.js에서는 NPM. 다양한 패키지 관리자. 명령어 설치 공식문서 https://cli.vuejs.org/guide/installation.html npm install -g @vue/cli 프로젝트 이름이 my-first-vue-app일 때 npm..