2023-10-20

목차

1. 네비게이션 바의 1px span 요소의 역할
2. 리액트 상태관리 라이브러리 비교와 활용
3. Next.js 13 Metadata 및 OG 썸네일 문제
4. VSCode 단축키 및 탭 관련 이슈
5. 배열의 요소 제거 방법과 최신 JS 문법
6. PG사 결제 연동 시 고려사항
7. 전역 상태 관리의 장단점과 설계 고민
8. 빌드 시 메모리 부족 문제와 해결방법
9. React 컴포넌트 export 방식과 네이밍 규칙
10. 기술 면접 활용 가능한 경험 정리

1. 네비게이션 바의 1px span 요소의 역할

• 사이트 네비게이션에서 span 태그가 높이는 네비게이션과 같고, 폭은 1px인 요소 발견.
• 실험해보니 빨간색으로 표시되는 이 요소는 네비게이션 바의 그림자(shadow) 같은 역할임.
• sticky 속성을 사용하여 헤더가 떠 있을 때 내용이 위로 올라가는 걸 방지하는 역할도 담당.
• 즉, 시각적 구분이나 레이아웃 유지에 미세한 선 또는 효과를 주기 위해 사용되는 방식.

그래픽 쉐도우(Shadow)란?
CSS box-shadow 속성이나 1px 컬러 선을 사용해 요소가 둥둥 떠있는 효과를 주는 디자인 기법입니다. 레이어간 구분과 가시성 증대에 쓰이며, 특히 sticky 헤더에 유용합니다.

2. 리액트 상태관리 라이브러리 비교와 활용

• 리액트 상태관리는 크게 useState(컴포넌트 지역 상태), Context API, 그리고 외부 라이브러리로 나뉨.
• 대표 상태관리 라이브러리: Redux, Recoil, Jotai, Zustand, 그리고 React Query (TanStack Query).
• TanStack Query는 서버 상태를 관리하기 위한 특화된 상태관리 라이브러리로, 전통적인 UI 상태관리 라이브러리와는 차이가 있음.
• Redux는 여전히 사용량이 많으며 안정성 높음. 하지만 최근에는 더 간편한 Recoil, Jotai, Zustand가 주목받고 있음.
• 전역 상태 관리는 필요한 최소한으로만 사용하고, 대부분 로컬 상태로 컴포넌트 한정 관리하는 게 추세.
• 상태 관리는 설계가 중요하며, 전역 상태를 남용하면 메모리 문제나 가독성 저하로 이어질 수 있음.

전역 상태관리란?
앱 내 여러 컴포넌트가 공유하는 상태를 중앙에서 관리하는 기법. UI 상태(버튼 클릭, 테마)부터 서버 데이터(fetch 데이터)까지 다양하며, 각 라이브러리마다 목적과 용도가 다름.

3. Next.js 13 Metadata 및 OG 썸네일 문제

• Next.js 13에서 generateMetadata 함수로 서버 렌더링 시 메타 태그 설정 가능.
• 문제는 사내 메신저 등 일부 환경에서 OG(Open Graph) 이미지가 표시되지 않는 상황 발생.
• 사내 메신저는 URL이 .jpg 등 직접 이미지 주소면 썸네일 미출력, HTML 주소는 정상 작동.
• 이는 메신저 클라이언트가 URL을 카톡 서버 같이 중간에서 캐싱하고, 각 서버의 크롤링 방식 차이 때문.
• 서버 측에서 정확한 캐시 정책과 올바른 OG 태그 인증 필요.
• use client 컴포넌트와 서버 컴포넌트 차이도 메타 정보 반영에 영향 줌.

OG(Open Graph) 태그란?
페이스북, 카톡 같은 SNS에서 링크 공유 시 미리보기 정보(제목, 이미지)를 표시하기 위한 HTML 메타 데이터. 잘못 설정하면 썸네일이 뜨지 않음.

4. VSCode 단축키 및 탭 관련 이슈

• macOS에서 VSCode 탭 닫기 단축키는 Cmd + Ctrl + W인데, Windows에서는 Cmd키가 없어 비슷한 단축키를 찾는 중.
• Windows 환경에서는 보통 Ctrl + W 또는 Ctrl + F4가 탭 닫기 단축키.
• VSCode 단축키는 OS별로 차이가 있으니 환경에 맞게 확인 필요.

