개발공부(53)
-
객체
1. 객체 기본 객체는 사전적인 정의로 실제 존재하는 것을 의미함 1) 객체 생성: {}중괄호나 객체 생성자로 생성 const obj = {}; const obj = new Object(); 2) 객체 구조 사람 = { key: value} // 이 때 중괄호 안에 들어가는 key: value를 프로퍼티(property)라고 함 3) 객체 접근 점 표기범 : obj.key 대괄호 표기법 : obj[key] 사람. 성별 사람. 말하다() 2. 객체 응용 1) 객체 관련 함수 삭제 : delete obj.name; 프로퍼티 유무 : property1 in obj 반복 : for (변수 in obj) { // 변수를 이용한 코드 } 옵셔널 체이닝 : obj?.property?.subProperty 구조 분해 ..
2023.04.16 -
조건문과 반복문
1. 조건문 1) if if(조건1){ 조건1이 참일 때(1) } else if (조건2) { 조건1이 거짓 / 조건2가 참일 때 (2) } else { 조건1, 2가 모두 거짓일 때 (3) } 2) 삼항 연산자 조건 ? // 조건이 참일 때 (1) : // 조건이 거짓일 때 (2) 3) switch switch (값) { case 케이스1 : // 값이 케이스1일 때 break; default : // 앞선 케이스들에 하나도 해당되지 않을 때 } 2. 반복문 1)for for (초기; 조건; 실행){ // 반복되는 코드 } for (let a = 1; a < 10; a++) { 회원번호 a에게 포인트 제공 } 2) while 초기 while(조건){ // 반복되는 코드 실행 } let a = 1; wh..
2023.04.16 -
자료형과 형 변환
1. 자료형 1) 숫자형 infinity -infinity NaN 2) BigInt형 2^53-1보다 크거나 -(2^52-1)보다 작은 정수 표현 3) 문자형 변화 가능한 "",''과 변화 불가능한 ``으로 표현가능 4) 불린형 참/거짓 5) null, undefined null: 비어있음 undefined: 값이 할당되지 않음 6) 객체형 Symbol 객체 호스트 객체 함수 객체 그 회의 객체 typeof 연산자로 변수의 타입 확인! 2. 형 변환 언어 자체에서 자동으로 제공하는 묵시적 형 변환과 개발자가 형 변환을 명시하는 명시적 형 변환이 있음 1) 묵시적 형 변환 console.log(3); => 전달된 값을 문자로 변환함 +"32" => 숫자형으로 변환함 !0 => 불린형으로 변환함 2) 명시적..
2023.04.16 -
반응형 작업 시 미디어쿼리 최소화 하는 방법
1. 미디어 쿼리 화면(screen), 티비(tv), 프린터(printer)와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성된다. 표현식은 width, height, color와 같은 미디어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다. 미디어쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다. 미디어 쿼리는 1) link요소에 media 속성으로 적용하는 방법 2) 스타일 시트 내에서 @media를 사용하는 방법 @media screen and (max-width: 768px) { body { background-color: lightgreen; } } 미디어 타입은 스크린이고 화..
2023.04.16 -
animation 최적화
animation 사용시에 css 최적화 하는 방법 1. css핵 (translate Z or translate 3D)사용하기 하드웨어 가속을 활성화하여 대상이 되는 엘리먼트를 빠르게 렌더링 처리하는 방법 하드웨어 가속은 중앙처리장치(CPU)가 하는 일은 그래픽 처리 장치(GPU)가 분담하여 처리해서 컴퓨터의 성능을 최대한 끌어올리고 브라우저 렌더링을 빠르게 할 수 있게 한다. 일반적인 css animation, trnasform, traslation 속성에는 하드웨어 가속이 적용되지 않기 때문에 브라우저를 속여서 강제로 3D 처리를 하도록 브라우저에 지시해 하드웨어를 가속하는 방법 transform: translate3d(0,0,0); transform: translateZ(0) 하지만 이러한 방법은 ..
2023.04.16 -
HTML/CSS과제 회고
HTML/CSS과제를 끝내며 과제별로 하나하나 정리를 하면서 회고를 해볼까 생각을 하다가 아직 과제가 채점중이고 해설강의도 올라오지 않아서 혼자 다시 정리를 해봐야 똑같을 것 같다는 생각에 그냥 과제를 하면서, 그리고 끝내면서 느낀 생각들을 정리하려고 한다. 과제를 시작 하기전에 나는 강의도 충분히 들었다고 생각을 해서 HTML/CSS는 어려울게 없을것 같다고 생각을 했다. 하지만 내가 들은 강의들은 기초에 불과했고.... 그것들은 다 합쳐서 과제를 하려니 내 생각대로 되지 않는 것이 많았다. 유효성 검사에서부터 걸리기 시작하였다. 브라우저에는 정상적으로 보여서 문제가 없는 것 같았는데 유효성 검사에서 ERROR가 뜨기도 하고, 안될것 같았던데 되기도 하면서 의아한 부분이 있었다. 내가 제일 오랜 시간을..
2023.04.14