COMMIT.chat
View Bookmarks
react 썸네일react

2023-11-21

목차

  1. 카카오톡 인앱 브라우저 다운로드 이슈와 해결법
  2. 유튜브 쇼츠 콘텐츠 제작 및 피드백
  3. 맥북 및 개발 장비 구매/업그레이드 고민
  4. 백엔드 HTTP 상태 코드 사용 의견
  5. 리액트 컴포넌트 설계와 상태 관리 이슈
  6. JWT 토큰 관리와 보안 저장소 논의
  7. 피그마 → 리액트 변환 플러그인과 실무 팁
  8. 깃허브 액션 캐시 활용 및 CI/CD 이야기
  9. React의 ref와 커스텀 훅 활용법
  10. 면접 준비와 지원 관련 고민 및 응원

1. 카카오톡 인앱 브라우저 다운로드 이슈와 해결법 🎯

  • 카카오톡 인앱 브라우저는 다운로드 기능 제한이 많음.
  • 인앱 브라우저에선 새 창(새 탭) 열기를 유도하는 방법이 편함.
  • 사용자 에이전트(UA) 확인 후 '새 창에서 열기' 메시지를 띄워 안내 가능.
  • Android Intent 스킴(ex: intent:, googlechrome:) 사용해 외부 브라우저 유도 가능.
  • 참고: 인앱 브라우저란, 카카오톡 내에서 웹 페이지를 바로 열지만 별도의 외부 브라우저 창을 열지 않는 환경.

2. 유튜브 쇼츠 콘텐츠 제작 및 피드백 🎥

  • 쇼츠는 짧기 때문에 자막이 가려지지 않도록 주의가 필요함.
  • 자막 위치가 계속 바뀌면 시청자 집중이 어렵고 이탈률이 상승함.
  • "쉽게 배우는" 등의 제목이 뭘 가르치는지 분명해야 함.
  • PC 비율 영상은 모바일 쇼츠에 적합하지 않으며, 화면이 작고 빠른 전환으로 전달력이 떨어짐.
  • 코딩 관련 내용은 쇼츠보다는 일반 영상으로 '몇 분 만에 AWS 배포하기' 식으로 제작 권장.
  • 추천 영상 : 코딩애플 채널 쇼츠 (화면 확대, 자막, 편집 참고).
  • 결국 직접 편집하면서 자신만의 스타일과 템포를 찾는 게 중요.

3. 맥북 및 개발 장비 구매/업그레이드 고민 🍎

  • M1 Pro 13인치에 대해 중고 시세가 50~100만 원대 등 차이가 큼.
  • M1 Pro 13인치와 14인치는 다른 모델, 14인치는 더 고사양임.
  • 맥북은 메모리 업그레이드가 불가능해 구매할 때 메모리(16GB 이상)를 충분히 고려해야 함.
  • 인텔 맥북과 M1 맥북 성능 및 호환성 차이 논의.
  • 개발 환경에서 인텔리제이, VSCode 리소스 소비 문제와 메모리 관리 필요성 언급.
  • 컨테이너나 원격 개발환경(코드스페이스, 데브컨테이너)을 통한 사양 분산도 추천.
  • 개발용 장비 구매 시 업무 생산성 향상과 비용 효과성 평가가 중요.

4. 백엔드 HTTP 상태 코드 사용 의견 💻

  • 간단한 true/false 메시지 처리 vs 다양한 HTTP 상태 코드 사용(200, 201, 204, 400, 401 등) 의견 다양.
  • 상태별 처리는 프론트에서 복잡하게 느낄 수 있지만 HTTP 클라이언트 라이브러리로 손쉽게 처리 가능.
  • 명확한 API 명세와 컨벤션이 가장 중요하며, 실제 운영환경에서는 팀 합의를 우선해야 함.
  • PATCH/DELETE 요청 후 204(컨텐츠 없는 성공 응답)를 사용하는 것도 관례지만, 메시지 반환 여부는 상황에 따라 결정.
  • JSend 스타일 등의 일관적 응답 포맷 활용 추천.

5. 리액트 컴포넌트 설계와 상태 관리 이슈 ⚛️

  • 리액트 초심자들이 상태 관리와 컴포넌트 간 재렌더링 처리에 어려움 겪음.
  • 요청 후 다른 컴포넌트의 부분적 UI 갱신이 복잡할 수 있음.
  • 리액트 쿼리(RTK Query, React Query)와 같은 데이터 캐싱 툴 사용 권장.
  • UseEffect 의존성 배열 관리 실패 시 무한 반복 렌더링 문제 발생.
  • 사내 프로젝트의 주니어끼리 작업 시 사수 부재가 크고 문제점.
  • 리액트 구조, 렌더링 흐름, 훅 사용법 이해가 진입 장벽임.

