📌 전체 게시글 목록

1. Styled ComponentsStyled Components는 CSS-in-JS 라이브러리 중 하나로, 스타일을 자바스크립트 파일 안에 작성하고, 컴포넌트 단위로 캡슐화할 수 있다.장점 😄자동 최적화: 불필요한 클래스 생성이나 중복된 스타일 제거 등 최적화가 자동으로 이루어진다.동적 스타일링: Prop에 따라 동적으로 스타일을 변경할 수 있다.CSS의 범위: CSS가 컴포넌트 단위로 캡슐화되어 전역 네임스페이스 충돌 문제가 없다.단점 😞런타임 성능 저하: Styled Components는 스타일을 자바스크립트로 처리하기 때문에 런타임 성능에 영향을 미칠 수 있다. 특히 많은 컴포넌트가 있을 경우 스타일을 계산하고 적용하는 시간이 증가할 수 있다.패키지 크기 증가: 추가적인 라이브러리를 포함해야..

브라우저의 경우 setTimeout 을 예로 들면, Call Stack에서 Web API setTimeout 요청 이후 제거됩니다.Web API에서 setTimeout 이 완료되면 setTimeout callback 함수를 Callback Queue(자료구조의 queue처럼 구현된 저장소, 세분화된 queue들이 있음)로 옮깁니다.현재 실행한 자바스크립트 코드를 모두 실행한 뒤, Event Loop가 지속적으로 Call Stack이 비어있는지 확인하고, 비어있다면 Callback Queue에 있는 작업 순서대로 Call Stack으로 넘겨 실행하도록 만듭니다.

Scssnav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}CSSnav ul { margin: 0; padding: 0; list-style: none;}nav li { display: inline-block;}nav a { display: block; padding: 6px 12px; text-decoration: none;}믹스인 예시Scss@mixin theme($theme: DarkGray) { background: $theme; ..

1. PromisePromise는 비동기 작업의 결과를 나타내는 객체입니다. 비동기 작업이 성공적으로 완료되면 결과값을 제공하거나, 실패하면 에러를 반환합니다.주요 특징상태: Pending (대기), Fulfilled (이행), Rejected (거부) 세 가지 상태를 가집니다.메소드: then, catch, finally 메소드를 사용하여 결과를 처리합니다.const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve("데이터 수신 완료"); }, 1000); });};fetchData().then(result => { console.log(result); // "데이터 ..

1️⃣ 자바스크립트에서 콜백(콜백 함수)이 무엇인지 설명해 주세요.🏷️ 자바스크립트에서 콜백 함수는 다른 함수의 인자로 전달되어, 해당 함수가 작업을 완료한 후 호출되는 "나중에 호출될 함수"입니다.// 각 배열의 요소에 콜백 함수를 호출const numbers = [1,2,3,4,5];numbers.forEach((number)=> console.log(number));콜백 함수의 문제점많은 콜백 함수가 중첩되면 코드가 복잡하고 가독성이 떨어집니다. 이를 방지하기 위해 'Promise', 'async/await'과 같은 비동기 처리 방법이 사용됩니다.2️⃣ 배열에 있는 filter, map과 같은 메서드에 있는 콜백과 setTimeout에 있는 콜백의 차이에 대해 설명해 주세요.🏷️ filter나 ..

🚪 먼저 알아야할 개념컴포넌트 언마운트란 ?컴포넌트 언마운트(Unmount)는 React 컴포넌트가 DOM에서 제거되는 상태를 의미합니다. 즉, 컴포넌트가 화면에서 사라지거나 더 이상 필요 없을 때 발생합니다.일반적으로 컴포넌트가 언마운트되는 경우 💭사용자가 페이지를 이동할 때조건부 렌더링을 통해 컴포넌트가 숨겨지거나 제거될 때부모 컴포넌트가 언마운트될 때 이벤트 리스너와 클린업이벤트 리스너는 브라우저에서 특정 이벤트(예: 클릭, 리사이즈, 입력 등)가 발생할 때 호출되는 함수입니다. 예를 들어, window.addEventListener('resize', handleResize)는 브라우저 창의 크기가 조정될 때마다 handleResize 함수를 호출합니다. 왜 클린업이 필요한가?컴포넌트가 언마운트..