juni

채팅 관련 로직 개선 전// 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일 동안 진행된 가수의 ..

문제 설명오래전 유행했던 콜라 문제가 있습니다. 콜라 문제의 지문은 다음과 같습니다.정답은 아무에게도 말하지 마세요.콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 20개를 가져다주면 몇 병을 받을 수 있는가?단, 보유 중인 빈 병이 2개 미만이면, 콜라를 받을 수 없다.문제를 풀던 상빈이는 콜라 문제의 완벽한 해답을 찾았습니다. 상빈이가 푼 방법은 아래 그림과 같습니다. 우선 콜라 빈 병 20병을 가져가서 10병을 받습니다. 받은 10병을 모두 마신 뒤, 가져가서 5병을 받습니다. 5병 중 4병을 모두 마신 뒤 가져가서 2병을 받고, 또 2병을 모두 마신 뒤 가져가서 1병을 받습니다. 받은 1병과 5병을 받았을 때 남은 1병을 모두 마신 뒤 가져가면 1병을 또 받을 수 있습니다. ..

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