COMMIT.chat
View Bookmarks
react 썸네일react

2024-10-07

목차

  1. 출퇴근 시간 개발과 시간 관리
  2. OAuth 2.0 구글 로그인 및 리다이렉트 이해
  3. 개발용 키보드와 주변기기 이야기
  4. HTML 태그 대신 컴포넌트 사용에 대한 고민
  5. SVG 이미지 크기 조절 문제와 벡터 그래픽 이해
  6. JSON 데이터 내 배열 및 객체 접근법
  7. 한글/영문 폰트 구분 및 CSS 활용법
  8. input 태그 자동 포커스 문제와 모바일 정책 이슈
  9. Tailwind CSS의 @apply 디렉티브와 유지보수 이슈
  10. React Suspense와 SSR 환경에서의 활용

1. 출퇴근 시간 개발과 시간 관리 ⏰

  • 출퇴근 시간에 공부와 개발을 병행하는 개발자들이 많음.
  • 늦은 새벽부터 운동, 게임, 개발까지 하루를 빡세게 활용하는 분들도 다수.
  • 기점(첫 차나 첫 출발지)이라 무조건 앉을 수 있는 점이 큰 장점.
  • 익숙해지면 출퇴근 시간에 책이나 코딩도 가능하며, 멀미도 점차 적응됨.
  • 시간관리 팁: 부족한 수면은 전철/버스 등 이동 중에 쪽잠으로 보완.

2. OAuth 2.0 구글 로그인 및 리다이렉트 이해 🔐

핵심 정리

  • OAuth 2.0에서 인증 과정은 크게 3단계: 클라이언트 → 구글 → 백엔드 → 클라이언트 순.
  • 리다이렉트 URI는 인증 후 인가 코드를 받기 위한 구글 OAuth 설정에서 매우 중요함.
  • 백엔드 리다이렉트 설정 시 구글에서 인가 코드를 백엔드 서버로 보내고, 백엔드가 이를 처리하여 JWT 토큰을 발급 후 클라이언트에 전달하는 구조가 일반적임.
  • 클라이언트가 코드에서 토큰을 직접 처리하기보다는, 백엔드가 코드를 받아 구글에 토큰 요청을 한다.
  • 토큰 전달 방법: 액세스토큰은 로컬 스토리지/메모리에 보관, 리프레시 토큰은 쿠키에 안전하게 저장하는 경우가 많음.
  • 프론트엔드가 인가 코드를 파싱하여 백엔드로 POST 요청해 토큰을 받아오는 과정이 필요.

초보자 설명

  • OAuth 2.0: 사용자가 구글 계정으로 로그인할 때, 서버가 구글에 사용자 권한 요청을 하고, 인가 코드를 받아 인증을 완료하는 표준 프로토콜.
  • 리다이렉트 URI: 인증 후 구글이 결과를 전달하는 URL로, 이 URL에 사용자 인증 정보(인가 코드 등)를 담아서 보내줌.
  • 인가 코드 추출: 클라이언트에서 URL 주소를 분석해 인가 코드를 추출하고, 백엔드로 전송해 최종 토큰을 요청함.
  • 이를 통해 안전하게 사용자 인증 정보를 관리하고, 토큰 노출 위험을 줄임.

해결 팁

  • 구글 개발자 콘솔에서 승인된 리다이렉트 URI를 올바르게 백엔드 주소로 설정할 것.
  • 클라이언트에서 인가 코드를 추출하는 코드(URLSearchParams 등) 작성 필요.
  • 백엔드에 토큰 발급용 API를 별도로 만들어서 인가 코드를 보내고 JWT 받도록 구현.
  • 토큰 저장 시 보안 이슈로 쿠키(httponly) 사용 권장.
  • OAuth 방식을 모르는 경우 혼란이 크므로 관련 문서(블로그, 공식문서)를 꼼꼼히 읽는 것이 중요.

