juni

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로 시작하는 함수로 정의하고 상태나 로직을 캡슐화하여 재사용 가능한 코드를 작성할 수 있게 해줍니다. 따라서 로직 재사용, 코드 가독성 향상, 유지..

Next.js와 Reactjs의 차이점을 설명해주세요. React는 UI 라이브러리로, 컴포넌트 기반의 구조를 통해 UI를 효율적으로 개발할 수 있고 CSR( 클라이언트 사이드 렌더링 )에 초점이 맞춰져 있습니다. 그리고 라우팅 등의 기능은 별도의 라이브러리를 사용해야합니다. 하지만 Next.js는 React기반의 프레임워크로 SSR( 서버사이드 렌더링 ), SSG( 정적 사이트 생성 ), API 라우팅, 404 페이지 등의 기능을 기본 제공하여 SEO( 검색엔진 최적화 ) 최적화와 성능 향상에 유리합니다. 따라서 React의 단점을 보완하여 빠른 개발을 할 수 있도록 도와줍니다.주요 차이점    React                                                       ..

translate와 translate3dtranslate(x, y):2D 이동을 위한 함수입니다.X축과 Y축으로만 이동이 가능해요.예: translate(-50%, -50%)는 요소를 X축으로 -50%, Y축으로 -50% 이동시킵니다.translate3d(x, y, z):3D 이동을 위한 함수입니다.X축과 Y축 외에도 Z축으로 이동이 가능해요.예: translate3d(-50%, -50%, 0)는 X축과 Y축으로는 -50%씩 이동하고, Z축 이동은 없도록 설정합니다 (0).차이점 요약2D 이동만 필요하면 translate를, 3D 효과나 Z축 이동이 필요한 경우 translate3d를 사용합니다.실제로 Z축 이동이 없더라도 translate3d를 사용하면 하드웨어 가속이 적용되어 애니메이션 성능이 약간 ..

usePathnameNext.js의 내장 훅 중 하나로, 현재 페이지의 경로(pathname)를 가져오는 데 사용됩니다. Next.js 13부터 도입된 App Router 기능과 함께 사용할 수 있으며, 페이지의 경로를 쉽게 얻을 수 있게 도와줍니다.주요 용도현재 경로에 따른 동적 UI 렌더링: 예를 들어, 특정 페이지 경로에 따라 다른 콘텐츠를 표시하거나, 경로에 맞는 메뉴나 네비게이션을 강조하는 등의 작업을 할 수 있습니다.라우팅 로직 구현: 현재 경로를 기반으로 페이지를 리다이렉트하거나, 조건에 따라 동작을 달리할 수 있습니다.현재 페이지가 https://example.com/about/team이라면, usePathname()은"/about/team" event.origin웹 브라우저에서 postM..

json 응답 구조일반적인 응답 구조REST API와 같은 일반적인 웹 서비스에서는 보통 다음과 같은 방식으로 응답이 이루어집니다:HTTP 상태 코드 (HTTP Status Code):클라이언트가 서버에 요청을 보내면, 서버는 응답과 함께 HTTP 상태 코드를 반환합니다.이 상태 코드는 응답의 성공 여부를 나타내며, 클라이언트는 이를 보고 요청이 성공했는지 실패했는지 판단할 수 있습니다.예시: 200 OK, 404 Not Found, 500 Internal Server Error 등. HTTP 상태 코드는 항상 존재하지만, 이는 JSON 응답의 일부가 아니라 HTTP 응답 헤더에서 제공됩니다.HTTP 응답 상태 코드(response.status)를 통해 요청 성공 여부를 확인할 수 있습니다.statusC..