2024-11-07

목차

1. 일상 대화와 근황
2. 피그마(Figma)와 UI 에디터 개발 이야기
3. 코드 길이와 추상화에 대한 토론
4. 잠 깨는 방법과 커피 이야기
5. Next.js 14 파비콘(Favicon) 문제 및 검색 엔진 반영 지연
6. React OAuth Google 라이브러리 에러 메시지 관련 질문
7. 투자와 재테크, 1억 모으기 계획
8. 개발자들의 근무 환경과 회식 문화
9. HTTP 999 오류 전설과 유머
10. 애니메이션 라이브러리 framer motion과 뷰트랜지션 추천

1. 일상 대화와 근황

• 참가자들은 날씨 이야기를 주로 나눴으며, 추운 날씨에 맞는 농담과 음악 이야기로 분위기를 풀었음.
• 월급 지연 문제에 대해 노동청 신고와 “군것질로 받는 것” 같은 유머 섞인 해결책도 거론.
• 회식에 대한 선호도는 다양했으며 술과 고기, 비용 부담 문제 등이 주요 화제로 나왔음.
• 커피나 음료 관련 농담도 많았음.

2. 피그마(Figma)와 UI 에디터 개발 이야기

• 피그마는 웹 기반 UI 디자인 도구로 디자이너와 개발자 사이에서 인기가 높음.
• “피그마 만들라니”라는 농담에서 알 수 있듯이, 직접 UI 에디터를 개발하는 작업은 쉬워 보이나 많은 고려사항이 있음.
• UI 에디터 개발에는 완성도, 기간, 사용성 등 다양한 변수들이 관여.
• 초보자에게도 도전해볼 만하지만, 완성도가 낮으면 폐기되는 경우도 많음.
• 참고로 Figma는 벡터 그래픽, 프로토타이핑, 협업 기능 등 고급 기능들을 제공하는 복잡한 소프트웨어임.

3. 코드 길이와 추상화에 대한 토론

• 파일당 코드 길이에 대한 의견 다양:
  • 200~300줄 이하로 유지하면 유지보수와 리뷰에 유리하다고 보는 의견.
  • 그러나 코드 줄 수보다는 추상화의 질과 가독성, 논리적 구조가 더 중요하다는 주장도 강함.
• 지나치게 작은 파일로 쪼개면 오히려 복잡해지는 '스무고개 문제' 발생 가능성.
• 유명 라이브러리 코드 예시로, 페이스북 리액트 내부 코드가 900줄 이상임에도 오히려 관리되고 있음을 언급.
• 리팩토링은 처음부터 잘 구조화하지 않으면 어렵고, 프로젝트 성격에 따라 코드 길이 기준이 다를 수 있음.
• 결론: 코드 품질은 줄 수보다 이해하기 쉽고 버그가 적은 설계가 더 중요.

4. 잠 깨는 방법과 커피 이야기

• 잠 깨는 방법으로 키보드에 커피 쏟기 농담과 아메리카노가 자주 언급됨.
• “창문 열고 5만원 지폐를 밖으로 흔들면 잠이 깬다”는 재미있는 팁도 공유됨.
• 실제 효과적인 방법으로는 추운 공기 마시기, 가벼운 스트레칭, 창밖 보기 등 추천.
• 카페인은 과용 주의.

5. Next.js 14 파비콘(Favicon) 문제 및 검색 엔진 반영 지연

• Next.js 14 프로젝트에서 icon.ico 또는 favicon.ico를 app/layout.tsx에 등록했으나, 네이버 검색 결과에 파비콘이 안 나오는 현상 발생.
• 주요 원인 분석:
  • 네이버 검색엔진 캐싱 문제 가능성.
  • HTML 내 favicon 링크 태그 누락 또는 잘못된 경로.
  • robots.txt에서 파비콘 접근 차단 가능성.
