개발자들이 남긴 기록..

플랫폼 결제 구조와 세금 정산
개발자들의 퇴근 후 생활과 운동 이야기
모니터 선택과 고주사율(Hz)의 이해
슬랙 등 메신저의 DM 사용 이슈와 업무 커뮤니케이션
React Query의 useQuery 호출 문제와 해결 팁
Zustland 상태 선택 방법 차이와 최적화
Changeset 사용법 간단 가이드
웹에서 브라우저 창 닫기 제어와 팝업 이슈
오토바이 카울의 역할과 안전성 이야기
PostgreSQL 발음과 기본 공부 이야기

Zustand #Changeset #플랫폼결제 #메신저커뮤니케이션 #브라우저팝업 #모니터추천 #운동관리 #오토바이안전

1. 플랫폼 결제 구조와 세금 정산 💰

배달 플랫폼 구조 상, 주문 금액 중 배달비, 세금, 수수료 등을 제외한 금액을 점주에게 입금함.
세금계산서 등 세금 처리를 쉽게 하기 위해 결제 영수증과 신고를 정확히 관리.
수수료율, 세금 정산 방식, 입금 기간 등이 플랫폼마다 다르므로 기능 설계 시 주의 필요.

설명:
플랫폼은 판매자(점주)와 고객 사이에서 중간 역할을 하며, 결제된 금액에서 세금, 배달비, 수수료를 떼고 나머지 금액을 점주에게 지급한다. 세금계산서 발행과 신고는 법적으로 중요해 개발 시 결제 시스템과 정산 로직이 투명해야 하며, 입금 스케줄도 정해야 한다.

2. 개발자들의 퇴근 후 생활과 운동 이야기 🏃‍♂️📚

개발자들 사이에서 퇴근 후 운동, 공부, 게임 등의 활동 공유.
운동은 피곤하지만 꾸준히 해야 건강 유지와 노후 대비에 도움됨.
자기관리는 단순 미용 목적 외 노년의 치료 비용을 줄이는 의미도 있음.

운동 중요성
운동은 단순히 컨디션 관리뿐 아니라, 나이가 들었을 때 근육 부족으로 발생할 수 있는 치료 비용을 미리 대비하는 의미가 있다. 꾸준한 운동이 몸의 '오래된 배터리'를 재충전하는 셈.

3. 모니터 선택과 고주사율(Hz)의 이해 🖥️

23~27인치 모니터 30만원 선으로 추천 요청이 많음.
144Hz 이상 고주사율 모니터는 주로 게임용. 단순 작업과 영상 시청에는 60Hz로도 충분.
해상도와 화면 크기가 우선 고려 대상이며, IPS 패널 등 화질도 중요.
요즘 저렴해진 144Hz 게이밍 모니터도 20만원 대부터 구매 가능.

기본 개념
주사율(Hz)은 1초에 화면이 몇 번 깜빡이는지 나타내며, 높을수록 부드럽다. 게이밍이 아니라면 60Hz도 충분하지만, 고주사율은 게임이나 영상 전문 작업자에게 권장됨.

4. 슬랙 등 메신저 DM 사용 이슈와 업무 커뮤니케이션 💬

대기업이나 팀에서 DM(Direct Message)로 공식 업무 논의 하지 말라는 공지가 있음.
메일이나 공식 채널에 팀 리더를 CC해 문서화하는 것이 중요.
쪽지나 DM은 추후 이견 발생 시 증빙이 부족해 분쟁으로 번질 수 있음.
업무 기록과 투명성 확보 차원에서 공식 기록 수단 사용 권장.

커뮤니케이션 팁
업무 논의는 ‘공식 채널 혹은 메일’을 활용해 기록으로 남기는 게 바람직하며, 리더가 상황을 쉽게 파악하게 하여 협업 효율과 문제가 생겼을 때 책임 소재를 명확히 할 수 있다.

5. React Query의 useQuery 호출 문제와 해결 팁 ⚛️

특정 PC에서만 useQuery API 호출이 안되는 문제 제기.
호출 안되는 케이스는 일반적으로 캐싱, 네트워크 차단, 브라우저 설정(예: Disable JavaScript) 문제일 수 있음.
호출하려는 함수는 () => fetchFunction() 형태로 넘겨야 실행 시점에 함수 호출이 됨.
React Query devtools 활용해 로컬에서 문제 재현 및 디버깅 권장.

React Query useQuery 설명
useQuery는 서버에서 데이터를 가져오는 Hook이며, 첫 번째 인자는 캐싱 키, 두 번째 인자는 데이터 요청 함수다. 함수 래핑 여부에 따라 호출 시점이 달라질 수 있다. 네트워크 요청이 아예 안 된다면 브라우저 자바스크립트 활성화 여부, 해당 PC의 네트워크 문제, 혹은 React Query 설정 문제점 점검해야 한다.

6. Zustand 상태 선택 방법 차이와 최적화 🐻

