프론트엔드(49)
-
객체
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) 함수 선언식 function 함수이름(매개변수 = 기본값) { // 코드 } 2) 함수 표현식 const 함수이름 = function(매개변수) { // 코드 } let a = 2; const makeNumber = function (value = 10000) { // 초기값 // 숫자가 아니거나 0보다 작으면 0으로 return, 넘겨진 value를 숫자형으로 만들어서 return if (value < 0) return 0; // early return let a = 1; // console.log(a); // 지역변수가 전역변수를 가림 const newValue = Number(value); return isNaN(newValue) ? 0 : n..
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 -
HTML/CSS과제 회고
HTML/CSS과제를 끝내며 과제별로 하나하나 정리를 하면서 회고를 해볼까 생각을 하다가 아직 과제가 채점중이고 해설강의도 올라오지 않아서 혼자 다시 정리를 해봐야 똑같을 것 같다는 생각에 그냥 과제를 하면서, 그리고 끝내면서 느낀 생각들을 정리하려고 한다. 과제를 시작 하기전에 나는 강의도 충분히 들었다고 생각을 해서 HTML/CSS는 어려울게 없을것 같다고 생각을 했다. 하지만 내가 들은 강의들은 기초에 불과했고.... 그것들은 다 합쳐서 과제를 하려니 내 생각대로 되지 않는 것이 많았다. 유효성 검사에서부터 걸리기 시작하였다. 브라우저에는 정상적으로 보여서 문제가 없는 것 같았는데 유효성 검사에서 ERROR가 뜨기도 하고, 안될것 같았던데 되기도 하면서 의아한 부분이 있었다. 내가 제일 오랜 시간을..
2023.04.14 -
폰트(로컬 폰트, 웹 폰트)
먼저 구글 폰트에 들어가서, 마음에 드는 폰트를 선택한 후에 링크 방식이나 import 방식 중에 선택하여 사용하면 된다. 로컬폰트는 @font-face를 사용해서 이용하는 것으로, @font-face { font-family: ; src: [,]*; [font-weight: ]; // font 굵기 값 [font-style: ]; // font 스타일 값 } 에는 폰트명으로 지정될 이름을 설정하면 된다. 에는 원격 폰트 파일의 위치를 나타내는 url 값을 지정하거나 사용자 컴퓨터에 설치되어 있는, 즉 로컬 환경에 있는 폰트명을 local("Font Name") 형식으로 지정하면 된다. 만약 로컬 환경에 있는 폰트를 지정하려면 src: local('Font Name') 과 같은 형식으로 폰트를 지정해 주..
2023.04.11