목차
- 영화 '서브스턴스' 리뷰 & 추천
- React의 use() 훅과 서버/클라이언트 컴포넌트
- 모바일 웹 환경에서 마이크 활성화
- React 공부 자료 추천 및 명서 소개
- 코드 이해와 유지보수 팁
- 연말정산, 세금, 국민연금 관련 개발자 토론
- Google Bot IP 주소 관련 정보
- react-i18next 다국어 처리 이슈 해결 사례
- 네이버 OAuth 로그인 문제와 해결 팁
- Git 리베이스(Rebase) 사용 경험과 팀 문화
1. 영화 '서브스턴스' 리뷰 & 추천 🎬
- 서브스턴스라는 영화가 매우 독특하고 기괴한 분위기로 충격적이라는 평.
- 후반부 클라이맥스는 '큐브'나 '헬레이저'급의 강렬함을 가짐.
- 감독이 여성이라는 점도 흥미로움.
- 마약의 중독성 비유를 통해 전개가 점점 몰입하게 만든다고 평가.
- 토마토(평점 사이트)에서 90점대 점수로 기대를 모음.
- 스릴러 장르이며, 코믹함과는 거리가 있음.
2. React의 use() 훅과 서버/클라이언트 컴포넌트 🛠️
- use() 훅은 서버 컴포넌트에서 비동기 서버 액션(Promise, async)을 자식 클라이언트 컴포넌트에 전달할 때 활용.
- SSR(Server Side Rendering) 시 부모 서버 컴포넌트에서 Promise를 내려주고, 자식 클라이언트 컴포넌트는 이를 *use()*로 "먹어" 사용할 수 있음.
- CSR(Client Side Rendering)에서는 *use()*가 useContext 대안으로 가능하지만 효용성이 크지 않음.
- 클라이언트 측에서 Promise를 직접 만들어서 사용하는 것은 현재 제한적이며, 향후 개선 예정.
- 에러 바운더리(Error Boundary)와 리패치(재요청) 관리가 아직 완벽하지 않음.
- 쉽게 말해, React에서 서버와 클라이언트 간 비동기 데이터 전달 방식에 대한 실험적인 기능임.
3. 모바일 웹 환경에서 마이크 활성화 🎤
- 모바일 웹에서 마이크 사용이 잘 되는지에 대해 질문 및 간단한 논의.
- 구체적인 해답은 없었으나 최신 브라우저 환경에 따라 차이가 있음.
- 웹 API 중 MediaDevices.getUserMedia()를 활용하여 마이크 접근 권한 허용 필요.
- 브라우저 권한과 지원 여부를 항상 확인해야 함.
4. React 공부 자료 추천 및 명서 소개 📚
- React 공식문서 ko.react.dev를 강력 추천.
- 공식 문서는 최신 버전 React의 기능과 모범 사례를 명확하게 안내함.
- 초보 및 중급 개발자 모두에게 매우 좋은 참고자료로 손꼽힘.
5. 코드 이해와 유지보수 팁 🔧
- 남이 짠 코드를 이해하고 의도 파악하는 게 제일 어렵다는 공감.
- 무작정 대대적인 리팩토링보다는 1-2년간 점진적 유지보수를 권장.
- 갑작스러운 큰 작업은 서비스 장애 위험을 높임.
- 전임자 코드도 그 사람 상황에서 최선이었다고 생각하면 마음이 편해짐.
- 문제 있더라도 탓하기보다는 차근차근 고쳐나가야 한다는 태도 강조.
6. 연말정산, 세금, 국민연금 관련 토론 💸
- 연말정산 결과 미리보기는 홈택스 사이트에서 가능.
- 월급에서 국민연금, 건강보험, 소득세 공제 금액이 상당하고 많은 부담이 됨.
- 고소득층과 중산층의 소득 기준에 대한 다양한 의견 등장.
- 세금 부담에 대한 불만과 정부 정책에 대한 비판적인 시각 공존.
- 개발자 커뮤니티 특유의 현실공감 토크로 활발한 의견 교환.
7. Google Bot IP 주소 관련 정보 🌐
- 구글봇(Googlebot)의 IP 주소가 차단 리스트에 포함됐을 경우 문제 발생.
- 구글 공식에서 제공하는 Googlebot IP JSON 리소스 URL 공유:
https://developers.google.com/static/search/apis/ipranges/googlebot.json - IP 관리가 필요한 웹사이트 운영자에게 유용한 정보.
8. react-i18next 다국어 처리 이슈 해결 사례 🌍
- 다국어 번역 설정 시 "LOVE(사랑)"과 같이 괄호가 붙은 키가 정상적으로 번역되지 않는 문제 발생.
- 괄호 사이 공백 유무에 따라 번역 결과가 달라지는 해프닝.
- 해결 방법 중 하나는 escapeValue 옵션을 false로 설정하거나, 키 네이밍에 띄어쓰기를 고려하는 것.
- 다국어 처리 라이브러리는 키를 엄격히 구분하므로, 공백과 문장 부호가 번역에 영향을 줄 수 있음.
9. 네이버 OAuth 로그인 문제와 해결 팁 🔑
- 네이버 로그인 API 사용 중 약관 동의 이후 발생하는 CORS 에러 문제 발생.
- 네이버 OAuth에서 권장하는 방식은 Backend 서버가 동일 도메인에서 직접 API 호출을 하는 것.
- 프론트엔드에서 직접 토큰을 요청하면 CORS 문제가 생김.
- OAuth redirect URI가 네이버에 등록한 콜백 URL과 반드시 일치해야 함.
- 엑시오스(axios)로 토큰 요청 시 헤더와 파라미터 형식 주의 필요.
- 실무 팁: OAuth 로그인 구현 시 인증 코드 교환(token 발급)은 백엔드에서 처리하는 것이 안전하고 권장됨.
10. Git 리베이스(Rebase) 사용 경험과 팀 문화 ⚙️
- 리베이스는 히스토리 정리를 위해 개인 작업 브랜치에서 주로 사용.
- 팀에서는 잉여 커밋 관리를 위해 리베이스를 선호하거나, 반대로 히스토리 보존을 위해 지양하는 경우도 있음.
- 머지(Merge), 스쿼시(Squash) 등 다양한 전략 중 팀 컨벤션에 맞추는 것이 중요.
- 리베이스 사용 시 히스토리 변경으로 인해 주의가 필요하며, 컨플릭트 해결 경험 공유.
- 각자의 작업 환경과 팀 문화에 맞게 적절한 방법을 선택할 것.
면접팁⚡
- React 서버 컴포넌트와 클라이언트 컴포넌트의 차이점과 새로운 use() 훅의 역할 설명하기.
- OAuth 2.0 인증 과정과 CORS 문제 해결 방향에 대해 명확하게 이해하고 답변 준비.
- Git 리베이스의 장단점, 팀 문화에 따라 달라지는 협업 전략에 대해 이야기할 수 있으면 좋음.
- 다국어 처리 라이브러리 사용 시 발생할 수 있는 문자열 키 문제와 해결법을 경험 위주로 설명.
링크🔗
- React 공식 문서: https://ko.react.dev
- Googlebot IP 목록 JSON: https://developers.google.com/static/search/apis/ipranges/googlebot.json
- 네이버 OAuth CORS 문제 해결 아티클: https://velog.io/@iamminzzy/TIL-%EB%84%A4%EC%9D%B4%EB%B2%84-%EB%A1%9C%EA%B7%B8%EC%9D%B8-CORS-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0
- htmx 공식 사이트: https://htmx.org
#React#useHook#OAuth#i18next#GitRebase#연말정산#GoogleBotIP#개발자토론#ReactTips#네이버API