프론트엔드 개념 정리

Q1. CSR SSR 차이

크게는 브라우저에서 JS로 화면을 구성하느냐, 서버에서 완성된 화면을 전달하느냐의 차이이다.

• CSR : 브라우저(클라이언트)에서 렌더링하는 방식으로, 대표적으로 React가 있다. HTML과 JS 파일을 받아 JS를 다운로드·파싱·실행한 후에야 화면을 렌더링하기 때문에 그동안 화면이 비어 있어 초기 로딩 속도가 느리다. 하지만 한 번 초기 렌더링이 끝나면 페이지 이동 시 서버 요청 없이 가상 DOM만 변경하므로 화면 전환이 매우 빠르다. 사용자 인터랙션이 많은 서비스에서 끊김 없는 경험을 제공하기에 적합하다.
• SSR : Next.js 같은 프레임워크가 서버 환경에서 React 컴포넌트를 렌더링하여 완성된 HTML을 응답으로 전달하는 방식으로, 서버가 렌더링을 대신 수행한다. 초기 HTML에 콘텐츠가 거의 없거나 빈 틀만 있는 CSR과 달리, SSR은 완성된 HTML을 전달하므로 검색엔진이 내용을 바로 읽을 수 있어 SEO(검색엔진 최적화)에 유리하다. 그래서 최근에는 React 대신 Next.js같은 프레임워크를 사용하는 추세이다. Next.js는 React를 기반으로 한 SSR 지원 프레임워크로, CSR과 SSR을 혼합하여 사용할 수 있다.

Q2. 동적 할당이란?

• 프로그램 실행 중(런타임)에 필요한 메모리 크기를 결정해 실행 중에 새로 메모리를 할당하는 것을 말한다. (ex 사용자에게 입력받은 개수만큼 배열을 만들 때 — 사용자가 예상보다 많은 숫자를 입력하면, 그때 크기를 조정해야 하므로 동적 할당이 필요)
  • 반대로, 정적할당은 int arr[10]과 같이 이미 크기가 정해져있는 방식
• 런타임 vs 컴파일
  • 런타임은 실행중 시점, 실제코드가 동작하면서 메모리를 사용하고 연산이 일어남
  • 컴파일은 실행전 시점, 코드를 기계어로 변환하고 문법 검사하는 단계

Q3. JWT 개념

• 보통 로그인 인증 방식을 정할때 세션 vs JWT 방식 중에 선택
• 원래는 쿠키에 직접 저장하는 방식이 사용되었는데 이 경우 서버가 세션 ID를 쿠키에 넣어 전달하기 때문에 탈취 위험이 있었다 → 그래서 나온게 세션인데, 로그인시 서버가 세션ID를 생성하고 그 ID를 클라이언트 쿠키에 저장한뒤 요청시마다 함께 전송한다. 서버가 내부적으로 세션정보를 관리하니 보안은 강화되었지만 사용자가 많아질수록 메모리와 서버 과부하가 발생할 수 있다. → 그래서 나온게 JWT
• JWT는 서버가 상태를 직접 관리하지 않고 로그인시 인증정보를 암호화(서명 포함)하여 토큰형태로 클라이언트에 전달하고 이후 요청시 이 토큰으로 서버가 토큰 서명검증하여 유효성을 판단 한다. 서버가 세션을 별도로 저장하지 않아 메모리나 서버 과부하 문제가 해결된다.

Q4. Access Token / Refresh Token 둘다 쓰는 것과 하나만 쓰는 것 차이

• JWT 인증에서는 보통 두가지 토큰이 함께 사용되며 각각 역할이 다르다. 로그인시 한번만 서버에 아이디비번을 보내고 로그인 성공시 JWT 토큰 두개를 만들어 응답으로 전달한다. 그 후 토큰으로만 인증이 수행된다. 우선 Access Token은 실제 인증,인가 요청에 사용되는 토큰으로 짧은 유효기간(15분~1시간) 을 가진다. 클라이언트는 API요청시마다 헤더에 포함시켜 보내고 서버는 이 토큰의 서명검증을 하는 것이다. 만료되더라도 새로 발급받기위한 Refresh Token은 긴 수명(며칠~몇주)를 가진다. DB에서 안전하게 보관되고 Access Token이 만료되면 클라이언트가 Refresh Token을 서버에 보내 새로운 Access Token을 재발급해준다. Refresh Token은 일반적으로 로컬Storage 금지, HttpOnly 쿠키 사용이 보안상 권장된다.
• 하나만 사용시 보안과 ux 사이의 밸런스를 맞추기 어렵다.

Q5. 상태관리 라이브러리엔 뭐가있고 왜 쓰는지

• 컴포넌트 간에 공유되는 데이터를 효율적으로 관리하기 위해 사용된다. 초기 react에서는 props로만 전달이 가능하였고 컴포넌트가 많아질수록 데이터 전달이 복잡해졌다. 전역 상태관리 라이브러리가 등장하여, 로그인 정보, 사용자 설정 등 여러 컴포넌트에서 공통으로 필요할 때 매번 props로 전달하지 않고 전역으로 관리할 수 있다.

대표적인 Redux vs Zustand vs Recoil 차이

• Redux
  • 가장 대표적인 전역 상태관리 도구로, 구조가 명확하고 대규모 프로젝트에 적합하여 next.js에서 대규모 클라이언트 상태가 필요한 경우 자주 사용된다.
  • 설정이 복잡하고 코드량이 많은 단점이 있음
• Zustand
  • React Hook 기반의 가벼운 라이브러리로 코드가 단순하고 러닝커브도 낮다.
  • tanstack query와 병행 가능
  • 기본 철학이 “작고 자유롭게”이며 자유도가 높아 대규모 프로젝트 관리 난이도가 어려워짐
• Jotai
  • Recoil과 비슷하면서 더 가볍고 업데이트 활발
  • 원자 단위 상태 개념으로 UI와 가까운 데이터 관리에 적합
  • 불필요한 렌더링을 최소화할 수 있어 성능 리스크가 적음

Q6. 스택 큐 차이

• 스택은 LIFO로 나중에 넣은게 먼저 나오는 후입선출구조이다. (ex 브라우저 뒤로가기), push, pop
• 큐는 FIFO로 먼저 넣은게 먼저 나오는 선입선출 구조이다.(ex 요청 순서 처리) , enqueue, dequeue

Q7. 사용자 친화적인 UI UX란 무엇일까?

• UI는 어떻게 보이는가(시각적 요소), UX는 어떻게 느껴지는가(행동 중심 경험)이라고 구분할 수 있다.
• 좋은 UX는 사용자의 목표 달성 시간을 줄이고, 불필요한 인지 부담을 최소화하는 방향으로 설계된다.