2024-10-06

목차

1. 예외와 유머로 시작한 대화 분위기
2. 찜질방 추천과 서울 찜질방 정보 공유
3. React 컴포넌트 네이밍 규칙 및 온라인 에디터 문제
4. Vite vs Webpack 질문과 초기 React 상태 회복
5. Meta 퀘스트와 메타 주가에 관한 의견
6. 컴포넌트 이름 규칙과 온라인 에디터(HMR) 문제
7. 테일윈드CSS vs 스타일드 컴포넌트 토론
8. MUI sx prop와 테일윈드 혼용에 대한 이해
9. 웹뷰 기반 사내 프레임워크 개발 및 오픈소스 계획
10. 토스 코딩 테스트 후기 및 IT 채용 흐름

1. 예외와 유머로 시작한 대화 분위기

• 개발자들 사이에 농담과 가벼운 드립이 오가며 편안한 분위기 형성됨.
• '플렉스'라는 단어를 React 'display: flex'와 일상 대화 재치로 연결, 다소 유머러스한 대화 전개.

2. 찜질방 추천과 서울 찜질방 정보 공유

• 서울 종로구 동묘 앞 스파렉스 찜질방 적극 추천.
• 위치, 가격, 접근성 등 간단한 찜질방 정보 공유, 휴식 공간 찾는 개발자들에게 도움됨.

3. React 컴포넌트 네이밍 규칙 및 온라인 에디터 문제

• React 컴포넌트 이름은 반드시 대문자로 시작해야 함.
• 소문자 컴포넌트 이름 사용 시 DOM 태그와 혼동되어 오류 발생.
• StackBlitz 등 온라인 에디터에서 hot module replacement(HMR) 문제 보고됨.
• 대규모 온라인 코딩 툴 비교: VSCode.dev, Plunker, CodeSandbox, Storm, AWS Cloud9, jsFiddle, CodePen 등이 언급됨.
• 온라인 에디터마다 장단점 존재하며, 사용자의 용도에 맞춰 선택 필요.

React 컴포넌트 네이밍 규칙 설명

React에서는 JSX 문법을 사용할 때 컴포넌트 이름이 소문자면 HTML 태그로 인식됨.
반드시 대문자(A-Z)로 시작해야 React 컴포넌트로 인식되어 렌더링됨.

4. Vite vs Webpack 질문과 초기 React 상태 회복

• Vite는 신세대 프론트엔드 빌드 도구로, Webpack 없이도 가능하고 빠른 개발 환경 제공.
• CRA(Create React App)는 Webpack을 기반으로 만들어짐.
• React 18 버전 기준으로 학습과 리팩토링 필요성을 느낀 개발자가 많음.
• 바쁜 개발 일정과 몸 건강 상태에 따른 학습 불균형 인정.

5. Meta 퀘스트와 메타 주가에 관한 의견

• 메타(페이스북 모회사)의 가상현실 기기 'Meta 퀘스트' 흥행 실패 평가.
• 그러나 '오라이언' 같은 대작 개발로 인해 향후 기대가 크다는 의견 공유.
• 기업 실적과 주가 상승에 대한 시장 반응 다각도로 관찰됨.

6. 컴포넌트 이름 규칙과 온라인 에디터(HMR) 문제

• 컴포넌트 이름 관련 질문 많음: 소문자는 오류, 대문자는 정상 작동.
• StackBlitz에서 HMR이 멈추는 문제 언급, 한 번 에러 발생 시 재시작 필요.
• 비슷한 온라인 코드 편집기 정보 교환.

7. 테일윈드CSS vs 스타일드 컴포넌트 토론

• 테일윈드를 사용하는 이유, 스타일드 컴포넌트와 비교 질문 존재.
• 대체로 개발자들은 취향 차이라고 답함: 프로젝트나 팀 성향에 따라 선택.
• 테일윈드는 유틸리티 클래스 중심, 빠르고 일관된 스타일 적용에 유리함.
• 스타일드 컴포넌트는 JS 내에서 CSS를 직접 작성하며, 컴포넌트별 스타일 관리에 적합.

테일윈드CSS 설명

테일윈드는 클래스명으로 스타일 속성을 지정하는 유틸리티 퍼스트 CSS 프레임워크.
속성별 클래스를 조합해 UI 디자인을 빠르게 구현할 수 있어서 생산성이 높음.

8. MUI sx prop와 테일윈드 혼용에 대한 이해

• MUI(Material-UI)의 sx prop는 컴포넌트에 인라인 스타일을 객체 형태로 주는 기능임.
• 테일윈드와 sx를 섞어 쓰면 테일윈드 장점이 희석될 수 있음.
• 가능하면 한 가지 스타일링 방식으로 통일하는 걸 권장함.
• sx는 세밀한 스타일 조절에는 좋지만, 전체 스타일 관리에는 적합하지 않을 수 있음.

9. 웹뷰 기반 사내 프레임워크 개발 및 오픈소스 계획

• 한 개발자가 사내 WebView 기반 프레임워크를 제작 중임.
• 목표는 Best Practice를 반영해 사용자 경험과 개발자 경험을 극대화하는 것.
• 오픈소스화 계획 중이며, 해당 프레임워크로 서비스 개발 효율화 기대.
• 웹뷰란? 웹 기술(HTML, CSS, JS)을 앱 내에서 실행하는 작은 웹 브라우저처럼 동작하는 기술임.
• 웹뷰 활용 시 빠른 개발과 다양한 플랫폼 지원이 장점.

10. 토스 코딩 테스트 후기 및 IT 채용 흐름

• 최근 토스와 카카오모빌리티 등 큰 IT 기업들이 코딩 테스트 진행.
• 토스는 객관식 문제를 포함해 독특한 형태의 시험 진행.
• 실력자들이 많아 난이도 매우 높음.
• 채용 트렌드에 대해 개발자들이 적극적으로 의견을 나눔.
• 실제 회사에서 준비하는 면접이나 사전 코딩 테스트에 대비할 때 참고 가능.

면접팁⚡

• React 컴포넌트 네이밍: 항상 대문자로 시작해야 하는 이유를 명확히 설명 가능해야 함.
• 스타일링 도구 선택 시 각 도구의 특징과 장단점을 이해하고 자신의 경험과 이유를 말할 수 있어야 함.
• 웹뷰와 오픈소스 프레임워크 개발 경험은 복합적 사용자 경험과 기술 이해도를 보여주는 좋은 소재임.
• 최신 트렌드인 Vite 및 Webpack 차이점 알고, 개발 효율성을 높이는 도구 선정에 대해 토론 마스터하기.
• 코딩 테스트 준비 시 단순 문제 풀이뿐 아니라 실제 면접에서의 경험 공유 및 의견 개진 중요.

링크🔗

• 스파렉스 동묘찜질방: https://naver.me/F8bsVWKB
• Vite (빠른 빌드 도구): https://vitejs.dev/
• Create React App: https://create-react-app.dev/
• React 공식 문서 (컴포넌트 네이밍 규칙): https://reactjs.org/docs/components-and-props.html#function-and-class-components
• Tailwind CSS 공식 사이트: https://tailwindcss.com/
• Material-UI (MUI) sx prop 소개: https://mui.com/system/the-sx-prop/
• StackBlitz 온라인 에디터: https://stackblitz.com/
• CodeSandbox: https://codesandbox.io/
• 토스 개발자 채용: https://toss.im/careers