flex와 grid의 차이 flex는 컨텐츠이고, grid는 컨테이너다. 즉, flex는 1차원 레이아웃 시스템(수직, 수평 중 택 1)이고 grid는 2차원 레이아웃 시스템(수직, 수평 둘 다 가능)으로 분류된다. flex는 항목을 한 방향으로 레이아웃을 할 수 있고, grid는 항목을 두 방향으로 레이아웃 할 수 있다. 복잡한 레이아웃 설계가 필요할 때 grid를 사용하면 좋다. flex Flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었다. 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에서 효율적으로 요소를 배치, 정렬, 분산 할 수 있는 방법을 제공하는 css3..

1. 인사 자바스크립트 런타임 : 자바스크립트 엔진을 포함하는 실행 환경 자바스크립트 엔진 : 자바스크립트 코드를 실행하는 프로그램 2. 디버깅 console.log(); chrome 개발자 도구 debugger; 3. DOM 다루기 Window 객체 Document 객체 특정 요소 찾기 getElementById getElementsByTagName 인접 노드 접근 children parentElement 노드 생성 createElement Node.style Node.innerHTML 4. 브라우저 객체 Navigator location location.href History 5. 이벤트 Click. Mouseover, keydown, focus… 이벤트 핸들러 addEventListener 6. 에..

1. 인사 console.log(x,y,z) 2. 기본연산자, 값 산술 연산자 : + , - , * , / , % , ** 복합할당 연산자 : += , -= , *= , /= , %= , **= 할당 연산자 : = 3. 연산자 비교 연산자 : == , === , = 증감 연산자 : ++ , -- , ++X, X++ 논리 연산자 : ||(OR) , &&(AND) 부정 연산자 : ! 4. 변수와 상수 let : 변수 생성 키워드 const : 상수 생성 키워드 var : 레거시 키워드 5. 자료형 동적 타입 언어 숫자형 : Infinity, -infinity, NaN BigInt형 : 2^53-1 보다 크거나 -(2^53-1) 보다 작은 정수 표현, 숫자 끝에 N을 붙혀서 사용 문자형 : “”, ..

여러 파일로 하나의 어플레케이션을 분리할 때, 각각의 파일들을 모듈이라고 부름 1) 모듈 내보내기 export const func = () => {}; export const a = 1; 2) 모듈 가져오기 Import fileObj from ʻ./file.jsʼ; fileObj .func(); Import { func, a } from ʻ./file.jsʼ; func(); 3) 모듈 시스템 내보내지 않은 변수는 외부로 노출되지 않아 자원 보호가 가능함 CommonJS const func = require(ʻ./file.jsʼ) ES Modules Import func from ʻ./file.jsʼ; export const bark = () => { console.log('Bow-wow'); }; imp..

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 구조 분해 ..

함수 비슷한 코드가 반복해서 사용될 때 사용한다. 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..