2024-09-23

목차

1. REST API의 권한 검사와 HTTP 메서드
2. 테이블 UI와 인피니트 스크롤 활용
3. 디자인 감각과 개발자 역할
4. 외주 프로젝트에서 잔금 미지급 대응법
5. 아이폰 브라우저 사용 동향
6. React 컴포넌트 상태 공유 및 네이밍
7. 프론트엔드와 백엔드 API 직접 호출 문제 및 방화벽 이슈
8. TypeScript 제네릭 기초 이해
9. Next.js 사용 목적과 생산성
10. SEO와 React CSR, SSR 차이

1. REST API의 권한 검사와 HTTP 메서드 🎯

• 리포지토리 수정 권한 검사 시 accessToken 전달 방식 문의
• 수정 요청은 보통 POST 메서드를 쓰는 게 일반적임 (commit 개념)
• PATCH/PUT은 변경의 의미이나, 커밋이나 상태 변경처럼 기록이 필요한 경우 POST도 인정됨
• 핵심은 사용하는 API의 목적에 맞게 HTTP 메서드를 선정하는 것임

설명
HTTP 메서드는 CRUD와 연관되어 있으며 각 메서드가 담는 의미가 다름.

• GET: 조회
• POST: 자원 생성 혹은 처리 요청
• PUT/PATCH: 자원 수정
  하지만 리포지토리 커밋 요청 등은 POST 방식으로도 많이 사용함.
  권한 검사는 토큰을 HTTP 헤더 Authorization에 포함시키는 것이 표준이며, POST body에 넣는 것은 권장되지 않음.
  보안을 위해 Access Token은 가능한 header로 보내야 하며, 쿠키에 HttpOnly 옵션을 사용하면 보안 강화 가능

2. 테이블 UI와 인피니트 스크롤 활용 🌀

• 테이블 UI에서는 인피니트 스크롤 사용 빈도가 낮음
• 필요 시 개발 가능하지만 일반적으로 페이지네이션 선호
• 인피니트 스크롤은 무한히 내용이 추가되는 UX로 목록성 서비스에 적합

초보자 팁
인피니트 스크롤 구현 시 데이터 로딩 및 유저 경험에 영향 크기 때문에 테이블과 같은 정형 데이터엔 불편할 수 있음.
리액트에서는 라이브러리(react-infinite-scroll-component 등)를 활용해 쉽게 구현 가능

3. 디자인 감각과 개발자 역할 🎨

• 프론트엔드 개발자도 기본 디자인 감각이 있으면 좋음
• 중소기업과 스타트업에서는 디자이너 없이 개발자가 디자인 하는 경우 많음
• 피그마(Figma)는 UI 디자인 협업 도구이며 프레이머(Framer)는 디자인과 프로토타이핑 툴 겸 개발 가능한 툴
• 개발자가 디자인까지 완벽히 소화하기는 어렵고, 협업이 이상적임

4. 외주 프로젝트에서 잔금 미지급 대응법 💸

• 잔금이 오랫동안 미입금 상태면 서버를 내리는 것이 원칙
• 선 경고 최소 3회 이상 후 조치 필요
• 경고는 메일, 문자 등 서류로 남기는 게 좋으며 말로만 진행 시 추후 문제가 발생할 수 있음
• 계약서에 특약사항을 꼼꼼히 작성하는 것이 중요 (예: 법정 관할지, 해결 방법 등)

5. 아이폰 브라우저 사용 동향 📱

• iOS 기본 브라우저는 사파리(Safari)
• 일부 기능(탭 저장, 일부 다운로드 등)이 사파리에서만 원활히 작동
• 사용자 중 일부는 주소창 UI 등 이유로 크롬으로 변경하는 경우 있음
• 모바일 환경에서 브라우저 선택은 개인 취향과 필요 기능에 따라 결정됨

6. React 컴포넌트 상태 공유 및 네이밍 🧩

• 자식 컴포넌트 간 상태 공유를 위해 부모 컴포넌트로 상태를 끌어올림 (lifting state up)
• 부모 컴포넌트 이름은 역할에 따라 정함 (예: Container, Provider 등)
• Context API를 활용하면 전역 상태 공유도 가능해 container/presentation 패턴 대체 가능
• 기존 컴포넌트를 변경해야 할 경우 업무 우선순위 고려 후 점진적 리팩토링 권장

