목차
- 프레임워크 및 라이브러리 선택 토론
- Redux Toolkit과 타입스크립트 제너릭 이슈
- AI 코드 작성 경험 공유
- Next.js 서버 액션 및 E2E 테스트 문제
- 경력 및 등급 기준 관련 논의
- 가상화 리스트와 무한 스크롤 스크롤 유지 문제
- AI 도구 활용과 개발 생산성
- 출퇴근과 환승 관련 고민
- 개발 관련 소소한 이야기 및 유머
- 기타 공유 및 홍보 내용
1. 프레임워크 및 라이브러리 선택 토론
- React, Flutter, Svelte, Vue 등 다양한 프레임워크 선호 의견이 오갔음.
- 'Next.js'는 React 생태계에서 SSR(Server Side Rendering)이 필요한 페이지에 보조적으로 사용하는 것이 적절하다는 의견 다수.
- Next.js를 프로젝트 시작부터 메인 프레임워크로 쓰는 것은 비효율적이라는 견해.
- Vue도 여전히 많이 사용되고, React가 ‘기본’이라고 말하긴 어려워진 상황.
- 개인 프로젝트에서는 Svelte, Vue 등 다양한 선택지 사용해보는 것은 권장됨.
용어 설명
SSR (Server Side Rendering)
사용자 요청 시 서버에서 미리 HTML을 만들어 보내서 초기 렌더링 속도를 높이고 SEO(검색엔진 최적화)에 이점이 있는 기술.
Next.js
React 기반의 프레임워크로 SSR과 정적 사이트 생성을 지원하며, 필요한 부분만 SSR을 적용 가능함.
2. Redux Toolkit과 타입스크립트 제너릭 이슈
- redux를 유틸함수로 자동 생성하는 코드가 공유됨.
- 여러 API 요청마다 타입이 달라지는 상황에서 타입스크립트 제너릭을 어떻게 안전하게 적용할지 고민이 많음.
- { action, state, initialState, api } 구조로 API 요청을 정의하며 타입 관리 중.
- 개별 API마다 payload와 response 타입이 다르기 때문에 any를 사용하고 싶지 않은데 적절한 제네릭 추론이 어렵다는 문제 제기.
- OAS(OpenAPI Specification) generator 사용을 추천하는 의견도 있었음.
- 서버에서 API 명세를 제공하지 않으면 프론트엔드 개발자가 일일이 타입을 정의해야 해서 번거롭고 오류 가능성 증가.
용어 설명
제네릭(Generic)
타입스크립트에서 데이터 타입을 함수, 클래스, 인터페이스 등에 일반화하여 넣을 수 있는 기능.
OAS (OpenAPI Specification)
REST API 명세를 표준화한 규격으로 자동 문서 생성, 코드 제너릭 생성 등에 활용함.
3. AI 코드 작성 경험 공유
- AI(예: GPT, Claude)를 이용해 코드를 작성해보는 경험 공유.
- AI는 기본 로직은 잘 만들어주지만, 디테일한 수정이나 최적화에 한계가 있음.
- AI가 기존 코드를 수정하기보다는 새로운 코드를 계속 추가하는 경향이 있음.
- AI가 쓴 코드 이해나 유지보수가 어려워질 수 있다는 점에서 조심해야 함.
- 커밋 메시지 자동 생성과 코드 작성 보조는 생산성 향상에 도움 됨.
- 하지만 AI에 너무 의존하면 직접 문제 해결 능력은 떨어질 위험도 있음.
4. Next.js 서버 액션 및 E2E 테스트 문제
- Next.js의 서버 액션을 Playwright 환경에서 모킹(Mock)하는 이슈가 논의됨.
- 워커(worker)를 여러 개 쓸 때 모킹이 간헐적으로 실패하는 현상 발생.
- 정확한 원인 파악 중이며 테스트가 불규칙하게 실패하거나 통과하는 현상에 대한 경험 공유.
- 안정적인 테스트 환경 구축 시 서버 액션 모킹과 워커 관리가 중요함.
용어 설명
모킹(Mock)
테스트 시 실제 API 호출 대신 가짜 데이터를 주는 방법.
Playwright
Microsoft에서 만든 최신 웹 E2E(End-to-End) 테스트 자동화 도구.
5. 경력 및 등급 기준 관련 논의
- 개발자 경력 초급/중급/고급 구분에 대한 의견들.
- 통상적으로 3년 단위 정도로 나누지만 회사마다 다름.
- 프리랜서 시장이나 SI 프로젝트에서는 정처기(정보처리기사) 자격증 기준이나 학력, 경력을 조합해 등급 산정하는 경우가 많음.
- 등급 산정 프로그램 사용 사례도 있음.
- 회사 내에서 공식적으로 등급 부르는 문화는 적음.
6. 가상화 리스트와 무한 스크롤 스크롤 유지 문제
- 가상화(virtualized) 리스트, 무한 스크롤에서 상세 페이지 갔다가 돌아올 때 스크롤 위치 유지의 문제점 토론.
- 각 아이템 높이가 고정이 아니고 조금씩 다른 경우 이슈 발생 가능성 있음.
- 스크롤 위치 복원을 위해선 각 아이템의 높이를 정확히 예측하고, 오프셋(offset) 조절 필요.
- 기술적 한계라기보다는 구현 난이도 문제로 보임.
- 사전에 높이값을 캐싱하거나 적절한 buffer 공간 확보로 해결 가능.
용어 설명
가상화 리스트
실제 보이지 않는 아이템은 렌더링하지 않고, 화면에 보이는 부분만 렌더링하여 성능을 높이는 리스트 구현 기법.
오프셋(offset)
스크롤 위치를 기준으로 콘텐츠 위치를 나타내는 수치.
7. AI 도구 활용과 개발 생산성
- AI 코드 생산성은 MVP(최소기능제품)까지는 매우 유용하다는 공감대.
- 그 이상 고도화나 디테일 작업은 수작업과 기존 코드 이해가 필수적임.
- AI 도구별 제한이나 요금 정책 인지 필요 (예: 무료/유료 여부).
- AI 사용 시 커밋/푸시 자동화 도구 활용 가능.
- AI의 답변이 맥락을 완벽히 이해하지 못하는 경우도 있어 직접 검토 필요함.
8. 출퇴근과 환승 관련 고민
- 1시간 출퇴근은 대체로 견딜 만하다는 의견.
- 3회 환승(버스-지하철 여러번)은 고단한 경험으로 평가됨.
- 환승 시간과 대기 시간에 따라 전체 소요시간 변동 큼.
- 버스 vs 지하철 이용에 따라 체감 차이 존재.
- 환승이 많아도 사람이 적고 쾌적한 루트 선호 경향 있음.
- 요즘은 환승 동선 및 최소 환승 위주로 길 찾기 옵션 활용.
9. 개발 관련 소소한 이야기 및 유머
- 게살버거와 얼음콜라 조합, 스팸 요리 관련 유머가 오감.
- 국민연금 납부액 인상에 관한 한탄과 농담.
- 개발자들의 일상 잡담과 애드립 섞인 대화가 진행됨.
- 개발 문화와 팀 분위기 일부 엿볼 수 있음.
10. 기타 공유 및 홍보 내용
- AI 챗봇 자동 제작 이벤트 홍보 (피큐레잇 서비스).
- .NET 6~10 버전 정보 링크 공유 및 장단점 토론.
- React 네비게이션 앱 UI처럼 슬라이드 효과 주는 라이브러리 stackflow.so 소개.
- 다양한 개발 관련 온라인 자료 및 영상 링크 간간이 공유됨.
면접팁⚡
- Redux Toolkit + TypeScript 제네릭 이해도
- 제네릭 타입 적용시 API 요청마다 payload, response 타입을 어떻게 안정적으로 설계할지 숙지.
- OpenAPI 스펙 활용 경험은 큰 장점.
- Next.js SSR과 서버 액션 모킹 경험
- 서버 액션 개념과 E2E 테스트 모킹 관련 문제 해결 능력 어필 가능.
- 가상화 리스트 & 무한 스크롤 구현 경험
- 스크롤 위치 유지 구현 방법과 기술적 한계 여부 설명 준비.
- AI 도구를 활용한 코드 생산성 향상 경험
- AI 보조를 통한 개발 생산성 증가와 그 한계에 대한 균형 잡힌 인식 표현 가능.
링크🔗
#React#ReduxToolkit#TypeScript#NextJS#AI개발도구#테스트자동화#가상화리스트#출퇴근#개발자커뮤니티#생산성