2025-01-09

목차

1. CSS 하이픈(hyphens) 속성 소개
2. Tailwind 클래스 충돌 방지 및 접두사 사용법
3. 코딩 테스트 준비 언어: JavaScript vs Python
4. iOS 웹뷰에서 키보드 등장 시 화면 밀림 문제
5. Next.js에서 다크모드 CSR 렌더링과 Hydration 오류
6. React에서 차트 라이브러리 컴포넌트 래핑 시 고려사항
7. 음성 녹음 파일 포맷 문제와 mp3 처리
8. TypeScript의 as unknown as any 사용 논의
9. 면접 경험 및 코딩 테스트 방식
10. 기타 개발 관련 간단 소식 및 농담

1. CSS 하이픈(hyphens) 속성 소개

• 핵심: hyphens는 CSS 속성으로, 브라우저가 텍스트를 적절한 위치에서 하이픈(-)으로 나눠 줄 바꿈할지 제어함.
• 설명:
  • none: 하이픈 표시 없이 줄 바꿈.
  • manual: 사용자가 하이픈을 직접 삽입해야 줄 바꿈 가능.
  • auto: 브라우저가 단어를 자동으로 하이픈 처리해 줄 바꿈 가능.
• 의견: 긴 단어 또는 좁은 영역에서 텍스트가 잘려보이는 문제를 개선하는 데 유용하며, 다양한 언어 및 폰트 지원 확인 필요.

2. Tailwind 클래스 충돌 방지 및 접두사 사용법

• 문제: 프로젝트에 새로운 퍼블리셔가 투입될 때 기존 Tailwind 클래스와 새롭게 만든 클래스명이 겹침.
• 해결법:
  • Tailwind는 prefix 옵션으로 모든 클래스명 앞에 일관된 접두사 추가 가능.
  • 예) tw- 같은 접두사를 붙여 충돌 방지.
  • 별도 네임스페이스 역할을 하므로 유지보수성이 향상됨.
• 검색어 추천: "Tailwind prefix", "Tailwind custom prefix", "CSS class namespace".
• 추가: 직접 클래스명 앞에 임의 문자를 붙여 쓰는 것은 비효율적이고 혼란을 초래할 수 있으니, 빌드 설정 활용 권장.

3. 코딩 테스트 준비 언어: JavaScript vs Python

• 논의 내용:
  • Python은 간결한 문법 덕분에 코딩 속도가 빠름.
  • 많은 코테 문제와 자료가 Python 기반으로 많음.
  • 다만, 특정 포지션(예: 프론트엔드)은 JS만 허용하는 경우가 있음.
• 의견:
  • 개인 프로젝트나 코테 준비 시 사용 언어는 업무 및 시험 조건에 맞춰 선택하는 게 좋음.
  • JS가 프론트엔드 직군에서 기본인 점 참고.
• 참고: Python이 명확히 빠른 이유는 라이브러리 지원과 간단한 문법 때문.

4. iOS 웹뷰에서 키보드 등장 시 화면 밀림 문제

• 이슈:
  • 키패드가 올라오면서 visualViewport 높이가 줄어드는데, document.body.offsetHeight가 더 크게 나타나 가상 영역이 생김.
  • 결과적으로 화면 안에서 컨텐츠가 밀림 현상 발생.
• 해결 팁:
  • 키보드 이벤트를 감지해 웹뷰 높이를 조정하는 로직 필요.
  • visualViewport API를 활용하되, offsetHeight와 비교해 불필요한 공간을 줄임.
  • iOS 웹뷰 특성과 버전 별 이슈가 많으므로 테스트 필수.
• 관련 참고 자료: iOS 웹뷰 키보드 관련 크로스 플랫폼 해결법 검색 권장.

5. Next.js에서 다크모드 CSR 렌더링과 Hydration 오류

• 문제:
  • Next.js로 SSR 환경을 주로 사용하나, 다크모드 제어를 클라이언트 사이드 렌더링(CSR)로 처리하는 경우 초기 렌더링 불일치로 hydration 오류 발생.
• 핵심 개념:
  • 'use client'는 Next.js 13에서 클라이언트 컴포넌트를 명시하는 구문.
  • 그러나 SSR과 CSR 간 상태 불일치(예: 다크모드 값 초기화 시점이 다름) 시 hydration 에러 발생 가능.
