COMMIT.chat
View Bookmarks
react 썸네일react

2023-10-21

목차

  1. 배열에서 요소 제거(remove) 관련 논의와 배열 vs 리스트의 철학적 차이
  2. TypeScript 클래스 테스트 시 프로퍼티 출력 문제와 Jest 환경 이슈
  3. React Native 헤드업 푸시알림 권한 및 동작 문제
  4. 닉네임 소재 대화 및 재미 있는 소소한 이야기
  5. UUID 활용 및 고유 코드 생성 방법
  6. 대기업과 중견기업 개발자 선택 고민
  7. React Query SSR 적용과 에러 바운더리 처리
  8. 오픈 프로필, 개발 커뮤니티 문화와 인사
  9. 리액트 UI UX: 카테고리 스크롤 버튼 및 드랍다운 토론
  10. Axios 인터셉터와 리프레시 토큰 이슈 해결 경험 공유

1. 배열에서 요소 제거(remove) 관련 논의와 배열 vs 리스트의 철학적 차이 🎯

  • JS 배열에는 remove 함수가 없고, 요소 제거에는 splice 또는 filter를 주로 사용함.
  • 파이썬은 리스트에 remove() 함수가 있어 요소 직접 삭제 가능.
  • 배열(Array)과 리스트(List)의 근본 개념 차이:
    • 배열: 고정 크기 메모리 공간을 할당하며, 메모리 연속성이 중요함. 예를 들어, 정수 배열은 모든 슬롯이 초기화 되어 있기 때문에 삭제 후 크기 변경이 쉽지 않음.
    • 리스트: 동적 크기로 요소들을 컨테이너처럼 담음. 크기 조절 및 요소 삭제가 자연스러움.
  • JS의 배열은 동적 배열 개념이라 length가 가변적이지만, 기본적인 배열 철학은 고정 크기임.
  • 언어 설계에서 length vs size 구분하는 것도 이러한 철학적 차이를 반영.
  • Set 같은 자료구조는 중복 없는 집합이라 remove 함수가 존재하며, 리스트보다는 Set에 이러한 함수가 적합함.
  • 배열에 remove가 쉽지 않은 이유는 인덱스 기반이고, 크기를 줄이는 과정이 비효율적일 수 있기 때문임.
  • 개발자들 사이에서 이 주제는 '자료구조 철학'까지 논의가 심오하게 이어질 정도로 관심거리임.

2. TypeScript 클래스 테스트 시 프로퍼티 출력 문제와 Jest 환경 이슈 🧪

  • TypeScript 클래스에서 옵셔널 프로퍼티를 선언했을 때, new로 인스턴스 생성 후 Jest에서 출력 시 { prop: undefined } 형태로 보이는 문제 제기.
  • 실제 JavaScript 트랜스파일 결과, 클래스 필드가 초기화 되지 않았더라도 프로퍼티가 undefined로 존재할 수 있음.
  • Jest 테스트 환경과 실제 개발 환경 간 동작 차이가 발생하는 경우가 있음.
  • 이를 해결하려면:
    • 테스트 코드를 어떻게 작성했는지, 어디서 로그를 찍었는지 정확히 확인해야 함.
    • Jest가 사용하는 트랜스파일러(예: ts-node, swc, tsc) 설정에 따라 결과가 다를 수 있음.
  • 최근 SWC 컴파일러에서 이와 관련된 이슈가 올라와있고, 직접 이슈 등록 및 커뮤니티 반응 있음.
  • 이 문제는 타입스크립트 및 자바스크립트 트랜스파일러 동작에 익숙하지 않은 초보 개발자에게 혼란을 줄 수 있음.

3. React Native 헤드업 푸시알림 권한 및 동작 문제 📱

  • 실제 알림은 도착하지만 헤드업(팝업) 알림이 뜨지 않고, 권한 허용 팝업도 나오지 않는 현상 발생.
  • React Native 환경에서 헤드업 알림은 OS 설정과 권한 부여, 알림 구현 방식에 크게 의존함.
  • 에뮬레이터에서도 실험 가능하나 실제 디바이스 권한 설정을 항상 점검 필요.
  • 관련 좋은 자료와 구현 방법 찾기가 어려워서 커뮤니티에 질문이 올라옴.
  • 권장사항:
    • 실제 디바이스 권한 요청 코드 확인
    • OS 버전별 정책 파악
    • 문서 및 공식 예제 참고

4. 닉네임 소재 대화 및 소소한 개발자 문화 이야기 😄

  • 닉네임 후보로 '제이슨', '세바스찬', '다이슨' 등에 대한 유쾌한 토론.
  • 닉네임이 주는 이미지나 연상 효과에 대해 재미있게 의견 공유.
  • 커뮤니티 내 인사 문화, 키워드 알림 설정, 자동채팅 기능 활용 등 소통 방식에 대한 경험담 공유.
  • 개발자들 간 친밀감과 유쾌한 분위기가 전달되는 부분.

