Bluebull웹개발

JavaScript의 try-catch 구문: 흐름과 활용 방법JavaScript에서 try-catch 구문은 오류(예외)가 발생할 가능성이 있는 코드를 실행하고, 오류가 발생하면 적절히 처리하기 위해 사용됩니다. 즉, 코드 실행 중 오류가 발생하면 흐름이 catch 블록으로 넘어가 오류를 처리하는 구조입니다.📌 기본적인 try-catch 구문try { // 실행할 코드 // 오류가 발생하면 실행이 중단되고 catch 블록으로 이동함} catch (error) { // try 블록에서 오류가 발생하면 실행됨} finally { // 선택적으로 사용, 오류 발생 여부와 관계없이 항상 실행됨}📌 실행 흐름 설명 (예제 포함)✅ 1. 정상 실행 시 (try만 실행됨)try { c..

✅ JavaScript 객체 및 데이터 변환 정리📌 1. Object를 사용한 키-값 반환객체에서 키, 값, 키-값 쌍을 추출하는 방법이다.const obj = { name: "Alice", age: 25 };console.log(Object.keys(obj)); // ['name', 'age'] (키만 반환)console.log(Object.values(obj)); // ['Alice', 25] (값만 반환)console.log(Object.entries(obj)); // [['name', 'Alice'], ['age', 25]] (키-값 배열 반환)✅ Object.keys(obj) → 키(속성 이름) 배열 반환✅ Object.values(obj) → 값 배열 반환✅ Object.entri..

✅ 객체의 키-값 다루기 (JavaScript)📌 1. 기본적인 설명const [orderInfo, setOrderInfo] = useState({ column: 'name', ordering: 'asc' });orderInfo를 사용하면 { column: 'name', ordering: 'asc' } 값이 들어 있음.setOrderInfo를 호출하면 상태가 변경됨.📌 2. 객체에서 키값을 이용해 값 가져오기console.log(orderInfo.column); // 'name'console.log(orderInfo.ordering); // 'asc'📌 3. 여러 개의 값 한 번에 출력하기console.log(orderInfo.column, orderInfo.ordering); // 'name' '..

JavaScript의 filter(), concat(), map() 함수 정리1. filter()목적: 배열에서 특정 조건을 만족하는 요소들만 추출하여 새로운 배열을 생성특징:원본 배열을 변경하지 않음 (immutable)조건을 만족하는 요소만 새로운 배열에 포함콜백 함수는 각 요소를 순회하며 true 또는 false를 반환해야 함문법:array.filter(callback(element, index, array), thisArg)callback(element, index, array): 각 요소를 검사하는 함수element: 현재 순회 중인 요소index (선택 사항): 현재 요소의 인덱스array (선택 사항): filter가 호출된 원본 배열thisArg (선택 사항): callback 내부에서 t..

🎯 React 초급 개발자가 알아야 할 HTML, for, if, JavaScript 개념 총정리🚀 React를 사용하려면 HTML, for, if, JavaScript를 어떻게 다루는지 반드시 알아야 해!📌 React는 JSX(JavaScript + XML) 문법을 사용하기 때문에, 기본적인 개념을 React에서 어떻게 적용하는지 이해해야 함!📌 1. HTML 관련 (JSX에서 변경되는 것들)React에서는 JSX 문법을 사용하기 때문에 일반 HTML과 다르게 써야 하는 요소가 있음.✅ (1) class → className🚨 HTML에서 class를 사용할 수 없음!💡 React에서는 className으로 써야 함.// ❌ 잘못된 코드 (HTML 방식)Hello// ✅ 올바른 코드 (Rea..

📌 자바스크립트 함수의 생명주기 (팩트 정리)자바스크립트 함수는 실행 흐름에 따라 선언 → 호출 → 실행 → 종료 단계를 거치며 동작한다.🚀 1️⃣ 함수의 생명주기 단계단계설명주요 개념선언 (Definition)함수를 정의하는 단계function 키워드, 함수 표현식, 화살표 함수호출 (Invocation)함수를 실행하는 단계실행 컨텍스트(Execution Context) 생성실행 (Execution)함수 내부 코드 실행콜스택(Call Stack)에 추가됨종료 (Termination)return 또는 코드 실행 종료콜스택에서 제거됨1️⃣ 선언 (Definition) - 함수 정의✅ 함수가 정의되는 단계✅ 선언 방식:function 키워드 사용함수 표현식 (const func = function() {..

I. 화살표 함수의 핵심 문법 총정리화살표 함수는 간결한 문법과 this의 일관성 때문에 자바스크립트에서 널리 사용됩니다.이제까지 배운 내용을 토대로, 화살표 함수의 기본 문법, 핵심 개념, 반환 방식 등을 정리해 보겠습니다.1. 화살표 함수의 기본 문법 (Syntax)const 함수이름 = (매개변수1, 매개변수2, ...) => 표현식;✔ 한 줄 표현식이면 return 없이 값이 자동 반환됩니다.✔ 중괄호 {}를 사용하면 반드시 return을 명시해야 합니다.const add = (a, b) => a + b; // 암묵적 반환 (Implicit Return)console.log(add(2, 3)); // 5const addExplicit = (a, b) => { return a + b; }; //..