2023-11-06

목차

1. 출근 & 인증문의 및 일상 대화
2. 이미지 저장 및 웹 성능 개선 팁
3. 맥북 및 개발용 노트북 추천 토론
4. 효율적인 코드 작성 방법
5. npm 스코프 패키지 테스트 및 배포 전략
6. 객체 키-값 뒤집기 문제 해결법
7. Next.js 구글 서치 콘솔 인증 문제 해결법
8. 면접 준비 및 질문 대응 조언
9. 리액트와 개발환경, 생산성 관련 이야기
10. 업무 효율, 야근 문화, 작업 환경 개선 토론

1. 출근 & 인증문의 및 일상 대화

• 카카오톡 인증 요청 문제, 오류 상황 공유
• 예비군 훈련 중 눅눅한 군복, 보조배터리 챙김
• 면접 상황에서 연락 취소, 2등 후보자 사례 공유
• 업무 중 비오는 날 컵라면 먹는 문화 언급
• 재택근무와 근무 환경에 대한 가벼운 토크

2. 이미지 저장 및 웹 성능 개선 팁

• 다중 이미지(10장 이상) 2~3초 로딩 지연 문제 발생
• WebP 포맷 권장:
  • WebP는 용량은 줄이고 화질은 유지하는 최신 이미지 포맷
  • 저장 시 WebP 변환을 통해 네트워크 부담 감소 가능
• 이미지 해상도 및 크기 조절:
  • 미리보기용 이미지라면 64x64와 같이 리사이징 처리
  • 용량 큰 이미지는 화질을 희생하더라도 사이즈 축소 권장
• SVG 추천:
  • 벡터 이미지로 크기 변경 시 화질 열화 없음
  • 주로 로고, 아이콘 등에 적합, 사진에는 부적합
• 저장 시 이미지 포맷과 해상도를 자동으로 조절하는 전략이 중요

3. 맥북 및 개발용 노트북 추천 토론

• 맥북 에어 M1, M1 Pro, M3 모델 추천 다수
• 8기가 램은 기본적인 개발에는 가능하지만, 컨테이너 혹은 가상머신 구동에는 부족함
• 최소 16GB 램을 추천하며, 32GB 이상은 컨테이너 다중 실행자 혹은 무거운 작업에 적합
• Mac vs 윈도우 비교와 업무 생산성 관련 내용도 공유됨
• 개발환경 구성 시 예산에 맞춰 합리적으로 선택할 것을 권장
• 아이패드와 같은 에코시스템 장비 활용에 대한 긍정적인 의견 다수

4. 효율적인 코드 작성 방법

• 재사용성과 추상화가 핵심
• 메소드명은 가독성 높게, 추상적이면서도 의미 있게 지을 것
• Boolean 변수명은 is, has, needs, should 등 접두사 사용 권장
• OOP(객체 지향 프로그래밍) 스타일과 컨벤션 준수가 중요
• 협업 시 컨벤션을 미리 정의해두면 커뮤니케이션 효율 상승

5. npm 스코프 패키지 테스트 및 배포 전략

• 스코프별 다른 저장소(예: @scope/lib1은 npm, @scope/lib1 테스트용은 github) 배포 고민
• 테스트용 패키지를 GitHub에서 설치해 테스트 후 정식 배포 전 npm으로 교체하는 방식
• 모노레포(Monorepo) 활용 권장:
  • 여러 패키지를 한 저장소에서 관리
  • CI/CD를 self-host로 구성해 테스트 후 바로 배포 가능
• workspace 버전과 리모트 버전을 상황에 따라 전환해 테스트할 수 있도록 함
• Peer dependencies(피어 디펜던시): 동료 관계처럼 같이 특정 버전 이상을 요구하는 의존성 개념, 상충하지 않도록 주의 필요

6. 객체 키-값 뒤집기 문제 해결법

• 객체 키와 값의 역할을 뒤집는 작업
• JavaScript에서 Object.entries()와 reduce를 써서 새로운 객체를 만들어 처리 권장
• lodash의 invert 함수도 사용 가능하지만, 값이 중복되면 주의 필요
• 원본 객체를 직접 변경하지 않고 새로운 객체를 반환하는 함수 사용이 안전
• 실사용 예시는 form select 태그에서 value와 key의 용도를 바꿔야 할 경우 발생

7. Next.js 구글 서치 콘솔 인증 문제 해결법

• 구글 서치 콘솔 메타 태그 인증이 실패하는 경우가 있음
• HTML head 태그에 메타 태그를 잘 넣었음에도 인식이 안 되면 파일 인증 방식 권장
• public 폴더에 인증 파일을 올려 인증하는 방식은 더욱 신뢰성 높음
• 구글 서버 렌더링과 수집 정책도 고려할 필요 있음

8. 면접 준비 및 질문 대응 조언

• 토스, 대표 면접 등 긴장되는 상황 공유
• 이상적인 답변 준비 이외에 현실적인 질문 등장으로 당황하는 경우 많음
• "왜 우리 회사인가?" 같은 질문에서는 솔직하고 명확한 이유 제시가 강점
• 준비한 답변 이외 질문과 상황에 침착하고 긍정적으로 대응할 것
• 자기소개 및 포트폴리오 준비 시 현실감과 회사 요구사항에 맞게 조율 필요

9. 리액트와 개발환경, 생산성 관련 이야기

• 리액트는 많은 개발자가 쓰는 '월드클래스' 라이브러리
• 다크 모드 vs 라이트 모드 연봉/생산성 우위 논쟁
• 좋은 데스크 환경과 생산성 향상을 위한 개인별 환경 조성 중요
• React Native의 Metro 번들러 속도 이슈와 대안 비교 (Vite, SWC 등)
• 리액트 캐릭터 컨트롤러, 3D 움직임, 물리엔진 적용 계획 논의
• 지속적인 학습과 환경 개선을 통해 생산성 유지 중요

10. 업무 효율, 야근 문화, 작업 환경 개선 토론

• 대부분 회사에서 야근은 비장려 문화이나 여전히 발생
• 야근 시간은 분 단위까지 챙기는 곳과 그렇지 않은 곳 차이
• 근골격계 문제(거북목 등) 관리와 스트레칭 권장
• 효율적인 개인 작업 환경 세팅 중요 (예: 좋은 노트북, 올바른 자세)
• 휴식과 컨디션 관리가 장기 생산성에 미치는 영향 강조

면접팁⚡

• 예상치 못한 질문에도 당황하지 말고 솔직하고 침착하게 답변할 것
• '왜 우리 회사인가?', '입사 후 목표' 같은 질문은 구체적이고 현실적인 답변이 좋음
• 준비한 이상적인 답변과 현실적 질문 사이 균형 맞추기
• 면접 전 회사에 대한 최신 정보와 구체적 가치 파악 필수

링크🔗

• npm peer dependencies 이해: https://velog.io/@johnyworld/Peer-Dependencies-에-대하여
• Next.js 미래 전망 및 기술 블로그: https://velog.io/@plrs9816/how-nextjs-is-delivering-reacts-vision-for-the-future
• 인증 서버 구현 참고: https://wildeveloperetrain.tistory.com/240
• lodash invert 함수: https://lodash.com/docs/4.17.15#invert
• React Native bundler 비교 (Metro vs Vite vs SWC 참고 자료는 별도 검색 필요)
• 구글 서치 콘솔 인증 파일 업로드 방법 (공식 문서 참고 추천)