FE

📖 [JS] 동기와 비동기

자바스크립트에서 "동기"와 "비동기"는 코드 실행 방식의 차이를 설명하는 중요한 개념입니다. 이 두 개념은 특히 비동기 프로그래밍이 필수적인 현대 웹 개발에서 매우 중요합니다. 동기(Synchronous)동기적 코드 실행은 코드가 순차적으로 한 줄씩 실행됨을 의미합니다. 즉, 한 작업이 완료된 후에야 다음 작업이 시작됩니다. 이 방식은 이해하기 쉽고 예측 가능하지만, 시간이 많이 걸리는 작업(예: 네트워크 요청, 파일 읽기 등)이 있을 경우, 브라우저가 응답하지 않게 될 위험이 있습니다. 자바스크립트와 스레드자바스크립트는 싱글 스레드(Single-Threaded) 언어로 설계되었습니다. 이는 자바스크립트 엔진이 한 번에 하나의 작업만 실행할 수 있음을 의미합니다. 하지만 자바스크립트는 비동기 프로그래밍 ..

📖 [JS] 배열 변형 메서드

filter 메서드 기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환let arr1 = [ {name: "kim", bobby: "game"}, {name: "serin", hobby: "game"}, {name: "sam", hobby: "football"}];const gamePeople = arr1.filter((item) => { if(item.hobby === "game") return ture;});// const gamePeople = arr1.filter((item) => item.hobby === "game");console.log(gamePeople); // >> (2) hobby:game을 가진 요소 출력  filter 메서드는 웹 서버를 개발 할 때, ..

📖 [JS] 배열 탐색 메서드

배열 메서드 중 순회(Iteration)와 탐색(Search)에 관련된 메서드는 배열의 요소를 반복적으로 처리하거나 특정 조건을 만족하는 요소를 찾는 데 사용됩니다.  // 1. forEach// 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드let arr1 = [1, 2, 3];// 배열의 요소의 갯수만큼 호출이 됨. 현재의 경우는 총 3회arr1.forEach(function (item, idx, arr) { console.log(idx, item * 2); >> 0 2 / 1 4 / 2 6};let doubleArr = [];arr1.forEach((item) => { doubledArr.push(item * 2);});// 2. includes// 배열에 특정 요소..

📖 [JS] 배열 메서드

배열 메서드는 배열(Array) 객체에서 사용할 수 있는 함수들로,배열의 요소를 추가, 제거, 정렬, 탐색하는 등의 작업을 수행하는 데 사용됩니다.자바스크립트에서는 다양한 배열 메서드가 제공되며,이들은 배열을 조작하고 데이터 처리를 간편하게 해줍니다.  // 1. push// 배열의 맨 뒤에 새로운 요소를 추가하는 메서드let arr1 = [1, 2, 3];arr1.push(4);arr1.push(4,5,6,7);const newLength = arr1.push(4, 5, 6, 7);console.log(arr1);console.log(newLength);  // 2. pop// 배열의 맨 뒤에 있는 요소를 제거하고, 반환let arr2 = [1, 2, 3];const poppedItem = arr2.p..

📖 [JS] 반복문으로 배열과 객체 순회

순회란? 배열, 객체에 저장된 여러개 값에 순서대로 하나씩 접근하는 것을 말함// 배열 순회let numbers = [1, 2, 3];// 객체 순회let person = { name:"kim", age: 27, hobby: "game"};// 반복문을 이용한 배열, 객체 순회for (let value of numbers) { console.log(value);}for (let key in Object.keys(person)) { console.log(key);}  // 배열 순회let arr = [1, 2, 3];// 배열 인덱스for (let i = 0; i   // 배열 순회let arr = [1, 2, 3];// 배열 인덱스for(let i = 0; i

📖 [JS] Spread 연산자 & Rest 매개변수

Spread 연산자   Spread 연산자는 배열이나 객체를 개별 요소로 분해하여 함수 호출이나 다른 배열, 객체 내에 삽입할 때 사용됩니다. Spread 연산자는 세 개의 점(...)으로 표현됩니다  // Spread 연산자// -> Spread 흩뿌리다, 펼치다 라는 뜻// -> 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할let arr1 = [1, 2, 3];let arr2 = [4, 5, 6];  여기서 arr2 배열에 arr1 배열의 값들을 추가해서 사용하고 싶다면 let arr1 = [1, 2, 3];let arr2 = [4, arr1[0], arr[1], arr[2], 5, 6];  위와 같이 사용할 수는 있지만 굉장히 귀찮고, 위험합니다.그 이유는 배열의 원소가 나중에 더 추가..

📖 [JS] 구조 분해 할당

자바스크립트에서 구조 분해 할당이란 배열이나 객체에 저장된 여러 개의 값들을말 그대로 분해해서 각각 다른 변수에 할당하는 문법을 말합니다.    배열의 구조 분해 할당 let arr = [1, 2, 3];let one = arr[0];let two = arr[1];let three = arr[2];------------------------------const arr = [1, 2, 3];// 기본 배열 구조 분해 할당const [a, b, c] = arr;console.log(a); // 1console.log(b); // 2console.log(c); // 3// 일부 요소만 할당const [x, y] = arr;console.log(x); // 1console.log(y); // 2// 나머지 요소..

📖 [JS] 자바스크립트에서의 단락

자바스크립트에서 단락 평가(short-circuit evaluation)는 논리 연산자(&& 및 ||)를 사용할 때, 전체 표현식을 평가하지 않고도 결과를 결정할 수 있는 경우 평가를 중단하는 방법을 말합니다. 이는 성능 향상 및 불필요한 코드 실행 방지에 유용합니다.  논리 AND (&&) && 연산자는 왼쪽에서 오른쪽으로 평가됩니다. 첫 번째 피연산자가 false로 평가되면, 전체 표현식은 false가 되므로 나머지 피연산자는 평가되지 않습니다. const a = false && console.log("이 코드는 실행되지 않습니다.");console.log(a); // false 위 예제에서 false가 첫 번째 피연산자이기 때문에 console.log는 실행되지 않고, 표현식 전체는 false로 평..