5. 배열 요소 제거 및 최신 JavaScript 문법

• 배열 내 특정 값 제거 시 splice보다 filter를 많이 사용.
• filter는 원본 배열을 변경하지 않고 새로운 배열을 반환해 부작용을 줄임.
• ES2023에 toSpliced 같은 메서드가 추가되어 불변성을 유지하며 요소 삭제 가능.
• 객체에서 반복문이 필요할 때는 Object.entries(), Array.from() 등의 유틸 함수를 활용.
• 배열이 아닌 객체를 순회하며 숫자 범위를 만들 때는 Array.from({length: end - start + 1}, (_, i) => i + start) 활용 가능.

6. PG사 결제 연동 시 유의사항

• PG사마다 요구하는 연동 방식과 인증 수단이 다름.
• 결제 요청 전후에 금액과 상품 정보 검증 로직 필수 (백엔드에서 검증 권장).
• 일부 PG사는 결제 요청을 받고 서버에서 OK를 보내줘야 실제 결제가 진행되는 경우가 있음.
• 모바일/PC 대응 시 결제창 구분 필요 여부는 PG사 요구사항 및 UX에 따라 다름.
• React로 직접 결제 연동하는 경우는 드물고 주로 백엔드와 연동 시나리오 구성 권장.

7. 전역 상태 관리의 장단점 및 설계 고민

• 전역상태 관리자가 상태를 한 곳에서 관리하기 때문에 편리하지만, 과도한 활용 시 메모리 사용량 증가 우려.
• 적절한 경계와 설계가 중요(예: 탭 상태 등 UI 상태만 전역으로 관리).
• 상태를 DB처럼 관리하는 방식으로 접근하면 효율적.
• UI 상태관리 라이브러리(jotai, recoil, zustand)마다 철학과 특성이 다름.
• Context API도 특정 바운더리 내 상태 관리에 유용.

8. 빌드 시 메모리 부족 문제와 해결법

• Vite 빌드 시 "JavaScript 메모리 부족" 메시지 발생 경험 공유.
• Node.js 실행 시 --max-old-space-size 옵션으로 메모리 풀 크기 조절 가능.
• 메모리 부족 문제는 빌드 프로젝트 규모 또는 의존성 문제일 가능성 있음.
• 빌드 환경마다 적절한 메모리 설정과 캐시 관리가 필수.

9. React 컴포넌트 export 방식과 네이밍 규칙

• 컴포넌트 파일 단위로 주로 export default를 사용함.
• 작은 유틸 함수나 부수적 컴포넌트는 export const 방식 선호.
• 컴포넌트명과 함께 Component 접미사를 붙여 네이밍하는 프로젝트도 있으나, 규칙이 명확하고 일관적이어야 함.
• 별도의 네이밍 규칙 없으면 불필요한 장황함 발생 가능.

10. 기술 면접 활용 가능 경험 정리

• Next.js에서 OG 메타데이터 문제 대응 경험: SSR 메타데이터 처리, 사내 메신저 특수 캐싱 문제 해결.
• React 상태관리 라이브러리 트레이드오프 이해 및 적절한 도입 사례 설명 가능.
• 빌드 메모리 부족 문제 및 해결책(메모리 풀 확장) 경험 공유.
• 배열 조작 시 최신 JavaScript 문법 활용(불변성 유지).
• PG결제 연동 시 필수 백엔드 검증 및 차이점 인지.

면접팁⚡

• 상태관리 라이브러리의 차이점과 언제 어떤 라이브러리를 쓰는지 명확히 하자.
• Next.js SSR 메타데이터와 클라이언트 렌더링 차이를 알고 있는지 질문 가능.
• 배열 불변성 유지 방법을 묻는 경우 위 filter, toSpliced 등 활용법 설명 준비.
• 실무에서 PG 결제 연동 시 발생할 수 있는 케이스별 예외 처리 경험이나 고민거리 공유하면 좋음.
• 빌드 환경 문제 해결 경험은 문제해결 역량 어필에 좋음.

링크🔗

• Next.js 메타데이터 공식 문서
• Medium 글: Same-Origin Policy와 CORS, Preflight 설명
• Ditto 클립보드 매니저 (Windows)
• Motion Canvas - 애니메이션 라이브러리
• Vite 메모리 부족 해결법(참고)
• 카카오 검색 광고 및 하위 메뉴 가이드