자바스크립트로 할 수 있는 일 https://www.youtube.com/watch?v=p5vI5OrLJU8&ab_channel=CodeStates - 모바일 앱개발(React) - 비디오 앱(앱 설치하지 않고 브라우저에서 가능 WebRTC기술 사용) - 오디오, 신디사이저 - 로봇 및 IOT디바이스 앱(Jonny-Five 라이브러리 이용) - 챗봇 - 업무자동화(구글 스프레드시트에서 매크로 JS로 작성 가능) - 웹 크롤링(puppeteer) - 시각화(뉴욕타임즈/ D3.js 라이브러리) - 머신러닝(Tensor Flow/ 가볍게 체험 Teachable Machine) HTML에서 JS파일()을 불러올 때 주의점 웹브라우저는 HTML을 해석할 때 를 만나면 HTML 파싱(해석)을 멈추고 를 먼저 받아(..
TDD 테스트주도개발(Test-Driven-Development) : 테스트케이스(기대하는 값) 작성 후 실제 코드를 개발하고 리팩토링(가독성, 유지보수를 위해 코드 재작성). Test First Development라고도 함 테스트 > 설계 > 개발 기존 개발 과정은 설계> 코드 개발> 테스트 테스트 프레임워크 Mocha Chai expect(테스트하는값).기대하는조건 기대하는조건에 해당하는 함수를 matcher라고 함 .to.be.true .to.be.false .to.equal() .to.eql() .to.deep.equal() 배열의 요소나 객체의 속성이 서로 같은지 확인 클로저 유즈 케이스 - function factories - namespacing - private variables/func..
spread (...) : iterable 한 모든 것의 (대표적으로 문자열, 배열) 요소를 "펼쳐"주는 문법 배열에서 spread 사용(복사, 합치기) // 배열 복사 var arr = [1, 2, 3]; var arr2 = [...arr]; // arr.slice() 와 유사 // [1, 2, 3] // 이미 존재하는 배열을 포함한 새로운 배열 생성 var parts = ['shoulders', 'knees']; var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"] 객체에서 spread 사용(복사, 합치기) var obj1 = { foo: 'bar', x: 42 }; var obj2..
원시 자료형과 참조 자료형 원시 자료형(Primitive data type) : number, string, boolean, null, undefined, bigint, symbol (객체가 아님) 고정된 저장공간을 가짐. 하나의 데이터만 담음 값 자체에 대한 변경 불가능 immutable 함수의 전달인자로 전달할 경우, 값 자체를 복사 - 전달된 전달인자가 호출된 함수의 지역변수로 (매 호출 시마다) 새롭게 선언됨. 참조 자료형(Reference data type) : array, object, function(Object) 크기가 동적으로 변하는 저장공간(heap)을 가짐. 다량의 데이터를 담음 데이터가 동적으로 변함 함수의 전달인자로 전달할 경우, reference가 전달 변수 선언: 메모리에 자리..
객체 { 키1: '값1', 키2: '값2', ... } 값으로 숫자, 문자열, 불리언, 배열, 객체, 함수 전부 가질 수 있음 객체의 요소에서 사용하는 this는 속해있는 객체명을 뜻함 객체가 값을 사용하는 방법 Dot notation Bracket notation 요소 조회 obj.key obj[key] (문자열로 입력해야함) 동적인 변수(함수 매개변수) 사용 불가 가능 키밸류 추가 obj.key = ' ' obj[key] = ' ' 키밸류 삭제 delete obj.key delete obj[key] in 연산자 (key in obj) : 객체 내부에 키가 있는지 확인 후 Boolean(T/F) 반환 Object.keys(obj) : 객체들의 키들로 이루어진 배열 반환 Object.values(obj)..
[JS] 배열
배열, 객체는 다량의 데이터를 다룰 수 있는 데이터 타입임 배열 : 순서(index)가 있는 값(element) Method : 기능을 가짐 Property(속성) : 변수로 사용할 수 있음 arr.length : '배열의 길이' 반환(Property) Array.isArray() : 인풋값이 배열인지 확인하여 'Boolean(T/F)'로 반환 arr.indexOf() : 배열 내부에 인풋값이 있는지 확인하여 있으면 'index' 반환, 없으면 '-1' 반환 arr.includes() : 배열 내부에 인풋값이 있는지 확인하여 'Boolean(T/F)'로 반환 Array.from() : 인풋값이 문자열인 경우, 알파벳 하나하나가 element로 이루어진 '배열' 반환 인풋값이 유사배열객체(키가 인덱스)인 ..
terminal 터미널 ctrl alt t prompt 프롬프트 터미널의 입력줄(한줄) ctrl c 터미널 강제 종료 CLI 명령어 pwd : print working directory 현재 위치 mkdir : make directories 새로운 폴더 생성 ls : list 현 위치의 폴더/파일 리스트 출력 -a all 숨긴 폴더/파일까지 모두 출력 -l 폴더나 파일의 형식(포맷)을 모두 표현 -al, -la 순서 상관 없음 * 참고 파일 타입 10자 1 d, -, l (directory, file, symbolic link) 2-4 소유자 권한 r, w, x(-) (read읽기, write쓰기, excute실행, 권한 없음) 5-7 그룹 사용자 r, w, x(-) 8-10 그 외 사용자 r, w, x..
element 찾기 Document.querySelector('셀렉터') 셀렉터에 해당하는 요소 찾기 Document.getElementById(id) 일치하는 id 찾기 element.className class 이름을 문자열로 반환 element.classList() class 이름을 DOMTokenList로 반환(공백으로 구분된 토큰 집합) class 추가하기 element.className += ' 이름' (공백 필요) element.classList.add('이름') (공백 불필요) class 삭제/수정 element.classList.remove() 제거하기. ','로 구분하여 여러값 한번에 삭제 가능 DOMTokenList.replace(A, B) A를 B로 변경 DOMTokenList.to..
css 속성 css 변수 root css파일에 :root 가상클래스를 만들어 유지보수를 손쉽게 할 수 있다.(색상, 폰트) :root { --color-black: ##0D0D0D; } vmin Viewport의 가로와 세로 길이 중 짧은 길이 vmax Viewport의 가로와 세로의 길이 중 긴 길이 z-index z축 정렬. 형제 요소의 z-index끼리 비교하여 숫자가 크면 앞 작으면 뒤에 배치 - auto 기본값 - -1(음수) 가장 아래(부모 요소 뒤로 감) filter - blur() 블러 - brightness() 밝기 - contrast() 대비 - drop-shadow() object에 그림자 주기 - grayscale() 흑백 - hue-rotate(0deg~360deg) 색상 변경 -..
와이어프레임(Wireframe) : 와이어로 설계된 모양 단순한 선이나 도형으로 웹/앱의 인터페이스를 시각적으로 묘사한 것 레이아웃과 구조를 보여주는 용도 목업(Mock-up) : 실제 작동하는 모습과 동일하게 하드코딩 와이어프레임> 목업> JavaScript 이 단계를 따르지 않으면 설계도 없이 건물을 짓는 것과 같다. Flexbox 속성 * 부모요소에 적용 display: flex; flex-direction 정렬축 정하기 - row 가로 정렬(기본값) - column 세로 정렬 - row-reverse 가로 역순 정렬 - column-reverse 세로 역순 정렬 flex-wrap 줄 바꿈 설정하기 : 하위 요소 크기가 상위 요소 크기를 초과하면 줄바꿈을 할지 여부 설정 - nowrap 줄바꿈하지 ..