* 백엔드 배포하기 이전글 이어보기🥲 : https://msweb.tistory.com/entry/nuxtjs connect ECONNREFUSED 127.0.0.1:3000 에러가 난다. 서버에 사용한 api가 로컬에 있기 때문에 에러가 남 1. 로컬에 있는 api를 원격에 등록 1) 별도의 데이터베이스가 담긴 json 파일을 만든다. 2) json 파일만 모아둔 레파지토리 생성 후 1번을 푸쉬한다. 3) https://my-json-server.typicode.com/[깃허브아이디]/[2번이 담긴 레파지토리주소] 를 접속하면 json 형태로 주소가 접속된다. 예) https://my-json-server.typicode.com/miseon920/json-api 😉현업에서는 Swagger ui 많이 사..
#nuxt.js 뷰 서버사이드 랜더링을 구현할 때 가장 많이 쓰는 프레임워크 SEO 전달 서버 사이드 렌더링이란 웹 페이지의 내용을 서버에서 모두 작성해서 클라이언트(브라우저)로 보낸 뒤 화면에 그리는 방식을 의미 쓰는이유 : 검색 엔진 최적화,빠른 페이지 렌더링 ssr이 무조건 좋은건가? 서버쪽에서 환경 구성이 되므로 서버빌드에 대한 이해도가 필요하다 node.js 환경에서 실행 되므로 브라우저 관련 api 다룰 시 주의 해야한다. 또한 beforeCreate나 created에서 window, document같은 브라우저 객체에 접근할 수 없다. 😉컴포넌트가 최초로 생성되는 시점이 브라우저 아니라 Node.js 환경이기 때문에 beforeCreate나 created에서 브라우저 객체를 접근할 수 없습니..
# Helper함수(헬퍼) 1. state -> mapState 2. getters -> mapGetters 3. mutations -> mapMutations 4. actions -> mapActions > vuex에 있는 헬퍼를 로딩 1) 따로 js파일(게터나 뮤테이션만 모아둔 js파일)로 만든 후 export한다. - 나의 경우 "./getters" 으로 만들었으나 하나의 js 파일로 만들어도 된다. const getTotalNum = (state) => { return state.todoItems.length; }; const getTrueNum = (state) => { //인자는 state const trueItem = state.todoItems.filter((item) => item.com..
#(--variable) /* 전역 변수 설정 --변수명:값 */ /* 변수의 element 적용 var(변수명) */ // 인라인 스타일 변수 확인 document.documentElement.style.getPropertyValue("변수명"); // 글로벌로 변수 확인 getComputedStyle(document.documentElement).getPropertyValue("변수명"); // 인라인 스타일에 변수 설정 document.documentElement.style.setProperty("변수명", "변수속성"); 🙄위를 응용하여 만든 셀렉트 값에 따른 박스 높이 조정 See the Pen css 변수를 자바스크립트로 제어 by dev_Sunny (@sunny_dev) on CodePen...
Vuex - 상태관리 라이브러리 컴포넌트를 효율적으로 관리하는 라이브러리 주요속성 : state, getters, mutations, actions 🙌 1. state = data : 컴포넌트 간에 공유하는 데이터 또는 상태 2. getters = computed : 연산된 state 값을 접근하는 속성 / 캐싱하는 속성도 있음 3. mutations = method : state값을 변경하는 이벤트 로직, 메서드 / 인자가 있다면 getters보다 muations 사용을 권장 👀state를 직접변경하지 않고 뮤테이션을 변경하는 이유 : state를 직접변경하면 어느 컴포넌트에서 해당 state를 변경했는지 추적하기 어렵기 때문에 commit을 이용하여 뮤테이션을 변경함(반응성, 디버깅, 테스팅혜택) a..
#트랜지션 모달창을 만들다가 트랜지션을 배웠다. 여태껏 자스나 제이쿼리로 짜던걸 vue는 아주쉽게 트랜지션 클래스라는 것을 제공한다 마치 aos 플러그인 마냥 클래스를 꽂아주고 그에 따른 효과만 집어 넣으면 된다. 그렇다고 aos 플러그인 처럼 효과가 정해져 있는 것은 아니다. 본인이 css 애니메이션을 만들면 된다. 1.단일로 쓰일경우 Toggle hello 트랜지션이 필요한 부분을 감싼 후 name을 준다. 그리고 전환클래스를 붙여서 css를 작성하면 끝이다. (아래코드에서 name으로 들어간 fade를 빼면 그뒤에 부분이 트랜지션클래스이다.) .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-l..
#slot 슬롯을 사용하면 등록한 컴포넌트에서 재정의가 가능 (컴포넌트 안에서 ui부분을 재사용하기 위해서 조각낸 부분이라고 이해하면 쉬움) = 컴포넌트 템플릿의 재사용성을 늘려주기 위한 기능 대표적인 예로 모달이나 버튼 등에 사용된다. 1.정의하기 - 버튼이나 모달 뭐든 좋다.(기본레이아웃 이라고 생각하고 만들면 편하다.) default header default body default footer // slot name="body 하고 등록한 후 그안에 들어가는 내용은 디폴트내용이 된다. 2.사용하기 경고! 할일을 입력 해 주세요 by.Sunny 이것을 필요한 부분에 불러와서 import하여 사용한다 그 안에 들어가는 내용은 본인이 작업하는 ui에 맞게 변경가능하다(태그도, 텍스트, 이미지 무엇이든지..
#투두리스트 만들기 1.npm install -g @vue/cli (해당프로젝트는 vue2) 2.vue create 프로젝트명 $ cd vue-todo $ npm run serve 4.컴포넌트 만들기 - 파스칼케이스법으로 작성 - 첫단어는 대문자로 시작 5.컴포넌트 등록하기 - App.vue 6.public - index.html 에 뷰포트, 파피콘 등 메타태그와 필요한 font, icon 등록하기 - cdn 이용 1 : https://www.favicon-generator.org/ - 파비콘만들기 2 : https://fonts.google.com/ - 구글 웹폰트(요즘은 눈누도 많이씀!) 3 : https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_..
import _ from 'lodash'; //https://lodash.com/ //https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-lodash-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90 export const getHashPage = (hash: string, pages: string[], def: string): string => { let page = def; if (hash && hash.length > 0) { let check = hash.substr(1); if (_.indexOf(pages, check) != -1) { page = check; } } return page; } export default class..
1.피니아 Pinia는 Vue용 저장소 라이브러리로 구성 요소/페이지 간에 상태를 공유할 수 있다. 1)스토어 정의 import { defineStore } from 'pinia' export const useapiStore = defineStore('api', { //use스토어이름Store로 묶는것이 좋음 , 첫번째 인자인 api는 스토어의 고유 id //두번째 인자는 옵션을 사용할 수 있음, Composition API 의 setup과 유사한 방식의 스토어 정의 방법 state, getters, actions // any amount of arguments, return a promise or not return{ //위에 정의한 state, getters, actions 를 리턴하여 사용할 수 있..
