2025-02-18

목차

1. 아침 인사와 날씨 이야기
2. React 기반 대화형 웹 개발과 난이도
3. AI 챗봇 템플릿과 커스텀 가능성
4. React, React Native, 백엔드 기술 스택 및 개발 기간
5. 다국어/다국가 사이트와 로케일 관리 이슈
6. TypeScript 타입가드 활용법
7. 프론트엔드 면접 질문: fetch vs axios
8. React 개발 패턴과 MVVM 논쟁
9. 스타트업 계약과 지분 관련 현실 이야기
10. 기타 소소한 개발자 일상 및 커뮤니티 이야기

1. 아침 인사와 날씨 이야기

• 개발자들이 아침 인사를 나누며 날씨가 이번 주 내내 추울 거라는 소식을 공유
• 추위에 대한 불만과 일상적인 대화로 시작

2. React 기반 대화형 웹 개발과 난이도

• 챗GPT 같은 대화형 웹페이지 제작 난이도 질문
• UI(화면 디자인) 만드는 것은 라이브러리 활용 시 상대적으로 쉽다는 의견 다수
• 하지만 UI 외에 데이터베이스 연동, 백엔드 API 연결, 상태 관리 등이 난이도를 높임
• 초보자는 React 문법 및 상태 관리(useState, useEffect 등)를 먼저 익히는 것이 중요

설명:
대화형 UI란 사용자가 입력을 하면 서버나 AI에서 답변을 받고, 이를 실시간 또는 반응형으로 화면에 보여주는 웹의 한 형태임.
이런 UI를 만들기 위해선 React 같은 라이브러리로 컴포넌트를 만들고, 상태 관리를 통해 대화 내역을 갱신함.

3. AI 챗봇 템플릿과 커스텀 가능성

• 'shadcn-ui' 같은 UI 라이브러리를 추천하며 커스텀 편의성이 언급됨
• 템플릿 활용 시 기본적인 UI/기능은 빠르게 구현 가능하지만, 내부 동작 로직이나 서버 연동 등은 별도 작업 필요
• 회사에서 직접 만든 백엔드 API와 AI 모델 연동 시 더 긴 개발 기간과 난이도가 발생
• AI 인공지능 챗봇은 RAG(Retrieval-Augmented Generation) 같은 최신 기법과 함께 사용되는 경우 많음

설명:
RAG는 외부 데이터 또는 문서에서 정보를 검색해 답변을 생성하는 AI 기술로, 단순 생성형 AI보다 정확하고 신뢰성 있는 답변이 가능함.
프론트엔드에서는 이런 AI 백엔드와 통신하기 위한 API 연동 작업이 필수임.

4. React, React Native, 백엔드 기술 스택 및 개발 기간

• React + React Native + NestJS 조합이 인기 있는 스택
• 신입/초보자의 경우 간단한 챗봇형 웹 개발에 1~2개월 정도 걸림 (백엔드 협업 필요)
• 백엔드는 주로 FastAPI, NestJS 등이 사용되고 프론트는 React, 상태 관리 라이브러리(react-query 등)를 활용
• 직원 없이 혼자 개발 시 초기 개발 기간이 길어질 수 있음

5. 다국어/다국가 사이트와 로케일 관리 이슈

• 국가 코드(예: KR, JP)별로 동일 도메인에서 다른 콘텐츠를 제공하는 사례 질문
• 서버가 아닌 클라이언트에서 언어 또는 국가 코드를 받아 UI 및 API 호출을 달리 처리하는 방식이 일반적
• 리버스 프록시를 써서 서버단 분기하는 경우도 있으나 비용 및 복잡도 증가
• 각 나라 별 뉴스 데이터는 API 백엔드에서 관리하며, 언어/국가별 프롬프트 및 현지화 필요
• 로케일(locale) 개념: 언어 및 지역 정보를 포괄하는 코드로, UI와 콘텐츠 관리용으로 활용됨

6. TypeScript 타입가드 활용법

• 타입스크립트에서 타입 판별 함수(타입가드)를 통해 특정 값이 특정 타입인지 체크하는 방법 질문
• 예) 특정 문자열 값이 유니언 타입('a' | 'b' | 'c')에 속하는지 검증하는 함수 작성
• 타입가드를 통해 컴파일러에게 특정 조건부로 타입을 좁혀주어 안전한 코드 작성 가능

설명:
타입가드는 function isTa(z: string): z is Ta { ... } 형태로 선언하며, 조건문에서 사용할 때 타입 안정성을 향상시킴.

7. 프론트엔드 면접 질문: fetch vs axios

• 면접에서 fetch API와 axios 라이브러리 선택 이유 질문 등장
• fetch는 브라우저 내장 API이며, axios는 HTTP 통신을 더 편리하게 도와주는 라이브러리
• 간단한 요청은 fetch로 충분하지만, 인터셉터, 요청 취소, 헤더 자동 설정 등 부가 기능이 필요한 경우 axios가 유리
• 면접 답변 팁: 각 도구의 장단점과 상황별 선택 기준을 명확히 설명하면 긍정적 인상
• 중요한 점은 팀과 프로젝트 필요에 맞게 도구를 선택·사용하는 것임

8. React 개발 패턴과 MVVM 논쟁

• React가 MVVM(Model-View-ViewModel) 패턴인지에 대한 토론
• MVVM 일반적으로는 데이터 바인딩 방식이 양방향(binding)인 반면, React는 단방향 데이터 흐름을 가짐
• React 컴포넌트의 상태(state)가 변경되면 뷰가 갱신되는 점은 MVVM과 유사하지만 완전 동일하지 않음
• 엄밀히 보면 React는 컴포넌트 기반 선언형 UI 라이브러리이며, MVVM보다는 단방향 데이터 흐름 패턴에 더 가깝다

9. 스타트업 계약과 지분 관련 현실 이야기

• 창업 초기 스타트업 프로젝트 가입 시 계약서 작성 유무 질문
• 법인 설립 전에는 보통 구두 계약이나 신뢰를 바탕으로 진행하는 경우 많음
• 지분, 스톡옵션 등 보상은 법인 설립 후 정식 계약서로 체결하는 것이 일반적
• 스타트업에서 실제 지분 행사나 스톡옵션 가치 실현까지는 상당한 시간이 걸림
• 고용/근로 계약과는 별도로, 사이드 프로젝트 참여 시에는 신중한 검토 필요

10. 기타 소소한 개발자 일상 및 커뮤니티 이야기

• 일상 대화, 긴급 출근, 데이터 삭제 이슈 등
• 개발하면서 느끼는 공부의 어려움과 동료 간 응원
• 팀 블로그, 개인 블로그 운영에 대한 경험 공유

면접팁⚡

• fetch vs axios: 각 도구의 역할과 장점을 말하고, 상황에 따른 적절한 선택 기준을 논의할 것
• React 스택 선택 이유: "프로젝트 요구사항, 커뮤니티 지원, 확장성" 등을 명확히 언급
• React 패턴 질문: MVVM이 아니라 단방향 데이터 흐름임을 명확히 이해하고 답변
• 타입스크립트 타입가드: 예제와 함께 타입 안정성을 위해 어떻게 사용하는지 설명 가능해야 함

링크🔗

• React 공식 문서
• TypeScript 타입가드 예시
• FastAPI 공식문서
• shadcn UI 라이브러리
• MVVM 패턴 설명 (Microsoft Docs)
• Fetch API 사용법 (MDN)
• Huggingface Chat UI 예제
• 팀 블로그: Daangn Medium
• React Query 공식문서
• Velog 관련 포스트 예시