juni

[1] 학습 주제 및 실습 목표IT교육 운영매니저로서 수강생 데이터를 기반으로 문제 정의 → 인사이트 도출 → 실행 전략 설계 과정을 반복하며 실습을 진행실습은 총 4개 주제로 구성되며, 실제 트랙 운영 데이터를 기반으로 개선 방향을 도출하는 데 집중✅ [2] 실습별 요약 & 인사이트실습 주제 분석 대상 주요 인사이트 개선 핵심1. 이탈 사유 분석Spring 트랙 중도 하차자숙련 주차 이탈 집중, 실력 ‘하’ 비율 높음수준별 과제 분화, 팀 내 역할 균형2. 기수 간 비교 분석UX/UI 기수 비교특정 기수 NPS·만족도 낮음, 팀 운영 이슈 많음협업 몰..

1. FACTS (사실, 내가 한 일)자사 및 경쟁사 분석, JD 분석, 수강생 피드백 기반 실행 방안 도출 과제를 수행함팀스파르타, 구름, 메디치이앤에스 등 운영 매니저 채용공고 5건 이상 분석팀스파르타, 구름 아티클 3편 분석 및 정리PM 트랙 운영 만족도, 피드백 데이터를 기반으로 강점과 개선점을 구조화교육 운영 설계와 협업 구조 개선에 대한 개인 아이디어 정리운영 상황 시뮬레이션 및 피드백 커뮤니케이션 훈련2. FEELINGS (느낌, 감정)이번 주는 꽤 많은 정보와 실습이 한꺼번에 몰려와서 정리가 안 되는 느낌도 있었지만, 그 속에서도 하나씩 구조화해 나가면서 운영이라는 직무의 이해도를 높였다.특히 ‘운영’이라는 단어가 단순히 관리가 아닌, 경험 설계자로서의 역할임을 인지하면서 책임감도 가져야겠..

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 공격:사용자 입력을 신뢰하지 않고 그대로 렌더링하면 악의적인 스크립트가 실행될 수 있습니다. 이는 사용자의 쿠키, 세션 토큰 등을 탈취하거나 악성 코드 실행에 이용될 수 있습니다.데이터 신뢰성:외부에서 가져온 데이터를 신뢰할 수 없기 때문에..