6. JWT 토큰 관리와 보안 저장소 🛡️

  • JWT 토큰을 로컬스토리지, 세션스토리지에 저장하면 보안 검열에 걸릴 위험 있음.
  • 보안 권장사항: HttpOnly 쿠키에 저장해 XSS 공격 줄이기.
  • 쿠키는 클라이언트가 자동으로 보내기 때문에 별도의 서버 저장 없어도 됨.
  • JWT 만료시간(expire) 필드를 토큰 내부에 넣어 관리하며, 서버는 토큰 자체를 관리하지 않아도 됨.
  • 자동 로그인 유지 구현 시 쿠키의 만료와 보안 설정이 중요함.
  • 서버 측 세션 관리와 JWT 개념 구분 필요.

7. 피그마 → 리액트 변환 플러그인과 실무 팁 🎨

  • 피그마 → 리액트 코드 자동 변환 플러그인은 많이 있으나, 생성 코드가 비효율적이고 수정이 많음.
  • 디자인 권한 문제로 플러그인 직접 사용 제한적일 수 있음.
  • 실무에서는 직접 코딩하며 스타일링하는 것이 더 빠르고 확장성 좋음.
  • Tailwind CSS와 CSS Modules 조합 추천.
  • 협업 시 명확한 디자인 에셋과 컴포넌트 분리 중요.

8. 깃허브 액션 캐시 활용 및 CI/CD 이야기 🚀

  • 깃허브 액션에서 의존성 설치 캐시는 속도 개선에 효과적.
  • 캐시 용량 제한, 초기화 문제로 캐시 전략과 관리가 필요.
  • 캐시 저장 공간이 부족하면 동작 지연 발생 가능.
  • 리눅스 환경에서 빌드가 가장 빠르고 맥OS 환경은 비용도 더 많고 느림.
  • 셀프호스트 러너를 활용하면 비용 절감 가능하나 셋팅에 작업 필요.
  • CI/CD 파이프라인 효율화는 팀 생산성에 직결됨.

9. React의 ref와 커스텀 훅 활용법 🔍

  • ref 관련 문제: ref 자체를 넘길 것인가, ref.current 값을 넘길 것인가 차이로 인한 렌더링 문제 발생.
  • ref를 그대로 넘겨야 컴포넌트 내에서 값 변경 추적 가능.
  • ref.current를 넘기면 참조 시점 고정되어 동기화 어려움.
  • 콜백 ref를 활용하면 ref가 DOM 노드에 붙거나 떨어질 때 핸들링 가능.
  • forwardRef로 하위 컴포넌트에 ref 전달을 권장.

10. 면접 준비와 지원 관련 고민 및 응원 🙌

  • 기술 면접은 지식과 기술 이해, 커뮤니케이션이 기본.
  • 행동 면접이나 고등학교 입학 면접같이 기술 질문이 없는 면접은 태도, 시선처리, 말투도 관건.
  • 지원 간격을 두지 말고 여러 곳 동시 지원 진행 권장.
  • 합격 후 입사 시기는 조율하여 일정 중첩 방지.
  • 면접 난이도와 기업 문화는 케바케(Case-by-case).
  • 응원과 격려가 중요하며, 준비와 꾸준한 공부의 중요성 강조.

면접팁⚡

  • 기술 면접에서의 HTTP 상태 코드 활용법
    다양한 상태 코드를 적재적소에 사용하는 것이 RESTful API 설계 원칙에 부합함.
    200(성공), 201(자원 생성), 204(응답 본문 없음), 400(잘못된 요청), 401(권한 없음), 403(금지됨) 등의 코드 의미를 명확히 알고 있어야 함.

  • React 상태 관리 문제 해결 전략

    • 무한 렌더링 원인: useEffect 의존성 배열 관리 실패
    • 상태 변경 시 컴포넌트 재렌더링 최소화 방법 학습
    • React Query, Redux Toolkit Query 같은 데이터 캐싱 라이브러리 활용

  • JWT 보안 저장소

    • 로컬스토리지 사용 금지.
    • HttpOnly 쿠키를 통한 저장을 권장.
    • 만료시간(exp) 설계 중요.

  • 면접 시 태도 관련

    • 기술력뿐만 아니라 태도, 시선처리, 목소리 톤 등도 평가 요소.
    • 자신감있고 명확한 의사 전달이 중요.

링크🔗

#React#유튜브쇼츠#맥북#JWT#피그마#깃허브액션#캐시#면접준비#인앱브라우저#HTTPStatus
이전 포스트

2023-11-20

2023년 11월 20일
다음 포스트

2023-11-22

2023년 11월 22일