SPA( single Page application) 어떤 웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는것. 페이지 새로고침 없이 페이지내에서 특정부분만 변경하여 페이지가 이동되는 느낌을 준다. 라우팅 SPA 가 기존 웹 사이트와 같이 브라우징이 가능한 이유 HTML5 history api 를 사용하기 때문에 SPA 프레임 워크가 하는일 vue, react, angular 가 spa 프레임 워크로 유명한데.. 세부적인 구현 개념은 다르겠지만 그목적은 모두 spa 를 쉽고 확장성 있게 구현하는것을 목표로 함 이들은 virtual DOM 이라는 개념을 사용해 spa 를 구현. SPA의 문제점은 자바스크립트로 인한 DOM 조작이 빈번하게 일어나 브라우저의 성능을 저하시키는 거..

개발동향 vue 2 - > vue 3 바뀐점 type script 의 지원 시스템을 더 지원함 ie 11 지원 x 거의 코드변화 없이 추가 문법 api 의 제공 기존 vue2 의 형태로 vue3 개발가능 vue2 에서는 타입 시스템 생각 x vue3 전체적인 라이브러리 코드가 type script로 작성 type script 쓰는게 좋다. composition api 만드는 서비스에따라 서드 파티 라이브러리 많이 쓴다 ? - > vue2 컴포지션 api 가 나왔고 새로운 기술 익혀보고 싶으면 -> vue3 신 동향 Vite사용 : 빌드시간 감소 속도 증가 장점 낮은 러닝 커브 (쉽게 배울수 있음) 점진적 적용이 가능(기존의코드를 그대로 돌릴수있음 ex) jquery) 마크업 개발자와 협업의 쉽다. 장점 ..

페이징처리 .. 증말 ...!! 예제소스 가지고 와서 내 데이터 넣으면서 쓰다보니깐 사고가 굳은건지 바꿔야하는 부분을 안바꾸고 그대로 가다가 구현이 안된 케이스 ...! 원래 p in paginatedData : key = p.productUnum 이렇게 사용되던거... 그대로 쓰다가 수정버튼만들떄 계속 방황함 "(p.index) in paginatedData" key = "index" 이렇게 정석적인 문법으로 사용하고 인덱스값을 그대로 받아주면 수정 버튼 잘 작동함 근데 인덱스 값으로 이상한거 (p.productUnum) 이런거 받으면 이건 v-for에서는 잘 작동할지 몰라도 다른곳에서 잘 작동이 안됨.. 정석적인 문법 = 다른곳에서 작동을 보장 ... 예제코드 사용하는건 좋은데 하나씩 이해 안하면 나..