3. 개발용 키보드와 주변기기 이야기 🎧⌨️

  • 개발자들 사이에서 키보드와 이어폰에 대한 관심이 큼.
  • 가격대와 브랜드별로 선호도가 다름 (예: 다이소 저가부터 15만원 이상 로지텍, 소니, 보스 등).
  • 키보드 타건감과 내구성이 중요하며 작업 집중도를 높이는 도구로 인식.
  • 에어팟 맥스, 소니 WH-1000XM5 등 노이즈 캔슬링(노캔) 이어폰이 인기.
  • 취미 및 업무 효율 증진에 하드웨어 투자가 큰 의미를 갖는 경우가 많음.

4. HTML 태그 대신 컴포넌트 사용에 대한 고민 ⚛

  • 일부 개발자는 <h1>, <p>와 같은 HTML 태그 대신 Typography, Text 컴포넌트를 만들어 사용.
  • 이는 스타일 재사용성을 높이고, 프로젝트마다 일관된 텍스트 스타일 적용에 유리함.
  • 하지만 초보자가 무분별하게 만능 컴포넌트를 만들면 오히려 유지보수가 어려워질 수 있음.
  • MUI(Material UI) 같은 UI 라이브러리는 기본 태그에 스타일을 입힌 컴포넌트를 제공하지만 코드가 길어질 수 있음.
  • CSS-in-JS, TailwindCSS와 같이 도구 선택에 따라 HTML 태그 사용 성향이 달라짐.

초보자 팁

  • HTML 태그의 의미를 이해한 뒤 적절히 커스텀 컴포넌트를 설계할 것.
  • 디자인 시스템과 디자이너와의 협업이 중요하며, 일관된 토큰 기반 스타일 설계 권장.
  • 종종 단순 CSS 유틸리티 클래스(Tailwind)와 조합해서 사용하므로 필요성에 따라 선택.

5. SVG 이미지 크기 조절 문제와 벡터 그래픽 이해 🖼️

  • SVG는 벡터 방식 그래픽으로, 크기 조절 시 일반적으로 깨지지 않음.
  • 뭉개지는 증상은 보통 다음과 같은 원인이 있음:
    • 브라우저별 렌더링 차이 또는 버그.
    • SVG 내 스타일(폭, 높이, 뷰박스(viewBox) 설정 문제).
    • 렌더링 환경(OS, 모니터 해상도 등) 이슈.
  • 크기를 퍼센트(%)로 조절할 때 특히 미묘한 깨짐 현상 발생 가능.
  • 문제 해결법:
    • 브라우저 바꿔서 테스트(크롬, 파이어폭스, 사파리 등).
    • SVG 코드 자체 확인 (width, height, viewBox가 적절한지 점검).
    • 스타일 간섭 요소(외부 CSS) 최소화.
    • 고해상도 모니터 환경에서 테스트 권장.

6. JSON 데이터 내 배열 및 객체 접근법 🔎

  • 복잡한 JSON 오브젝트에서 특정 배열 요소나 코멘트를 키워서 찾아야 하는 경우가 있음.
  • REST API에서 URL 경로로 직접 배열 내 특정 요소를 조회하는 것은 기본적으로 지원하지 않음.
  • 해결법:
    • 서버(api) 레벨에서 필터링 및 조회 기능 구현 필요.
    • 클라이언트 쪽에서는 전체 데이터를 받고 JavaScript 로직을 활용해 필요한 데이터를 찾음.
  • 예: photo 객체 내 coment 배열 중 특정 id를 가진 코멘트를 찾으려면 Array.find() 같은 JS 메서드를 활용.

7. 한글/영문 폰트 구분 및 CSS 활용법 🅰️

  • 한글과 영문에 각각 다른 폰트를 적용하는 이유는 글자 모양과 가독성 때문.
  • CSS에서 font-family에 두 개 이상의 폰트를 나열할 때
    • Font fallback 기능으로 영문과 한글 모두 지원 가능.
  • 좀 더 세밀한 적용은 unicode-range CSS 규칙을 활용해 특정 유니코드 영역에만 폰트 적용 가능.
  • 실무 팁:
    • 구글 폰트 등에서 한글+영문 지원하는 폰트를 선택하면 편리.
    • 사용자 환경별 폰트 디스플레이 차이 고려.

