2025-05-08

목차

1. 폴더 구조와 컴포넌트 관리 방식
2. 로컬 스토리지 vs 세션 스토리지 차이점
3. 테일윈드CSS(Tailwind CSS)에 대한 의견과 유지보수 이슈
4. CSS 관리 도구 비교: Tailwind, Stylex, Vanilla Extract 등
5. 면접 준비와 질문 아이디어
6. 새로운 기술 학습법
7. 서버 모니터링 도구 추천
8. 면접 긴장 완화 방법 공유
9. 기타 개발 관련 잡담 및 소소한 이야기

1. 폴더 구조와 컴포넌트 관리 방식

• 최근 개발팀에서는 도메인 별로 폴더를 나누는 FSD(Feature-Sliced Design)를 많이 사용함.
• 기존 레거시 프로젝트는 components, pages, hooks 등의 큰 범주별 폴더를 유지하는 경우가 많음.
• FSD는 기능 단위로 코드를 모듈화해 관리가 쉽고, 공통적으로 쓰이는 API 인스턴스나 훅은 shared 폴더에 둠.
• 도메인 별 폴더에 api.ts, hooks.ts, types.ts 같이 역할별 파일을 모아두면 관리 편리.
• 하지만 실제 회사 코드는 종종 복잡하고 난잡할 수 있으며, 리팩토링과 코드리뷰의 중요성이 대두됨.

2. 로컬 스토리지와 세션 스토리지 차이점

• 로컬 스토리지(Local Storage)
  • 영구적인 저장 공간. 브라우저에 데이터가 영구 저장되어 탭/브라우저를 닫아도 유지됨.
  • 예: 로그인 정보 저장 시 주로 사용.
• 세션 스토리지(Session Storage)
  • 브라우저 탭별로 임시 저장 공간. 탭을 닫으면 데이터가 삭제됨.
  • 예: 탭 단위 임시 데이터 관리에 적합.
• 초보자가 흔히 헷갈리는 부분이지만, 쉽게 말해 세션 스토리지는 "탭이 살아있는 동안만 유지되는 저장소"임.

3. 테일윈드CSS (Tailwind CSS)에 대한 의견과 유지보수 이슈

• 테일윈드는 유틸리티 클래스 기반 CSS 프레임워크로 빠른 개발과 직관적인 스타일링 가능.
• 단점으로는 클래스명이 많아지고 중복 스타일 덮어쓰기 문제가 발생할 수 있음.
• 클래스 중복과 우선순위 문제를 해결하기 위해 twMerge 같은 도구가 활용됨.
• 유지보수에 관한 의견이 갈림:
  • 일부는 테일윈드가 컴포넌트를 잘 쪼갤 경우 유지보수가 쉽다고 함.
  • 다른 일부는 클래스 덮어쓰기 문제나 스타일 추적이 어려워 아쉬움을 표함.
• 대규모 프로젝트에서는 팀원 선호도 고려해 도입 여부 결정하는 게 현명.

4. CSS 관리 도구 비교: Tailwind, Stylex, Vanilla Extract 등

• Stylex
  • 페이스북에서 개발한 CSS-in-JS 도구.
  • 클래스네임과 스타일을 컴포넌트 단위로 동일 파일에 co-location 하여 가독성과 유지보수를 도모함.
  • 네스팅 지원이 제한적이며, 일반 CSS 방식과 다르기 때문에 학습 곡선이 있음.
• Vanilla Extract
  • 타입 세이프 CSS-in-TypeScript 라이브러리.
  • 스타일과 컴포넌트 분리되어 파일이 여러 개 생성될 수 있어 위아래 파일 이동이 필요함.
• Tailwind CSS
  • 다수 개발자가 빠르게 스타일링 가능하지만 클래스 순서와 중복 문제 신경 써야 함.
  • prettier-plugin-tailwindcss 사용 시 클래스 자동 정렬로 가독성 향상 가능.
• 각 도구마다 장단점이 있으니, 팀 환경과 개인 취향에 따라 선택해야 함.

5. 면접 준비와 질문 아이디어

• 좋은 면접에서는 회사가 원하는 인재상에 맞춰 질문 세트를 준비해야 함.
• 신입은 주로 문제해결 능력, 협업 태도, 배우려는 열정 중심 질문이 적합.
• 구체적 기술 질문 예시:
  • React Query(RQ), Zustand 같은 상태관리 도구 경험 여부.
  • CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)의 차이점.
  • Python/React 스택이 있는데 'View'가 무슨 뜻인지 설명해보라 (면접자 이해도 평가용).
• 행동 질문 예시: 디자이너와 의견 충돌 시 대처 방법.
• 긴장완화 팁(면접 전에): 여행 계획하기, 사직서 적어놓고 잠깐 바람 쐬러 나가기 등.

6. 새로운 기술 학습법

• 공식문서 → 강의 → 실습 순으로 병행 추천.
• 강의는 입문자에게 효과적이며, 어느 정도 경험 쌓인 중상급자는 공식 문서와 책 위주 학습이 효율적.
• 상급 개발자를 위한 강의는 적어, 긴 분량의 책이 보통 대안으로 활용됨.
• 실습으로 작은 애플리케이션 만들어보며 익히는 것도 매우 도움 됨.

7. 서버 모니터링 도구 추천

• 대체로 로그 모니터링 용도로 묻는 경우가 많음.
• 대표적인 도구는 **Grafana(그라파나)**로, 다양한 데이터 시각화 및 모니터링 활용 가능.
• 기타 대안이나 개인 취향에 따라 선택 가능함.

8. 면접 긴장 완화 방법 공유

• 사직서 적어놓기 또는 면접 전 가벼운 산책 추천.
• 마음을 가볍게 갖고 면접관과의 대화를 자연스럽게 이어나가는 것이 중요.
• 긴장할 때는 깊은 숨을 쉬거나 가벼운 스트레칭도 도움됨.

9. 기타 개발 관련 잡담 및 소소한 이야기

• 팀 내에서 다양한 개발 및 도구에 대한 의견 교류 활발했음.
• 코드리뷰는 현실적으로 가볍게 하는 경우가 많다고 공감.
• 개발자 간 친근한 농담과 응원 메시지들이 많아 유쾌한 분위기 보임.

면접팁⚡

• 면접 질문은 지원자의 경험과 회사 요구사항에 맞게 구체적이고 목적에 부합해야 함.
• 신입 지원자의 경우 태도, 문제 해결 의지, 협업 능력에 초점 맞추기.
• 기술 질문은 너무 광범위하지 않고 실무와 연관된 핵심 주제로 진행.
• 면접 전 긴장 완화 방법을 미리 준비하는 것이 자신감 향상에 도움됨.

링크🔗

• Tailwind CSS 자동 클래스 정렬 플러그인: https://github.com/tailwindlabs/prettier-plugin-tailwindcss
• 서버 모니터링 도구 Grafana: https://grafana.com/
• twMerge (Tailwind 중복 클래스를 합쳐주는 유틸): https://github.com/dcastil/twmerge
• Feature-Sliced Design(FSD) 소개 글 및 적용 사례: https://feature-sliced.design/
• Stylex (페이스북 CSS-in-JS 도구): https://github.com/facebookincubator/stylex