목차
- React와 백엔드 선택: PHP vs Node.js
- Next.js와 React 비교, 사용 이유
- 4대보험 이중 가입 관련 질문과 답변
- 타입스크립트(TS)와 자바스크립트(JS) 마이그레이션
- 포트폴리오(포폴) 준비와 경쟁력 요소
- Next.js 15와 NextAuth 호환성 문제
- Tailwind CSS v4와 Svelte 연동 문제 해결
- CSS 최신 문법과 브라우저 호환성 이슈
- 개발자 취업 및 경력 관련 공지
- 기타 토론 및 잡담
1. React와 백엔드 선택: PHP vs Node.js
- React 프론트엔드와 채팅/설문조사 기능을 위한 백엔드 선택 질문이 있었음.
- Node.js 추천: 비동기 처리에 강하고 실시간 기능(채팅)에 적합한 환경이기 때문.
- PHP도 가능하지만, 실시간 이벤트나 WebSocket 지원 면에서 Node.js가 우위.
초보자 설명
- Node.js는 자바스크립트를 서버에서도 사용할 수 있게 한 런타임 환경이다.
- 실시간 데이터 처리에 강해 채팅, 알림 등에 많이 사용된다.
- PHP는 전통적인 서버사이드 스크립트 언어로, 웹 페이지 생성에 많이 쓰이지만 실시간 처리가 까다로울 수 있다.
2. Next.js와 React 비교, 사용 이유
- Next.js는 React 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성 등 다양한 기능 제공.
- 어떤 서비스에 Next.js가 필요한지에 대한 의견:
- SSR, SEO, 빠른 초기 로딩 같은 기능이 필요하면 Next.js가 유리.
- 단순 SPA (Single Page Application)라면 굳이 Next.js를 쓸 필요 없음.
- 하지만 최근 React 공식 문서에서 CRA 대신 Next.js 권장하는 흐름이 있어 이직 준비 시 Next.js가 유리하다는 의견도 다수.
초보자 설명
- React는 UI 라이브러리로 클라이언트에서 화면을 렌더링(표시)함.
- Next.js는 React 기반으로 SSR, API 라우팅, 파일 기반 라우팅 등 강력한 기능을 추가 제공하는 프레임워크.
- SSR은 서버에서 미리 페이지를 만들어 페이지 로딩 속도를 높이고 SEO에 도움이 됨.
3. 4대보험 이중 가입 관련 질문과 답변
- 근무지 변경 후 4대보험(국민연금, 건강보험, 고용보험, 산재보험) 이중 가입 문제 질문.
- 핵심 답변:
- 국민연금, 건강보험, 산재보험은 이중 가입 가능하나 보험료만 부담함.
- 고용보험은 이중 가입 불가. 주된 사업장에서만 가입.
- 보험료 합산하여 받는 보험금은 상한선을 넘지 않음.
- 세금이나 법적 문제는 크게 걱정하지 않아도 됨.
4. 타입스크립트(TS)와 자바스크립트(JS) 마이그레이션
- JS로 먼저 개발 완료 후 TS로 마이그레이션 가능 여부 질문.
- 경험자의 의견:
- 가능하나, 작업량과 복잡도가 커질 수 있음.
- TS를 처음부터 공부하면서 진행하는 것이 생산적일 수 있음.
- as any 타입을 남발하면 TS의 장점이 사라지니 주의 필요.
- TS는 코드 작성 시 타입 체크를 하여 잠재적 오류를 사전에 방지하는 도구.
초보자 설명
- JavaScript는 동적 타입 언어로 타입 검사가 런타임 때 이뤄짐.
- TypeScript는 JavaScript에 타입 시스템을 추가한 언어로, 컴파일 시 타입 오류를 찾아줌.
- TS를 쓰면 개발 시 발생할 수 있는 오류를 미리 방지하고, 코드 유지 보수가 쉬워짐.
5. 포트폴리오(포폴) 준비와 경쟁력 요소
- 소셜 앱 개발 포폴 준비 관련 조언:
- 기술적인 디테일과 자신이 구현한 기능을 잘 설명할 수 있어야 경쟁력 있음.
- 기본 기능만 만드는 것보다 차별화된 기능을 추가하는 것이 좋음.
- "무엇을 만들었냐"보다 "얼마만큼 완성도 있게 만들었냐"가 중요하다는 의견.
- TS 공부는 병행하며 진행하는 것도 괜찮음.
6. Next.js 15와 NextAuth 호환성 문제
- Next.js 14버전과 NextAuth 4 조합에서는 문제 없었으나, Next.js 15와 NextAuth 4 조합 시 문제 발생.
- 카카오, 네이버 로그인 연동 같은 OAuth 사용 시 참고 필요.
- 해결 방법은 직접 테스트 및 버전 확인 권장.
7. Tailwind CSS v4와 Svelte 연동 문제 해결
- Tailwind CSS v4를 Svelte 프로젝트에 설치 후, margin, padding은 작동하지만 theme 설정과 text color 등 일부 class가 적용되지 않는 문제 발생.
- 원인: 브라우저(사용자 환경)의 CSS 최신 문법 미지원 가능성.
- 해결: 크롬 브라우저 최신 버전으로 업데이트 후 문제 해결됨.
- Tailwind v4는 CSS 최신 기능(color-mix 등)을 활용하니 브라우저 호환성 확인 필요.
초보자 설명
- Tailwind CSS는 유틸리티 클래스 기반 CSS 프레임워크.
- 브라우저가 최신 CSS 기능을 지원해야 Tailwind의 일부 고급 기능이 제대로 동작함.
- Svelte는 JS 프레임워크, Tailwind는 CSS 도구이며 함께 사용 가능.
8. CSS 최신 문법과 브라우저 호환성 이슈
- Tailwind v4 기능 중 color-mix 같은 최신 CSS 문법이 포함돼 있음.
- 브라우저가 이를 지원하지 않으면 스타일 적용 안 될 수 있음.
- PostCSS 같은 CSS 전처리기가 모든 최신 문법을 변환하지는 못함.
- 따라서 배포 시 타겟 브라우저 설정 중요.
9. 개발자 취업 및 경력 관련 공지
- 채용 공고 공유: 네이버웹툰 iOS 개발, 스타트업 App 개발자, React Native 개발자 등 다양한 공고 링크가 공유됨.
- Next.js, React Native 스킬이 채용 시 좋은 점수라는 의견 다수.
10. 기타 토론 및 잡담
- 사랑, 결혼, 개인주의에 관한 유쾌한 대화 다수 포함.
- 오픈소스 활동이 인연과 결혼으로 이어진 사례 소개.
- 개발 관련 농담과 Meme, 버전 이슈 경험담 공유.
- 디자인 패턴과 리액트 상태 관리에 대한 간단한 토론도 포함.
면접팁⚡
- Next.js vs React 선택 이유를 명확히 설명할 수 있어야 함: SSR, SEO, API 라우팅 등 프로젝트 요구사항에 맞춰 구체적으로 답변.
- 타입스크립트 도입 이유와 장단점에 대해 이해하고 있어야 함: 코드 안정성, 개발 생산성 향상.
- 포트폴리오 준비 시 기능 구현뿐 아니라 자신만의 강점을 어필하는 방법, 구현 과정 설명이 중요.
- CSS 최신 문법과 브라우저 호환성 문제에 대비하여 문제 발생 시 원인 분석 능력 보여주기.
- 4대보험 이중 가입 관련 기본 상식 숙지: 면접 시 현실적인 문제 해결 능력 강조 가능.
링크🔗
- Next.js 설치 및 튜토리얼: https://nextjs.org/docs/getting-started
- Tailwind CSS 설치 가이드 (SvelteKit): https://tailwindcss.com/docs/installation/framework-guides/sveltekit
- CSS color-mix 문서: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
- 취업 공고 모음: https://zighang.com/it?utm_source=landing
- 포트폴리오 참고 블로그: https://blog.naver.com/pjt3591oo
- Kyobo 도서 구매: https://search.kyobobook.co.kr/search?keyword=%EB%B0%95%EC%A0%95%ED%83%9C
#React#Nodejs#Nextjs#TypeScript#TailwindCSS#WebDevelopment#Insurance#포트폴리오#취업#CSS