잡다한 정보들

클라이언트 사이드 랜더링을 하면 기존 서버사이드에서 사용하던 로그인 형태가 아니라 어떻게 해야할지 의문이었다. 열심히 검색해보고 시도하다보니 기본적인 로그인 구현은 된 것 같아 정리하려 한다. (물론 토큰 방식으로 추후 업데이트가 필요하다.) 1. LoginView.vue 작성 - v-if문을 통해 로그인 상태 별 창을 다르게 뿌려준다. - @submit.prevent를 통해 실제 폼 제출을 막고 method를 실행시켜준다. - this.$store.dispatch()을 통해 vuex의 store 저장소에 action에 접근하여 login function을 실행할 수 있다. 아이디 비밀번호를 확인해주세요. ID Password Sign in 로그인해주세요 로그인 하지 않았습니다. ID Password S..

1. Axios ? - 브루어자와 node.js를 위한 간단한 Promise 기반의 HTTP 클라이언트임. Axios는 매우 확장 가능한 인터페이스를 가진 작은 패키지로 사용하기 쉬운 라이브러리를 제공함. 2. 설치 - npm install axios 명령어를 통해 설치. 3. 테스트 - vue 단에서 axios를 통해 서버쪽으로 api를 날려서 통신 되는지 확인.

1. Naming Rule (Views) - 이름 맞추고 끝에 ****View.vue로 맞춰줌. (3 버전 들어와서 네이밍 룰 생김) 2. vue파일 내부 style 테그 - scoped가 붙으면 해당 파일내에만 적용. 빠지면 전체 컴포넌트에 적용. 3. webpackChunkName - 여러 라우팅에 동일 chunk name으로 묶어주면 하나의 js 파일로 묶어줌. 4. v-html="" - 해당 테그를 통해 script return에서 만들어준 html 데이터를 삽입해준다. (ex : div 가운데 inner html로 삽입해줌) 5. v 관련 테그는 양방향 바인딩이다. - js 쪽에서 바꿔도 웹에서 바꿔도 해당 데이터는 변경됨. - 앵귤러, 리액트에서는 양방향 바인딩 제공을 안해줌. 6. oncli..

1. router > index.js const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') } ] - routes name은 동일값 가지면 안됨. - component 설정 ..

1. vue 프로젝트 설정 - 저장된 설정 패키지 없으면 메뉴얼로 가서 설정해주기. - Babel : 구브라우저 용 js로 다시 컴파일 해줌. - PWA : 모바일 처럼 웹을 만들어주는 기술. - Router : 메뉴 선택시 화면이동 가능해주게 하는 모듈. - Vuex : 모든 뷰 컴포넌트에서 공통으로 접근할 수 있는 저장소를 만들어서 데이터를 저장 후 상태관리 해줌. - Linter : 코드 짜는 한 팀내에서는 동일한 코드 문법, 컨벤션, 규칙 등을 지킬 수 있게 해줌. - 라우터 사용시 히스토리 모드 사용. - 코드 작성 시 어떤 컨벤션을 따르겠냐라는 설정. (Prettier를 따를거면 4번째꺼 선택해주면 됨. 나는 기본.) - 해당 린트 설정을 저장 할지 선택 - 앞에 정한 모듈들을 각 각의 파일로..

var v1 = 10000000; var v2 = v1.toString().replace(/\B(?, ","); result 10,000,000 이 외에도 toLocaleString() 함수 이용해 찍을 수 있음.

팝업창 이쁘게 띄우는 라이브러리 Sweetalert2 https://sweetalert2.github.io/ SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io Sweetalert https://lipis.github.io/bootstrap-sweetalert/ Social Buttons for Bootstrap A beautiful replacement for JavaScript's 'alert' for Bootstrap lipis.github.io html에 cdn 주소를 src에 바로 첨부 사용해도 되고 ..