쬬의 기초정리
-
[svg] 개념과 도형의 기본이해하기쬬의 기초정리 2022. 11. 19. 16:41
xml코드 기반의 확장 가능한 벡터 그래픽 (점과 점 사이를 연결해서 라인의 길이를 계산해서 자동으로 연결시켜줌) 아이콘, 로고, 그래프, 사용자 인터페이스에 자주 사용된다. dom의 일부로써 각 객체별로 html 에서 엘리먼트로 추가됨 특징 벡터기반이기 때문에 이미지의 크기에 상관없이 선명하게 유지됨 모양이 복잡하지 않은 경우에는 용량도 작다. css나 스크립트도 다양하게 조작이 가능하다. 아이콘, 로고, 그래프, 사용자 인터페이스 등에서 사용 단점 선 하나하나가 데이터로 표현되기 때문에 복잡하고 개체수가 많을수록 용량이 증가하여 효율성이 떨어진다. (아이템이나 로고정도에만 사용하는 이유다) 그래픽요소이기때문에 fill 색이 그라데이션이 들어간 svg는 이미지가 깨진다 사용방법 태그상에 백그라운드 이미..
-
[javascript] if 와 switch 에 대해 알아보자쬬의 기초정리 2022. 11. 19. 16:11
if 문 / switch 문 지정한 조건이 참인 경우 명령문을 실행한다. 조건이 거짓인 경우 또다른 else if 문이나 else 를 사용해 다른 명령문을 실행할 수 있다. 👉 test 값에 따른 명령문 실행 let test = 1; if(test === 1){ alert("1이 맞습니다") } else if(test === 2){ alert("2가 맞습니다") } else { alert("1도 2도 아닙니다.") } 👉 test 값에 따른 함수실행 let test = 1; if(test === 1){ test01(); //조건에 맞는 함수 실행 } else if(test === 2){ test02(); //조건에 맞는 함수 실행 } else { another(); //조건에 맞는 함수 실행 } // 함..
-
[javascript] Spread & Rest Operators 연산자 / 배열 재생산 / 전개연산자쬬의 기초정리 2022. 11. 12. 20:45
# Spread 연산자 const newArray = [..oldArray,1,2] const newObject = [...oldObject, newProp:5] 더 많은 원소도 추가가 가능하지만 대괄호와 ... 구문만 있으면 새로운 object 할당이 가능하다. spread 연산자는 객체배열이나 배열에 어떤 요소를 합칠때 매우매우 많이 사용한다. 실무를 하면서 매우 많이 사용하는 연산자이기 때문에 필수로 알고있는것이 좋다. 👉 예시 const numbers = [1,2,3]; const newNumbers = [...numbers, 4]; console.log(newNumbers) //[1,2,3,4] 출력 👉 예시2 const Person = { name: 'Max' } const newPerson ..
-
[javascript] let & const 차이 알아보기 + JSbin 사이트쬬의 기초정리 2022. 11. 12. 19:46
ES5 버전까지는 var 를 사용합니다. ES6 버전에서는 let 과 const 라고 var의 최신버전이 나왔다. let👉 값을 수정할 수 있는 변수를 선언할 때 사용 const👉 값을 변경할 수 없는 상수에 선언할 때 사용 * 새로운 할당 불가능 *바로 js 를 볼 수 있는 사이트 : ctrl + enter로 console 값을 바로 받아볼 수 있다. JS BinSample of the bin:jsbin.com # var 예시 # let 예시 # const 예시재할당이 불가능해 type 오류를 출력한다. 에러가 호출됨으로써 해당 코드에서 어떤 부분에 오류가 있는지 찾아서 수정이 가능하다.