7. 프론트엔드와 백엔드 API 직접 호출 문제 및 방화벽 이슈 🔐

• 프론트엔드(React SPA)가 백엔드 API를 직접 호출할 때 .env에 API 주소가 노출되는 것은 정상 현상
• 사용자가 브라우저의 네트워크 탭에서 호출 URL을 확인할 수 있음 (웹 특성)
• 백엔드는 보통 내부망에 있고 외부망 접근은 방화벽으로 제한됨
• "사용자가 직접 백엔드 API 호출을 방화벽으로 막는다"는 것은 현실적으로 어렵고, 백엔드에서 IP 화이트리스트, 인증 토큰 검증으로 보호해야 함
• BFF (Backend For Frontend) 패턴 또는 리버스 프록시(nginx 등)를 도입해 API 호출 경로를 간접화하거나 보안을 강화할 수 있음
• 결론: 프론트엔드가 아닌 인프라/백엔드 담당자와 협의해야 할 문제

8. TypeScript 제네릭 기초 이해 🎓

• updateUser<T, K extends keyof T> 타입은 함수에서 제네릭을 사용할 때
• T는 전체 타입, K는 T의 key들 중 일부의 타입(유니언 타입)
• keyof 키워드는 객체 타입에서 키의 집합을 타입으로 반환
• extends는 인자 타입 제한을 걸 때 사용
• 제네릭은 타입을 유연하고 다시 사용할 수 있게 하는 강력한 기능임

9. Next.js 사용 목적과 생산성 🚀

• Next.js는 React 프레임워크로
• SSR(Server Side Rendering), SSG(Static Site Generation)을 지원해 초기 렌더링 속도와 SEO를 개선
• 기존 CRA(create-react-app)의 대체용으로도 사용 가능하지만 단순 대체용은 아님
• 상태관리, 라우팅, 빌드 최적화, API 라우트 등 다양한 기능을 제공
• 생산성은 프로젝트 규모와 요구사항에 따라 다르며, 익숙하면 오히려 개발 효율성이 높아짐

10. SEO와 React CSR, SSR 차이 🌐

• CSR(Client Side Rendering)은 사용자 브라우저에서 모든 렌더링 수행. SEO에 불리할 수 있음
• SSR은 서버에서 렌더링된 HTML을 제공해 검색 엔진 크롤러가 쉽게 읽음
• Next.js 같은 프레임워크가 SSR, SSG를 지원해 SEO를 개선
• Google은 자바스크립트 SEO를 점점 잘 지원하지만, 일부 봇은 JS 실행을 제한하기도 함
• UI 구성 및 고유의 웹표준, 문서 구조가 SEO에 중요

면접팁⚡

• REST API 권한 인증 시 Access Token을 어디에 담는 것이 적절한가? (답: Authorization 헤더)
• React에서 상태 공유를 위한 부모 컴포넌트 네이밍과 패턴 설명하기
• Next.js가 CRA 대비 갖는 장점과 왜 SSR이 SEO에 좋은지 설명하기
• TypeScript 제네릭과 keyof, extends 키워드 설명하기
• API 보안 설계 시 클라이언트에서 API URL 노출 문제와 대응 방법 설명하기

링크🔗

• 브런치 - UX 글쓰기
• 토스 개발 블로그 - UX Writer
• Rightbrain 블로그 - UX 라이팅 중요성
• Ditoday UX 라이팅
• 교보문고 - UX 관련 도서1
• 교보문고 - UX 관련 도서2
• 교보문고 - UX 관련 도서3
• Velog - 하우머치 메인 화면 UI 클론 디자인
• Mixpanel DevTools github
• Medium - 중간 규모 프론트엔드 DDD 구조
• Google 개발자 문서 - JavaScript SEO basics
• 프리스트뷰 ReactJS 소개 및 활용
• 쿠팡 신입 개발자 채용 공고
• Next.js 공식 홈페이지