JadeCode

DOM DOM은 Document Object Model의 약자로, HTML 요소를 자바스크립트 객체처럼 조작할 수 있는 Model이다. 즉, JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다. HTML에서 Javascript적용하기 HTML에서 JavaScript를 적용하기 위해서는 script태그를 이용한다. 웹 브라우저가 작성된 코드를 해석하는 과정에서 script요소를 만나면, 웹 브라우저는 HTML해석을 잠시 멈추고 script요소를 먼저 실행한다. 그렇기 때문에 script태그는 보통 닫힌 바디태그전에 사용된다. DOM구조를 조회할 때는 console.dir이 유용하다. console.dir을 DOM을 객체의 모습으로 출력한다. DOM다루기 CREATE documen..

둘 다 ...으로 표현되어서 헷갈리기 쉽다. 하지만 차이가 있다. spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다. let arr = [10, 30, 40, 20] let value = Math.max(...arr) //let value = Math.max(10, 30, 40, 20)과 같다 배열 arr을 풀어서 각각의 요소를 넣는다. rest 문법 생김새는 spread와 비슷하지만 역할이 다르다. 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다 function printMaxNums(...args) { console.log(args) } printMaxNums(10, 30, 40) 여기에서 ...args는 r..

스코프: 자신이 가지고있는 유효범위(전역스코프, 지역스코프) closure : 자신이 선언 될 때의 맥락을 기억하는 함수 lexical scope : 함수를 어디에 선언하였는지에 따라 결정되는 상위 스코프 let age = 24; function getAge() { return `I am ${age} years old`; //전역으로 선언 된 age:24 } function getOtherAge(age) { return `I am ${age} years old`; //파라미터로 받은 age } function getAge2() { let age = 20; return `I am ${age} years old`; //지역스코프 내에 선언된 age 20 //선언을 내부에 했기 때문에 내부의 변수 값을 따른다..

원시자료형 원시자료형 : primitive data types 객체가 아니면서 method를 가지지 않는 6타입이다 (string, number,bigint,boolean,undefined,symbol,(null)) 데이터 보관함 한 칸에 저장 할 수 있는 데이터이다. 참조자료형 참조자료형: reference data type 변수에 값이 아닌 주소를 저장한다. 크기가 동적으로 변하는 데이터 보관함이 필요 vs 원시타입데이터는 각 변수간의 원시타입 데이터를 복사하기 때문에 기존의 데이터에 영향이 가지 않는다. 참조타입데이터는 주소를 복사한다.그렇기 때문에 기존의 데이터에도 영향이 간다. 여기에서 mutable, immutable의 차이가 나타난다. string(문자열)은 immutable하며 객체,배열은..

배열 배열은 참조자료형이며 기본적으로 배열을 복사할 시엔 값이 아닌 주소값이 들어간다. 배열인지 확인하려면 Array.isArray(변수명)을 써야한다. typeof 배열변수; 'object'로 반환된다. 배열의 문법 slice(start,end) ⇒ start번째 인덱스 부터 end인덱스 전 까지 push(),pop(),unshift(),shift() 차례대로 뒤에추가, 뒤에삭제, 앞에추가, 앞에 삭제 객체 객체도 배열과 마찬가지로 참조자료형이며 주소값이 복사된다. 객체는 {key:value}형태로 되어있다. 객체는 배열과 다르게 .length가 사용이 안된다. Object.keys(변수명).length로 사용해야 한다. 변수명[key]로 value값이 확인 가능하다. 객체를 깊은 복사하려면 Objec..

CLI command-line interface 프롬프트(prompt) CLI의 명령줄 대기모드를 가리키는 것으로, 키보드의 입력을 확인하고 편집할 수 있는 한 줄의 공간 명령어 pwd // 현재 위치 확인 mkdir // 새로운 폴더 생성 ls //특정 폴더에 포함된 파일이나 폴더 확인 -a // all 전부를 뜻함. -l //폴더나 파일의 포맷을 표현 d로 시작하면 폴더 -로 시작하면 파일 open . //폴더를 GUI 탐색기로 실행 cd // 폴더 진입 touch //파일 생성 cat // 파일 내용 터미널에 출력 rm // 파일 삭제 , 휴지통 가지 않고 즉시 삭제됨 rm -rf // 폴더 삭제 mv // 폴더나 파일 이름 변경 또는 위치 옮기기 cp // 폴더나 파일 복사 관리자권한 루트폴더(/..

계산기 만들기 맥북 기본 계산기를 보고 계산기 목업을 만들기. html부터 css까지!! 일단 큰 계산기라는 div 안에 숫자를 보여주는 display와 버튼이 있는 buttons로 나눈다. calculator의 넓이와 높이는 332px, 500px로 지정하고 display:flex를 해 준다. //calculator.html 0 그 후 buttons 안에 5개의 button__row를 만든 후 버튼을 하나하나 삽입한다. 삽입 후 css를 적용한다. 0 AC / 7 8 9 * 4 5 6 - 1 2 3 + 0 . = 최종 완성 목업은 위의 캡쳐본과 같다. 이젠 display:fles를 적용시켜 css를 완성할 수 있다. hover기능과 active기능도 추가 가능해서 버튼에 마우스가 올라갔을 때 버튼이 눌..

와이어프레임 웹 또는 어플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 단순한 선이나, 도형으로 인터페이스를 시각적으로 묘사한 것이다. 와이어프레임의 가장 큰 목적은 화면의 영역을 구분하는 일이다. 와이어프레임 단계에서는 전환 효과나, 애니메이션, 사용자 테스트 같은 스타링일 요소나 UX를 판단하지 않는다. Flexbox 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다. display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다. flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다. justify-content 와 align-items 를 이용하여 수평-수직 정렬을 결정할 수 있다. flex-grow 를 이용하여 요..