목차
- Jest 테스트 환경 문제와 해결
- 코딩 테스트 vs 과제 면접 경험
- CSS-in-JS vs TailwindCSS 등 스타일링 기법 토론
- Vanilla Extract 소개와 프론트엔드 생태계 변화
- Rust와 WebAssembly, 미국 개발 트렌드
- React Query의 동작 원리와 토큰 인증 이슈
- JavaScript const, 배열, 객체의 메모리 동작 이해
- 프론트엔드 이미지, 아이콘 소스 추천
- React 라우터, Vite 마이그레이션 문제
- 질문 및 답변: 실무 팁과 개발 궁금증
1. Jest 테스트 환경 문제와 해결
- Jest를 프로젝트에 불필요하게 import하면 테스트가 정상 동작하지 않는 경우가 있음
- 불필요한 jest import를 제거하니 테스트가 바로 성공
- Jest는 JavaScript 테스트 프레임워크로, 단위 테스트와 스냅샷 테스트 등을 쉽게 작성할 수 있음
- 개발 초기 환경 설정시 관련 모듈 불필요하게 포함 여부 확인 필요
2. 코딩 테스트 vs 과제 면접 경험
- 최근 지원 회사에서 코딩 테스트(Coding Test)를 보지 않는 곳이 늘어나는 추세
- 대신 실무 과제를 온라인으로 일주일 정도 주고 완성한 깃헙 링크를 제출하는 경우 많음
- 실시간 손 코딩 테스트는 점차 줄어드는 분위기
- 코딩 테스트 부담으로 지원 자체를 망설이는 경우 지원해도 괜찮다는 의견 다수
- 면접 준비 시 코딩 테스트뿐만 아니라 과제형 면접 대비도 중요
3. CSS-in-JS vs TailwindCSS 등 스타일링 기법 토론
- Emotion, Styled Components 등 CSS-in-JS 기법과 TailwindCSS, Bootstrap 등 유틸리티 기반 CSS에 대한 의견 교환
- CSS-in-JS는 컴포넌트와 스타일을 자바스크립트 내에서 같이 관리할 수 있어 편하지만, 유지보수 어려움 지적
- TailwindCSS는 클래스명으로 빠르게 스타일링을 적용하지만, 지나치게 클래스 이름이 난잡해질 수 있고 시각적 가독성 낮음
- 대기업과 스타트업, 국내외 차이에 의한 선호도 차이가 존재
- Vanilla Extract(https://vanilla-extract.style/) 같은 타입 안전하고 정적 스타일 생성 도구에 관심 증가
- Sass는 여전히 보조 스타일링 수단으로 활용되나, Tailwind와 조합해 쓰는 추세
- 프론트엔드 스타일링은 개인 취향과 프로젝트 성격에 따라 적절한 선택 권장
4. Vanilla Extract 소개와 프론트엔드 생태계 변화
- Vanilla Extract는 타입스크립트와 연동해 CSS를 정적으로 생성하는 라이브러리로, React 외에도 다양한 환경에서 사용 가능
- 빠르게 변화하는 프론트엔드 생태계에서 프레임워크와 스타일링 도구는 계속 진화 중
- React, Vue, Angular 등 세 가지 주요 프레임워크 경쟁과 함께, 신규 도구도 지속 등장
- 유지보수성과 생산성 균형 맞추는 도구 선택이 중요
5. Rust와 WebAssembly, 미국 개발 트렌드
- 미국에서는 React보다 Rust 언어 활용도가 높은 편이며, WebAssembly도 각광받고 있음
- Rust는 메모리 안전성을 보장하는 시스템 프로그래밍 언어로, MS 등 대규모 기업에서 점차 채용 중
- Rust 개발자 연봉은 미국에서 25만~35만 달러로 상당히 높음
- WebAssembly는 브라우저 내에서 네이티브 수준 퍼포먼스를 낼 수 있게 해주는 기술이나, SEO 한계 존재
- 국내는 여전히 React 중심이지만 글로벌 트렌드는 변화를 겪고 있음
6. React Query 동작 원리와 토큰 인증 이슈
- React Query는 서버 데이터를 클라이언트 상태로 관리하고 캐싱/갱신 기능 제공
- 실시간 데이터 동기화 도구가 아니며, 서버 데이터를 최신으로 유지하려면 주기적 API 호출 필요
- useQuery는 주기적 요청 및 캐싱, useMutation은 1회 API 호출용 훅임
- 제대로 설정하지 않으면 중복 요청이 빈번히 발생할 수 있음
- 로그인 인증 시 Access Token과 Refresh Token을 쿠키에 저장하고, 인증이 필요한 API 요청 시 헤더에 담아 통신
- 토큰 인증과 React Query 동작 원리에 대한 이해 필수
7. JavaScript const, 배열, 객체의 메모리 동작 이해
- const 변수는 재할당이 불가능하지만, 배열이나 객체 내부 값은 변경 가능
- 배열, 객체는 메모리 주소를 참조하는 레퍼런스 타입임
- 배열 내부 값 변경은 메모리 주소를 변경하지 않으므로 가능
- Object.freeze로 객체/배열 불변성 강제 가능
- 메모리 동작 원리를 잘 이해해야 코드 작성과 디버깅에 도움
8. 프론트엔드 이미지, 아이콘 소스 추천
- 아이콘은 Material Icons, freeicon 등에서 쉽게 구할 수 있음
- 직접 제작하는 경우도 많음
- 이미지, 로고 소스는 상업적 라이선스 확인 필수
- 참고할 만한 디자인 사이트로 Gdweb, Behance 추천
- 소스 코드 공개는 많지 않음, 대부분 디자인 샘플 용도
9. React 라우터, Vite 마이그레이션 문제
- 웹팩에서 Vite로 마이그레이션 시 라우터 경로 내 컴포넌트 파일을 못 찾는 오류 보고
- [plugin:vite-plugin-require] Unsupported type: TemplateLiteral 에러 발생하는 경우가 있음
- Vite는 ES 모듈 방식을 기본으로 하므로, require 기반 코드가 정상 동작하지 않을 수 있음
- 코드 내 동적 임포트 혹은 플러그인 설정 꼼꼼히 확인해야 함
10. 질문 및 답변: 실무 팁과 개발 궁금증
- 컴포넌트 라이브러리 중 Compound Component 패턴 관련 구조 질문 (ex. Command.Item)
- undefined 포함 타입 호출 관련 안전 콜 방법: toggle?.() 혹은 toggle && toggle() 로 간결 처리 가능
- TensorFlow.js는 대용량 데이터, ML 모델 활용 가능하지만 Python 기반 ML만큼 강력한 생태계는 아님
- rem, em 단위는 반응형 웹에서 자주 쓰이며, 디자이너와 협업 시 기본 단위값 협의 중요
- React Query 사용 시 쓸데없는 API 요청을 막으려면 fetch 설정 조정 필요
- Stack과 Heap 관점에서 자바스크립트 변수와 메모리 이해가 코드 작성에 도움 됨
면접팁⚡
- 코딩 테스트는 아직 중요하지만, 점차 과제형 실무 테스트로 대체되는 추세에 주목할 것
- 실시간 코딩 문제에 부담 느낀다면, 온라인 과제 제출 방식 지원도 적극 고려
- React Query의 useQuery와 useMutation 차이, 패칭 동작 원리 숙지 필수
- 자바스크립트 const와 참조 타입 메모리 동작 이해는 기본이며 면접 질문으로 자주 등장
- 스타일링 기법(CSS-in-JS vs Utility CSS) 장단점 정리 및 자신의 경험 공유 준비
링크🔗
- Emotion 관련 블로그: https://mitchell-up.github.io/mitchell-dictionary/blog/how-to-emotion
- TailwindCSS와 디자인 시스템 관련: https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/
- Vanilla Extract 공식 사이트: https://vanilla-extract.style/
- React Query 공식 문서(중요 기본 설정): https://tanstack.com/query/latest/docs/framework/react/guides/important-defaults
- 디자인 참고 사이트: Gdweb, Behance
- Compound Component 패턴 키워드 검색 추천 (React 복합 컴포넌트)
#Jest#코딩테스트#CSSinJS#TailwindCSS#VanillaExtract#Rust#ReactQuery#JavaScript#WebAssembly#프론트엔드