개발새발개발/JavaScript

- promise 객체는 비동기 작업 실행, 상태 관리 및 결과 저장 등 다양한 역할을 해줌   Promise의 3가지 상태  - 대기 : 아직 작업이 완료되지 않은 상태- 성공 : 비동기 작업이 성공적으로 마무리 된 상태- 실패 : 비동기 작업이 실패한 상태(네트워크에러, 코드에러 등)  - 해결(resolve) : 대기 -> 성공- 거부(reject) : 대기 -> 실패   유튜브 예시 - 대기 : 영상 로딩- 해결 : 영상 로딩 완료 - 성공 : 영상 시청이 가능한 상태 - 거부 : 영상 로딩 실패- 실패 : 시청 불가능한 상태     promise 객체 생성하기   - 생성자의 인수로 비동기작업을 실제로 진행할 콜백함수를 넣어줌- 생성과 동시에 자동으로 콜백함수를 호출해 안에 있는 비동기 작업을 ..

Node.js- JavaScript 실행 환경(Run Time) = 구동기- 게임기 같은 역할    패키지 - Node.js에서 사용하는 프로그램의 단위      node 실행하기 1. npm init2. node 실행하려는 파일의 경로/파일명    경로 간단히하기(scripts)  - script 안에 명령어와 경로를 적어두면 터미널에 "npm run 명령어" 만 입력해도 실행할 수 있음    모듈 시스템 - 모듈을 생성하고 불러오고 사용하는 등의 모듈을 다루는 다양한 기능을 제공하는 시스템    CJS(Common JS 모듈 시스템)    - 별도의 파일 설치 필요 없음  외부로 모듈 내보내기module.exports = { name : name,} - 이름이 같으면 name, 이런식으로 적을 수 ..

콜백함수를 활용한 비동기 작업 처리    sum의 값을 add 함수 밖에서도 이용할 수 있게 하는 방법 - 비동기 처리의 결과 값을 사용하고자 하는 콜백함수를 전달해주면 됨     실행 순서 1.  add 함수 호출2. setTimeout 함수 호출3. 3초 뒤 callback 함수 호출4. sum 값 계산5. 매개변수로 받은 콜백함수를 sum 값으로 호출6. console.log에 출력   function add(a,b,callback) { setTimeout(()=> { const sum = a+b callback(sum) }, 3000)}add(1,2,(value) => { console.log(value)})      예제 - 비동기 작업의 결과를 또다른 ..

async- 어떤 함수를 비동기 함수로 만들어주는 키워드- 함수가 프로미스를 반환하도록 변환해주는 그런 키워드   - 객체를 그대로 반환하는 함수가 아닌,- 객체를 결과값으로 갖는 새로운  프로미스를 반환하는 함수로 변환됨    - 결과로 Promise 반환  - 애초에 promise를 반환하고 있는 비동기 함수라면- async 키워드가 별다른 일을 하지 않고 그냥 프로미스가 반환되도록 둠- 즉, 변화 없음    - 시간 설정을 두고 싶다면 setTimeout을 사용할 수 있음     - id와 name 값이 잘 전달됐음- 완료 상태임      await - async 함수 내부에서만 사용이 가능한 키워드- async가 없는 함수에서 사용하면 에러 발생 - 비동기 함수가 다 처리되기를 기다리는 역할을 함..

동기    - 동기 : 여러개의 작업이 있을 때 이 작업들을 순서대로 한 번에 하나씩 처리하는 것- 쓰레드 : 작업을 직접 실행하고 처리해주는 역할을 하는 것- 자바스크립트는 기본적으로 모든 코드가 동기적으로 실행됨     - 혹시라도 중간에 오래 걸리는 작업이 섞여있을 경우 전체 프로그램의 성능이 저하될 수 있다는 치명적인 단점이 있다     - 자바나 C언어는 여러개의 스레드를 동시에 사용하는 멀티스레드 기법을 사용하여 이러한 문제를 해결함- 하지만 자바스크립트 엔진에는 쓰레드가 1개밖에 없음-> 이를 해결하기 위해 비동기 방식을 사용함     비동기  - 비동기 : 작업을 순서대로 처리하지 않음- 앞선 작업을 기다리지 않고 다른 작업을 동시에 진행시킬 수 있음     - 결과값을 활용해야 할 때는 ..

Date 객체를 생성하는 방법   - Date라는 내장함수를 호출하여 생성- new라는 키워드와 함께 새로운 객체를 생성하는 내장함수들을 "생성자"라고 부름- 따로 인수를 안주면 현재 시간이 출력됨   - 날짜는 '-', '.', '/' 세개 모두 사용 가능 1970-01-01 1970.01.01  1970/01/01- 쌍따옴표 없이도 가능함 (숫자형도 가능)    - 뒤에 시간값을 넣어서 함께 출력할 수도 있음- 문자열이 아닌 숫자만 넣어도 가능함    Time stamp - 특정 시간이 "1970.01.01 00시 00분 00초"로부터 몇 ms가 지났는지를 의미하는 숫자값 반환    - utc (1970.01.01 00시 00분 00초) : 협정 세계시. 세계의 모든 나라가 표준으로 사용하는 시간이 ..

