모-코드

1. App.vue 의 존재이유 What (정의) : 구조와 레이아웃을 정의하고, 다른 컴포넌트를 렌더링 하기 위해서 Why (존재이유) : 루트컴포넌트로 사용 됨, 전체 어플의 구조와 레이아웃을 정의함 그리고 다른 컴포넌트들을 포함하여 렌더링 함 How (방법) : App.vue안에 를 써서 URL에 따라 컴포넌트를 동적으로 렌더링 하게끔한다. 2. 라우팅이란 What (정의) : 웹 어플에서 URL 에 따라서 전환을 관리하는 기능이다. Why (존재이유) : SPA 에서 초기 한페이지 로드 후, 서버에서 페이지 가져오지않고, 동적으로 컨텐츠 갱신한다. How (방법) : view Router를 이용한다. 3. Vue Router 와 router-view 는 무슨차이 - 공통점 Vuw.js 에서 라우팅..

I. 로그인 구현하기 1. 프론트 (1) loginHandler 1) loginHandler 또는 구글로 로그인 회원가입 | 비밀번호 찾기 2way binding을 하는 v-model 을 했다 그리고 클릭이벤트 관련 핸들링을 세팅했다. 2) fetch API async function loginHandler() { console.log(userDtails.username); let response = await fetch("http://localhost:8080/members/login", { method : "POST", headers : { "Accept" : "application/json", "content-type":"application/x-www-form-urlencoded" }, body:..

I. 들어가며 1) signle sign on -> 한번의 로그인으로 한번에,,, 한때 유행했어 그런데 보안문제 때문에 안쓰게 됨 지금은 open Authentication II. Rland로 인증권한 구현하기 1. front단 (Vue) (1) Rland로 Vue 기본세팅 1) composiotnAPI - Vue 기본루틴 App.vue() [main.js의 객체생성] -> index.html [main.js의 엘리먼트에 마운트] -> main.js [세팅] -> Layout.vue[지도] -> Index.vue[목적지] ( + Footer + Aside + Header) 2) 소스코드 vue 관련 객체를 생성한다. 엘리먼트를 세팅한다 이 경우 vue 가 들어갈 부분을 지정한다. import { cr..

I. 들어가며 이전에 매퍼로 하는게 있긴한데 불편해 package kr.co.rland.rlandapiboot3.controller; import java.util.HashMap; import java.util.Map; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController..

I. 스타일 파일구조 관련 1) css 는 public? asstet? public 은 변환기를 가치지 않는 영역이야 CSS 가 그대로 간다는거야 assat에 있는 css는 변환기를 거쳐 안좋을수도 있는데, 장점이 있어 minify / minified 은 배포용으로 화이트스페이스가 없는 한줄짜리임 개발버전과 배보버전 다름 2) 페이지는 하나인데, 컴포넌트가 있을 떄 어떡해야? 헤더푸터는 루트 레이아웃 나머지는 멤버에 들어가는 레이아웃 다른것은 어드민에 들어가는 레이아웃 vue에다가 넣을 수 있지만, 공통화 하기가 어려움 II. Vue.js 1. 들어가며 (1) 1) 어제 newlist 에다가 props 로 값을 전달할 수 있다. 2. 모달 띄어보기 (1) Modal.vue 파일 만들기와 slot 1) 파..

I. 들어가며 1) 어제 컴포지션API 썻고, computed 속성을 썻어 기존에 바인딩 되어있는데 data 중에서 내가 원하는 것을 타겟팅해서 동기화된 속성을 만들 때 우리는 computed 를 썻어 이것은 함수를 기반으로 해! 계산식이 달라진다는것이 정말로 달라지는지 보아야해 항목에다가 삭제버튼 추가할거야 눌렀을 떄 항목이 삭제될거고 vuw스럽게 MVC방법론으로 자연스럽게 하는것을 보자 II. Vue.js 1. 삭제하기 (1) 들어가며 1) input type 에서 button 등의 차이? 태그는 이미지를 버튼처럼 쓰기위해서 안에다가 이미지를 넣을 수 있어 꼭지금은 아냐, 버튼이 input 인 필요없이, js 기반이기 때문에 엘리먼트가 큰 의미를 가지지않는 이상한 세계야 어떤사람은 버튼을 span 누..

I. 수업 방향관련 수업방향성 관련 Vue -> 옵션즈 api 와 컴포지션 api 두가지가 있어 Exception Dao -> 를 mybatis 를 쓰는데, 대비되는것이 JPA야! Security -> BackendSecurity VS FrontedSecurity(on Vue) Dom -> Component (에디터 / 탐색기/ 드랍박스 / 모달 / ...) 등을 우리가 한다 이 중에서 일단 Vue.js -> compositionAPI 를 이용해서 한다. II. Composition API 대두 1. Composition API vs Options API (1) 들어가며 1) 탄생배경 Single file component(SFC) 나오면서 대두한것이 컴포지션이야 그래서 배타적인것은 옵션즈 API야! ..

I. dom 1. 파일업로드하기 (1) 서버로 파일 전송하기 1) 들어가며 AXIOS -> library 같은 파일전송을 위한 라이브러리도 있다. 2) js 파일업로드 구현 dropzone.ondrop = function(e){ e.preventDefault(); // console.log(e.dataTransfer.types); if(e.dataTransfer.files.length > 1) console.log("둘 이상의 파일 업로드 불가"); let file = e.dataTransfer.files[0]; let formData = new FormData(); // formData.append("username", "newlec"); //로그인 정보 // formData.append(file, ..

I. DOM 1. 이벤트 (1) 이벤트 객체 클릭했을 때 태그 찾기 1) 클릭했을 때 색 바꾸기 1 2 3 4 .s2 ul{ padding: 0; list-style-type: none; display: flex; } .s2 span{ display: inline-flex; width:100px; height: 100px; align-items: center; justify-content: center; color: white; font-weight: bold; background-color: blue; /* transition: .5s; */ } .s2 li.selected .box, .s2 li.selected span { /* 애니메이션 넣기 */ animation-name : selectedani..

I. 들어가며 1. 전날 의문들 질문 1) 이터레이터에 next() 는 무엇? 이터레이터는 index를 포함하는 서비스를 의미하는거야 모든컬렉션에 next()로 데이터를 꺼내고 싶었어, 모든 컬렉션이 next() 있지는 않아 이터레이터 함수를 호출해서 얻어낸 객체를 통할 때 next() 이터레이터란 인덱스를 가지고있는 녀석이야! 왜 인덱스 가진 녀석을 별도로 따로 만들었을까? 인덱스 쓰는 경우 문제가 있어 멀티 스레드인 경우에 문제가 돼! 스레드가 하나 더 늘어날때 마다 이빨이 빠지게 돼 결국 해결하기위해서 개별적으로 인덱스를 두는거야! 인덱스의 한세트인 각각의 이터레이터 를 만들어서 이빨을 안빠지게 하는거야 함수가 이터레이터 같은 서비스를 가지고 있다고해도, 저 녀석은 for-of문에서 사용할 수 없다..