2024-09-25

목차

1. GitHub에 React 프로젝트 올리기
2. 이메일 인증 문제 및 외국 기업 업무처리
3. React 파일명 컨벤션과 코드 관리
4. OAuth2 구글 로그인 리다이렉트 문제
5. React의 use client와 클라이언트 컴포넌트 개념 정리
6. 디자인 시스템과 atomic 디자인 패턴
7. 영어 학습과 개발자 커뮤니케이션
8. Next.js 클라이언트 컴포넌트와 SSR/CSR 차이
9. 효율적인 개발 방법과 코드 추상화
10. 일상 속 개발자 이야기 및 건강관리 팁

1. GitHub에 React 프로젝트 올리기

• React 프로젝트를 GitHub에 올릴 때 보통 src 폴더를 포함하여 필요한 모든 소스 파일을 올려야 에러 없이 동작한다는 의견이 있었음.
• 하지만 node_modules와 같이 의존성 설치 후 자동 생성되는 폴더는 올리지 않는 것이 일반적임.
• 즉, 프로젝트 초기 커밋은 전체 소스코드, 의존성은 .gitignore에 포함해서 제외.
• 참고로 untracked file은 Git이 아직 추적하지 않는 신규 파일을 뜻하며, 작업 내역에 필요한 파일은 반드시 커밋해야 함.

2. 이메일 인증 문제 및 외국 기업 업무처리

• 해외 서비스 이메일 인증 프로세스 이슈 사례 공유:
  이메일 인증 실패한 비활성 계정이 DB에 남아 신규 가입자가 기존 ID를 사용할 수 없게 되는 문제 발생.
• 이로 인해 1000여개의 의미 없는 더미 계정이 생성, 서비스 이용 불편 초래.
• 외국 기업의 업무 매뉴얼이 불합리하다는 의견이 나왔음.
• 이런 문제는 고객센터와 소통하여 개선 요청하거나, 가능하다면 인증 실패 계정 일정 기간 후 삭제 로직 구현 필요.

3. React 파일명 컨벤션과 코드 관리

• React 컴포넌트 파일명은 보통 PascalCase(MyComponent.tsx)를 추천.
• 그러나 회사나 팀의 규칙에 따르는 것이 가장 중요함.
• 일부는 대문자 포함을 싫어하기도 하며, 일관된 네이밍 규칙 필수.
• 커밋 시 불필요하게 중복 레포를 만들지 않도록 유의할 것.
• 또한 VSCode, dependency graph 등 플러그인을 활용해 컴포넌트 관계를 시각화하는 것도 도움이 됨.

4. OAuth2 구글 로그인 리다이렉트 문제

• Next.js 프론트와 Spring 백엔드 연동 시, OAuth2 로그인 후 백엔드에서 Next.js로 리다이렉트가 안 되는 문제 발생.
• 원인 중 하나는 백엔드가 클라이언트 요청 헤더 중 x-forwarded-* 값을 받지 못해서 발생함.
• X-Forwarded-* 헤더: 클라이언트 IP, 프로토콜 등 프록시를 거친 요청 정보를 백엔드에 전달하는 헤더.
  • 백엔드가 이를 받아 처리해야 올바른 리다이렉트 URL 생성 가능.
• 해결 팁
  1. 리버스 프록시 설정에서 x-forwarded-* 헤더를 전달하도록 설정.
  2. 백엔드 프레임워크(Spring)에서 해당 헤더를 읽도록 프로퍼티 설정 필요 (Tomcat 설정 참고).
  3. 백엔드가 클라이언트 요청 정보를 제대로 인지해 구글 OAuth 콜백을 적절히 처리하게 해야 함.
• 백엔드에서 OAuth 토큰을 받은 후, 누구 사용자 인증인지 확인하고, 최종 프론트 페이지로 정상 리다이렉트 처리해야 함.

5. React의 use client와 클라이언트 컴포넌트 개념 정리

• "use client"는 Next.js/React에서 해당 파일을 클라이언트 컴포넌트로 표시하는 지시자임.
• 클라이언트 컴포넌트는 브라우저 단에서 동작하는 부분을 말하지만, 여기서 말하는 CSR(Client-Side Rendering)과는 차이가 있음.
  • CSR은 첫 로딩 이후 클라이언트에서만 렌더링하는 방식.
  • Client Components는 서버사이드 렌더링 중에도 렌더링되며(SSR의 하위 개념), 리액트에서 UI의 특정 부분을 클라이언트에서만 처리하는 컴포넌트임.
• 따라서 "use client"가 붙은 컴포넌트들은 서버에서 프리 렌더링(SSR) 되면서도 클라이언트에서도 동작하는 코드를 포함함.
• 자세한 내용은 React 공식 문서와 Next.js 공식 가이드 참고 추천.

6. 디자인 시스템과 atomic 디자인 패턴

