eatthefrog

아래는 JavaScript 배열과 객체의 특성과 자주 사용되는 메서드 및 문법을 정리한 내용입니다. 이를 이해하고 자주 연습하면 문제 풀이에 큰 도움이 됩니다.1. forEach() — 목록의 각 항목에 작업하기실생활 예시: 쇼핑몰에서 사용자가 장바구니에 담은 상품의 이름과 가격을 출력const cart = [ { name: 'Laptop', price: 1500 }, { name: 'Phone', price: 800 }, { name: 'Headphones', price: 150 }];cart.forEach(item => { console.log(`Product: ${item.name}, Price: $${item.price}`);});출력Product: Laptop, Price: $1500Pr..

사용된 코드와 문법1. forEach() 사용 이유game.scored.forEach((player, index) => { console.log(`Goal ${index + 1}: ${player}`);});이 문법을 선택한 이유forEach()는 배열을 순회할 때 가장 직관적인 방법 중 하나입니다.game.scored는 배열이므로 각 요소와 인덱스가 필요할 때 사용하기 적합합니다.forEach()를 사용하면 인덱스와 값을 한 번에 접근할 수 있어 코드를 간결하게 작성할 수 있습니다.언제 사용해야 할까?배열의 각 요소에 대해 순서대로 작업을 해야 할 때.**반복문을 단순히 순회만 하면서 부작용을 발생시키는 작업 (예: console.log)**일 때.어떻게 판단할까?배열을 순회하면서 결과를 저장하지 않..

useEffect VS React Query       조건: 사용자가 식당 예약 목록을 보고 있다. 이때 최신 예약 데이터를 서버에서 가져와야 하며, 예약 목록이 실시간으로 업데이트되도록 하고 싶다.1. useEffect로 구현하는 방법import { useEffect, useState } from 'react';function ReservationList() { const [reservations, setReservations] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function fetchReser..

1. React 핵심 개념JSX: HTML과 유사한 문법을 JavaScript 내에서 작성할 수 있게 하는 React의 핵심 문법.컴포넌트(Component): 재사용 가능한 UI 구성 요소. 함수형 컴포넌트와 클래스형 컴포넌트의 차이 이해.Props와 State:Props: 부모에서 자식으로 데이터를 전달하는 읽기 전용 객체.State: 컴포넌트 내부에서 관리되는 동적인 데이터.Lifecycle Methods: 클래스 컴포넌트에서 사용되는 생명주기 메서드 (e.g., componentDidMount, componentDidUpdate).Hooks:필수적인 Hook: useState, useEffect추가적인 Hook: useContext, useReducer, useMemo, useCallback, u..

Readable Code (읽기 쉬운 코드)원칙: 다른 사람이 이해할 수 있고, 자신도 1년 뒤에 이해할 수 있도록 코드를 작성한다.실생활 예시:"어제 식료품 쇼핑 목록"을 작성하는 상황에서, 단순히 "A, B, C"라고 적기보다, "우유, 계란, 빵"이라고 명확히 적는 것처럼 변수와 함수명을 명확히 지정해야 한다.Tip: "Clever하지 말고, 명확하자!"핵심원칙:1. 변수명은 '무엇을 담고 있는지' 명확히 작성나쁜 예시: x, y, z좋은 예시: userName, totalScore, isLoggedIn2. 함수명은 '무엇을 하는지' 명확히 작성나쁜 예시: calculate좋은 예시: calcuateTotalPrice()3. 실생활 예시나쁜 예시: 이거, 저거, 그거좋은 예시: 우유, 계란, 빵4...

this는 상황에 따라 달라진다. 전역 문맥에서는 세상 전체(전역 객체)를 가리킴.객체 내부 메서드에서는 그 객체를 가리킴.일반 함수는 호출하는 방식에 따라 this가 달라짐.화살표 함수는 상위 스코프의 this를 그대로 물려받음.  일반 함수는 호출하는 방식에 따라 this가 달라짐.- 일반함수는 widonw의 지역 함수다.function main() { console.log(this);}main(); //window객체 뱉음 (window.main과 같다.)  - 일반 함수에서 this는 함수가 어디에 선언되었든 상관 없이 this의 값은 함수를 호출한 객체를 가리키게 된다.function main() { console.log(this);}const object = { name: '큰별', ma..

일반 함수 : 함수 선언식과 함수 표현식함수 선언식 : function 키워드 사용 🅾️ , 익명함수 ❌  , 호이스팅 🅾️ 함수 표현식: functio 키워스 사용 🅾️   , 익명함수 🅾️(함수를 변수에 할당) , 호이스팅 ❌(함수가 무분별하게 호출되는 것을 막을 수 있다.)main() //함수 선언 전에 호출 가능 cosnt main = function() { console.log("Hello");}main(); //함수 선언후에 호출  화살표 함수(함수 표현식을 간단하게 만든 ver). 변수 = (매개변수) => {함수}- 호이스팅 피할 수 있음- 함수 표현식보다 간단함cosnt main = () => { console.log("Hello") } main() 매개변수// 함수 ..

모듈 패턴의 Primary goals⭐ 캡슐화: 내부 변수와 함수는 외부에서 접근할 수 없고, 필요한 부분만 노출합니다. ⭐  전역 네임스페이스 오염 방지: 전역 변수의 남발을 줄입니다. ⭐  재사용성: 모듈화된 코드는 독립적으로 동작하며 재사용이 가능합니다. 또한 유지보수성과 가독성이 향상됩니다. 모듈 패턴의 단점⭐  복잡한 의존성 관리를 위해 추가 도구 (Webpack, Rollup 등) 가 필요할 수 있습니다.   ES6 모듈 시스템_기본 예제* 쇼핑몰에 옷을 등록 (옷장.js) const 셔츠 = "셔츠";const 바지 = "바지";const 양말 = "양말";// 양말만 외부에 공개export const 공개된아이템 = 양말;  * 쇼핑몰에서 옷 가져오기 (메인.js)import { 공개된아이..

Top-Level Await은 자바스크립트에서 ES2022(ES13)부터 도입된 기능으로, 모듈의 최상위 레벨에서 await를 사용할 수 있도록 허용합니다. 최상위 레벨에서 비동기 작업을 기다릴 수 있게 되어 코드가 더 간단하고 직관적입니다.   1. Top-Level Await이란?기존에는 await를 함수 내부(특히 async 함수 내)에서만 사용할 수 있었습니다.Top-Level Await은 코딩 과정의 취상위에서 "기다려야하는 일을 기다렸다가" 다음으로 넘어가는 것을 의미한다. 즉, 기다려야 하는 일이 끝날때까지 코드 전체를 멈춥니다. 예시//일반 스크립트function boilWater() { return new Promise(resolve => setTimeout(() => resolve("..

코드 참조 flex box    이유:display: flex로 부모 박스가 Flex 컨테이너가 됨display: flex는 부모 박스를 Flex 컨테이너로 만들어 내부의 자식 요소(.inner)를 정렬할 수 있는 기능을 활성화합니다.justify-content로 수평 정렬 제어justify-content: center는 Flex 컨테이너 내부에서 자식 요소를 수평 중심으로 정렬합니다.수평으로 자식 요소가 정확히 가운데 위치하도록 설정됩니다.align-items로 수직 정렬 제어align-items: center는 Flex 컨테이너 내부에서 자식 요소를 수직 중심으로 정렬합니다.수직 방향에서도 자식 요소가 정확히 가운데 위치하게 됩니다.  Flexbox의 장점코드..