COMMIT.chat
View Bookmarks
react 썸네일react

2024-04-28

목차

  1. React forwardRef와 ref 전달 방식
  2. Next.js Open Graph(OG) 이미지 문제 해결
  3. React 대시보드 프레임워크 선택 고민과 추천
  4. 결혼식 대화 및 관련 문화 공유
  5. React 코드와 HTML 분리 관련 토론
  6. CSS 애니메이션으로 스크롤 기반 인터랙션 구현하기
  7. 알고리즘 점화식의 빅오 표기 vs 빅세타 표기 논의
  8. 깃허브 오픈소스 프로젝트 홍보 및 커뮤니티 활동
  9. React 라이브러리 및 프레임워크 장단점 비교
  10. 기타 개발자 소소한 일상 및 질문 공유

1. React forwardRef와 ref 전달 방식

  • React 컴포넌트에서 ref를 하위 컴포넌트에 전달하려면 forwardRef로 감싸줘야 함.
  • forwardRef를 사용하지 않으면 ref가 전달되지 않아 에러가 발생함.
  • 단, ref가 아닌 다른 이름의 props로는 별 문제 없이 전달 가능함.
  • 초보자의 경우 ref의 역할과 forwardRef의 필요성을 이해하는 게 중요함.
  • ref: React에서 DOM 요소나 클래스형 컴포넌트 인스턴스에 직접 접근할 때 쓰는 특별한 prop임.
  • forwardRef: ref를 명시적으로 자식 컴포넌트에 전달해줘야 할 때 사용하는 React API.

2. Next.js Open Graph(OG) 이미지 문제 해결

  • Next.js 프로젝트 배포 시 OG 이미지가 하얗게 뜨는 문제 발생 사례 공유.

  • 원인은 배포된 도메인 경로(metadataBase 설정)가 맞지 않아서임.

  • 해결법은 metadataBase를 배포 URL로 지정하고, OG 이미지 URL도 절대경로로 설정하는 것.

  • 예시:
    js export const metadata = {
    metadataBase: new URL("https://www.yoururl.com"),
    openGraph: {
    images: [{ url: "https://www.yoururl.com/og-image.png" }],
    ...
    }
    }

  • 배포 도메인과 이미지 경로 문제를 꼭 체크해야 OG 미리보기 정상 동작함.

3. React 대시보드 프레임워크 선택 고민과 추천

  • React에서 대시보드 UI를 만들 때 여러 라이브러리가 있음:
    • MUI (Material-UI)
    • Ant Design (antd)
    • React Admin 등
    • Semantic UI React
    • TailwindCSS 기반 커스텀 또는 shadcn UI 등
  • MUI: 가장 스타가 많으며, 모바일 최적화가 잘 되어 있지만 PC 대시보드에선 커스터마이징이 다소 번거로울 수 있음.
  • Ant Design: 많이 쓰이나 버그, 기여 관리 문제 등으로 불만 있음.
  • React Admin: Backend provider를 제공해 대시보드 구축에 적합함.
  • shadcn UI: Tailwind 기반으로 문서가 잘 정리되어 있고 최근 인기가 높음.
  • 대시보드 프레임워크를 고를 때는 프로젝트 요구사항과 개인 취향, 성능 고려 필요함.
  • 프레임워크가 무겁다면 Tailwind 등으로 직접 만드는 것도 대안임.

4. 결혼식 대화 및 관련 문화 공유

  • 결혼식 시간은 보통 1~2시간 정도임.
  • 식사 여부에 따라 총 시간과 비용이 달라짐.
  • 축의금과 식사 관련 에피소드 다수 공유됨 (민초단 유머 포함).
  • 개발자들 사이에서는 결혼식 문화 이야기가 친근한 소통 소재임.

5. React 코드와 HTML 분리 관련 토론

  • JSX 내에 로직과 마크업이 섞이는 점을 불편해 하는 질문 있었음.
  • 대안으로는:
    • 로직은 컴포넌트 상단으로 분리
    • 스타일 관련은 CSS 또는 스타일링 라이브러리 활용
    • 혹은 Vue 같은 다른 프레임워크 시도 추천
  • JSX는 자바스크립트 안에 XML 형태 마크업을 작성하는 React 문법임.
  • 전통적인 HTML+JS 분리 방식과 다르게, UI 컴포넌트에 필요한 로직과 마크업을 한 곳에 모으는 장점 있음.

