COMMIT.chat
View Bookmarks
react 썸네일react

2024-09-20

목차

  1. React에서 함수 Props와 명시적 Return문 이슈
  2. React Ref와 useImperativeHandle 활용법
  3. 선언형 vs 명령형 React 컴포넌트 제어 방법
  4. JWT 토큰의 구조와 보안 이해
  5. 권한 관리 및 백엔드와 프론트엔드 역할 분담
  6. 업무일지 작성과 개발 공부법
  7. Apple 음악 및 음향 기기 경험 공유
  8. 개발자 일상 및 커뮤니케이션 팁
  9. 광고 타게팅 및 마케팅 효율에 대한 이야기
  10. 기타 개발 관련 질문과 답변

1. React에서 함수 Props와 명시적 Return문 이슈

  • React에서 부모 컴포넌트가 함수를 자식에게 props로 넘길 때, 함수 내부에 return 문을 명시하지 않으면 예기치 않은 동작이 발생할 수 있음.
  • 예시: handleOpenBottomSheet 함수에서 return이 없으면 present() 메서드가 실행되지 않는 것처럼 보임.
  • 그러나 이는 함수 내부 로직보다는 컴포넌트 리렌더링과 ref 설정 문제일 가능성이 높음.
  • 함수가 제대로 동작하려면 리렌더링이 발생하여 최신 ref가 할당되어야 하며, return 문 삽입은 리렌더 반영을 유발하는 부수적 효과일 수 있음.
  • 즉, 문제의 핵심은 '함수가 리턴값을 안 준다'가 아니라 '컴포넌트가 제대로 리렌더링되고 ref가 최신 상태가 되어야 함수 동작이 정상적'이라는 점.

2. React Ref와 useImperativeHandle 활용법

  • ref는 React에서 DOM 또는 컴포넌트 인스턴스에 직접 접근할 때 사용.
  • useImperativeHandle 훅은 자식 컴포넌트가 ref를 통해 외부에 어떤 메서드나 속성을 노출할지 결정하는 역할을 함.
  • 커스텀 모달 같은 경우 내부의 BottomSheetModal ref를 관리하고, 부모에 명령형 API(open(), close(), present() 등)를 제공하기 위해 useImperativeHandle을 사용함.
  • 리렌더링이 발생하면 ref가 다시 할당되므로, ref를 여러 컴포넌트에 중복 전달하거나 참조하면 문제가 발생할 수 있음.
  • ref를 한 곳에 집중시키고, 꼭 필요한 명령형 API만 노출하는 게 권장됨.
  • React 공식 문서에서는 prop으로 상태를 표현하고 제어하는 선언형 방식을 권장하지만, 복잡하고 동적인 UI에 명령형 제어가 필요한 경우도 존재함.

3. 선언형 vs 명령형 React 컴포넌트 제어 방법

  • 선언형 제어 (isOpen 프로퍼티 등 상태 기반)
    • React 철학에 부합하며, UI 상태가 명확하고 예측 가능함.
    • 유지보수와 테스트가 편리함.
  • 명령형 제어 (ref로 메서드 호출, open/close 함수 노출)
    • 복잡한 UI 상호작용이나 외부 트리거가 필요할 때 유용함.
    • 코드 복잡도 증가, 가독성 저하 위험 존재.
  • 상황과 필요에 따라 두 방식을 적절히 선택하는 것이 중요하나, 일반적으론 선언형 방식을 우선 권장함.
  • 모달 같은 UI 컴포넌트는 일반적으로 isOpen prop과 상태변화를 통한 선언형 제어가 권장됨.
  • 명령형 제어가 필요한 경우에도 최소한으로 사용하고, 문서화 및 코드 관리에 신경 써야 함.

4. JWT 토큰의 구조와 보안 이해

  • JWT(JSON Web Token)는 크게 3부분으로 구성됨:
    • Header: 서명 알고리즘 정보 포함
    • Payload: 전달하고자 하는 데이터(클레임) 포함
    • Signature: 헤더+페이로드를 비밀키로 서명한 값
  • JWT는 암호화된 토큰이 아님
    • Payload는 base64url로 인코딩되어 있으며, 누구나 디코드 가능함.
    • 중요한 데이터는 절대 Payload에 평문으로 저장하면 안 됨.
  • JWT의 핵심 보안 기능은 signature로 토큰의 무결성을 검증하는 것임. (변조 여부 확인)
  • 암호화(encryption)와 서명(signing)은 다른 개념임. JWT는 기본적으로 서명용이며, 데이터 기밀성은 보장하지 않음.
  • 따라서 클라이언트에서는 JWT를 디코딩만 할 뿐, 토큰의 진위 및 위변조 검증은 반드시 서버 측에서 수행해야 함.
  • JWT 보안을 위해:
    • 민감정보를 포함하지 않기
    • 토큰 만료 시간 관리
    • 안전한 저장소 사용(XSS 대비)
    • 서버에서 시그니처 검증 철저히 수행
  • 관련 알고리즘은 HS256(대칭 키), RS256(비대칭 키) 등 다양하며, 대칭/비대칭키의 차이는 보안 수준과 운영 환경에 따라 선택함.