• 해결책:
  • 테마 값을 쿠키나 localStorage에 저장해 SSR 초기 렌더링 시 프리로드.
  • 초기 테마 값을 서버와 클라이언트가 일치하도록 유지해야 함.
  • Next.js 공식 문서에서 클라이언트 컴포넌트와 SSR 차이점 숙지 권장.
• 참고 링크: Next.js 클라이언트 컴포넌트 공식 문서

6. React에서 차트 라이브러리 컴포넌트 래핑 시 고려사항

• 상황: 외부 차트 라이브러리가 차트를 설치할 컨테이너 Div가 필요함.
• 문제: React 컴포넌트는 렌더링 결과 반환 후 실행되는데, 라이브러리는 DOM 직접 조작이 필요해 여러 렌더링에서 이슈 발생 우려.
• 조언:
  • useEffect 훅을 사용해 컴포넌트 마운트 후 한 번만 차트 초기화 수행.
  • 클린업 함수로 차트 인스턴스 해제 관리 필요.
  • 불필요한 재렌더링 방지를 위해 의존성 배열에 주의.
• 결론: React 특성과 외부 라이브러리 DOM 조작 차이를 명확히 알고 적절하게 라이프사이클 훅 이용해야 문제 회피 가능.

7. 음성 녹음 파일 포맷 문제와 mp3 처리

• 이슈:
  • MediaRecorder API로 녹음한 음성이 binary 파일로 처리되어, mp3 형식이 아닌 것으로 인식되는 문제.
• 핵심:
  • MediaRecorder의 mimeType 설정(audio/mpeg) 이 mp3 저장에 중요하지만 브라우저 지원이 제한적일 수 있음.
  • 인코딩이 실제로 mp3 형식인지 그리고 확장자 문제인지 확인 필요.
• 팁:
  • 서버나 클라이언트에서 추가 인코딩 작업 검토.
  • Blob 타입과 확장자 별 미디어 처리 차이 주의.
• 참고: Web Audio API나 ffmpeg.wasm 같은 인코딩 라이브러리 사용 가능.

8. TypeScript의 as unknown as any 사용 논의

• 설명:
  • as any는 타입 단언으로 TS의 타입 체크를 무시함.
  • as unknown as any는 타입 간 변환이 어려운 경우 중간에 unknown을 거쳐 우회하는 방법.
• 장점과 단점:
  • 타입 에러 해결에 효과적이나, 타입 안전성을 해침.
  • 습관적 사용은 코드 품질 저하 유발 가능.
• 조언: 가능하면 정확한 타입 정의 및 타입 가드 활용 권장.

9. 면접 경험 및 코딩 테스트 방식

• 언급:
  • 손코딩 방식 코딩 테스트가 아직도 있음.
  • 포지션과 회사에 따라 언어 제한이 존재.
• 팁:
  • 면접 대비 시 지원 회사가 요구하는 코딩 환경에 맞추는 것이 중요.
  • 손코딩은 명확한 로직 표현과 기본 문법 숙지가 핵심.

10. 기타 개발 관련 간단 소식 및 농담

• 다양한 개인적인 이야기와 농담이 오갔으나, 개발자 커뮤니티 분위기를 보여주는 소소한 소식으로 이해됨.
• Tailwind와 관련된 재미있는 별명, 웹뷰 관련 소소한 토론 등 개발자들 간 친근한 상호작용 목격됨.

면접팁⚡

• 코딩 테스트 준비 언어 선택: 회사의 언어 정책을 꼭 확인.
• React 차트 라이브러리 사용 시: useEffect로 초기화 및 정리 코드 작성 필수.
• Next.js CSR과 SSR 병용 시: 상태 일치 유지를 위해 테마 정보 초기화 전략 수립 필요.
• TS 타입 단언: as unknown as any 쓰기 전, 타입 안전성 고민 후 최소화 권장.

링크🔗

• CSS hyphens: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
• Next.js Client Components: https://nextjs.org/docs/app/building-your-application/rendering/client-components
• Next.js RSC, CSR, SSR 비교 블로그: https://velog.io/@k-svelte-master/nextjs-rsc-csr-ssr
• Tailwind prefix 설정 예시 및 관련 문서 네이버 블로그: https://blog.naver.com/pjt3591oo/223649384531
• Sentry (사용자 에러 추적 도구): https://sentry.io/