개발자들이 남긴 기록..

전역 함수와 useEffect 의존성 문제
i18n 다국어 처리와 네이밍 컨벤션
리팩토링의 중요성과 현실적 접근법
P2P 통신과 웹소켓 기본 개념
iOS Safari fixed bottom 버튼 문제 해결 팁
개발 도구 및 환경 이야기: 에디터, axios vs fetch 등
GitHub 프로젝트 관리와 커밋 & PR 경험 공유
키보드 취미 토크와 추천 키보드 종류
개발자 취업 및 프리랜서 이슈 토론
4대 보험료 급여 공제 관련 Q&A

1. 전역 함수와 useEffect 의존성 문제

함수 handleInternetConnectionStatusChange가 전역 공간에 선언되어도 문제 없냐는 질문.
useEffect 내부에서는 의존성 배열에 포함시키지 않아도 되는 경우가 있음.
- 이유: 함수가 상태값이나 props에 의존하지 않고 변화하지 않는 고정 함수일 경우.
전역 선언 시 매 렌더마다 함수가 재생성 되는 걸 방지할 수 있어 가독성 측면에서 긍정적일 수 있음.
다만 export 하지 않는 이상 분리할 명확한 이유가 없다면 불필요한 리팩토링일 수 있음.

설명:
useEffect 훅은 의존성 배열에 명시된 변수나 함수가 바뀔 때만 콜백이 실행된다.
따라서 의존성 배열에 함수가 들어가 있으면 해당 함수가 새로 생성될 때마다 effect가 다시 실행된다.
하지만 고정된 함수라면, 배열에 넣지 않고 useEffect 밖에 선언하는 게 더 효율적임.

2. i18n 다국어 처리와 네이밍 컨벤션

i18n 관련 네이밍으로 t vs translation 토론이 있었음.
t는 흔히 번역 함수의 줄임말로 사용되며 많은 회사와 라이브러리에서 표준처럼 쓰임.
translation은 이름이 더 명확해 보이나, 협업 시에는 컨벤션에 맞는 이름을 따르는 게 중요함.
i18n은 다국어 지원을 위한 도구 또는 라이브러리를 의미하며, 내부에서 key-value 형태로 언어별 문자열을 관리함.

설명:
i18n(Internationalization)은 소프트웨어가 여러 언어를 지원하도록 설계하는 과정이다.
대부분 복수의 언어 데이터를 객체 형태로 보관하고, UI에서 사용자 언어에 맞는 문자열을 선택해 표시함.

3. 리팩토링의 중요성과 현실적 접근법

리팩토링은 코드를 깔끔하게 정리하는 작업이나, 과도한 리팩토링은 시간 낭비가 될 수 있음.
기능 구현이 완료되기 전 지나친 리팩토링은 프로젝트 진행을 방해할 수 있음.
추천하는 방향: 새로운 기능 개발과 함께 테스트 코드 작성에 더 힘쓸 것.
리팩토링 시 가독성, 유닛 테스트 용이성, 유지보수성 고려가 필요함.

4. P2P 통신과 웹소켓 기본 개념

클라이언트 간 직접 통신은 P2P(peer-to-peer)라고 하며, 웹에서는 WebRTC 기술이 주로 사용됨.
P2P 통신의 핵심 프로토콜: TCP와 UDP
- TCP는 신뢰성 있는 연결 기반 통신
- UDP는 빠르지만 신뢰성이 낮은 비연결성 통신
웹소켓은 클라이언트와 서버 간 양방향 실시간 통신을 지원하는 프로토콜임.

설명:
P2P는 서버를 거치지 않고 두 클라이언트가 직접 데이터를 주고받는 방식으로, 특히 화상 통화나 파일 공유에 쓰임.
WebRTC는 브라우저 간 P2P 미디어 및 데이터 통신을 가능하게 함.

5. iOS Safari fixed bottom 버튼 문제 해결 팁

