목차
- 코딩 테스트 준비와 자료 공유
- UI 라이브러리 비교: Tailwind CSS vs MUI
- JavaScript Boolean 변환과 코드 스타일
- 클린 아키텍처와 React 상태 관리
- 영어 능력의 중요성과 개발자 영어 실력
- React와 백엔드 연동 방법 (Nginx, Next.js, NestJS)
- 번들 크기 최적화와 트리쉐이킹 이슈
- 한글 변수명 사용 경험과 논의
- 스타일링 라이브러리: Vanilla Extract, Sprinkles 활용 및 MUI 테마
- 기타 개발 관련 팁 및 Q&A
1. 코딩 테스트 준비와 자료 공유
- 최근 코딩 테스트 준비가 쉽지 않다는 공감대가 많음.
- 과제형 코테도 많지만, 대기업은 js 기반 코테를 강하게 요구하는 편임.
- 좋은 코테 준비 사이트로 neetcode.io, leetcode 추천됨.
- 알고리즘 공부가 코테 지문 이해에 큰 도움이 됨.
- 코테 준비 시 언어는 한 가지만 집중하기보다 2개 이상 준비하는 게 효과적임.
코딩 테스트 팁:
- 코테 문제 풀이 경험 자체가 실무에서 React 개발 시 문제 해결능력 향상에 도움.
- 기본기 다지는 것과 더불어 문제 유형에 익숙해지는 것이 중요.
- 가독성 좋은 코드 작성에 신경 쓰며 연습.
2. UI 라이브러리 비교: Tailwind CSS vs MUI
- Tailwind CSS
- 유틸리티 클래스 기반 CSS 프레임워크.
- 네이밍이나 재사용성 고민이 적고, 디자인 토큰을 포괄적으로 제공.
- 단점은 클래스명 가독성이 떨어지고, 스타일 동적 적용이 어려울 수 있음.
- 복잡한 디자인일수록 @apply 활용으로 가독성 향상 가능.
- MUI(Material-UI)
- 컴포넌트 중심 UI 프레임워크로, React전용.
- Tailwind 보다 디자인 고민을 덜 하지만, 내부 요소가 여러 태그로 래핑돼 커스텀은 어렵고 클래스 네임 관리가 복잡함.
- 스타일 커스터마이징 시 문서 참고가 필수적이며, 난이도가 있음.
비교 요약:
- Tailwind는 "CSS 작성 방식을 바꾸는 것"에 가깝고 MUI는 "완성된 UI 컴포넌트 제공"에 가깝다.
- 디자인을 직접 하지 않고 빠르게 UI 구성하고 싶으면 MUI 추천.
- 커스텀 디자인과 관리 편의성 측면은 Tailwind가 강점.
3. JavaScript Boolean 변환과 코드 스타일
- if(variable) 조건문 사용시, JavaScript에서는 falsy 값(undefined, null, '', 0 등)과 truthy 값을 구분함.
- Boolean 변환 간략화 방법:
- 삼항연산자 (variable ? true : false) 대신 !!variable 또는 Boolean(variable) 사용 권장.
- !! 연산자는 변수값을 Boolean 타입으로 명시적 변환(강조)할 때 간편하게 쓰임.
- 스타일 관점:
- !!는 키보드 타건을 줄여 효율적이며, 가독성은 사람에 따라 호불호 존재.
- Boolean()은 직관적이고 명시적임.
- 참고 문서: MDN의 Truthy, Falsy, Logical NOT(!!)
4. 클린 아키텍처와 React 상태 관리
- 클린 아키텍처는 도메인(비즈니스 로직) 영역을 프레임워크나 UI 라이브러리로부터 독립시키는 구조를 추구.
- React 상태는 보통 UI/프레젠테이션 레이어에 속하며, 도메인 엔티티와 직접 매칭하지는 않음.
- 도메인 영역의 상태는 불변 객체나 순수 함수형 스타일로 관리하는 경우 많음.
- 클린 아키텍처를 React에 적용하려면 상태 분리, 도메인 모델 설계 및 책임 분담을 명확히 해야 함.
5. 영어 능력의 중요성과 개발자 영어 실력
- 개발자 영어는 기초 독해, 문서 이해, 검색 높은 비중을 차지함.
- 영어 회화보다도 변수명, 함수명, API 문서 이해 등 기본 단어 및 문장 파악이 중요.
- 구문이나 어법은 말하기/쓰기보다 도큐먼트 읽기에서 주로 활용됨.
- 실무에서는 간단한 번역기 사용을 병행하나, 단어 인지력과 문법 이해가 토대가 됨.
- 영어 잘 하면 해외 취업, 연봉 인상, 국제적인 협업에서 유리함.
6. React와 백엔드 연동 방법 (Nginx, Next.js, NestJS)
- React는 UI 라이브러리로, 백엔드와는 REST API나 GraphQL을 통해 통신.
- Nginx는 정적 파일 서빙, 리버스 프록시, SSL, 로드 밸런싱 역할 많이 함.
- Next.js, NestJS 서버는 필요에 따라 한 서버에 같이 올리거나 분리해서 운영 가능.
- Nginx에서 React 앱과 API 서버를 연동할 때는 프록시 패스 설정이드 많이 활용됨.
- AWS나 클라우드 서비스 조합으로 배포 시 별도 웹서버 없이도 서버리스 형태 제공 가능.
7. 번들 크기 최적화와 트리쉐이킹 이슈
- 번들 크기가 크면 네트워크, 파싱, 초기 로딩 속도에 영향.
- Webpack5나 Vite로 업그레이드해도 의존성에 따라 번들이 커질 수 있음.
- 트리쉐이킹(Dead-code elimination)은 ESM을 기반으로 작동하지만, 일부 라이브러리에서 제대로 작동하지 않는 경우 존재.
- 소스맵(inline source map)이 최종 번들 크기를 늘리므로, 프로덕션 빌드에서는 꺼야 함.
- 코드 스플리팅과 동적 임포트로 초기 로딩 분산 가능.
8. 한글 변수명 사용 경험과 논의
- 한글 변수명 사용 가능하나, 인코딩 문제나 국제화 시 협업에 어려움 있음.
- 금융, 부동산 등 도메인 용어가 많고 특수해 영어보다 한글 변수명이 직관적인 케이스 존재.
- 국제화(i18n) 키값에 한글 쓴 사례도 있으나, 기술적으로 권장되지는 않음.
- 실무에서는 주로 영어 변수명을 쓰지만, 상황에 따라 한글 사용도 참고할 만함.
- 가독성과 이해도를 우선시하는 문화가 필요함.
9. 스타일링 라이브러리: Vanilla Extract, Sprinkles 활용 및 MUI 테마
- Vanilla Extract(바닐라 익스트랙트)는 TypeScript 기반 zero-runtime CSS-in-TypeScript 라이브러리.
- Sprinkles는 Vanilla Extract 위에서 디자인 토큰을 조합하며 아토믹 CSS 컴파일 효과 제공.
- MUI 테마를 Vanilla Extract 스타일로 변환해 사용하는 시도도 진행됨.
- 타입 안정성, 자동완성, zero-runtime CSS 등 장점으로 관심이 증가 중임.
- 안정적 사용을 위해 사용자 커스텀 템플릿이나 PR 기여가 활발.
10. 기타 개발 관련 팁 및 Q&A
- React에서 토스 스타일 동적 폼(입력 후 검증 완료 시 자동으로 다음 input 노출)은 "Dynamic Form" 또는 "Funnel UI"라 부름.
- 이미지 최적화 방법으로 picture 태그, WebP 확장자, base64 inline 활용 방안 소개.
- Next.js에서 로딩 이미지 preload 혹은 base64 임베딩으로 초기 보여주기 접근 가능하나 한계 있음.
- UX 개선 용으로 CSS @apply로 Tailwind 클래스 중복 처리 권장.
- Mac 환경 무선 마우스 사용시 블루투스 연결과 USB 허브 이용 경험 공유.
- 코딩 스타일과 변수명 작명 팁은 가독성 위주로 개인·팀 내 합의를 권고.
- 영어 실력은 개발자 커뮤니티에서 꾸준히 언급되며, 독해 능력 중심 공부 추천.
- GitHub Copilot은 자동 코드 생성과 반복 작업 시 도움되지만 검수 필요함.
면접팁⚡
- 코딩 테스트 준비 시 여러 언어를 시도해보되 최적의 언어 선택하자. 특히 JS 실력이 코로나19 이후 프론트엔드 코테에서 중요해짐.
- 면접에서 Boolean 변환 방식이나 트리쉐이킹 개념 설명 시 !! 연산자, ESM 기반 트리쉐이킹 동작 원리를 언급하면 좋음.
- 클린 아키텍처 질문 받으면 도메인과 UI 영역 분리, React 상태 관리와 도메인 엔티티 분리 이해도를 보여줄 것.
- 스타일링 도구 선택에 대해서는 각 팀 필요에 맞게 고르는 것이 핵심이며, 장단점 명확히 이해하고 있는지 확인.
- 영어 독해 능력과 외국 문서 이해에 대한 개인 학습 경험을 자연스럽게 전달하면 인상적임.
링크🔗
#React#TailwindCSS#MUI#JavaScript#코딩테스트#클린아키텍처#Nginx#번들최적화#한글변수명#VanillaExtract