2024-01-29

목차

1. Next.js SSR과 데이터 페칭 지연 문제
2. 개발자 취업 및 이직 경험 공유
3. React 관련 개발 팁과 도구 이야기
4. 코드 리뷰 및 협업 중 겪는 애로사항
5. 기술 면접 대비 및 코딩 테스트 경험
6. React 테이블 라이브러리 및 CSS 이슈
7. 네이티브 앱과 코드 업데이트 방식
8. 개발자 장비 및 하드웨어 이야기
9. 프로젝트 데이터 처리 및 모킹
10. 커뮤니티 문화 및 자유로운 소통

1. Next.js SSR과 데이터 페칭 지연 문제

• 핵심: Next.js 13.5.4에서 SSR 시, 느린 API 요청(3~5초)으로 인해 페이지가 완성되기 전에 클라이언트에서 데이터 페칭이 이뤄지는 상황
• 상세설명:
  • SSR(Server Side Rendering)은 서버에서 데이터를 미리 받아 완성된 HTML을 클라이언트에 전달하는 방식임
  • API 응답 속도가 느리면, Next.js가 일정 시간 내에 페이지를 완성하지 못하고 클라이언트에서 데이터 페칭을 하도록 처리할 가능성이 있음
  • 이러한 클라이언트측 데이터 요청은 크롬 네트워크 탭에 표시됨
  • API 호출 중 빠른 응답만 함께 처리하면 SSR 완성 페이지가 제대로 내려옴
• 기술 팁:
  • SSR에서 데이터 페칭 타임아웃이나 렌더링 최대 대기 시간은 Next.js 내부 설정이나 Node.js 서버 타임아웃 설정 등을 통해 조절 가능함
  • 문제 상황이라면, 페이지 내 일부를 서버 컴포넌트로 처리하고, 시간이 오래 걸리는 API 데이터는 클라이언트 컴포넌트에서 별도로 비동기 처리하는 것도 방법
  • SSR 로그(서버 콘솔)는 터미널에서 확인 가능하며, 응답은 받았는데 렌더링이 완성되지 않은 현상은 설정 문제일 확률 큼
• 정리:
  • SSR에서 일정 시간 넘으면 부분적 클라이언트 렌더링 혹은 페칭 전환 가능
  • 설정 조절로 SSR의 최대 대기 시간을 늘릴 수 있으나, 서버 부하 및 사용자 경험(로딩 시간) 등 고려 필요
  • 느린 API는 별도 비동기로 분리하거나 캐싱 전략 도입 권장

2. 개발자 취업 및 이직 경험 공유

• 스타트업, 대기업 등 다양한 회사로 이직 사례 공유
• 신입 개발자들이 자바스크립트 기본, 알고리즘, CS(컴퓨터구조, 자료구조 등) 면접 준비 경험
• 전화 면접과 대면 면접의 차이점:
  • 전화 면접은 시간과 에너지 절약에 유리
  • 긴장감은 덜하지만, 기본 면접 준비 동일하게 해야 함
• 면접용 코딩 테스트(코테) 경험 공유:
  • 라이브 코딩 테스트는 서치(검색) 금지, 난이도가 높은 편
  • 면접관이 힌트를 주는 경우도 있어 긴장 완화에 도움 됨
• 면접 과제 시 주의점:
  • 아이디어 도용 이슈 때문에, 실제 데이터를 사용하기보다 Fakerjs 같은 가짜 데이터 생성 도구 사용 추천
  • 면접관도 더미 데이터 활용한다는 점 알고 있고, 적절한 목 데이터 활용은 오히려 긍정적

3. React 관련 개발 팁과 도구 이야기

• React 테이블 라이브러리
  • react-table 사용 시 테이블 행과 열 너비 가변적 설정 관련 문제
  • 가상 스크롤링(vritualized rows)과 full-width 동시 적용 어려움
  • 가로폭 100% 지정 시 예상과 다른 UI 현상 발생할 수 있으니 꼼꼼한 스타일링 필요
• 콘솔 로그 확인법(SSR 환경)
  • SSR 시 서버 콘솔은 터미널에서 확인 가능
  • VSCode debugger, Node inspector, Chrome DevTools의 Node.js 인스펙터 기능 활용 가능
  • "콘솔 닌자" 같은 확장 프로그램으로 편리한 서버 로그 확인 가능
• JS 제어문과 콜스택
  • if, while, for 같은 제어문 자체는 콜스택에 개별적으로 쌓이지 않음
  • 하지만 제어문의 블록 내 함수 호출 등은 콜스택에 영향
• 스위치문(switch)
  • 성능보단 가독성 때문에 주로 사용
  • 옵션이 많아질 때 중첩 if문보다 switch문이 구조적으로 유리
  • 요즘은 오브젝트 리터럴(object literals)로 대체하는 경우도 늘어나고 있음
• Next.js 앱 라우터(App Router)
  • SSR과 CSR(Server & Client Side Rendering)을 섞어 쓰는 패턴 가능
  • 서버 컴포넌트에서 느린 API는 클라이언트 컴포넌트로 분리해 처리 권장

4. 코드 리뷰 및 협업 중 겪는 애로사항

• 팀 내 코드 스타일과 복잡한 코드 작성에 대한 고민
• 복잡한 ref 사용이나 이해하기 어려운 코드에 대해 불만과 웃음 가득한 반응
• 협업 시 명확한 코드 작성과 주석 활용 필요성 강조
• 가끔 웃긴 주석이나 비표준 방식이 나타나 팀 분위기에 재미를 주기도 함