6. CSS 애니메이션으로 스크롤 기반 인터랙션 구현하기

  • 텍스트를 중앙 고정시키고 스크롤 시 크기 변경 및 애니메이션 효과를 주는 기능 문의.
  • CSS 키프레임 애니메이션과 바닐라 JS(순수 JS)로 충분히 구현 가능함.
  • 스크롤 인터랙션은 종종 디자이너와 긴밀히 협업 필요하며 복잡한 경우 JS와 CSS 애니메이션을 혼합 사용.

7. 알고리즘 점화식의 빅오 표기 vs 빅세타 표기 논의

  • 점화식에 따른 시간복잡도 표기 시 빅오 표기법과 빅세타 표기법 중 어떤 게 올바른지 질문.
  • 빅오 표기법은 상한을 나타내고, 빅세타는 정확한 성장률을 나타냄.
  • 알고리즘 분석 시 어떤 상황에서 어느 표기를 쓸지에 대한 기본 이해 필요.

8. 깃허브 오픈소스 프로젝트 홍보 및 커뮤니티 활동

  • 한 개발자는 문장과 글의 연관성을 분석하는 라이브러리를 개인, 조직으로 운영 중임.
  • 활동 독려 및 팔로우, 스타 부탁하는 모습도 있음.
  • 오픈소스 참여, 이슈 제기, PR 등 적극적인 커뮤니케이션과 협력이 중요함.
  • 깃허브 내 인기 프로젝트와 신생 프로젝트들의 스타 수 비교도 있었음.

9. React 라이브러리 및 프레임워크 장단점 비교

  • MUI: 스타 수 최고, 모바일 친화적, 커스터마이징 번거로움 존재.
  • Ant Design: 인기 많지만 버그와 기여 문제로 불만도 있음.
  • shadcn UI: 신흥 대세, Tailwind 기반, 문서 잘 되어 있음.
  • React Admin: Backend provider 제공, 어드민 대시보드에 특화됨.
  • 선택 기준은 프로젝트 성격, 사용자 경험, 개발 편의성 등을 고려해야 함.

10. 기타 개발자 소소한 일상 및 질문 공유

  • 맥북 프로 M2 8코어 16GB 512GB 구성 가격 적절성 문의
  • Udemy 할인 시기 질문과 경험 공유
  • React에서 코드를 시각화하는 방법 고민
  • 소소한 음식 추천과 개발자 밈 공유
  • 개발자들의 활발한 대화와 소통이 느껴지는 분위기

면접팁⚡

  • React forwardRef 이해하기

    • ref가 어떤 상황에서 필요한지와 forwardRef를 왜 사용하는지를 정확히 설명 가능해야 함.
    • ref 전달 실패 시 발생하는 문제점을 사례와 함께 이야기하면 좋음.

  • Next.js에서 메타데이터 관리

    • OG 이미지 등 메타데이터 설정 시 배포 도메인 주소를 정확히 인식시키는 방법을 알고 있으면 강점.

  • UI 라이브러리 선택 이유 논리적으로 설명하기

    • MUI vs Antd vs shadcn 같은 라이브러리를 프로젝트 특성에 맞게 비교 분석하는 능력 보여주기.
    • 문제점과 한계도 솔직하게 언급하는 성숙한 자세를 보일 수 있음.

  • JSX와 코드 분리 고민

    • JSX 내 코드 집중에 대한 장단점 이해와, 만약 다른 분리 방식을 추천할 경우 그 이유를 말할 수 있어야 함.

링크🔗

#React#forwardRef#Nextjs#OpenGraph#UI프레임워크#대시보드#CSS애니메이션#오픈소스#깃허브#개발자토크
이전 포스트

2024-04-27

2024년 4월 27일
다음 포스트

2024-04-29

2024년 4월 29일