전체 글 75

동기 비동기관련 코드

1. 동기 / 비동기 비교동기와 비동기 코드 비교하기        1) 동기 코드console.log("손님1 커피 주문");console.log("손님1 커피 제조 완료");console.log("손님2 커피 주문");console.log("손님2 커피 제조 완료");        2) 비동기 코드console.log("손님1 커피 주문");setTimeout(() => { console.log("손님1 커피 제조 완료");}, 2000); // 2초 후에 실행console.log("손님2 커피 주문");setTimeout(() => { console.log("손님2 커피 제조 완료");}, 1000); // 1초 후에 실행 2. Promise 사용해보기  1. Promise로 비동기 작업 처리하기..

프론트엔드 2024.10.22

객체 리터럴, 원시값과 객체의 비교, 함수

[ 객체 리터럴 ] 1-1. 객체란?자바스크립트는 객체기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체자바스크립트의 객체는 키과 값으로 구성된 프로퍼티들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.객체는 데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드로 구성된 집합이다. 객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을..

STUDY_JAVASCRIPT 2024.10.21

동기,비동기 / promise & async/await

[ 용어설명 ]동기 : 작업이 순차적으로 처리되며, 이전 작업이 완료될 떼까지 다음 작업을 시작하지 않는 방식비동기 : 작업이 병렬적으로 처리되어, 결과를 기다리지 않고 다른 작업을 동시에 처리할 수 있는 방식논블로킹 : 작업이 실행되는 동안 다른 작업의 진행을 막지 않는 방식. 비동기 작업을 통해 구현됨이벤트 루프 : 자바스크립트의 비동기 작업을 관리하고, 콜백 큐에 있는 작업을 콩 스택에 추가해 실행하는 매커니즘프로미스 : 비동기 작업의 성공 또는 실패를 나타내는 자바스크립트 객체로, 비동기 작업의 결과를 처리하는 데 사용됨async / await : 프로미스를 보다 직관적으로 처리할 수 있게 해주는 자바스크립트 구문으로, 비동기코드를 동기 코드처럼 작성할 수 있게 함.[ 학습내용 ]   동기동기 방..

프론트엔드 2024.10.21

2024.10.19

[ 용어 설명 ]- API서로 다른 시스템이 서로 소통할 수 있는 방법 또는 창구일종의 메뉴판 역할- DOM웹 페이지 문서를 구성하는 요소들을 트리구조로 표현한 객체브라우저에서 HTML 문서를 자바스크립트로 제어할 수 있게 해주는 인터페이스- BOM문서 이외의 모든 것을 제어하기 위해 제공하는 추가 객체- EVENT브라우저에서 사용자가 웹 페이지와 상호작용할 때 발생하는 사건다양한 종류의 Event가 있음 ex) click,scroll,submit,keydown 등Web APIs브라우저가 웹 애플리케이션이 다양한 작업을 수행할 수 있도록 제공하는 모든 API를 포괄하는 용어다양한 종류DOM APIs (웹페이지 요소조작)querySelector, getElementById, **innerHTML**등Net..

자바스크립트 2024.10.18

모던스크립트 [연산자, 제어문,타입변환과 단축평가]

[연산자]: 하나 이상의 표현식을 대상으로 산술, 할당,비교,논리,타입,지수연산등을 수행해 하나의 값을 만든다. 피연산자 : 연산의 대상→ 값으로 평가될 수 있는 표현식이어야한다. 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다. 피연산자가 "값"이라는 명사의 역할을 한다면 연산자는 "피연산자를 연산하여 새로운 값을 만든다"라는 동시의 역할을 한다고 볼 수 있다. 다시말해, 피연산자는 연산의 대상이 되어야 하므로 값으로 평가할 수 있어야한다. 연산자는 값으로 평가된 피연산자를 연산해 새로운 값을 만든다. 1) 산술 연산자 ☞ 산술연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NAN을 반환한다.이항 산술 연산자..

STUDY_JAVASCRIPT 2024.10.17

알고리즘 특강_4

- map : 배열을 순환하고 원래 배열의 길이와 동일한 길이의 배열을 반환- filter : 배열을 순환하고 원래 배열의 길이와 같거나 짧은 길이의 배열을 반환- forEach : 배열을 순환하고 배열을 반환하지 않음. [ Q. K번째 수]문제 설명배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다.예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다.1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다.2에서 나온 배열의 3번째 숫자는 5입니다.배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매..

알고리즘 2024.10.15

알고리즘 특강_3

[ 복잡도 ] - 시간 복잡도: 입력 값과 연산 수행 시간의 상관관계를 나타내는 척도 (= 코드의 시간적 효율성) - 시간 복잡도의 개념 : 코드의 효율성 측정을 위해 실제 실행 시간이 얼마나 걸릴지 표현해 보고 싶다. - 실제의 실행시간에 영향을 주는 여러가지 요인 -> 컴퓨터의 처리 속도 -> 사용된 언어 -> 컴파일러의 속도   => 코드가 단순히 몇 초, 몇 분 만에 실행됬다는 것을 기준으로 성능을 평가하기 어렵다. ( 점근적 표기법 )=> 입력값에 따른 수행 시간의 증가율에 집중하기 위해 중요하지 않은 요소를 제거하는 표기법function solution(n) { let count = 0; // 2n² // 2n²번 반복 for (let i = 0; i // 상수, 낮은 차항, 계수는 무..

알고리즘 2024.10.15

알고리즘 특강 _ 2

[문제 1 _ 없는 숫자 더하기] 문제 설명 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ numbers의 길이 ≤ 9 0 ≤ numbers의 모든 원소 ≤ 9 numbers의 모든 원소는 서로 다릅니다. 입출력 예 numbers result [1,2,3,4,6,7,8,0] 14 [5,8,4,0,6,7,9] 6 입출력 예 설명 입출력 예 #1 5, 9가 numbers에 없으므로, 5 + 9 = 14를 return 해야 합니다. 입출력 예 #2 1, 2, 3이 numbers에 없으므로, 1 + 2 + 3 = 6을 ..

알고리즘 2024.10.11