COMMIT.chat
View Bookmarks
react 썸네일react

2024-04-22

목차

  1. Next.js, Nest.js, Nuxt.js 비교
  2. Vercel 배포 및 zlib 의존성 문제
  3. 글로벌 스타일과 스타일 오버라이딩
  4. 항해99플러스 부트캠프 경험 및 수강 후기
  5. React Native WebView onMessage 에러 해결법
  6. 퍼블리셔 vs 프론트엔드 개발자 협업 이슈
  7. 화면 분할 및 Resizable 패널 라이브러리
  8. Next.js 13 쿠키 관리 방식
  9. Turborepo 도입 배포 워크플로우 고민
  10. React 라이브 코딩 면접 경험과 팁

1. Next.js, Nest.js, Nuxt.js 비교 🔍

  • 핵심: Next.js, Nest.js, Nuxt.js는 모두 JavaScript/TypeScript 기반이지만 역할이 다름.
  • Next.js: React 기반 SSR(Server Side Rendering) 프레임워크. 프론트엔드 및 UI 서버 렌더링에 최적화됨.
  • Nest.js: Node.js 백엔드 프레임워크. 서버 사이드 로직, API 구축에 사용됨.
  • Nuxt.js: Vue.js 기반 SSR 프레임워크. Vue 에코시스템에서 Next.js와 유사한 역할 수행.
  • 의견: 개발 목적에 따라 알맞게 선택해야 하며, 세 가지 모두 '삼형제'처럼 웹 개발 스택에서 자리 잡음.

2. Vercel 배포 및 zlib 의존성 문제 ⚠️

  • 문제: Next.js 프로젝트를 Vercel에 배포 시 npm ERR! No dependencies found matching zlib 에러 발생.
  • 핵심 원인: package.json에서 zlib를 명시적으로 설치하려는 시도가 문제일 수 있음.
  • 설명:
    • zlib는 Node.js 내장 라이브러리로, 일반적으로 별도 설치하지 않아도 됨.
    • 의존성 관리 오류, Node 버전 불일치 또는 레거시 옵션 설정 필요 가능성 있음.
  • 해결 팁:
    • package.json에서 불필요한 zlib 명시 제거.
    • Node.js 버전 확인 및 적절한 버전 사용.
    • yarn why zlib 명령어로 의존성 트리 검사.
  • 부가정보: 패키지 의존성을 꼼꼼히 관리하는 것이 배포 안정성에 중요함.

3. 글로벌 스타일과 스타일 오버라이딩 🎨

  • 질문: 컴포넌트 내부에서 <body> 태그 스타일을 변경하고 싶지만 어렵다는 고민.
  • 설명:
    • CSS에서 body는 최상위 요소이며, 컴포넌트 범위 내에서 직접 접근하거나 변경하려고 하면 정상 작동하지 않음.
    • 스타일 컴포넌트(styled-components) 내부에서 body를 작성하면 해당 div에 있는 가상 body 요소를 타겟팅하게 됨.
  • 해결 방법:
    • JS의 Context API 사용해 전역 상태로 CSS 변수 또는 테마 값을 수정하는 방식을 추천.
    • 전역 스타일을 createGlobalStyle 컴포넌트로 관리하거나, CSS변수를 동적으로 변경하는 방법 권장.
    • CSS 오버라이딩 시, 선택자 우선순위 및 적용 범위를 주의할 것.
  • 팁: 글로벌 스타일 변경은 JavaScript 단에서 다루는 게 가장 유연.

4. 항해99플러스 부트캠프 경험 및 수강 후기 📚

  • 내용:
    • 항해99플러스는 10주 과정으로 주니어 개발자 대상.
    • 가격은 180만 원으로 부트캠프에 비해 저렴하지만, 커리큘럼 질에 대한 평가는 엇갈림.
    • 피드백 시간은 팀 단위로 하루 1~1.5시간 정도, 실질적인 개인 피드백은 적은 편.
  • 의견:
    • 기본기가 부족한 수강생이 많으면 학습 분위기에 영향 주기 쉽다는 경험도 공유됨.
    • 개인 코칭이나 사이드 프로젝트로 실전 감각을 키우는 것이 추천됨.
    • 개인적으로 사람을 찾아 시간당 코딩 리뷰를 받는 방법도 비용 대비 효율적일 수 있음.
  • 참고: 부트캠프 선택 시 비용 대비 커리큘럼, 피드백 시스템, 개인 맞춤 지원 여부 확인 필수.