• 디자인 시스템은 팀 내 디자이너가 주도해 정하는 것이 원칙임.
• Atomic 디자인은 UI를
  • 원자(Atoms),
  • 분자(Molecules),
  • 유기체(Organisms) 레벨로 쪼개 구성하는 설계 방법론임.
• 실무에 바로 적용하기 어려울 수 있으니, 이미 존재하는 디자인 패턴과 토큰 시스템(https://spectrum.adobe.com/page/design-tokens/, https://m3.material.io/) 참고하는 게 좋음.
• 컴포넌트 추상화 시, 기능적으로 완전히 다른 것은 개별 컴포넌트로, 스타일 차이 정도면 props로 조정하는 방식 추천.
• 과제나 프로젝트 성격에 따라 편리한 방법으로 유연하게 조정 가능.

7. 영어 학습과 개발자 커뮤니케이션

• 영어 잘하는 기준은 사람마다 다르나,
  • 많은 입력과 지속적인 사용, 반복적 숙달이 핵심임.
  • 단기간 특강식 학습은 한계가 분명함.
• 실제 개발자들은 문법에 완벽하지 않아도 의사소통 가능하면 영어를 잘한다고 판단하는 경우가 많음.
• 영어 실력이 향상되면 기술 문서 독해, 해외 자료 활용, 글로벌 커뮤니티 활동이 한결 쉬워짐.
• 추천 학습법
  • 매일 조금씩 영어 읽기, 듣기 노출
  • 문법보단 실제 사용과 이해에 중점을 둘 것
  • 영어권 코드 예제, 공식 문서 자주 접하기

8. Next.js 클라이언트 컴포넌트와 SSR/CSR 차이

• Next.js의 클라이언트 컴포넌트는 전통적인 CSR과는 달리,
  • 초기 페이지 로드는 서버에서 SSR(서버 사이드 렌더링)로 진행되고,
  • 이후 후속 탐색 시 클라이언트 컴포넌트 영역에서만 리렌더링(부분적 CSR)이 이뤄짐.
• "use client" 지시어가 붙은 컴포넌트 내부는 브라우저에서 동작하나, 렌더링은 SSR도 가능함.
• 즉, Next.js 13+에서는 고객 경험 향상을 위해 SSR과 CSR의 장점을 조합해 사용함.
• 관련 문서 읽어볼 것:
  https://nextjs.org/docs/app/building-your-application/rendering/client-components

9. 효율적인 개발 방법과 코드 추상화

• 지나친 코드 추상화는 오히려 복잡도를 높이고 유지보수 어려움을 일으킬 수 있음.
• 중복된 코드가 많더라도 가독성 높고 명확한 코드가 더 중요할 때가 많음.
• 추상화는 너무 미루지 말고, 필요한 시점과 경우에 신중히 적용하는 것을 추천함.
• 자식 컴포넌트에 너무 많은 props를 떠넘기지 않고, 상위 컴포넌트에서 적절히 역할 분담 하는 게 좋음.

10. 일상 속 개발자 이야기 및 건강관리 팁

• 개발자의 체력 관리, 운동과 업무 효율에 관한 조언 공유됨.
• 퇴근 후 운동, 자기 전에 유튜브로 리눅스 커널 개발 공부 등 자기계발 사례 많음.
• 업무 효율을 위해 routeChangeStart 같은 이벤트 활용이나 cache 관리법도 논의됨.
• 잡담 포함 다양한 소통 속에서도 기술적 관심사를 놓치지 않는 자세가 중요함.

면접팁⚡

• React와 Next.js의 SSR/CSR 차이점 명확히 이해할 것

  • "use client" 지시어의 의미와 클라이언트 컴포넌트 역할 설명 가능해야 함.

• OAuth2 인증 플로우에서 리다이렉션 문제 해결 방법 숙지

  • X-Forwarded-* 헤더의 역할과 서버 설정 방법을 알고 있으면 면접관에 좋은 인상.

• Git으로 프로젝트 관리 시 꼭 제외해야 하는 파일과 보통 올리는 파일 구분

  • node_modules 제외, src 포함 등 기본 원칙 이해 필요.

• 디자인 시스템과 컴포넌트 추상화에 대한 이해

  • Atomic 디자인 개념 및 팀 협업 시 업무 분장 차이(디자이너 vs 개발자) 설명 준비.

• 영어 실력 개발 경험이나 노력에 대해 질문 시, 꾸준한 노출과 실제 활용 중심으로 답변

  • 단기간이 아닌 지속적 학습 중요성 강조.

링크🔗

• Graph Query Language (Wikipedia)
• React Server Components Discussions
• Tomcat X-Forwarded Headers 설정 관련 블로그
• Next.js Client Components 공식 문서
• Atomic Design Guide (Adobe Spectrum)
• Material 3 Design System
• TanStack Query SSR Guide
• Next.js 공식 템플릿
• User Persona UX Guide (Wix)
• User Persona 기법 (위시켓)
• Next.js useSearchParams API
• Next.js Server Components vs Client Components 설명 (Discussion 댓글)