• 구글과는 다르게 네이버는 파비콘 반영이 느리며, 검색엔진에 직접 수집 요청하는 것이 빠른 반영 방법임.
• 단기간 반영 안 되더라도 인내심을 갖고 기다려야 함.

6. React OAuth Google 라이브러리 에러 메시지 관련 질문

• react-oauth/google 라이브러리 사용시 Cross-Origin-Opener-Policy policy would block the window.postMessage call. 에러가 두 번 찍히지만, 로그인 토큰은 정상적으로 전달됨.
• 질문: 에러 메시지를 무시해도 되는가?
• 답변:
  • 토큰 전달이 성공한다면 메시지상 에러 무시는 가능.
  • 다만 CORS 정책과 보안상 이슈가 있을 수 있어 정책 수정이나 라이브러리 업데이트 검토 필요.
  • 개발 환경 설정, origin 허용 여부 등을 꼼꼼히 체크할 것.

7. 투자와 재테크, 1억 모으기 계획

• 참가자 중 한 분은 4번째 1억 모으기 프로젝트 도전 중으로 목표 달성 후 부동산 경매 투자 계획.
• 재테크 팁:
  • 토스 같은 앱을 활용해 자산 흐름 한 눈에 보기.
  • 규칙적으로 적금 및 투자 진행.
  • 빌라 및 재개발 지역 관심.
• 재테크도 개발과 마찬가지로 꾸준함과 전략이 중요함.

8. 개발자들의 근무 환경과 회식 문화

• 최근 회식이 없는 회사들이 많음.
• 회식 비소비적 경향에 대한 호불호 갈림.
• 회사에서 기본적으로 제공하는 음료(커피, 보리차 등) 부족에 대한 아쉬움 토로.
• 스트레스 관리를 위해 가끔 워크샵이나 회식을 원하는 의견도 있음.

9. HTTP 999 오류 전설과 유머

• ‘HTTP 999’ 오류는 공식 표준은 아니지만, 비공식적으로 서버에서 특정 요청을 차단할 때 사용한다는 이야기가 있음.
• 참가자들은 ‘전설의 오류’라며 웃음으로 승화.
• 이런 비공식 상태 코드는 주로 봇 차단 등 비표준 목적으로 사용됨.

10. 애니메이션 라이브러리 framer motion과 뷰트랜지션 추천

• framer motion을 활용해 네이티브 앱 같은 페이지 전환 애니메이션 구현 가능.
• 이전 페이지 컴포넌트를 캐싱하는 방식 등 기술적 방법이 활용됨.
• 만약 대충해도 되는 상황이라면 뷰트랜지션 API 사용 권장.
• CSR(Client Side Rendering) 환경에서는 framer motion도 쉽고 효과적임.
• 단, 애니메이션 구현 시 번들 사이즈 증가에 유의.

면접팁⚡

• 코드 품질 면접 준비 시:

  • 코드 길이보다는 추상화 수준과 가독성, 유지보수성에 대한 이해 강조하기.
  • 파일 분리와 모듈화 전략을 설명하면서도 지나친 분할의 단점도 알기.
  • 실제 유명 오픈소스 코드를 참고해 설계 사례를 이야기하면 좋음.

• OAuth2와 CORS 관련 질문 대비:

  • 교차 출처 정책(CORS)와 보안 이슈 이해 필수.
  • 에러 메시지 뒤에 숨은 의미와 해결 방법을 설명할 수 있어야 함.

• Next.js 프로젝트 운영 경험 어필시:

  • 파비콘 같은 기본 설정 이슈부터 캐싱, 검색엔진 반영 과정 등 실무 경험 담기.

링크🔗

• OAuth 2.1 공식 문서: https://oauth.net/2.1/
• 멍개님 블로그 (트랜스포머 모델, FSD 패턴 등 관련):
  https://blog.naver.com/pjt3591oo/222693372349
  https://blog.naver.com/pjt3591oo/223137573151
  https://m.blog.naver.com/pjt3591oo/222210241412
• React reconciler 코드 참고: https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiber.js