5. React Native WebView onMessage 에러 해결법 🛠️

  • 문제: onMessage prop에 커스텀 함수를 넣으면 failed to call into javascript module method webview messagehandler 에러 발생.
  • 원인 분석:
    • 최신 react-native-webview 버전(예: 13.8.6)에서 발생하는 알려진 버그임 (이슈 #3395 참고).
    • onMessage에 직접 함수 참조를 넣을 때 문제가 생길 수 있음.
  • 해결 팁:
    • react-native-webview를 안정된 이전 버전(예: 13.6.4)로 다운그레이드 권장.
    • onMessage={() => test()} 형태의 래핑으로도 해결 안 되는 경우 있음.
    • 캐시 리셋(react-native start --reset-cache) 후 재빌드 시도.
  • 참고 링크: https://github.com/react-native-webview/react-native-webview/issues/3395

6. 퍼블리셔 vs 프론트엔드 개발자 협업 이슈 🤝

  • 현황:
    • 퍼블리셔가 단순히 HTML, CSS만 다루고 JS 프레임워크 이해가 부족한 경우가 많음.
    • 리액트 가능한 퍼블리셔도 있으나, 전반적인 개발 역량과 컴포넌트 구조 이해는 보통 개발자보다 부족한 편.
  • 의견:
    • 퍼블리셔에게 단순 스타일링 뿐 아니라 컴포넌트 개발 요구는 비효율적.
    • 프론트엔드 개발자에게 퍼블리싱 업무까지 맡기는 경향 증가.
    • 협업 효율 및 품질 면에서 스타일링에 능숙한 프론트엔드를 뽑는 것이 현실적.
  • 협업 팁:
    • 명확한 역할 분담과 커뮤니케이션 중요.
    • 퍼블리셔가 컴포넌트 단위로 동작하도록 HTML/CSS 작성하도록 유도.
    • 가능하다면 퍼블리셔 출신 프론트엔드 개발자를 육성하는 것도 방법.

7. 화면 분할 및 Resizable 패널 라이브러리 🖥️

  • 질문: React에서 좌우 컴포넌트 크기 조절 가능한 'divider' 기능 구현 관련.
  • 추천 라이브러리:
  • 사용법 요약:
    • 분할 영역(div1, div2)을 각각 패널로 정의.
    • 패널 간 사이즈 조절용 Divider를 배치.
    • React useRef로 각 분할 패널을 관리하고 이벤트 리스너 설정.
  • 팁: 직접 구현보다 검증된 라이브러리를 사용해 시간 절약.

8. Next.js 13 쿠키 관리 방식 🍪

  • 질문: Next.js 13에서 쿠키 관리를 서버 사이드 API 내에서 하는 것이 일반적인가? CSR(Client Side Rendering)에서 쿠키를 직접 읽는 방법은?
  • 답변:
    • Next.js 13은 App Router 기반으로 서버 컴포넌트가 기본이며, 쿠키를 안전하게 다루려면 서버 API를 통한 처리 권장.
    • CSR 측면에서 document.cookie로 일부 쿠키를 읽을 수 있으나 보안 및 일관성 문제 발생 가능.
    • 쿠키가 HttpOnly 설정된 경우 클라이언트에서 접근 불가능.
  • 권장 방법:
    • 서버 사이드에서 쿠키를 읽어 필요한 데이터를 전달하거나 API 요청에 반영.
    • 클라이언트에서는 상태관리 혹은 세션 방식으로 쿠키 데이터를 간접 관리.

9. Turborepo 도입 배포 워크플로우 고민 🔄

  • 상황: 기존 ECS 블루/그린 배포와 S3-CloudFront 캐시 기반 배포에서 Turborepo 도입 시 배포 워크플로우를 어떻게 구성해야 할지 난감.
  • 설명:
    • Turborepo는 모노레포 관리 및 패키지 병렬 빌드를 돕는 툴.
    • 배포 방식은 기존 인프라(ECS, S3, CloudFront) 사용 가능하나 파이프라인과 빌드 스크립트가 달라질 수 있음.
  • 팁:
    • Turborepo 빌드 결과물을 각 서비스별로 분리해 ECS 및 S3에 맞게 배포하도록 스크립트 커스터마이징 권장.
    • CI/CD 워크플로우에서 캐시 활용, 병렬처리 장점을 살리되 여러 서비스 배포 전략 점검 필요.
  • 조언: 문서 및 커뮤니티 사례 참고 후 단계별 자동화 구성 권장.

10. React 라이브 코딩 면접 경험과 팁 💡

  • 질문: 3년차 React 개발자로 라이브 코딩 면접 예상, 범위(바닐라 JS, React, Next.js 허용 여부)를 미리 물어봐도 되는지.
  • 답변:
    • 면접 전에 범위 확인은 가능하나 회사마다 다름.
    • 라이브 코딩은 보통 쉬운 과제가 주어지며 문제 해결 능력과 협업 태도 관찰 목적.
    • 비대면일 경우 코드 검색, 문서 참고가 허용되기도 함.
  • 면접 준비 팁:
    • 기본적인 React, JavaScript 숙련도 필수.
    • 면접관과 커뮤니케이션 능력도 중요 — 모르는 점 솔직히 묻는 것도 긍정적 인식.
    • 예전 프로젝트 경험 및 문제 해결 사례 준비.
  • 팁: 실전과 유사한 환경에서 미리 연습하고, 질문할 때 예의 있는 태도 유지하기.

면접팁⚡

  • 라이브 코딩 면접 시:

    • 어려운 문제보다는 기본 개념과 문제 해결 과정, 태도를 평가하는 경우가 많음.
    • 모르는 부분은 솔직하게 이야기하고, 어떻게 해결하려는지를 공유하는 것이 좋음.
    • 테스트 환경과 사용 가능한 도구, 라이브러리를 미리 확인하고 준비할 것.

  • 퍼블리셔와 협업 면접:

    • 퍼블리셔의 역할과 한계를 인지하고 프론트엔드 개발자로서 어떻게 협업할지 명확히 답변하면 호감도 상승.

링크🔗

#Nextjs#ReactNative#배포문제#퍼블리셔협업#항해99#라이브코딩면접#Turborepo#웹뷰에러#스타일오버라이딩#ResizablePanels
이전 포스트

2024-04-21

2024년 4월 21일
다음 포스트

2024-04-23

2024년 4월 23일