모-코드

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. CSS 1. css 애니메이션 이벤트 (1) 돌아가고나서 맞바꾸기 1) 애니메이션 event 대체 혹은 추기 // 이거는 추가가 아니라 대체 selected.onanimationend = function(){ let selectedBefore = selected.previousElementSibling; current.replaceWith(selected); if(selectedBefore) selectedBefore.after(current); else ul.prepend(current); //null 이 되어야 이전것이 없어져! current.classList.remove("currenr"); current = null; }; 애니메이션을 추가하는 방법은 두가지야 하나는 특정 이벤트에서 이벤트로..

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문에서 사용할 수 없다..

I. JS : ES6 1. Symbol (1) 들어가며 1) 프로그래밍에서 약속은 곧 인터페이스이다 이것을 심볼로 약속한다는것의 의미이다 자료형 정의가 불가능한 JS는 그 약속을 심볼을 이용하는거야 let s = Symbol(); let s1 = Symbol(); console.log(s == s1); false가 출력된다. Symbol()은 프로퍼티가 중복되지못하는것이 용도중 하나이기 때문에 다를수 밖에 없다. (2) symbol을 이용한 인터페이스 정의 1) 인터페이스로 정의 해보기(객체 형식으로 여러개) { //인터페이스 정의 let examInterface = { total : Symbol(), avg : Symbol() }; //클래스 구현 class Exam{ constructor(){ thi..

I. 들어가며 1) 바벨이 지원하는게 es6까지인데, 나머지는 바벨이 알아서 해주기 때문에 우리가 바벨에 있는거만 배우면 돼! II. JS6 1. 기본 복습 (1) 화살표 함수 1) arrow function let f1 = function(){ console.log("test"); } let f2 = () =>{ console.log("test"); } 위 아래는 결과만 같지, 실제로는 다른 것이야! 어떻게 다를까? 자세히 seTimeout()을 이용해서 알아보자! 2) arrow function with Class this.x = 30; setTimeout(()=>{ console.log(this.x); },3000); setTimeout(function(){ console.log(this.x); }..