프론트엔드 센트럴파크 (☞ﾟヮﾟ)☞

FileReader : 비동기적으로 파일의 내용을 읽어들이는데 사용 var reader = new FileReader(); 텍스트 파일의 내용을 읽어 들일 때 : onload 사용 readAsDataURL() : 바이너리 파일을 Base64 Encode 문자열로 반환 methods : { onFileSelected(event) { var input = event.target; if (input.files.length>0) { this.file = event.target.files[0]; var reader = new FileReader(); reader.onload = (event) => { this.uploadImageFile = event.target.result; } reader.readAsData..

formdata : form 데이터를 key와 value 값으로 저장 할 수 있는 데이터 구조 axios, fetch를 사용하여 파일을 업로드 해야하는 경우 const formData = new FormData(); formData.append(key,value); 새로운 객체를 만들고 append를 사용하여 key 와 value 값을 넣어줘야 한다. import axios from 'axios'; 혹은 axios.post('url', formdata) 예시 async handleAdmin(){ console.log(this.token); const headers = { "Content-Type" : "multipart/form-data", "token" : this.token }; const url =..

회원만 이용 가능한 홈페이지의 경우, 현재 있던 페이지에서 nav bar 를 이용하여 로그인 페이지로 넘어가게 되면 로그인 후에는 전 페이지로 돌아오게 하는 코드 var urlbox = sessionStorage.getItem("URL"); // console.log(urlbox); urlbox = JSON.parse(urlbox); // console.log(typeof(urlbox)); // console.log(urlbox); if(urlbox !== null){ this.$router.push({ path : urlbox.path, query : { code : urlbox.query.code, name : urlbox.query.name } }); console.log(this.$router);..

sign up log in my page log out elementplus.org 프레임워크를 사용해서 dropdown 적용 https://element-plus.org/en-US/component/dropdown.html Dropdown | Element Plus element-plus.org * el- 로 시작되는 태그는 css style 적용이 안되어서 바로 css 적용 methods : { changeLogged(logged){ this.logged = logged; }, hadleApp_join() { this.$router.push({ path : '/join'}); }, hadleApp_login() { this.$router.push({ path : '/login'}); }, hadleA..

+ {{number}} - div class로 묶어준다. v:on:click 은 대체해서 @click이 가능하다! border:none 을 안하면 +와 -에 테두리가 생긴다. (선택사항) {{number}}은 +와 - 숫자를 보여주는 부분이다. data 안에 return값을 0으로 줘서 시작되는 값을 0으로 지정해준다. @click 이벤트는 메소드 이기 때문에 methods에 넣어준다. 메소드 내에서 인스턴스 내부의 데이터 모델에 접근 할 때에는 this를 사용해준다.

한국어 구글폰트를 적용하기 위해 크롬에서 '구글폰트' 입력 https://fonts.google.com/?subset=korean 하단으로 스크롤을 쭉 내리다 보면 노란 박스 부분이 보이는데 이곳에서 원하는 글씨 굵기 등 여러가지 옵션을 선택하고 나서 페이지 상단 맨 오른쪽에 빨간불이 켜진다. import 방식으로 적용 안녕하세요, 개발세발 개발자의 블로그 입니다.

1. head 안에 넣기 태그 안에 넣는다. 2. 확장자가 .js 로 시작하는 파일을 불러서 넣기 document.write("외부 js 파일"); js파일로 외부에서 파일을 만든 후에 script 태그에 src로 경로를 지정해준다.

animation과 transition의 차이 : animation은 keyframes 추가가 가능하다. *keyframes - 변화가 있는 지점 - 어디든지 다 추가 가능

Transform : CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. hover : 마우스 커서를 올렸을 때 효과 .box:hover { transform: scale(2); } => 2배로 커진다 box:hover { transform: scale(2) skew(10deg); } => 크기 2배, 10도의 각도로 비틀기 * skewX/Y : 30px; X는 가로로 이동 Y는 세로로 이동 .box:hover { transform: scale(2) translate(30px, 10px); } => 크기 2배, translate : 이동 (가로,세로) * translateX/Y : -+30px; X는 가로로 이동 -는 위로 이동 Y는 세로로 이동..