8. input 태그 자동 포커스 문제 및 모바일 정책 🚫

  • 모바일 브라우저(특히 iOS Safari)에서는 자동으로 input에 포커스를 지정해도
    • 가상 키보드가 자동으로 올라오지 않거나 자동포커스가 제한되는 경우가 많음.
  • 이는 사용자 경험 보호나 보안 정책 때문이며, 개발자가 완전히 제어 불가.
  • autoFocus 속성, ref + focus() 호출 방법을 써도 100% 동작하지 않음.
  • 해결 팁:
    • 사용자가 실제로 인터랙션 한 시점에 강제로 포커스 넣는 방식을 고려.
    • React Hook Form 같은 라이브러리의 유사 기능 참고할 것.
    • UX 차원에서 가상 키보드 자동 등장에 대한 기대 조절 필요.

9. Tailwind CSS @apply 디렉티브와 유지보수 이슈 🌀

  • Tailwind CSS의 @apply는 여러 유틸리티 클래스를 CSS에 묶어 재사용 가능하게 해줌.
  • 공식 가이드에서는 너무 일찍 추상화하거나 무분별하게 사용하지 말 것을 권고함.
  • 이유:
    • 지나친 추상화는 오히려 클래스를 이해하기 어렵게 만들고,
      장기적으로 유지보수 비용이 커질 수 있음.
    • Tailwind의 철학은 유틸리티 클래스를 직접 쓰는 것에 있음.
  • 실무에서는 버튼 등 UI 컴포넌트처럼 명확한 기준이 있을 때만 @apply 활용 권장.
  • 다른 CSS 프레임워크(Bootstrap 등)와 조합 시 제한적인 사용이 바람직.

10. React Suspense와 SSR 환경에서의 활용 ⚛️

  • React Suspense는 비동기 작업(로딩 상태)을 UI에서 자연스럽게 처리할 수 있도록 돕는 기능.
  • 하지만 SSR(Server Side Rendering) 환경에서는 Suspense가 기본적으로 작동하지 않음.
  • Suspense를 SSR에서 사용하려면 아래와 같은 작업 필요:
    • 스트리밍 렌더링(Stream Rendering) 지원.
    • 클라이언트에서 Suspense가 동작하도록 분리.
  • React Query 등 상태관리 라이브러리와 조합 시 대안 없이
    isLoading 상태를 직접 처리하는 방법이 다수 사용됨.
  • 참고: Suspense 상태 관리가 필요한 컴포넌트는 기본적으로 CSR(Client Side Rendering)에 맡기는 것이 무난.

면접팁⚡

  • OAuth 2.0 로그인 절차에 대해 명확히 설명할 수 있어야 함.
    프론트엔드 → 구글 → 백엔드 → 토큰 발급 절차와 리다이렉트 URI의 역할 강조.

  • React 컴포넌트 설계 시 HTML 태그와 커스텀 컴포넌트를 구분하는 이유, 유지보수 관점 설명 가능할 것.

  • Tailwind CSS에서 @apply 사용 시 장단점과 공식 권고사항 설명 가능해야 함.

  • 브라우저별 SVG 렌더링 차이 및 벡터 파일 문제 발생 원인과 해결 방법에 대해 알고 있으면 좋음.

  • 모바일 input 자동포커스 제한 정책 인지와 대응책에 대해 숙지.

링크🔗

#OAuth2#구글로그인#리액트#타이포그래피#SVG#TailwindCSS#ReactSuspense#개발시간관리#웹개발팁#프론트엔드
이전 포스트

2024-10-06

2024년 10월 6일
다음 포스트

2024-10-08

2024년 10월 8일