목차
- AI 챗봇과 GPT 서비스 현황
- ESLint v9의 Flat Config 방식 소개
- React Router의 이동 차단과 모듈 페더레이션 이슈
- 상태 관리와 Props Drilling 문제 고민
- 코드 가독성과 재사용성에 관한 토론
- 운동과 개발자 일상 이야기
- 개발 관련 학습 및 자료 추천
- 업무 보고 및 시간 관리 팁
- Git 충돌 및 ES Lint 변경 대응
- TypeScript tsconfig.json 및 Promise.all 타입 지정
1. AI 챗봇과 GPT 서비스 현황 🤖
- GPT가 너무 대명사처럼 여러 서비스에서 불려 혼선이 심해지고 있음.
- 일부 챗봇들은 메모리 제한이나 시간 제한 문제가 발생하기도 해 당혹스러움.
- 앨런과 같은 AI 검색용 서비스에 대한 긍정적인 평이 있음.
- 대안 챗봇 추천 요청 시 “GPT 말고 뭐를 추천하냐”는 유머 섞인 반응도 나옴.
GPT 서비스 메모리 제한 이슈: AI 챗봇은 일정량의 대화 정보(메모리)를 유지하며 작동함.
너무 많은 정보가 쌓이면 메모리가 부족해져 세션이 종료되거나 제한이 생기는 경우가 있음.
이럴 때는 세션을 분리하거나, 컨텍스트 크기를 줄이는 방법으로 대응 가능함.
2. ESLint v9의 Flat Config 방식 소개 🧹
- 최근 ESLint 9버전에서 .eslintrc.json 대신 eslint.config.js 같은 flat config 파일이 도입됨.
- 기존 JSON 설정보다 JS로 작성 가능해 유연성이 높아짐.
- export default [] 형태로 환경별, 플러그인별 설정을 배열로 관리함.
- 변경점은 많은데, 프로젝트에 점진적으로 적용하며 안정화 필요.
ESLint Flat Config 개념:
ESLint는 JavaScript 코드 품질 관리를 돕는 도구임.
Flat Config는 설정 파일이 JS 코드로 변경되어 동적 설정 및 조건부 구성이 가능해짐.
3. React Router 이동 차단과 모듈 페더레이션 이슈 🚦
- React Router의 useBlocker 같은 이동 차단 훅 사용 시 오류 발생 사례 공유.
- 모듈 페더레이션(MF) 환경 내부에서 React Router v6의 BrowserRouter를 쓰면 지원 안 하는 문제 발견됨.
- MF란 여러 애플리케이션의 모듈을 동적으로 공유하는 Webpack 기능을 의미함.
- Next.js는 MF 지원하지 않으며, 서버 컴포넌트 구현 자체가 MF 방식이라 호환이 어려움.
모듈 페더레이션(MF):
여러 앱 간 코드를 공유하고 독립적인 배포 및 관리를 가능케 하는 기술.
복잡도가 발생하므로 라우터같은 상태 관리가 까다로움.
4. 상태 관리와 Props Drilling 문제 고민 🧩
- 여러 상태(state)와 상태 변경 함수(setter)를 여러 컴포넌트에 프롭스로 넘기다 보니 코드가 복잡해짐.
- 상태를 객체로 묶어 전달하는 방법과 리듀서 사용을 고민하는 대화 있음.
- 객체로 묶어도 프롭 개수는 줄어들지만, 깊은 컴포넌트 트리에서는 여전히 전달 부담 존재.
- Context API 사용 권장 의견 많음. 외부 접근 가능한 글로벌 상태 라이브러리는 신중히 고려할 것.
Props Drilling 현상:
부모 컴포넌트에서 자식 컴포넌트까지 여러 단계를 거쳐 프롭스를 전달하는 상황.
코드가 장황해지고 유지보수 어려움 발생.
Context API, Redux, Zustand 같은 상태 관리 라이브러리로 해결 가능.
5. 코드 가독성과 재사용성에 관한 토론 📝
- 변수 선언을 해서 명확한 의미를 주는 방식이 가독성 좋다는 의견 다수.
- 비슷한 로직이 여러 곳에서 사용되면 변수로 분리하여 재사용하는 것이 좋음.
- 하지만 너무 과도한 추상화는 오히려 코드 복잡도를 높임.
- DRY(Don't Repeat Yourself) 패턴 남용에 주의 필요하며, 적절한 균형 찾기가 중요함.
DRY 패턴:
중복 코드를 줄이는 원칙.
너무 남용하면 무의미한 추상화를 만들어 코드 읽기 어려워짐.
6. 운동과 개발자 일상 이야기 💪
- 운동은 몸을 만드는 것보다 체력 유지와 건강 관리가 중요하다는 공감대 형성.
- 춥다고 운동을 미루지 말고 실내 운동 권장.
- 재미있는 운동 찾기와 꾸준함이 동기 부여에 가장 중요함.
- 운동과 일상의 스트레스, 체력 문제를 유머러스하게 나눔.
7. 개발 관련 학습 및 자료 추천 📚
- React, Next.js, TypeScript 공부에 공식 문서와 함께 책 또는 강의를 병행하는 것이 효과적.
- 실무에서 도움을 받았다는 이정환님의 강의 추천 공유 (인프런).
- 영상 강의보다 조용히 읽을 수 있는 책을 찾는 이들도 있음.
8. 업무 보고 및 시간 관리 팁 ⏰
- 근무일수가 적을 때 업무보고가 부담스러움.
- 공부하거나 프로젝트 관련 내용을 보고에 포함시키는 방식 권장.
- 단순히 ‘공부함’보다 ‘업무와 관련지어 문제를 해결하거나 기능을 실험함’으로 표현하면 효과적.
- 상사 연락이 늦을 때 대처법이나 상황 공유도 활발.
9. Git 충돌 및 ESLint 변경 대응 ⚔️
- 깃허브에서 커밋 충돌 경험과 수정 과정 공유됨.
- ESLint 버전업에 따른 프로젝트 설정 변경과 영향 점검 필요성 언급.
- tsconfig.json의 속성들 중 의미 없이 복붙했던 부분을 정리하는 글도 공유됨.
10. TypeScript Promise.all 타입 지정 방법 💡
- Promise.all 사용 시 배열 내 요소들의 타입만 명확히 지정하면 타입 추론이 잘 작동함.
- 별도의 복잡한 타입 지정 없이 함수 인자 타입을 맞추는 것이 깔끔한 방법.
- 공식 문서 참고가 가장 빠름.
면접팁⚡
- 코드 가독성 질문 시, 변수 명명과 재사용성, 적절한 추상화에 대해 논리적으로 설명할 수 있으면 좋음.
- 상태 관리 질문에는 props drilling 현상과 Context API, 리듀서, 전역 상태 라이브러리 선택 기준을 설명하자.
- ESLint와 TypeScript 설정 변화에 대해 최신 정보를 알고 있으면 실무 감각으로 좋은 인상 제공 가능.
- 문제 발생 시 적극적으로 문서 조사, 테스트 및 해결 프로세스를 보여주는 자세 강조.
링크🔗
#React#ESLint#StateManagement#TypeScript#코드가독성#모듈페더레이션#업무노하우#운동하는개발자#Git#AI챗봇추천