개발자들이 남긴 기록..

인사와 분위기: 개발자들의 친근한 대화
Next.js 15.2.0 업데이트 내용과 특징
React 상태관리와 스토리지 활용 팁
React Router와 TanStack Router 비교
React 입문자를 위한 학습 자료 추천
React Native Gesture 충돌 문제 해결
TailwindCSS와 디자인 협업 방식
WYSIWYG 에디터 선택과 React 호환성
CRA 지원 종료 후 빌드 도구 변화
기타 잡담 및 커뮤니티 문화

1. 인사와 분위기: 개발자들의 친근한 대화

개발자들끼리 가벼운 인사부터 시작해 웃음과 밈 섞인 대화를 나눔.
친숙한 분위기에서 일상적인 이야기와 개발 이야기 자연스럽게 섞임.
커뮤니티 내에서 자주 보이는 인물 화수님과 관련된 추억팔이, 그리고 작별 인사도 오감.

2. Next.js 15.2.0 업데이트 내용과 특징

최신 버전 15.2.0이 릴리즈됨.
대다수 업데이트는 버그 수정 중심.
큰 기능 변화는 없으며, 공식 GitHub 릴리즈 페이지에 상세 내용 안내됨.
(https://github.com/vercel/next.js/releases/tag/v15.2.0)
마이너 업데이트로서 안정화 작업 위주임.

Next.js란?
Next.js는 React 기반의 SSR(서버 사이드 렌더링) 및 SSG(정적 사이트 생성) 기능을 제공하는 프레임워크이다. 이를 통해 SEO 최적화와 빠른 초기 로딩이 가능함.

3. React 상태관리와 스토리지 활용 팁

로그인 후 사용자 정보 관리는 상태관리 라이브러리(예: Zustand)와 로컬/세션 스토리지를 함께 사용하는 것이 일반적.
상태관리는 주로 앱 동작 중 데이터를 관리하지만, 새로고침 시 데이터가 초기화될 수 있음.
이를 보완하기 위해 로컬 스토리지 혹은 세션 스토리지에 일부 데이터를 저장해 복원함.
언제 어떤 방법을 사용해야 하는지에 대해 정형화된 정답은 없고, 상황에 따라 적절히 선택하는 것이 중요하다.

상태관리 라이브러리란?
React 컴포넌트 간에 상태를 효율적으로 공유하고 업데이트하기 위한 도구. 대표적으로 Redux, MobX, Zustand 등이 있음.

4. React Router와 TanStack Router 비교

React Router는 전통적인 라우팅 라이브러리.
TanStack Router는 최근 주목받는 라우팅 도구로, 파일 기반 라우팅과 SSR 지원이 강점.
TanStack Router는 서버 사이드 렌더링 환경에서도 원활히 동작하여 Next.js와 비슷한 장점을 줌.
React Router의 <Link/> 컴포넌트를 이용하는 것이 화면 전환 시 권장되는 방법.
라우팅 관련 최신 흐름을 학습하고자 하는 경우 TanStack Router 자료도 참고하면 좋음.

5. React 입문자를 위한 학습 자료 추천

초보자에게는 React 공식 문서를 우선적으로 권장.
'한입 리액트'라는 책과 강의가 좋은 입문 자료로 언급됨.
강의나 책 선택 시 개인 학습 스타일과 난이도를 고려할 필요가 있음.
샘플 강의를 보고 난이도가 맞으면 수강하는 것이 효과적임.

6. React Native Gesture 충돌 문제 해결

react-native-gesture 라이브러리 충돌로 인해 빌드 실패 사례 발생.
기존 패키지를 제거 후 다시 설치할 때 React 버전 불일치로 인한 충돌이 보임.
이 경우 React 재설치를 권하거나 강제 업그레이드를 시도할 수 있음.
버전 호환성을 맞추기 위해서는 전체 패키지 의존성을 다시 점검하는 것이 중요함.

7. TailwindCSS와 디자인 협업 방식

퍼블리싱 담당이나 디자인 팀에서 TailwindCSS를 사용하냐는 질문에 '아니요'라는 답변이 많음.
보통은 디자이너가 Figma 같은 디자인 툴로 시안을 만들고, 프론트엔드 개발자가 이를 HTML/CSS로 구현하거나 직접 퍼블리싱하는 방식이 일반적.
TailwindCSS는 프론트엔드 개발자가 생산성을 높이기 위한 CSS 유틸리티 프레임워크임.

8. WYSIWYG 에디터 선택과 React 호환성

Quill.js 기반의 React용 에디터들이 React 19 이후 호환성 문제가 있음을 언급.
react-quill은 버그가 많고 업데이트가 멈춘 상태.
직접 Quill.js를 래핑(wrapping)하여 사용하는 사례 제안됨.
커스텀 및 즉각적인 버그 수정을 할 수 있어 래핑 방식을 선호함.

WYSIWYG 에디터란?
"보는 대로 편집"이 가능한 편집기로, 사용자가 HTML 등의 태그를 몰라도 폼 입력하듯 문서 작성이 가능함.

9. CRA 지원 종료 후 빌드 도구 변화

Create React App(CRA) 지원이 종료되면서 Vite, esbuild와 같은 경량 빌드 도구로 전환하는 추세.
Vite는 빠른 빌드와 뜨거운 모듈 리플레이스먼트(HMR)를 제공.
esbuild 또한 매우 빠른 빌드 속도가 장점.
새 프로젝트에서는 CRA 대신 이들 도구로 시작하는 경우가 크게 늘어남.

10. 기타 잡담 및 커뮤니티 문화

개발자들 사이에서는 음악, 문학적 드립, 지역 이야기 등 소소한 일상 대화도 활발.
기술 질문 뿐 아니라 업무 중 피로 해소법, 학습 자료 추천 등 다양한 주제가 자연스럽게 오감.
커뮤니티 내부 친목과 정보 교류가 부드럽게 이뤄지는 모습이 돋보임.

면접팁⚡

React Router vs TanStack Router

면접에서 React 라우팅 경험 질문 시, React Router와 TanStack Router의 차이점과 장단점을 숙지하면 좋음.
SSR 지원 여부, 파일 기반 라우팅, 커뮤니티 지원 현황 등을 간략히 설명할 수 있으면 어필 가능.

상태관리와 스토리지 선택 기준

웹 앱에서 로그인 정보, 사용자 설정 상태 보관 방법에 대해 질문 받을 수 있음.
상태관리 라이브러리와 로컬/세션 스토리지 각각의 역할과 새로고침 대응 방안을 명확하게 말할 수 있다면 신뢰도 상승.

빌드 도구와 최신 트렌드

CRA 종료 이후 Vite, esbuild 등 새로운 빌드 시스템에 대한 이해 정도 확인 가능.
빌드 도구 선택 기준(속도, 호환성 등)을 짧게 설명하는 준비를 권장.

링크🔗

Next.js 15.2.0 릴리즈 노트: https://github.com/vercel/next.js/releases/tag/v15.2.0
React 공식 문서: https://react.dev
React Router: https://reactrouter.com
TanStack Router: https://tanstack.com/router
Quill.js 공식 사이트: https://quilljs.com

2025-02-27

목차