관리자페이지 외관 서버데이터 받기전 정의 카테고리 = 카드박스 카드박스 bootstrap - Component - Card 그외 나머지 = 데이터테이블 데이터 테이블 구성 1.테이블 bootstrap - Content - table 2.페이징 처리 bootstrap - Component - pagination 종류에따라서 컬럼명만 바뀌고 밑으로 쭉 데이터 정렬되도록(게시판형식) 몇줄이상 넘어가면 페이징처리 관리자 페이지 에서 서버에 api 요청 해당 url 으로 get요청을 보냄 근데 고객개인정보를 가지고 와야함으로 로그인 하였을떄 생성된 jwtToken을 가지고옴 위 사진에서는 var headers 에 jwtToken 을 저장하고 (var headers = {"Authorization": "Bearer..

1106 1. 관리자 페이지 구성 사이드바 and content body 사이드바 = hover 속성줘서 translatex -100 - > 0 마우스 올리면 원래위치로 -100해놓으면 화면상에서 안보이다가 0되면서 왼쪽에서 튀어나옴 content body 부트스트랩 활용해서 반응형으로 만들었음 2. 관리자페이지 vue 셋팅 1. 네브바 풋터 없애기 app.vue에서 navbar, footer 다 떨구고와야함 vuex로 show state관리 0일때 숨기고 1일때 보여지도록 관리자페이지 들어가는 클릭이벤트 발생시 1 -> 0으로 셋팅 vuex 의 값을 직접적으로 변경하는것은 권장하지않는 방법 소스관리가 어려워짐 mutation에 함수를 만들고 해당위치에서 함수를 실행시켜주면됨 관리자 페이지를 들어갈때 함..

2021-11-03 컴포넌트 url 지정 컴포넌트 등록 - > router 등록 - > 각버튼에 router.vue 줘서 활용 경로 : vue_page/src/router/index.js 이런식으로 라우터패스 설정해면 path: 이름 get방식으로 요청하면 해당 컴포넌트 페이지 볼수있음 vue 에서는 a 태그 대신 router link 사용해서 클릭했을때 get방식 요청이 이루어지도록 설계 vue webpack init할떄 eslint 설치 ㄴㄴ 귀찮은 문법규범 하나도 안걸림 너무 좋음 나중에 써야할 필요가 생기면 사용하기 html css 그대로 뷰에서도 bootstrap 적용가능 인덱스.html 에 cdn 적용 근데 이번 프로젝트에서는 순수html css 에 기존사용하던 bootstrap 가지고옴 따로..

부트 설정하고 생성 1.sts 새로운 프로젝트 생성 예 )backend폴더임 2.루트에서 폴더 하나 생성 예 )frontend폴더임 3. frontend 폴더에서 우클릭 show in -> terminal sts 에서해도 되고 vscode 에서 해도 되고 ! 여기까지는 빈껍데기인데 여기서 터미널 명령어로 ============================================= cmd vue init webpack > project name = vue-front discription = vue-fronted ----------------- run +compile o ----------------- router y/n = y ESlint y/n = y ----------------- ESlint p..

ajax 는 비동기식 통신방식을 지원하는 코드여서 시간이 많이걸림 자바스크립트는 시간이 오래걸리는것을 후순위로 처리하는데 그래서 mutations에 state 변경과 함께 사용하게 되면 순서대로 이루어지지 않을수 있음 mutations에서는 state 변경만 처리하도록 하고 ajax 처리는 action에서 하도록 하여서 실행시 발생할수 있는 오류를 미연에 방지하는것. actions 만드는법 그낭 mutations처럼 actions 항목을 만드신 후에 함수형태로 만드시면 됩니다. actions : { 데이터가져오기(){ axios.get('').then(()=>{ 성공시 실행할 코드 }) } } 그럼 이제 App.vue 이런 곳에서 $store.dispatch('데이터가져오기') 라고 사용했을 때 진짜 데..

지금까지 배운거 다 ~ 부질없게 만들법한 강한녀석등장 store.js(관습적 이름 상관 x) 파일만들고 거기에다가 데이터 다꽂아두고 거기서만 뺴서쓰는거임 프롭스 mitt 이딴거 다필요없어짐 띠용 근데 간단한거는 프롭스 이런게 좋다고함 왜냐면 기본셋팅이 많이걸림 https://next.vuex.vuejs.org/ 여기서 설치 명령어 보고 설치 or 애초에 프로젝트 만들때 vuex 선택 Vuex 셋팅src 안에 아무데나 store.js를 만들고 다음코드 작성 import { createStore } from 'vuex' const store = createStore({ state(){ return { } }, }) export default store 그다음 store.js 를 main.js 에 등록 (ma..

에이 찎!쓰! 와 엑시오스에 대해서 Ajax란 Asynchronous JavaScript and XML의 약자입니다. 비동기 통신방식 아~싱크로노스아니네 자바스크립트 and xml 싱크로노스 = 동기 어싱크로노스 = 비동기 서버와 브라우저 간에 비동기 방식으로 자바스크립트와 xml을 주고받는 창을 새로 실행하지 않아도 새로운 정보가 표시 된다구 !! axios = Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 사람들 어렵게 쓰는거 싫어하잖아 도구 만들어 놓은거임 axios ㅅㄱ. 사용법 ㅈㅅ 설명해드림 axios.get(주소) .then(function(작명데이터)){. ------> 잘받아오면 실행함 console.log(작명데이터) } ...