목차
- GPT 업데이트 및 모델 데이터 인식 범위
- 라면과 계란찜에 관한 소소한 이야기
- React 개발 팁: React DevTool, useEffect, 상태관리 의견
- 파일 업로드 아키텍처 및 인증 처리
- Next.js, 서버 컴포넌트 vs 클라이언트 컴포넌트 역할
- React 상태관리 및 조건부 렌더링 방식
- Axios vs Fetch 문제와 Next.js 미들웨어 환경 이슈
- Docker, AWS 배포 및 CI/CD 이야기
- 면접, 신입과 경력 개발자의 성장, 도메인 지식 중요성
- React 실험 기능, 버전 변화, 그리고 미래 전망
1. GPT 업데이트 및 모델 데이터 인식 범위
- GPT-3.5는 2022년 1월까지 학습 데이터 인식
- GPT-4는 2023년 2~4월 데이터 반영(최신 정보는 여전히 제한적)
- 토큰 사용량에 따른 과금 체계는 입력(tokens) 0.03달러/1,000개, 출력(tokens) 0.06달러/1,000개로 설정됨
- 대화에서 'GPT가 바보가 된 것 같다는' 표현이 있었으나, 대상이 명확하지 않고, 업데이트 후 성능 신뢰성에 대한 수용도 혼재됨
초보자 설명:
- GPT 모델은 특정 시점까지의 데이터로 학습되어 이후 발생한 정보는 알지 못함
- '토큰'은 텍스트를 나누는 단위이며, 입력과 출력 토큰수에 따라 비용이 발생
- 최신 업데이트가 항상 성능 향상을 의미하지 않을 수 있음
2. 라면과 계란찜에 관한 소소한 이야기
- 컵라면에 계란 풀어 전자레인지에 돌리면 간편 계란찜 가능
- 신선식품인 계란과 조리법(물 양, 조리시간) 중요성을 강조하며 요리와 개발의 공통점(문서 확인) 언급
- 다양한 라면 브랜드와 개인 취향(계란 넣기 여부, 국물 먹기, 전자레인지 조리)에 대해 자유로운 의견 교환
- 라면 칼로리와 영양 밸런스에 대한 가벼운 토론도 포함됨
3. React 개발 팁: React DevTool, useEffect, 상태관리 의견
- React DevTool이 Windows 회사 PC에서 동작하지 않는 문제 질문
- useEffect 의존성 배열관리 중요성 설명
- 불필요한 useEffect 사용은 사이드이펙트를 만들고 성능 저하를 초래할 수 있음
- 상태관리가 필요할 때, 전역 Context나 recoil/zustand 같은 라이브러리 사용 가능
- 상태관리 라이브러리 활용 사례나 필요성을 진지하게 고민하는 분위기
- 조건부 렌더링에서 && vs 삼항연산자 사용에 관한 논쟁
- &&는 falsy값을 처리하지만 '0', ''도 렌더링하지 않으므로 주의 필요
- 삼항연산자는 더 명확한 조건 처리에 도움됨
초보자 설명:
- useEffect는 컴포넌트가 렌더링될 때 특정 동작을 실행하는 훅이며, 의존성 배열을 통해 언제 실행할지 지정
- 상태관리 라이브러리는 컴포넌트 간 상태 공유와 복잡도 관리를 쉽게 해줌
- 조건부 렌더링은 화면에 보여줄 요소를 조건에 따라 선택하는 방법
4. 파일 업로드 아키텍처 및 인증 처리
- 프론트엔드에서 직접 저장소에 파일 업로드 가능 여부 논의
- 일반적으로 인증과 권한 검증은 백엔드에서 처리해야 함
- S3 같은 저장소는 자체 인증 기능이 부족하여 백엔드에서 토큰 검증 후 업로드 URL을 발급하는 방식을 사용
- 파일 업로드 서버를 자체 구축하고 인증 기능 포함 시 프론트에서 직접 요청 가능
- 신뢰 문제 핵심: 검증되지 않은 곳에서 온 요청은 신뢰할 수 없으므로 중간에서 걸러야 안정적임
초보자 설명:
- 사용자 인증은 사용자가 맞는지 확인하는 과정이며, 민감한 작업(파일 업로드 등)은 서버(백엔드)에서 관리하는 것이 안전
- S3는 클라우드 저장소 서비스로, 유저 인증 기능이 제한되어 백엔드를 통해 사용자 인증 처리 후 접근
5. Next.js, 서버 컴포넌트 vs 클라이언트 컴포넌트 역할
- Next.js 13부터 서버 컴포넌트와 클라이언트 컴포넌트 분리
- 서버 컴포넌트는 서버에서 미리 렌더링해 빠른 초기 로딩 제공, 상태 훅(useState, useEffect) 사용 불가
- 클라이언트 컴포넌트는 사용자와의 상호작용 담당, 상태 훅 사용 가능
- 로그인 폼 예시: 큰 틀은 서버 컴포넌트로, 입력 필드와 버튼은 클라이언트 컴포넌트로 구성
- 폼 액션(form actions)을 사용하면 클라이언트와 서버의 역할을 더 명확히 분리할 수 있음
초보자 설명:
- 서버 컴포넌트는 HTML 결과를 먼저 만들어 클라이언트에 전달, 초기화 속도가 빠름
- 클라이언트 컴포넌트는 실제 사용자의 입력과 반응을 처리하는 부분
- 이 분리 덕분에 빠르고 효율적인 웹앱 개발 가능
6. React 상태관리 및 조건부 렌더링 방식
- && 연산자 조건부 렌더링 간단하지만 falsy 값(0, '')에 취약함
- 삼항연산자(condition ? A : B)가 명시적이며 에러 여지가 적음
- useMemo, useCallback 등 메모이제이션 훅의 목적은 함수나 값을 캐싱해 불필요한 재계산, 재렌더링 방지
- 실제로 useCallback은 함수 아이덴티티 유지가 주목적, 연산 최적화가 아닌 경우가 많음
- 라이브러리 개발자는 사용자가 버그를 내지 못하도록 신중히 설계
7. Axios vs Fetch 문제와 Next.js 미들웨어 환경 이슈
- Next.js 엣지 미들웨어 환경에서 Axios가 동작하지 않는 문제 보고됨
- 미들웨어는 서버스러운 환경으로 일부 Node API 미지원
- Next.js 공식 문서는 엣지에서 fetch 사용 권장
- Axios는 브라우저/Node 복합 환경용 라이브러리이나 Next.js 미들웨어에서는 호환 이슈 발생
- 해결 방법: 환경별로 fetch 또는 Axios를 조건부 사용하거나 fetch 기본으로 전환하는 추세
8. Docker, AWS 배포 및 CI/CD 이야기
- Next.js 프로젝트를 Docker로 묶어 EC2에 배포하는 방법에 대한 토론
- 인프라 통합을 위해 AWS 기반으로 전환하려는 팀 의견
- AWS Fargate 사용 시 Docker 컨테이너 관리를 쉽게 할 수 있음
- CI/CD는 GitHub Actions, ArgoCD 등 툴 추천과 개인 경험 공유
- 프론트엔드 개발자가 Docker 설정까지 신경 쓰기는 부담스러울 수 있어 협업 필요
9. 면접, 신입과 경력 개발자의 성장, 도메인 지식 중요성
- 신입 개발자는 지속 학습과 실무 경험을 통해 성장해야 함
- 도메인 지식(금융, 보험 등 산업 지식)은 개발 능력 못지않게 중요
- 좋은 개발자는 단순 코딩보다 서비스 작동 원리 이해와 설계 능력 보유
- 경력자가 특정 기술에만 치중하면 신입에게 뒤처질 수 있어 균형 필요
- 면접 시 업무 내용에 대해 "무엇을 개선했고 어떻게 문제를 해결했는지" 구체적으로 정리하는 것이 효과적임
10. React 실험 기능, 버전 변화, 그리고 미래 전망
- React는 안정된 버전과 별도로 실험(experimental) 기능들을 카나리, 프리뷰 채널로 먼저 공개
- useTransition, Suspense 등 실험 기능이 많으며 정식 버전 적용 전 충분한 테스트 필요
- React 18 이후 대규모 변화 적고 미래 19버전도 준비 중이나 큰 폭 업그레이드는 예상 없음
- 후발 프레임워크(Qwik, Solid 등) 등장으로 경쟁 중
- React는 당분간 가장 널리 쓰이는 프레임워크로 예상됨
면접팁⚡
- 본인이 맡았던 업무에서 구체적으로 한 일과 해결책을 짧고 명확하게 설명하자
- 도메인 지식이 중요하니 회사 산업을 사전에 공부하는 것이 큰 도움
- 신입이라도 지속 학습 의지와 기본 CS 지식, 네트워크 이해는 반드시 갖출 것
- 면접에서 기술 외에 커뮤니케이션 능력도 강조됨
링크🔗
#React#NextJS#TypeScript#AWS#Docker#파일업로드#상태관리#프론트엔드#면접팁#인증