juni

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(), ..

채팅 관련 로직 개선 전// ChatList 컴포넌트 마운트 시ChatList Performance Metrics: { renderTime: "156.42ms", // 초기 렌더링 시간 memoryUsage: "24.85MB", // 메모리 사용량 renderCount: 1 // 렌더링 횟수}// ChatRoom 컴포넌트 (각각)ChatRoom Performance Metrics: { renderTime: "12.31ms", // 개별 채팅방 렌더링 시간 memoryUsage: "0.45MB", // 추가 메모리 사용량 renderCount: 1 // 렌더링 횟수}// 채팅방 입장 시Chat Perform..

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..

기존 zustand에서 단일로 관리되던 좋아요를 복수로 관리하여 투어별 좋아요를 관리하여메인페이지, 상세페이지, 마이페이지에서 적용되도록 Store 및 컴포넌트 코드 개선-> 좋아요가 필요한 컴포넌트 로직 단순화로 가독성 상승  기존 Store 코드import { create } from 'zustand';import axios from 'axios';interface LikeState { liked: boolean; fetchLikeStatus: (postId: string, userId: string) => Promise; toggleLike: (postId: string, userId: string) => Promise;}export const useLikeStore = create((set)..

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

문제 설명2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요.제한 조건2016년은 윤년입니다.2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다)입출력 예abresult524"TUE"정답function solution(a, b) { let answer = ''; const days = ['SUN', 'MON', 'TUE..

문제 설명"명예의 전당"이라는 TV 프로그램에서는 매일 1명의 가수가 노래를 부르고, 시청자들의 문자 투표수로 가수에게 점수를 부여합니다. 매일 출연한 가수의 점수가 지금까지 출연 가수들의 점수 중 상위 k번째 이내이면 해당 가수의 점수를 명예의 전당이라는 목록에 올려 기념합니다. 즉 프로그램 시작 이후 초기에 k일까지는 모든 출연 가수의 점수가 명예의 전당에 오르게 됩니다. k일 다음부터는 출연 가수의 점수가 기존의 명예의 전당 목록의 k번째 순위의 가수 점수보다 더 높으면, 출연 가수의 점수가 명예의 전당에 오르게 되고 기존의 k번째 순위의 점수는 명예의 전당에서 내려오게 됩니다.이 프로그램에서는 매일 "명예의 전당"의 최하위 점수를 발표합니다. 예를 들어, k = 3이고, 7일 동안 진행된 가수의 ..