프론트엔드/Javascript
-
Canvas + s3 cors 오류날 시 처리법프론트엔드/Javascript 2021. 5. 22. 20:46
canvas에서 s3 이미지 끌어다 쓸 때 cors 오류가 나는데 다음과 같이 처리하면 해결 1. crossOrigin을 anonymous로 설정 2. 이미지 경로 뒤에 캐시방지를 위한 파라미터 추가 if(this.selectedDrawing){ let image = new Image(); image.crossOrigin = "anonymous"; // 핵심 image.src = self.selectedDrawing.url + "?timestamp=" + (new Date().getTime()); // 핵심(url 뒤에 캐시막기용 파라미터 추가) image.onload = function(){ self.context.drawImage(image, 0, 0); } } 3. s3 버킷 권한 수정(s3 -> ..
-
브라우저 캐시(cache) 지우기프론트엔드/Javascript 2021. 2. 9. 01:17
# What? - axios로 기존 데이터 안쓰고 갱신하게 처리(데이터 삭제 후 뒤로가기하면 삭제된 데이터를 포함한 목록데이터가 남는다던지 - view단 캐시도 안남게 하기 # How? @ bootstrap.js ... window.axios = require('axios'); window.axios.defaults.headers["Cache-Control"] = "no-cache"; window.axios.defaults.headers["Pragma"] = "no-cache"; window.axios.defaults.headers["Expires"] = "0"; ... @ app.blade.php @php header('Cache-Control: no-cache, no-store, must-revali..
-
06. 함수프론트엔드/Javascript 2020. 9. 19. 17:16
# What? 이게 뭔데? - javascript에서 코드의 집합을 나타내는 자료형. - 어떤 input을 받아 어떤 output을 내놓음. # How? 어떻게 쓰는데? // 함수 만들어서 써보기 let alertMessage = () => { alert("테스트"); }; alertMessage(); // 어떤 입력값(인자)를 받아서 써보기 let alertMessage = (message, anotherMessage) => { alert(message); console.log(anotherMessage); }; alertMessage(); // 어떤 출력값(리턴값)을 받아서 뿌려보기 let alertMessage = (message, anotherMessage) => { return message +..
-
05. 변수프론트엔드/Javascript 2020. 9. 8. 17:37
# What? 이게 뭔데? - 어떤 데이터를 담은 저장공간 # How? 어떻게 쓰는데? - 변할 가능성이 있는 데이터 let 변수명; - 변할일이 없는 데이터 const 변수명; * 백틱(``) - 문자열 사이에 변수를 편하게 쓰고 싶을 때 사용 let name = "june"; console.log(`My name is ${name}`); // My name is june # Practice 연습 - 14살짜리 강아지의 나이를 사람 나이로 변환해보기 강아지는 사람보다 빨리 늙는다. 같은 10살이라도 사람은 어린 나이이지만, 강이지는 노인이나 마찬가지다. 강아지 나이를 사람 나이로 치환하는 방법은 다음과 같다. - 강아지 생후 2년동안은 사람으로 치면 1년당 5년과 마찬가지다. - 그 후 1년은 사람으로..
-
03. 연산프론트엔드/Javascript 2020. 9. 8. 00:26
# What? 이게 뭔데? - 더하기, 빼기, 나누기, 곱하기같은 기본적인 계산 1. 더하기 + ex. 4 + 1 2. 빼기 - ex. 5 - 1 3. 곱하기 * ex. 3 * 4 4. 나누기 / ex. 8 / 4 5. 나머지 % ex. 9 % 4 # Practice 연습 1. 오늘 사과를 쿠팡에서 35건, 위메프에서 85건, 티몬에서 5건 판매하였다. 총 몇건을 판매하였는지 콘솔에 찍어보기 2. 인류가 처음으로 달에 착륙했던 년도는 1969년이다. 그때로부터 몇년이 지났는지 콘솔로 찍어보기 3. 본인은 스터디카페를 운영하는 사장이고, 대여비 만원짜리 4인실 9룸을 보유하고 있다. 인제고등학교 학생 50명이 카페를 방문하였을 때 얼마를 벌 수 있는지 console로 찍어보기, 그리고 스터디룸에 들어가지 ..
-
02. 자료형(Data Types)프론트엔드/Javascript 2020. 9. 8. 00:01
# What? 이게 뭔데? 데이터의 유형 1. 숫자(Number) ex) 4, 8, 23.42 2. 문자열(String) ex) "문자열", "문" 3. 참거짓(Boolean) ex. true, false 4. 비어있는 데이터(Null) ex. null 5. 정의되지않은 데이터(Undefined) ex. undefined 6. 객체(Object) ex. {name: "준", age:99} 7. 배열(Array) ex. [1,2,3,4,5], ["123", "3423", "333"] # Practice 연습 1. 콘솔에 "안녕하세요"라는 문자열 찍어보기 2. 콘솔에 현재년도를 숫자로 찍어보기