iOS Safari에서 position: fixed; bottom: 0인 버튼이 주소창(네비게이터)에 가려지는 현상 발생.
CSS env(safe-area-inset-bottom)를 이용해 안전 영역 거리 확보 시도 가능.
최신 기기(iPhone 14, 15, 16 등)에서 문제가 자주 보임.
자바스크립트로 약간 스크롤조작(window.scrollTo(0,1)) 후 0.3초 뒤 처리하면 정상 노출 사례 있음.

설명:
iOS Safari는 주소창 등 UI가 나오거나 사라질 때 뷰포트 크기가 바뀌며 fixed 요소가 가려질 수 있음.
safe-area-inset-bottom은 홈 인디케이터 등과 겹치지 않게 여백을 만들도록 안전 영역 값을 반환하는 CSS 함수임.

6. 개발 도구 및 환경 이야기: 에디터, axios vs fetch 등

nvim(Neovim)은 마우스 사용을 최소화하는 터미널 기반 편집기로, 익숙해지면 빠른 코딩 가능.
fetch와 axios 비교:
- fetch는 표준 API이고, 노드 환경에서는 호환성이 떨어질 수 있음.
- axios는 Promise 기반이며 자동 JSON 변환, 요청 취소, 인터셉터 등 편의 기능이 많아 사용 편리.
상황에 따라 선택하면 됨.
react-dev-tool useDebugValue 훅도 있음, 개발자 도구에 커스텀 훅 상태 표시 가능.

7. GitHub 프로젝트 관리와 커밋 & PR 경험 공유

사이드 프로젝트에서 여러 커밋을 쌓고, 리팩토링 및 기능 추가를 진행하는 이야기 공유.
GitHub Readme나 프로젝트 메인 페이지를 꾸며 3스타 '깃슐랭' 목표 염두에 두기도 함.
커밋 수, 리뷰 수, 버그 등 결과물 상태를 유머러스하게 공유하며 협업 문화에 대한 소통도 나눔.

8. 키보드 취미 토크와 추천 키보드 종류

맥북 키보드와 커스텀 기계식 키보드 토론 진행.
주요 키보드 제품:
- 리얼포스(Realforce): Top-tier 무접점 키보드, 적응 기간 필요
- 해피해커(Happy Hacking): 배열이 독특해 적응 어려움
- 레오폴드(Leopold): 인기 많은 기계식 키보드
타건샵 방문 추천: 직접 눌러보고 키감 비교 가능.
기계식 키보드는 취미가 되기도 하니 신중한 구매 권장.

9. 개발자 취업 및 프리랜서 이슈 토론

프리랜서 시급 15,000원에 대한 고민과 연봉 환산 논쟁.
정규직과 프리랜서의 급여 구조 차이, 시급 환산 시 나타나는 현실적 갭 소개.
직장 생활과 계약직 업무의 차이점과 장단점 토론.
면접/취업 관련 팁 및 프로젝트 참여 경험 공유.

10. 4대 보험료 급여 공제 관련 Q&A

첫 급여에서 4대보험료(국민연금, 건강보험, 고용보험, 산재보험) 등이 바로 공제되는지 질문.
일반적으로 급여 입금 시 이미 공제된 상태로 나오고, 특정 경우(중도입사자 등) 다음 달부터 공제될 수도 있음.
회사별 정책이나 급여 시스템에 따라 다를 수 있으니 인사팀 확인 권장.

면접팁⚡

리팩토링에 대해 질문 받으면, "필요 이상 과도한 리팩토링은 오히려 프로젝트 진행을 방해할 수 있어 적절한 균형이 중요하다"고 답변하기
useEffect 의존성 관리 시 "고정된 함수라면 의존성 배열에 넣지 않고 useEffect 밖에 선언하여 불필요한 재실행을 막는다"고 설명 가능
i18n 네이밍 관련 질문에 "팀 내 컨벤션을 따르는 것이 중요하며 t가 대표적이지만 명확성을 위해 translation도 가능하다"고 답변
P2P 통신에 대한 이해도를 묻는다면 TCP/UDP 차이와 WebRTC 개념을 간단히 설명

2024-10-23

목차