5. 기술 면접 대비 및 코딩 테스트 경험

• 라이브 코딩 테스트는 온라인 서치 금지, 면접관이 힌트 제공하는 경우 있음
• 코딩테스트 난이도는 지원하는 회사와 직무별로 다름
• 알고리즘 문제는 자주 출제되는 유형과 개념 학습 필요
• 최근 코딩 테스트 경향은 과제형 과제의 비중이 높아 코딩 문제만 풀지 않고, 실제 서비스를 만들거나 코드 구현 과제를 준비할 필요
• 포트폴리오용 더미 데이터 준비 팁: Faker 라이브러리 활용해 실제 같은 테스트 데이터 생성 추천

6. React 테이블 라이브러리 및 CSS 이슈

• react-table 활용 시 열 너비 문제 많음
  • 테이블 너비 100% 할당해도 가상화된 행들과 풀 너비가 함께 안 맞는 문제 존재
• CSS 유틸리티 프레임워크(예: Tailwind CSS)에 대한 의견
  • 클래스 이름이 너무 길어지고 복잡해져 HTML 가독성 저하
  • 하지만 개발 속도와 코드 일관성 유지에 강점
• 부트스트랩 같이 전통적인 CSS 프레임워크도 상황에 따라 여전히 좋음

7. 네이티브 앱과 코드 업데이트 방식

• 네이티브 앱(iOS/Android)에서 앱 코드 변경은 엄격한 심사 대상
  • 네이티브 코드를 직접 변경하거나 이미지 등 주요 리소스 변경 시 앱스토어 심사 필수
• React Native, Flutter 같은 크로스 플랫폼 앱은 JS 코드 부분만 업데이트하는 코드 푸시(Code Push) 사용
• 코드 푸시는 네트워크를 통한 JS 코드, 리소스 업데이트를 빠르게 적용할 수 있는 방식
• 네이티브 앱이 아니라 웹뷰(WebView) 기반 앱은 내부 업데이트 서버에서 리소스 관리 가능해 별도 심사가 필요 없는 경우도 있음

8. 개발자 장비 및 하드웨어 이야기

• 모니터 선택, 무게, 모니터암 호환성에 대한 토론
• 게이밍용 OLED 모니터는 지연시간이 적고 색감이 뛰어나지만 가격이 높음
• 이어폰/헤드폰 취향 및 추천 제품 이야기 (에어팟맥스, 슈어, 브리츠 등)
• 개발자들이 좋아하는 제품, 운동 이야기, 그리고 직접 만든 코딩 장비들에 대한 유쾌한 토론
• 하드웨어 오타쿠들의 애정과 관련 정보 공유

9. 프로젝트 데이터 처리 및 모킹

• 포트폴리오용 프로젝트에 현실적인 데이터가 없을 때 대처법 질문
• 크롤링해서 실제 데이터를 쓰는 것에 대한 면접관 평가 우려
• Faker.js 같은 가짜 데이터 생성 라이브러리를 사용하여 목 데이터 생성 추천
• 모킹 데이터는 프론트엔드와 백엔드에서 재사용 가능하며, 컴포넌트 단위 개발 및 테스트에 도움 됨
• 목 데이터 사용은 면접관도 일반적으로 이해하고 인정하는 방식임

10. 커뮤니티 문화 및 자유로운 소통

• 개발자들 간의 자유롭고 유머러스한 소통 분위기
• 가벼운 잡담부터 진지한 기술 질문까지 다양하게 오감
• 웃음 가득한 드립, 애니메이션, 게임, 군대, 영어 강사 이야기 등
• 서로 응원하며 정보 공유하는 긍정적 커뮤니티 문화

면접팁⚡

• 면접 과제 및 실무 과제 준비법:
  • 실제 데이터를 그대로 사용하기보다는 Faker.js 같은 가짜 데이터 라이브러리로 현실성 있는 목 데이터 생성
  • 코딩 테스트 준비 시 알고리즘 문제뿐 아니라, 팀 프로젝트에서 요구하는 과제나 실무형 문제에 대비하도록 하자
• 코딩 테스트와 면접 스타일:
  • 라이브 코딩에선 서치가 제한적이나, 면접관이 힌트를 주는 경우도 있어 너무 긴장하지 말 것
  • 전화 면접과 대면 면접은 준비 과정은 같으나 전화 면접은 다소 부담이 덜할 수 있음
• SSR 작업 시 응답이 느린 API 처리법:
  • 느린 API 데이터 별도 클라이언트 컴포넌트로 분리해 비동기로 처리
  • SSR 최대 대기 시간 조정 가능하나, 사용자 경험을 해칠 수 있으니 적당한 타임아웃 설정 필요

링크🔗

• Faker.js - 목 데이터 생성 라이브러리
• You Might Not Need jQuery - jQuery 대체 vanilla JS 사용 팁
• Next.js 공식 문서 - SSR과 앱 라우터 관련 공식 자료
• React Table GitHub - React 테이블 라이브러리
• Node.js Inspector 사용법 - 서버 사이드 디버깅 방법
• Apple App Store 심사 가이드 - 네이티브 앱 업데이트 정책
• CodeSandbox 예제 - react-table - 테이블 너비 예시