const { bear } = useBear(); : 전체 상태를 받아와서 필요한 값만 구조 분해.
const bear = useBear(state => state.bear); : 상태 선택자로 필요한 상태 한 가지만 가져와 최적화 가능.
그러나 후자도 객체를 반환하면 리렌더링이 발생할 수 있음 (참조값이 매번 새로 생성되기 때문).
useShallow 또는 상태 선택 시 기본 타입을 반환하도록 하면 리렌더링 최소화 가능.

설명
Zustand는 상태 관리 라이브러리로, 상태 선택 방법에 따라 컴포넌트 재렌더링 여부에 큰 차이가 생긴다. 하나의 상태만 보는 선택자는 업데이트 최소화에 유리하다. 객체 반환 시 shallow compare를 통해 최적화하는 방법이 있다.

7. Changeset 사용법 간단 가이드 📦

PR 날릴 때 yarn changeset 명령어로 변경사항 버전과 설명을 입력.
머지 후 해당 changesets 모아서 changeset version을 돌리면 패키지 버전과 changelog 파일이 자동 업데이트됨.
협업 환경에 따라 changeset 파일을 커밋해서 CI가 자동으로 릴리즈 플로우를 돌리도록 할 수 있음.
단독 작업 시 CLI로 버전 직접 지정해도 무방.

설명
Changeset은 모노레포 등에서 여러 패키지의 버전을 관리하며, 변경점 기록과 배포 작업을 자동화하는 도구이다. PR 머지 전후 플로우를 정해두면 편리하다.

8. 웹에서 브라우저 창 닫기 제어와 팝업 이슈 🖱️

window.close()는 자바스크립트로 창을 닫는 함수.
원칙적으로 스크립트가 직접 연 창(팝업)만 닫을 수 있고, 사용자가 직접 연 창은 보안상 닫을 수 없음.
React 내 ‘닫기’ 버튼 등에서 해당 JS 호출 시 부모(오프너)가 제어하는 편이 안전과 호환성에 좋음.
C# 웹뷰 등 외부 앱에서 띄운 브라우저 창 닫기는 별도 제어 필요.

설명
웹 브라우저는 보안을 위해 사용자가 직접 연 창은 스크립트가 강제로 닫지 못하도록 제한함. 팝업 창을 열었을 때만 스크립트가 닫을 수 있어, 팝업 제어와 부모-자식 윈도우 사이 메시지 통신을 적절히 설계해야 한다.

9. 오토바이 카울의 역할과 안전성 이야기 🏍️

카울(카울링)은 오토바이의 외부 덮개로, 단순 장식이 아닌 라이더 보호 역할 수행.
사고 시 카울이 먼저 부서지면서 충격 흡수 및 신체 직접 접촉을 어느 정도 막아줌.
프레임에 부착되어 몸과 발을 보호하며, 라이더의 탈출시간 벌어주는 기능도 있음.
100% 완벽 보호는 불가하나 없으면 더 위험함.

설명
카울은 모터사이클 외관을 부드럽게 하고 공기역학을 개선하는 동시에, 사고 시 라이더 부상 위험을 줄여주는 안전 장치이다. 사고 대응과 보호 차원에서 카울의 역할과 구조를 이해하는 것이 중요.

10. PostgreSQL 공부와 발음 토크 🐘

PostgreSQL을 '포스트그레스큐엘'과 '포스트그리에스큐엘' 두 가지 발음으로 부르는 사례 공유.
공식 명칭은 PostgreSQL이나 지역이나 개인마다 다르게 발음.
로그인 구현부터 차근차근 공부하는 초보자 이야기 나옴.

참고
PostgreSQL은 오픈소스 관계형 데이터베이스로 강력한 기능과 확장성으로 유명하다. 초보자는 기본 CRUD + 인증 구현부터 시작하는 게 일반적.

면접팁⚡

React Query 사용 시, 데이터 요청 함수는 항상 함수로 감싸서 넘겨야 제대로 작동함을 꼭 숙지할 것. (ex: () => fetchData() vs fetchData 차이)
상태관리 라이브러리 Zustand를 사용할 때, 필요한 상태만 선택해 가져오는 게 최적화에 얼마나 기여하는지 설명할 준비하기.
업무 소통 시 이메일 vs 메신저 DM 차이와 기록 남김의 중요성에 대해 답변 가능하면 긍정적인 인상.

링크🔗

Frontend 미래 관점 관련 번역글: https://ykss.netlify.app/translation/navigating_the_future_of_frontend/
React Query 공식 Doc 및 상태 선택 예시: https://github.com/pmndrs/zustand?tab=readme-ov-file#recipes
Changeset 관련 가이드(공식): https://github.com/changesets/changesets
Stackoverflow - Window close 관련 이슈: https://stackoverflow.com/questions/5535575/webbrowser-and-javascript-window-close

2024-04-19

목차