5. UUID 활용 및 고유 코드 생성 방법 🆔

  • 거래처 코드 고정 및 고유 식별자를 만드는 방법으로 node-uuid 라이브러리 사용 제안.
  • UUID v1은 시간 기반으로 생성되어 타임스탬프 기준 고유값 생성에 적합하나, 구현이 까다롭다는 의견도 있음.
  • 실제 현업에서는 상황에 맞게 UUID, 날짜시간 조합, 난수 등 다양한 방법 사용.
  • UUID는 중복 가능성이 극히 낮아 여러 시스템에서 고유 식별자로 널리 활용됨.

6. 대기업과 중견기업 개발자 선택 고민 💼

  • 대기업 게임회사 백오피스 프론트엔드 개발과 중견기업 서비스 개발 중 고민.
  • 대기업은 업무 범위가 세분화되고 시스템이 체계적이라는 장점.
  • 중견기업은 업무 범위가 넓고 다양한 경험을 할 수 있다는 점.
  • 개인의 관심사, 경력 목표, 워라밸 등 여러 요소를 고려해 선택 권장.
  • 급여, 회사 문화, 성장 가능성 등도 중요한 판단 기준임.

7. React Query SSR 적용과 에러 바운더리 처리 ⚛️

  • React Query에서 SSR(Server Side Rendering) 적용법과 에러 바운더리, 서스펜스(suspense) 처리에 관한 질문과 답변.
  • SSR 환경에서 React Query를 사용하면 클라이언트와 서버 데이터 관리 일관성 유지에 도움이 됨.
  • 에러 바운더리(Error Boundary)는 React 컴포넌트 중 에러 발생 시 대체 UI를 보여주는 기능.
  • React Query의 suspense 모드 활용 시 로딩 상태 핸들링이 가능해 UI가 부드러워짐.
  • 참고 자료 링크 공유됨.

8. 오픈 프로필, 개발 커뮤니티 문화와 인사 🤝

  • 커뮤니티에서 오픈 프로필 이용자들에 대한 인상과 이벤트 같은 소소한 이야기.
  • 신규 입장자에게 진심 어린 환영 인사 및 매일 아침 문안 인사 문화 존재.
  • 실명, 사진 등 개인 프라이버시를 존중하는 분위기.
  • 이런 소소한 문화가 개발자 커뮤니티의 활성화와 긍정적 분위기 조성에 기여함.

9. 리액트 UI UX: 카테고리 스크롤 버튼 및 드랍다운 토론 🎨

  • 모바일에서 가로 스크롤이 자연스럽지만 PC 특정 해상도에서 방향키로 좌우 조작 필요성 대두.
  • 드랍다운과 드래그 UI에 대해 사용자 선호도 차이 토론.
  • overflow-x: scroll 속성을 사용해 넘치는 콘텐츠를 숨기고 한 줄로 정리하는 방법 소개.
  • UI 설계 시 보편성, 직관성, 접근성 고려 중요.
  • < > 버튼처럼 익숙한 UI가 호평 받는 이유도 언급됨.

10. Axios 인터셉터와 리프레시 토큰 이슈 해결 경험 공유 🔄

  • Axios interceptor에서 만료된 토큰 시 리프레시 호출 후 새 액세스 토큰으로 API 재호출 구현 과정.
  • 새로고침할 때 토큰 만료 오류가 간헐적으로 발생하는 문제 발견.
  • 문제 원인은 return await axios(originalRequest) 호출 위치 때문으로 추정됨.
  • then 체인 내 호출 시 비동기 처리 순서 문제 가능성 있음.
  • 개발자들이 서로 경험 공유하며 코드를 개선, 문제를 해결한 사례.
  • 비슷한 이슈를 가진 분들은 interceptor 비동기 흐름을 꼼꼼히 점검해보길 권장.

면접팁⚡

  • 배열 vs 리스트 차이 알고 있기: 프로그래밍 면접에서 자료구조의 기본 개념과 차이를 묻는 경우가 많음. 특히 배열이 고정 크기인 이유, 리스트가 동적이면서 삭제가 가능한 이유 등을 명확히 이해하면 좋음.
  • TypeScript 클래스 인스턴스 생성과 프로퍼티 동작: Jest 테스트 시 프로퍼티가 undefined로 나오거나 출력되지 않는 문제를 접할 수 있고, 트랜스파일러 설정 차이 해결 경험은 좋은 인상 줌.
  • Axios 인터셉터와 토큰 리프레시 흐름 이해: JWT 토큰 갱신 및 API 요청 재실행 문제 해결 경험을 구체적으로 말할 수 있으면 실무 역량 강조 가능.
  • React Query SSR 및 에러 바운더리 사용 경험: 최신 React 관련 라이브러리 활용 경험은 프론트엔드 면접에서 좋은 어필 요소임.

링크🔗

#JavaScript#TypeScript#ReactNative#ReactQuery#Jest#Axios#배열#클래스테스트#개발커뮤니티#UUID
이전 포스트

2023-10-20

2023년 10월 20일
다음 포스트

2023-10-22

2023년 10월 22일