이렇게 각 변수에 배열에 담긴 인자를 부여해서 출력할 수도 있다. 하지만 배열의 멤버 수가 많으면 비효율적이다.
1 2 [ [ 3, 4] , 5]
이 때 사용하는 것이 스프레드 연산자이다. 스프레드 연산자 = ... a1= 1 b1 = 2가 출력되고 나머지 [3,4], 5 는 rest1이라는 하나의 배열에 함께 담겨서 반납된다,. 1 2 3 4
구조 자체를 만들어서 각 인자에 대입해서 추출할수도 있다.
unstructure_object 객체 구조 분해, 객체 비구조화 할당
기존 객체의 추출방식 배열은 딕셔너리의 형태와 같으니 출력하는 문법도 비슷하다. 객체명.키 , 객체명[키] 커피 1800
pay에 있는 값들을 왼쪽의 객체에 할당하여 출력하는 방법이다, 더욱 간소화되고 편하게 데이터를 얻어낼 수 있다. 만약 그냥 console.log(price)를 입력하면 오류가 나온다 1800 2000
원 데이터는 수정되지 않고 보존된다 새로운 객체 생성
만약 여기서 카페인 함량만 출력하고 싶다면? => 중첩 구성 시 비구조화할당 사용한다
pay2를 객체{객체}로 할당한 이후에 꺼내면 한번에 값을 출력할 수 있다.
spread_operator 기본적인 생각으로 첫번째처럼 배치하면 각각의 배열로 나온다, 이 때 spread연산자를 이용하면 원본을 깊게 카피해서 병합시킬 수 있다. 1 [2, 3, 4, 5 ] 배열의 구조를 분해할 시 이전에 있었던 내용처럼 첫 인자에만 값이 들어가고 나머지는 배열로 묶여 반환된다.
문자열을 분해할 때 for 문을 사용하지 않아도 하나하나 분해하여 출력할 수도 있다.
각 객체를 병합할 때에 주로 사용하게 된다. 객체를 병합할 때 같은 멤버인 경우는 나중에 들어온 값이 최종값이 된다. 예를 들어 s1 과 s2 가 병합되었는데 s1의 스코어는 100이다, 이후 s2가 병합되면서 스코어 90 데이터가 들어와서 병합되어서 출력값은 90이 된다. 반대의 경우도 마찬가지이다.
원본이 그대로 카피되지만 s3의 스코어값을 수정하여 원본에는 영향을 미치지 않고 카피만 되는것을 볼 수 있다.
객체를 병합하여 arr4는 현재 [1, 2, 3, 4, 5, 6] 이다. 이 때 3개의 인자를 가진 test 함수에 순서대로 값이 들어가기 때문에 (할당) 출력은 둘 다 1 2 3 이 되는것이다.
100 파이썬은 비구조화 할당을 매개변수에 적용한 것,
그리고 ..data는 파이썬의 **kwargs같이 가변인자로 적용되어 a = 1 을 제외한 다른 값들이 배열로 출력되는 것을 확인할 수 있다.
async_promise 비동기처리 ( 순서 없이 병렬 진행) 파일 I/O를 이용하여 재현 파일 시스템 =fs 모듈을 가져와서 진행 node에서 모듈을 가져와서 수행해야 한다.
1. 파일 시스템 가져와서 진행
요 명령어로 모듈을 가져오는 변수 fs를 설정한다.
2. 비동기 상황 연출 현재 txt 파일 1, 2, 3이 있다. 1 은 hi 3은 hello 2는 뉴스 기사글 엄청 많이 긁어와서 25000행정도 되는 txt파일이다. 비동기상황은 간단하게 병렬구조로 파이썬처럼 순서 1, 2, 3이 아니라 먼저 진행되는 코드순으로 출력이 되는것이다.
먼저 1.txt에는 아스키코드가 번역되어 출력되는 함수를 기입했다. 그래서 문자열이 5개인 3.txt가 먼저 출력되고 이후 아스키코드가 한번 돌아간 1.txt가 출력된다. 그리고 마지막으로 가장 처리시간이 오래걸리는 2.txt가 출력되는것이다.
이를 순서대로 출력되게 하려면 어떻게 해야 할까?
콜백 함수를 사용해서 구성을 조정해서 해결했다. 과거에는 이런 식으로 많이 했다고 하지만 현대에는 가독성, 해석, 처리 등등 너무나 불편한 점이 많아서 이를 대체할 다른 방법들이 많이 생겨났다.
promise 정의 함수를 선언하고 작업의 성공, 실패 여부에 따라 출력하는 함수다. 정의한 es6Promise 함수를 사용하면 예외처리 기능을 사용해서 읽기가 성공하면 실행되도록 코드를 만들 수 있다, 일종의 조건문?
이 함수를 사용해서 1이 성공하면 2, 2가 성공하고 3을 출력할 수 있다
그리고 현재에 사용하는 가장 최신문법은 async ~ await 이다. 실행 될때까지 기다려! 라는 뜻의 문법으로 자세한 설명은 구글 검색 plz
try_catch 예외처리 파이썬과 맥락은 동일하다.
예외 처리 try catch finally로 진행된다. 1. try console.log( 1 ) -> 1 출력 2. makeException 함수 실행 3. 1/0 , -1/0 실행 => js에선 오류 없이 infinity 출력됨 4. new Error ('임시오류')로 오류에 대한 변수 설정 5. throw로 바로 catch로 넘어감 / 여기서 console.log( 2 ) 스킵 6. console.log( 3 , error ) 에서 3이 출력되고 error 실행, 여기서 변수 설정된 임시 오류 출력 7. finally는 무조건 실행 됨, console.log( 4 ) 출력 결과값
html
css selector
html 문서 내에서 특정 엘리먼트를 찾는 방법
활용
js에서 html 엑세스 시
웹 대상 데이터 수집시
css에서 디자인 적용 시
규칙
아이디값(문서 내 고유한 값)
클래스값
요소명
부모 요소명
조합(위의 방법을 섞어서)
열거 ( , 로 구분)
서열 (부모, 자식, 형제, 자손)
반복적
의사 결정 셀렉터 (리스트적 요소)
입력
속성 셀렉터
전체 코드
하나하나씩 설명해보겠다.
1. jQuery 라이브러리 불러오기
jQuery는 약 10년전쯤에 it 세상에 폭풍을 불러왔던 엄청난 프로그램이라고 한다. 이를 위한 수업까지 있을 정도로 다양한 기능을 제공하고 개발환경에 엄청난 센세이션이었다고 한다. 이번 수업에서도 이를 활용하기 위해서 먼저 불러온다.
2. 글 뭉치 삽입
웹 페이지에 글을 입력하기 위해서 body칸에 단락을 추가한다. <h2>는 제목, 페이지에 크게 제목처럼 들어간다, 그리고 같은 <h2>태그를 사용해서 제목 내용 클래스 적용이라는 글을 작성해준다. <p>태그는 글 단락이라고 생각하면 된다.
여기까지 웹 사이트에서 열면 이렇게 출력된다.
3. 색 입히기
이제 스크립트에 각 글자에 색, 배경색을 부여하는 스크립트를 추가한다. 이제 javascript의 문법을 적용해서 입력하는것이다. 이 때 jQuery가 작동하는데 기존에 document.querySelector('css selector') 의 기능을 수행하는게 그저 $(*) 로 끝나기 때문에 jQuery가 아주 유용한 것이다.
19번 = 모든 컬러를 파란색으로 바꿈 21번 = 아이디가 contents인 요소를 찾아서, 그것만 빨간색으로 바꿈 29번 = 아이디가 mystyle인 요소를 찾아서, 그것의 배경색에 노란색을 추가함.
