COMMIT.chat
View Bookmarks
react 썸네일react

2024-02-17

목차

  1. React 컴파일러 및 실험실 업데이트
  2. 크롤러 동작과 SEO 관련 문제
  3. GitHub 접속 문제와 상태 확인 팁
  4. 리액트 학습 방법 및 강의 추천
  5. 리액트에서 깊은 복사(Deep Copy) 방법
  6. React.lazy와 Suspense 활용 시 깜빡임 문제 해결
  7. Next.js fetch vs 클라이언트 상태 관리 라이브러리
  8. 쇼핑몰 클론 코딩 시 이미지 활용법
  9. 커뮤니티 프로젝트 팀원 모집 소식
  10. 개발자 멘탈 관리와 커리어 고민

1. React 컴파일러 및 실험실 업데이트 🚀

  • React 최신 업데이트와 컴파일러 기능이 곧 출시 예정이라고 함.
  • React Labs에서 실험적으로 작업 중인 여러 기능을 공식 블로그에서 공개.
  • 컴파일러는 React 코드 최적화와 성능 개선에 중점을 둠.
  • 초보자도 이해할 수 있도록, 컴파일러는 작성한 코드가 브라우저에 효율적으로 실행되도록 변환하는 도구라고 볼 수 있음.

2. 크롤러 동작과 SEO 관련 문제 🕷️

  • Next.js 로 제작된 사이트에서 robots.txt와 sitemap이 있어도 일부 크롤러가 _next 폴더만 크롤링하는 경우가 있음.
  • robots.txt는 검색 엔진 로봇에게 크롤링 영역을 안내하는 파일, 단지 권고에 불과하여 모든 크롤러가 반드시 따르지 않음.
  • Dynamic import된 Navigation 컴포넌트가 SSR(true/false 설정)일 때 크롤러가 인식을 못하는 현상은 흔히 발생.
  • 보통 네비게이션은 가능한 한 정적(Static)으로 구성하는 것이 SSR, SEO 측면에서 안정적임.
  • 크롤러가 내 사이트를 방문했다고 판단하는 지표는 메타태그, url 구조, 서버 로그, 네이버 웹마스터 도구, 구글 서치 콘솔 같은 도구를 통해 확인 가능.

3. GitHub 접속 문제와 상태 확인 팁 🐙

  • 간헐적으로 GitHub 접속이 불가능할 때는 브라우저를 재시작하거나 로그인 상태 확인.
  • 공식 상태 페이지 (githubstatus.com) 를 통해 서비스 장애 여부 확인 가능.
  • 터미널 명령어로는 상태 확인이 어려우니 UI를 이용하는 것을 권장.

4. 리액트 학습 방법 및 강의 추천 🎓

  • 단순 강의 시청보다 직접 구현해보는 것이 효과적임.
  • 초보자는 투두리스트, 게시판 같은 간단한 프로젝트를 만들어보면서 문제 해결 능력 향상 권장.
  • 강의를 무작정 듣기보다 구글링을 적극 활용해 필요한 내용만 찾아서 적용하는 능력을 키워야 함.
  • 리액트 훅(Hook) 사용법부터 차근차근 따라가며, 만들어보면서 부족한 부분 보완하기가 좋음.

5. 리액트에서 깊은 복사(Deep Copy) 방법 🔄

  • 상태 관리 시 객체의 깊은 복사가 필수인 경우가 많음.
  • 흔히 사용하는 방법:
    • JSON.parse(JSON.stringify(obj)): 간단하지만, 함수나 Date 객체 등은 복사되지 않는 단점.
    • 최신 브라우저에서 지원하는 structuredClone(obj): 모든 내장 객체도 안전하게 복사, 권장.
  • 별도 라이브러리 사용보다는 네이티브 API로 충분한 경우가 많음.

6. React.lazy와 Suspense 활용 시 깜빡임 문제 해결 💡

  • React.lazy를 이용하면 코드 스플리팅이 가능하지만 로딩 동안 빈 화면 또는 폴백 컴포넌트가 잠깐 노출되어 깜빡임이 발생함.
  • 이를 방지하려면:
    • 기존 페이지 화면을 유지하고, 새 페이지 준비 완료 후 전환하는 UI 설계 필요.
    • 스켈레톤(Skeleton) 컴포넌트를 사용해 로딩 시 사용자 경험을 매끄럽게 개선.
    • React Router DOM의 Loader 기능 또는 Next.js의 앱 라우터 기능 활용도 방법 중 하나임.

7. Next.js fetch vs 클라이언트 상태 관리 라이브러리 비교 🔄

  • Next.js의 fetch는 서버 사이드에서 데이터를 패칭하고 캐싱하는 역할을 주로 담당.
  • React Query, SWR과 같은 클라이언트 상태 관리 라이브러리는 클라이언트 단에서 데이터 캐싱, 최신화, 폴링 등을 수행.
  • 목적과 사용 위치가 다름을 이해하고, 상황에 맞게 적절한 방법 선택이 필요함.

8. 쇼핑몰 클론 코딩 시 이미지 활용법 🛍️

  • 자라, H&M 같은 쇼핑몰 이미지 API는 공개되어 있지 않고, 직접 이미지 URL을 따서 사용하는 경우가 많음.
  • 이미지는 수동으로 저장하거나 웹에서 직접 URL을 복사하는 방법을 활용.
  • 단, 이미지 서버 경로가 변경될 수 있어 유지보수에 주의가 필요함.
  • 별도의 공식 API 없이 원본 서버 리소스를 사용하는 것은 저작권 문제가 있으니 주의할 것.

9. 커뮤니티 프로젝트 팀원 모집 소식 🤝

  • ‘집초대 커뮤니티’라는 전세계 500개 집과 수만 명 구독자가 있는 프로젝트가 운영 중.
  • 지속가능한 커뮤니티 구축과 개발에 관심 있는 분들 참여 환영.
  • 관심자는 노션 페이지와 네이버 신청 링크를 통해 참여 가능.

10. 개발자 멘탈 관리와 커리어 고민 💬

  • 판매, 마케팅 등 비개발 직무에서 멘탈 소진 경험 공유.
  • 멘탈 관리는 금융 치료(재정적 안정 + 치료)라는 재미있는 표현 등장.
  • 취업 전선에 나가기 전 이력서 리뷰와 오픈프로필 활용 제안.
  • 고민 많은 시기에는 작은 성취(요리, 덕질 등)로도 행복을 느낄 수 있으니 균형 필요.

면접팁⚡

  • Next.js 프로젝트 경험 질문 시, 서버사이드 렌더링(SSR), Static Generation(SSG)과 크롤러 인식 이슈를 말할 수 있음.
  • React.lazy와 Suspense에서 사용자 경험 개선 방법에 대해 묻는 경우 스켈레톤 UI와 기존 화면 유지 기법 언급 추천.
  • 상태 관리 질문 시, 클라이언트 캐싱 라이브러리와 서버 사이드 데이터 패칭(fetch)의 차이를 명확히 설명하는 것이 좋음.
  • 깊은 복사 방법은 structuredClone이 최신 표준이며 라이브러리 의존성을 줄이는 좋은 방법임을 어필할 수 있음.

링크🔗

#React#NextJS#크롤러#깊은복사#상태관리#프론트엔드#GitHub#개발학습#멘탈관리#커뮤니티
이전 포스트

2024-02-16

2024년 2월 16일
다음 포스트

2024-02-18

2024년 2월 18일