juni

🎯 Jest의 핵심 특징 ✅ 장점: Zero Config: 설정 없이 바로 사용 가능 Snapshot Testing: UI 변경사항 자동 감지 Mocking: 외부 의존성 쉽게 모킹 Coverage: 코드 커버리지 자동 측정 Parallel: 테스트 병렬 실행 Watch Mode: 파일 변경 시 자동 재테스트 ❌ 단점: 느린 실행: 대규모 테스트 시 속도 저하 메모리 사용량: 많은 테스트 시 메모리 부족 복잡한 설정: Next.js 등과 연동 시 설정 복잡 🎯 Mock 파일 모킹이란? 1️⃣ 정의실제 파일을 가짜 파일로 대체하는 테스트 기법 Jest 환경에서 브라우저 파일 처리를 위한 방법 테스트 속도 향상과 오류 방지를 위한 기법 모킹의 기본값은 undefined// 모킹하지 않은 함수의 기본값c..

package 추가@testing-library/jest-dom: Jest DOM 매처 (toBeInTheDocument 등) @testing-library/react: React 컴포넌트 테스트용 @testing-library/user-event: 사용자 이벤트 시뮬레이션 @types/jest: Jest 타입 정의 jest: JavaScript 테스트 프레임워크 jest-environment-jsdom: 브라우저 환경 시뮬레이션 @lhci/cli: Lighthouse CI (웹 성능 테스트) @playwright/test: E2E 테스트 프레임워크 puppeteer: 브라우저 자동화 (성능 모니터링용) . jest.config.js - Jest 설정 파일 nextJest: Next.js와 Jest 통합..

Canvas란?Canvas는 HTML5에서 제공하는 2D 그래픽을 그릴 수 있는 요소입니다. JavaScript를 사용하여 실시간으로 그래픽을 렌더링할 수 있으며, 게임, 애니메이션, 데이터 시각화 등에 주로 사용됩니다. Canvas 기본 사용법1. Canvas 요소 생성2. Canvas 컨텍스트 가져오기const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');3. 기본 도형 그리기 - 사각형// 채워진 사각형ctx.fillStyle = 'red';ctx.fillRect(x, y, width, height);// 테두리만 있는 사각형ctx.strokeStyle = 'blue';ctx.strokeRect(x,..

ZodTypeScript 기반의 런타임 타입 검증 라이브러리스키마를 정의하고 데이터의 유효성을 검증하는 도구TypeScript 타입과 런타임 검증을 동시에 제공React Hook FormReact 애플리케이션에서 폼 상태를 관리하는 라이브러리성능 최적화와 사용자 경험 개선에 중점폼 상태 관리와 유효성 검증을 효율적으로 처리왜 함께 사용하나?Zod: 타입 안전성과 데이터 검증React Hook Form: 폼 상태 관리와 사용자 경험두 라이브러리의 장점을 결합하여 더 강력한 폼 구현 가능 Zod 스키마 작성법기본 스키마 정의import * as z from "zod";// 기본 객체 스키마const userSchema = z.object({ name: z.string(), age: z.number(), ..

1. 리액트의 렌더링 프로세스와 가상 DOMconst ChatRoom = () => { const [messages, setMessages] = useState([]); // 1. 렌더 단계 (Render Phase) console.log("컴포넌트 렌더링 시작"); // 2. 커밋 단계 (Commit Phase) useEffect(() => { console.log("실제 DOM 업데이트 후 실행"); }); return {/* JSX */};};랜더링 과정랜더 단계: 가상 DOM 트리 생성재조정: 이전 가상 DOM과 비교커밋 단계: 실제 DOM 업데이트2. 각 Hook/메모이제이션의 동작 시점const ChatRoom = ({ roomId }) => { console.log..

HTML 이스케이프 HTML 태그가 그대로 화면에 나타나는 현상은 "HTML 이스케이프" 또는 "HTML 인코딩"이라고 합니다. 이는 브라우저가 HTML 태그를 일반 텍스트로 처리하여 태그를 해석하지 않고 그대로 표시하는 것입니다.dangerouslySetInnerHTML을 사용하면 HTML을 직접 삽입할 수 있어 유연한 콘텐츠 렌더링이 가능하지만, 보안 취약점이 발생할 수 있습니다. 주된 문제점은 XSS(Cross-Site Scripting) 공격입니다.문제점XSS 공격:사용자 입력을 신뢰하지 않고 그대로 렌더링하면 악의적인 스크립트가 실행될 수 있습니다. 이는 사용자의 쿠키, 세션 토큰 등을 탈취하거나 악성 코드 실행에 이용될 수 있습니다.데이터 신뢰성:외부에서 가져온 데이터를 신뢰할 수 없기 때문에..

인증/인가의 관점에서 세션 방식과 JWT 방식의 차이점을 자세히 설명해주세요. 각 방식의 장단점과 실제 프로젝트 활용 경험이 있다면 공유해주세요.JWT의 경우 대표적으로 access_token을 클라이언트가 쿠키에 저장하고 해당 쿠키의 유무로만 로그인을 유지하고 서버에 별도로 저장하지 않습니다. 하지만 서명으로 보호되어 변조가 어렵더라도 서버에서 관리 하지 않아 탈취 된 토큰을 무효화 할 수 없어 위험 할 수 있습니다.세션 방식의 경우에는 JWT처럼 쿠키에 저장 하여 쿠키의 유무로 로그인을 유지하되, 서버에 별도로 저장하여 세션 강제 만료, 세션 시간 조정 등 탈취 시 대응이 가능하다는 장점이 있습니다. 대신 서버에서 관리하기 때문에 부하가 증가하고 서버가 분산될수록 모든 서버가 세션을 공유해야 하는 등..

useCallback과 useEffect를 비교 설명해주세요. useCallback은 함수를 메모이제이션하여 불필요한 함수 재생성을 방지하며, 주로 부모-자식 간 함수 참조를 최적화할 때 사용합니다.useEffect는 부수효과를 처리하는 훅으로, 데이터 페칭, DOM 조작, 이벤트 리스너 등록/해제 작업에 활용됩니다.예를 들어, useCallback으로 부모에서 전달하는 이벤트 핸들러를 최적화하거나, useEffect로 API 호출과 클린업 작업을 구현한 경험이 있습니다.커스텀 훅이란? 무엇이고 왜 사용하는가? React에서 사용자 정의 훅을 의미하며, use로 시작하는 함수로 정의하고 상태나 로직을 캡슐화하여 재사용 가능한 코드를 작성할 수 있게 해줍니다. 따라서 로직 재사용, 코드 가독성 향상, 유지..