5. 권한 관리 및 백엔드와 프론트엔드 역할 분담

  • 권한 체크는 백엔드와 프론트엔드 모두에서 해야 함.
  • 백엔드
    • API 요청 시 권한 검증: 접근 불가 시 에러 응답 처리
    • 중요한 정보와 데이터에 대해 강력한 접근 제어
  • 프론트엔드
    • UI 표시 및 기능 노출 제한: 권한이 없는 화면이나 버튼 숨기기
    • 서버 응답 based 권한 상태 표시 및 보안 강화
  • 백엔드에만 권한 체크를 맡기면 프론트에서의 사용자 경험이 떨어지고, 프론트만 신뢰하면 보안 취약점 발생 가능성 존재.
  • 권한이 변경될 때 백-프론트 양쪽 모두를 수정해야 하는 이슈는 있지만, 보안과 사용자 경험을 위해 불가피함.
  • JWT 토큰 내부 권한 정보는 사용자 조작 가능하므로 클라이언트 신뢰는 하지 말고, 반드시 서버 검증을 병행해야 함.

6. 업무일지 작성과 개발 공부법

  • 업무일지는 당일 할 일과 완료한 일을 짧고 간단하게 기록하는 것이 좋음.
  • 매일 기록을 꾸준히 하면서 경험과 프로젝트 진행 상황을 체계적으로 쌓을 수 있음.
  • 공부 초보자는 “내가 모르는 게 뭔지”를 파악하고 질문하는 연습이 중요함.
  • 무작정 깊은 기술(예: libuv 내부 구현)부터 시작하기보단, 기초를 다지고 자바스크립트 핵심 동작 원리에 집중해야 함.
  • 책 추천: You Don’t Know JS 등 자바스크립트 심화 서적을 차근차근 읽는 것 권장.

7. Apple 음악 및 음향 기기 경험 공유

  • 애플뮤직과 유튜브 뮤직 사용자 경험, 이어폰과 스피커에 대한 음질 차이, 개인 맞춤 음향 기기 추천 등 다양한 의견 공유됨.
  • 음향 기기 선택 시, 예산과 용도에 맞게 액티브/패시브 스피커, 앰프, 리시버 등을 고려해야 함.
  • 이어폰 팁, 코덱, 무선-유선 차이도 음질에 영향을 미침.
  • 가격 대비 성능과 개인 취향이 크게 작용하는 분야임을 인지할 것.

8. 개발자 일상 및 커뮤니케이션 팁

  • 질문할 때 내가 무엇을 모르는지 정리하고, 핵심을 명확하게 전달하는 연습이 필요함.
  • 명확한 질문과 답변은 문제 해결 시간을 크게 단축함.
  • 개발자 커뮤니티 내에서는 오픈태도와 겸손한 태도가 중요하며, 서로의 경험을 존중하는 분위기가 긍정적인 학습 효과를 가져옴.
  • 질문 전에 가능한 범위에서 직접 재현해보고 로그를 찍는 등 간단한 디버깅 시도 권장.

9. 광고 타게팅 및 마케팅 효율에 대한 이야기

  • 광고를 집행할 때는 명확한 타게팅이 가장 중요함.
  • 사용자 특성에 맞춰 광고 채널과 카피라이팅을 결정해야 하며, 무작위 또는 대충하는 광고는 비용 대비 효과가 낮음.
  • 온라인 광고(구글애즈, 페이스북 등)와 오프라인 광고(지하철, 전단지 등)의 장단점과 비용 차이 고려 필요.
  • 타겟 고객이 어디에 몰려 있는지, 어떤 매체를 주로 사용하는지 정확히 파악한 후 집행하는 것이 가성비를 높임.

10. 기타 개발 관련 질문과 답변

  • React에서 checkbox 이벤트 처리 시 e.target.checked를 사용해야 하며, onChange 이벤트 핸들러가 필요함.
  • useImperativeHandle 훅은 종종 모달, input focus 제어, 외부 UI 라이브러리 조작 시 사용됨.
  • 명령형 API와 선언형 상태 관리 중 어느 것을 선택할지는 상황과 기능 복잡도에 따라 다름.
  • 프론트엔드에서 IPv6를 받아오는 방법, 다중 기기 로그아웃 구현 등에 대한 질문도 있었음.
  • JWT와 OAuth, OIDC 등 인증 시스템에 대한 깊이 있는 대화가 이루어졌는데, JWT는 암호화된 토큰이 아니며 서명 검증 위주임을 반드시 숙지 필요.

면접팁⚡

  • React 컴포넌트 제어 방식에 대한 이해 필수 (선언형 vs 명령형 차이와 장단점 설명 가능)
  • useImperativeHandle의 용도와 사용 시 주의사항 숙지 (ref 노출, 명령형 제어)
  • JWT의 구조와 보안 개념 명확히 이해하기
  • 권한 처리 시 백엔드와 프론트엔드 역할 분담 및 보안 이슈 설명 가능
  • 효과적인 질문법과 문제해결 접근법에 대해 이야기할 준비
  • React ref와 렌더링 주기에 따른 동작 방식 이해 보여주기

링크🔗

#React#JavaScript#useImperativeHandle#JWT#보안#권한관리#개발공부법#음향기기#광고마케팅#개발자커뮤니티
이전 포스트

2024-09-19

2024년 9월 19일
다음 포스트

2024-09-21

2024년 9월 21일