최종프로젝트 (로그인 팝업창)

로그인 하지 않았을 경우 커뮤니티 페이지로 가는 버튼을 클릭하면 커뮤니티페이지로 가기 전 로그인팝업창을 뜨게했다. 결과물은 다음과 같다.

먼저 아티스트페이지의 버튼을 눌렀을 때 로그인했을 때와 안했을 때를 삼항연산자로 조건부로 나눠주고, 로그인하지 않았을 때만 팝업창이 뜨도록 구현했다.

const handleFloatBtn = () => {
    login ? navigate(`/community/${param.artistName}`) : setIsModalOpen(true);
  };
  .
  .
  .
  return (
  .
  .
  <StFloatBtn onClick={handleFloatBtn}>Go to Community ➜</StFloatBtn>
  {isModalOpen && <Modal setIsModalOpen={setIsModalOpen} />} 
  )

모달은 components 폴더에 Modal 폴더를 만든 후 작업했다.

import React from 'react';
import {StCancelBtn, StDiv, StInfo, StLoginBtn, StModalDiv, StTitle} from './style';
import {useNavigate} from 'react-router-dom';

const Modal = ({setIsModalOpen}: {setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>}) => {
  const navigate = useNavigate();

  return (
    <StModalDiv>
      <StDiv>
        <StTitle>알림</StTitle>
        <StInfo>로그인 이후 커뮤니티에 입장하실 수 있습니다.</StInfo>
        <StInfo>로그인을 하시겠습니까?</StInfo>
        <StCancelBtn onClick={() => setIsModalOpen(false)}>취소</StCancelBtn>
        <StLoginBtn onClick={() => navigate('/login')}>로그인</StLoginBtn>
      </StDiv>
    </StModalDiv>
  );
};

export default Modal;

<기술면접질문>

• 쿠키, 세션, 웹스토리지의 차이를 설명해보세요.
  쿠키는 작은 데이터를 클라이언트에 저장하고 서버와 상호작용할 때 사용됩니다. 세션은 서버에 데이터를 저장하여 사용자 상태와 보안을 관리합니다. 웹 스토리지는 브라우저에 데이터를 저장하고 비교적 큰 양의 클라이언트 데이터를 관리합니다.

• 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요.
  클라이언트 사이드 렌더링 (Client-Side Rendering, CSR)
  :개념: 웹 페이지의 내용을 서버에서 가져오는 대신, 초기에 HTML 및 기본 구조를 렌더링하고, 그 이후에 JavaScript를 사용하여 동적으로 데이터를 로드하고 렌더링하는 방식. 일반적으로 단일 페이지 애플리케이션(SPA)에서 사용됨.
  장점: 빠른 초기 로드 시간, 부드러운 사용자 경험, 서버 부하 감소, 빠른 데이터 갱신, 클라이언트 측 캐싱 가능.
  단점: 초기 로드 시간이 길 수 있음, SEO에 제약이 있을 수 있음, 모든 로직을 클라이언트에서 처리해야 하므로 보안에 주의가 필요
  서버 사이드 렌더링 (Server-Side Rendering, SSR):
  개념: 서버에서 모든 페이지의 내용을 렌더링하고 완성된 HTML을 클라이언트로 보내는 방식. 사용자가 요청할 때마다 서버에서 새로운 페이지를 생성.
  장점: 검색 엔진 최적화(SEO)에 유리, 초기 로드 시간이 빠름, 모든 내용을 서버에서 관리하므로 보안에 강력함.
  단점: 페이지 간 전환 시 일반적으로 느릴 수 있음, 서버 부하가 높을 수 있음, 사용자 경험이 덜 부드러울 수 있음.
  정리 => 클라이언트 사이드 렌더링은 초기 로드가 빠르고 사용자 경험이 부드러우며 클라이언트에서 모든 로직을 처리하는 장점이 있지만, 초기 로드 시간이 길고 SEO에 취약합니다. 서버 사이드 렌더링은 초기 로드가 빠르고 SEO에 강력하지만 페이지 간 전환 시 느릴 수 있으며 서버 부하가 높을 수 있습니다. 선택은 프로젝트 요구사항과 성능/SEO 등의 요소에 따라 다릅니다.