1. filter - 기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환하는 메서드      -  조건식만 반환하는 걸로 더 단축해서 간결하게 표현 가능 - 카테고리, 필터링 등 실제 프로젝트에서 다양하게 많이 사용됨    2. map - 배열의 모든 요소를 순회하면서 각각 콜백 함수를 실행하고- 그 결과값들을 모아서 새로운 배열로 반환- 매개변수로 현재 요소, 반복 카운트, 원본 배열을 전달 받음(forEach와 비슷함)     - 반환값 설정도 가능함- 반환값을 모아서 새로운 배열을 만들어 출력함 - 즉, 원본 배열의 값들을 변형한 새로운 배열 생성이 가능함     map 응용   - 맨 아래 코드 참고 - map을 이용해 객체의 특정 요소만 담은 배열을 생성해 출력할 수 있음   ..

1. forEach- 모든 요소를 순회하면서 각각의 요소에 특정 동작을 수행시키는 메서드   - 매개변수로 현재 요소(item), 반복 카운트(idx), 원본 배열(arr)을 전달 받음- 요소를 원하는 방식으로 변형할 수 있음    - 빈 배열을 만들고 그 곳에 원하는 처리를 한 요소를 push해 새로운 배열을 만들 수 있음     2. includes - 배열에 특정 요소가 있는지 확인하는 메서드   - 값이 있으면 true,  없으면 false 반환     3. indexOf   - 특정 요소의 인덱스(위치)를 찾아서 반환- 같은 값이 있을 경우 앞에서부터 탐색하기 때문에 가장 처음으로 일치하는 숫자의 인덱스 반환- 값이 없을 경우엔 -1 반환    4. findIndex- 모든 요소를 순회하면서 콜..

1. push- 배열의 맨 뒤에 새로운 요소를 추가함    - 배열.push(요소)- 여러개의 요소도 한 번에 추가 가능- 요소가 추가된 이후 배열의 길이를 반환함    2. pop - 배열의 맨 뒤에 있는 요소를 제거하고, 그 요소를 반환함       - 빈 배열에 pop을 사용해도 error가 발생하지 않음  3. shift - 배열의 맨 앞에 있는 요소를 제거 후 반환- pop처럼 요소를 제거하는 것은 같지만 "맨 앞"의 요소를 제거한다는 차이점   - pop과 같이 빈 배열에 사용해도 에러가 발생하지 않음   4. unshift - 배열의 맨 앞에 새로운 요소를 추가   shift 연산 주의사항- push, pop 보다 느림- 이유 : 맨 앞의 값을 변경하기 때문에 인덱스를 새로 붙여줘야 해서 느..

배열 순회  1. 인덱스 활용- 배열의 인덱스 값을 활용하기 때문에 추후에도 인덱스 값을 활용해 이것저것 응용이 가능함  2. for of 반복문 사용- 인덱스를 따로 저장하지 않기 때문에 인덱스 활용 불가능    객체 순회  1. Object.keys 내장함수 활용- 객체에서 key 값들만 뽑아서 새로운 배열로 반환   - 내장함수를 이용해 추출한 key 값 배열을 인덱스를 사용해 하나씩 출력할 수 있음   - for of 반복문을 사용해서 출력도 가능함  - 객체의 value 값을 추출하고 싶다면 인덱스를 사용해 추출할 수 있음   - 조금 더 고급스럽게, 가시성 있게 표현하는 방식- value 값에 person[key]를 저장하여 key, value로 출력해도 같은 결과가 나옴  2. Object...

원시타입과 객체타입     - p2 값을 수정해도 실제 메모리 안의 값을 수정하지 않고- 새로운 메모리 공간에 수정된 새로운 값을 넣기 때문에 p1의 값은 변함이 없음- 즉, 원본은 변하지 않는 불변값임      - 객체는 동적으로 값을 할당받기 때문에 별도의 공간에 저장하고 그 공간을 가르키는 참조값을 사용함- 위와 같이 `let o2 = o1`으로 선언하면 o2와 o1은 같은 참조값을 바라보게 되고,- o2의 값만 수정해도 원본 배열이 수정되어 o1의 값도 함께 수정됨- 즉, 원본의 값이 수정됨(가변값)   객체 타입 주의사항1. 의도치 않은 값의 수정  해결 방법- 그러므로 객체의 값을 사용할때는 단순히 대입연산자를 사용하기보단,- 새로운 객체를 생성한 뒤 스프레드 연산자 등을 사용하여 내부 속성을..

Spread 연산자- 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할  배열  - 하나하나 넣을 필요 없이 spread 연산을 사용하면 간편하게 표현할 수 있음- arr1 에 저장된 값들을 하나씩 출력해줌 - 인덱스로 하나하나 지정해줄때와 달리, 배열이 수정되도 영향받지 않음   객체  - 객체도 배열과 사용법은 비슷함    함수   - 함수의 인자를 전달할 때에도 spread 연산을 사용할 수 있음      - 빈 값은 undefined가 출력됨     Rest 매개변수   - 매개변수 값을 배열로 저장- 매개변수를 저장하는 공간인 ( ) 소괄호 안에 사용되었으므로 매개변수이며, spread 연산자와는 엄연히 다르다 - ...arr1 은 spread 연산- ...rest는 rest 매개변수 ..