2024-04-01

목차

1. React 컴포넌트 언마운트 시점과 예시
2. GitHub OAuth CORS 이슈와 해결 방법
3. 권한 관리(isAdmin) 추가 시 백엔드와 프론트 연동 주의사항
4. 간단한 인터랙티브 UI 구현을 위한 CSS 활용 팁
5. 원격 캐싱 전략과 모노레포(TurboRepo) 빌드 시간 개선
6. PHP 커리어 현황과 개발자들의 시각
7. 신입 개발자 포트폴리오 역할과 준비 팁
8. 블루투스 이어폰 음악 중단 문제 원인 및 점검법
9. ReactQuery 및 DevTools 버그 수정 경험 공유
10. 면접팁⚡ 및 기타 개발자의 실무 조언

1. React 컴포넌트 언마운트 시점과 예시

• 핵심: React 컴포넌트는 더 이상 화면에 렌더링되지 않을 때 '언마운트' 된다.
• 설명: 예를 들어, A페이지에서 컴포넌트가 사용됐지만 B페이지로 이동해 해당 컴포넌트가 없으면, A페이지의 컴포넌트는 언마운트된다.
• 의견: 페이지 변경 시 페이지 내 모든 자식 컴포넌트들도 함께 언마운트되는 것이 일반적인 동작이다.

2. GitHub OAuth CORS 이슈와 해결 방법

• 핵심: GitHub의 OAuth access_token API는 브라우저에서 직접 호출 시 CORS 에러 발생.
• 설명: 브라우저 환경에서는 보안 정책(CORS) 때문에 백엔드가 아닌 프론트에서 직접 호출하면 차단됨.
• 해결 방법:
  • Node.js 백엔드에서 API를 프록시하거나,
  • Next.js 사용 시 API 라우트 또는 rewrite 설정 활용해 우회 가능.
• 추가: Postman은 브라우저가 아니므로 CORS가 적용되지 않아 정상 호출됨.

3. 권한 관리(isAdmin) 추가 시 백엔드와 프론트 연동 주의사항

• 핵심: 클라이언트에 isAdmin 필드를 넘겨 페이지 UI를 제어하는 것은 가능하나,
• 중요: 반드시 서버에서도 권한 검증 API를 만들어 요청마다 확인해야 보안 유지 가능.
• 예시: 게시판 관리 기능에서 관리자가 맞는지 확인 후 작성/수정 권한 부여.
• 팁: DB 직접 수정으로 이미 가입 유저의 isAdmin 필드 변경 가능.

4. 간단한 인터랙티브 UI 구현을 위한 CSS 활용 팁

• 핵심: 클릭 시 특정 이미지나 레이아웃 변경은 CSS 클래스 토글과 z-index, opacity 조합으로 구현 가능.
• 설명:
  • 클릭 시 클래스 추가로 해당 이미지나 요소 노출/숨김 처리.
  • CSS 속성 중 z-index로 쌓임 순서 조절하거나 opacity로 투명도 조절해 자연스러운 UI 연출.
• 한계:
  • 그림자나 조명 효과 등 고퀄리티 비주얼은 CSS만으로 제한적.
  • Three.js 같은 3D 라이브러리 사용 권장.

5. 원격 캐싱 전략과 모노레포(TurboRepo) 빌드 시간 개선

• 핵심: 모노레포 구조에서 TurboRepo 등의 원격 캐싱(remote caching)을 활용하면 빌드 시간을 크게 단축 가능.
• 설명: 원격 캐싱은 이미 빌드된 결과물을 저장해, 같은 변경 범위에선 재빌드를 줄여 개발 효율 개선.
• 의견: 최적화 수준에 따라 효과 차이 존재. 초고수급 설정 시 큰 차이 날 수 있음.

6. PHP 커리어 현황과 개발자들의 시각

• 핵심: 최근 PHP 경력은 일부 채용 시장에서 기피하는 경향이 있음.
• 배경: PHP가 과거 호황기를 누렸으나 현재는 모던 프론트엔드(React, Next.js) 등과 비교해 미래 전망이 어둡다는 인식.
• 조언: PHP 경력을 가졌어도 현업에서 최신 기술 스택을 함께 익히면 이직 경쟁력 유지 가능.
• 긍정적 면: 개인 외주 업무 등에서 여전히 수요가 존재.

7. 신입 개발자 포트폴리오 역할과 준비 팁

• 핵심: 신입 개발자는 이력서 외에 포트폴리오가 필수적인 요소가 됨.
• 이유: 실제로 무엇을 만들고 어떤 기술을 다룰 줄 아는지 구체적 증명이 필요하기 때문.
• 팁:
  • 가능한 프로젝트를 많이 경험해 공유,
  • GitHub 등 온라인 저장소 활용해 공개하는 것이 도움이 됨.

8. 블루투스 이어폰 음악 중단 문제 원인 및 점검법

• 현상: 음악 재생 중 간헐적으로 멈추는 이슈 발생.
• 원인: 귀에 뺄 때 멈추는 센서에 먼지가 묻거나, 이어폰 자체의 페어링 문제 가능성.
• 점검법:
  • 페어링 해제 후 재연결,
  • 센서 부분 청소,
  • 특정 앱(유튜브)에서만 문제 발생 시 앱 캐시 혹은 버전 체크 추천.

9. ReactQuery 및 DevTools 버그 수정 경험 공유

• 사례: ReactQuery DevTools에서 loading 상태가 특정 동작 중에 멈추던 버그가 수정됨.
• 의미: 안정적인 개발 도구 사용은 개발 생산성과 디버깅에 큰 도움.
• 팁: 오픈소스 툴 업데이트 정보를 꾸준히 확인해 최신 버전 유지 권장.

면접팁⚡

• 신입/경력자 모두 포트폴리오 제시가 중요하며, 자신의 기술 스택과 프로젝트 경험을 구체적으로 설명할 준비를 하자.
• 권한 관리 관련 질문 시 서버와 클라이언트 권한 검증 역할 분리를 명확히 하고, 보안 취약점 우려 없이 설계하는 방법을 설명하면 좋다.
• React 컴포넌트 라이프사이클(특히 언마운트 개념) 관련 질문은 페이지 전환 시 컴포넌트 상태와 렌더링 변화를 연결 지어 설명하는 게 효과적이다.

링크🔗

• React OAuth GitHub 로그인 설명: https://velog.io/@devjade/OAuth-authentication-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0github-%EB%A1%9C%EA%B7%B8%EC%9D%B8
• Three.js 공식 문서 및 활용법 (3D 인터랙티브 UI 관련 참고)
• TurboRepo 원격 캐싱 관련 유튜브: https://youtu.be/WXN9ZpYYN2k?si=nGU3Z8so7NIWAo--
• GitHub OAuth 토큰 API: https://github.com/login/oauth/access_token
• 국회의원 선거일 공휴일 폐지 관련 뉴스: https://news-korea.kr/786084
• ReactQuery DevTools 관련 버그 수정 내용 (버전 업데이트 참고)