목차
- htmx, Vue, React 등 최신 프론트엔드 기술 트렌드와 비교
- React 생태계와 미래 전망
- Signal, SolidJS, Reactive Programming 이해하기
- TypeScript에서 타입 명시와 추론 방법
- Next.js 및 React 관련 SSR/SSG/ISR 개념 질문과 토론
- React 상태관리 및 모노레포, 브랜치 관리 이야기
- 기술 면접 준비 경험과 꿀팁
- 인증, 쿠키, 토큰 관리에 관한 실무 이야기
- AI와 개발자 직업 전망에 관한 소통
- 기타 잡담: 정처기 자격증, 송년회 및 사소한 질문들
1. htmx, Vue, React 등 최신 프론트엔드 기술 트렌드와 비교 🎨
- htmx가 일시적으로 관심을 받고 있지만, 복잡한 비즈니스 문제 해결에는 제한적이라는 의견이 많음.
- Vue(뷰)와 React(리액트)는 여전히 강력한 생태계와 커뮤니티를 보유.
- 신규 스택에도 불구하고 React는 과거 유산이라기보단 앞으로도 10년 넘게 쓰일 안정적인 기술로 평가됨.
- SolidJS, Svelte 등 신흥 프레임워크들이 React와는 다른 철학을 갖고 등장 중임.
2. React 생태계와 미래 전망 🚀
- React는 함수 컴포넌트와 훅(Hooks) 도입 이후 개발 편의성이 크게 증가하여 많은 신규 프로젝트에 활용 중
- React Native는 모바일 크로스플랫폼 개발에 아직 강세지만 최신 트렌드는 다소 주춤함
- React 팀 내 개발자 Dan Abramov(댄 아브라모프)은 React의 체계와 상태 관리에 큰 기여를 했으며, 러시아 출신임
- 한국 개발자들도 실리콘밸리 기술 스택 변화에 5년 정도 지연을 겪는 편이라는 의견도 존재
3. Signal, SolidJS, Reactive Programming 이해하기 ⚛️
- Signal은 세분화된 반응형(Reactivity)으로, 데이터 변경이 필요한 부분만 리렌더링하여 성능 최적화를 지원
- SolidJS는 React와 다르게 하위 컴포넌트 전체를 리렌더링하지 않고, 상태 변화가 직접 연관된 부분만 업데이트함
- React는 단방향 데이터 바인딩과 state 관리를 중심으로 설계된 반면, Signal은 finer-grained 방식이라 복잡한 트롤링 문제도 있음
- SolidJS 커뮤니티 내에서는 이런 트롤링 이슈로 인해 Signal에 대해 부정적 의견도 존재
- Reactive Programming 기본 개념: 상태(데이터) 변경 시 자동으로 UI 업데이트 혹은 함수가 실행되는 것
- 이와 관련하여 RxJS 등에 대한 의견: 유용하나 팀 내 도입이 어렵다는 경험담도 공유됨
4. TypeScript에서 타입 명시와 추론 방법 💡
- 함수의 모든 매개변수, useState의 값, 리턴 타입을 전부 명시할 필요는 없음
- 자동 타입 추론이 가능한 부분은 IDE와 TS가 잘 처리하므로, 복잡하거나 불명확한 부분만 명시하는 게 일반적
- any나 unknown 타입의 사용은 최대한 지양하고, noImplicitAny 등의 엄격 옵션을 사용하는 추세
- 훅에서 리턴하는 객체는 보통 자동 추론에 맡기며, 외부에서 참조하는 경우에 한해 명시하는 경우가 있음
- 너무 과도한 타입 명시는 생산성 저하로 이어져, 적절한 균형이 중요함
5. Next.js 및 React 관련 SSR/SSG/ISR 개념 질문과 토론 🌐
- SSR(Server-Side Rendering)은 서버가 초기 렌더링을 담당하여 브라우저에 완성된 HTML을 전달하는 방식
- 브라우저의 파싱 및 스타일링은 클라이언트 측에서 처리하며, 서버가 파싱과 스타일까지 담당하는 것은 아님
- Next.js에서 /movies 와 /movies/:id 둘 다 SSR을 적용한다면 각 경로에서 별도의 데이터 요청이 필요하지만, ISR(Incremental Static Regeneration) 등으로 캐싱과 갱신 처리 가능
- CSR(Client-Side Rendering)에서 401 에러 처리와 리다이렉트 문제는 서버/클라이언트 환경 차이로 인한 고민
- Next.js 프로젝트를 기존 React 프로젝트에 점진 도입하는 방법도 문의됨
6. React 상태관리 및 모노레포, 브랜치 관리 이야기 ⚙️
- 상태를 객체로 묶어 하나의 state로 관리할지, 각각 따로 관리할지는 상황에 따라 다름
- 많이 쪼개면 불필요 리렌더링 가능성, 너무 뭉치면 관리 복잡도 상승
- 모노레포(mono-repo)는 다수 브랜치와 콜라보레이션에서 브랜치 삭제가 자주 이루어질 경우 비교적 관리 가능하다는 의견
- 상태관리 도구로는 context API, Redux Toolkit, Recoil 등이 언급됨
- context API는 전역 상태 일부 관리에는 유용하나 잦은 갱신엔 부적합
7. 기술 면접 준비 경험과 꿀팁 📝
- 면접 시 예상치 못한 질문에 대비하려면 집에서 큰 소리로 중얼거리며 연습하는 게 큰 도움
- 자신이 성장 과정에서 겪은 문제 해결과 고민 과정을 강조하는 게 중요
- 리액트 훅(useState, useRef, useReducer 등)의 용도와 차이에 대한 이해 필수
- 타입스크립트 관련 질문 종종 받으며, 타입 추론과 명시, any 사용 시점에 대해 답변 준비 필요
- 면접에서는 기술 질문과 함께 비기술적 태도, 로열티에 관한 질문도 받는 경우도 많음
- 이력서 첫줄에서 어그로(관심)를 끄는 것이 중요하며, 자세한 코드는 면접 전 스키밍 정도로 파악
8. 인증, 쿠키, 토큰 관리에 관한 실무 이야기 🔐
- 로그인 토큰 저장 위치: 쿠키는 브라우저 요청 시 자동 전송되지만, 웹뷰나 커스텀 브라우저 환경에서는 취급이 까다로움
- JWT 토큰도 쿠키에 담아 전송하는 경우가 일반적이며, 옵션 설정을 잘 해야 보안과 갱신 문제 해결 가능
- 로컬 스토리지에 저장하는 방법도 있으나 보안상 권장하지 않거나 용도에 따라 다름
- 서버에서 쿠키는 세션 관리나 인증 정보를 관리할 때 주요 수단이나, 클라이언트에서도 적절한 관리를 해야 함
9. AI와 개발자 직업 전망에 관한 소통 🤖
- 생성형 AI가 코드 작성에 도움 주지만, 개발자의 역할과 시장은 당분간 지속될 전망
- AI가 만든 코드가 제대로 동작하지 않을 수 있고, 기획자 요구를 해석하고 문제 해결하는 사람의 필요성 강조
- AI 의존도가 너무 높으면 오히려 문제가 더 생긴다는 의견 공유
- 프론트엔드 개발 도구로서 AI 보조는 생산성 향상 도구로 활용하되, 완전 대체는 어렵다는 현실 인식
10. 기타 잡담: 정처기 자격증, 송년회 및 사소한 질문들 🎉
- 정보처리기사(정처기) 자격증은 면접 시 CS 지식 검증이 됨. 전공이 아니어도 노력의 증거로서 회사에서 긍정적으로 평가할 수 있음
- 송년회, 개발자 모임 일정과 운영에 대한 대화
- React에서 파일 내 여러 컴포넌트 작성 가능 여부, 마우스 오버 시 CSS 클래스 변경 방법 (CSS Hover 이용 권장)
- 이미지 EXIF 메타데이터, 크롤링 법적 문제 등 실무 지식 공유
- 개발자들이 겪는 일상 소소한 문제들에 대한 공감과 위로
면접팁⚡
- 면접 준비는 본인의 생각을 글로 정리하며 말하는 연습을 많이 할 것
- 예상 질문 리스트를 작성하고, 답변 시 자신이 경험한 구체적 사례를 중심으로 말할 것
- React 훅들(useState, useRef, useReducer)의 차이와 쓰임새 반드시 숙지
- TypeScript는 추론 가능하면 타입 명시를 줄이고, any 또는 unknown이 뜨는 부분만 명확히 할 것
- 어려운 질문을 받았을 때는 당황하지 말고, 모르는 부분은 솔직히 인정하고 유추하는 태도 추천
- 상상력이 필요한 코드 작성보다 문제 해결 과정과 태도, 노력 강조
링크🔗
-
React vs Signals: 10 years later (영문)
https://dev.to/this-is-learning/react-vs-signals-10-years-later-3k71 -
Fine-Grained Reactivity에 대한 한글 설명 글
https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%84%B8%EB%B6%84%ED%99%94%EB%90%9C-%EB%B0%98%EC%9D%91%ED%98%95-fine-grained-reactivity-%EC%97%90-%EB%8C%80%ED%95%9C-%ED%95%B8%EC%A6%88%EC%98%A8-%EC%86%8C%EA%B0%9C-57242ec61e08 -
Vite 5 출시 소식
https://vitejs.dev/blog/announcing-vite5 -
Prisma 관계 쿼리 문서
https://www.prisma.io/docs/concepts/components/prisma-client/relation-queries -
TypeScript eslint no-explicit-any 규칙
https://typescript-eslint.io/rules/no-explicit-any/ -
React onClick 이벤트 핸들러 가이드
https://blog.logrocket.com/react-onclick-event-handlers-guide/
#React#TypeScript#SolidJS#Signal#NextJS#프론트엔드#면접팁#상태관리#SSRandSSR#htmx